Merge pull request #32 from comsolid/issue-29

Directional pad with dynamic components
comsolid · Apr 3, 2017 · c505091 · c505091
2 parents 0247bee + 30bf1b7
commit c505091
Show file tree

Hide file tree

Showing 39 changed files with 1,102 additions and 339 deletions.
diff --git a/custom-fonts/icomoon/demo-files/demo.css b/custom-fonts/icomoon/demo-files/demo.css
@@ -147,6 +147,9 @@ p {
   font-size: 16px;
 }
 .fs1 {
+  font-size: 24px;
+}
+.fs2 {
   font-size: 28px;
 }
 
diff --git a/custom-fonts/icomoon/demo.html b/custom-fonts/icomoon/demo.html
@@ -9,11 +9,46 @@
     <link rel="stylesheet" href="style.css"></head>
 <body>
     <div class="bgc1 clearfix">
-        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;6)</small></h1>
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;8)</small></h1>
     </div>
     <div class="clearfix mhl ptl">
-        <h1 class="mvm mtn fgc1">Grid Size: 14</h1>
+        <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
         <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="fa-directional">
+
+                </span>
+                <span class="mls"> fa-directional</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e901" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe901;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+    </div>
+    <div class="clearfix mhl ptl">
+        <h1 class="mvm mtn fgc1">Grid Size: 14</h1>
+        <div class="glyph fs2">
+            <div class="clearfix bshadow0 pbs">
+                <span class="fa-gamepad">
+
+                </span>
+                <span class="mls"> fa-gamepad</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e900" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe900;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="fa-caret-down">
 
@@ -29,7 +64,7 @@ <h1 class="mvm mtn fgc1">Grid Size: 14</h1>
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="fa-caret-up">
 
@@ -45,7 +80,7 @@ <h1 class="mvm mtn fgc1">Grid Size: 14</h1>
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="fa-caret-left">
 
@@ -61,7 +96,7 @@ <h1 class="mvm mtn fgc1">Grid Size: 14</h1>
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="fa-caret-right">
 
@@ -77,7 +112,7 @@ <h1 class="mvm mtn fgc1">Grid Size: 14</h1>
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="fa-cog">
 
@@ -93,7 +128,7 @@ <h1 class="mvm mtn fgc1">Grid Size: 14</h1>
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs1">
+        <div class="glyph fs2">
             <div class="clearfix bshadow0 pbs">
                 <span class="fa-expand">
 

diff --git a/custom-fonts/icomoon/fonts/icomoon.eot b/custom-fonts/icomoon/fonts/icomoon.eot
diff --git a/custom-fonts/icomoon/fonts/icomoon.svg b/custom-fonts/icomoon/fonts/icomoon.svg
diff --git a/custom-fonts/icomoon/fonts/icomoon.ttf b/custom-fonts/icomoon/fonts/icomoon.ttf
diff --git a/custom-fonts/icomoon/fonts/icomoon.woff b/custom-fonts/icomoon/fonts/icomoon.woff
diff --git a/custom-fonts/icomoon/selection.json b/custom-fonts/icomoon/selection.json
@@ -1,6 +1,65 @@
 {
   "IcoMoonType": "selection",
   "icons": [
+    {
+      "icon": {
+        "paths": [
+          "M704 384h234v256h-234l-128-128zM384 704l128-128 128 128v234h-256v-234zM320 384l128 128-128 128h-234v-256h234zM640 320l-128 128-128-128v-234h256v234z"
+        ],
+        "attrs": [
+          {}
+        ],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "games"
+        ],
+        "grid": 24
+      },
+      "attrs": [
+        {}
+      ],
+      "properties": {
+        "order": 1,
+        "id": 0,
+        "name": "directional",
+        "prevSize": 24,
+        "code": 59649
+      },
+      "setIdx": 0,
+      "setId": 3,
+      "iconIdx": 0
+    },
+    {
+      "icon": {
+        "paths": [
+          "M475.429 621.714v-73.143c0-10.286-8-18.286-18.286-18.286h-109.714v-109.714c0-10.286-8-18.286-18.286-18.286h-73.143c-10.286 0-18.286 8-18.286 18.286v109.714h-109.714c-10.286 0-18.286 8-18.286 18.286v73.143c0 10.286 8 18.286 18.286 18.286h109.714v109.714c0 10.286 8 18.286 18.286 18.286h73.143c10.286 0 18.286-8 18.286-18.286v-109.714h109.714c10.286 0 18.286-8 18.286-18.286zM804.571 658.286c0-40.571-32.571-73.143-73.143-73.143s-73.143 32.571-73.143 73.143 32.571 73.143 73.143 73.143 73.143-32.571 73.143-73.143zM950.857 512c0-40.571-32.571-73.143-73.143-73.143s-73.143 32.571-73.143 73.143 32.571 73.143 73.143 73.143 73.143-32.571 73.143-73.143zM1097.143 585.143c0 161.714-130.857 292.571-292.571 292.571-74.286 0-141.714-28-193.143-73.143h-125.714c-51.429 45.143-118.857 73.143-193.143 73.143-161.714 0-292.571-130.857-292.571-292.571s130.857-292.571 292.571-292.571h512c161.714 0 292.571 130.857 292.571 292.571z"
+        ],
+        "attrs": [
+          {}
+        ],
+        "width": 1097,
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "gamepad"
+        ],
+        "grid": 14
+      },
+      "attrs": [
+        {}
+      ],
+      "properties": {
+        "order": 1,
+        "id": 0,
+        "name": "gamepad",
+        "prevSize": 28,
+        "code": 59648
+      },
+      "setIdx": 1,
+      "setId": 2,
+      "iconIdx": 0
+    },
     {
       "icon": {
         "paths": [
@@ -24,8 +83,8 @@
         "code": 61655,
         "name": "caret-down"
       },
-      "setIdx": 0,
-      "setId": 4,
+      "setIdx": 2,
+      "setId": 1,
       "iconIdx": 0
     },
     {
@@ -51,8 +110,8 @@
         "code": 61656,
         "name": "caret-up"
       },
-      "setIdx": 0,
-      "setId": 4,
+      "setIdx": 2,
+      "setId": 1,
       "iconIdx": 1
     },
     {
@@ -78,8 +137,8 @@
         "code": 61657,
         "name": "caret-left"
       },
-      "setIdx": 0,
-      "setId": 4,
+      "setIdx": 2,
+      "setId": 1,
       "iconIdx": 2
     },
     {
@@ -105,8 +164,8 @@
         "code": 61658,
         "name": "caret-right"
       },
-      "setIdx": 0,
-      "setId": 4,
+      "setIdx": 2,
+      "setId": 1,
       "iconIdx": 3
     },
     {
@@ -132,9 +191,9 @@
         "code": 61459,
         "name": "cog"
       },
-      "setIdx": 1,
-      "setId": 3,
-      "iconIdx": 18
+      "setIdx": 2,
+      "setId": 1,
+      "iconIdx": 4
     },
     {
       "icon": {
@@ -158,9 +217,9 @@
         "code": 61541,
         "name": "expand"
       },
-      "setIdx": 1,
-      "setId": 3,
-      "iconIdx": 95
+      "setIdx": 2,
+      "setId": 1,
+      "iconIdx": 5
     }
   ],
   "height": 1024,

diff --git a/custom-fonts/icomoon/style.css b/custom-fonts/icomoon/style.css
@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?i94kbs');
-  src:  url('fonts/icomoon.eot?i94kbs#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?i94kbs') format('truetype'),
-    url('fonts/icomoon.woff?i94kbs') format('woff'),
-    url('fonts/icomoon.svg?i94kbs#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?yfuwoz');
+  src:  url('fonts/icomoon.eot?yfuwoz#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?yfuwoz') format('truetype'),
+    url('fonts/icomoon.woff?yfuwoz') format('woff'),
+    url('fonts/icomoon.svg?yfuwoz#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -24,6 +24,12 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.fa-directional:before {
+  content: "\e901";
+}
+.fa-gamepad:before {
+  content: "\e900";
+}
 .fa-caret-down:before {
   content: "\f0d7";
 }

diff --git a/package.json b/package.json
@@ -14,12 +14,12 @@
   },
   "dependencies": {
     "animate.css": "^3.5.2",
-    "bulma": "^0.3.1",
+    "bulma": "^0.4.0",
     "compression": "^1.6.2",
     "connect-history-api-fallback": "^1.1.0",
     "express": "^4.14.0",
     "mqtt": "^2.1.3",
-    "vue": "^2.1.0",
+    "vue": "^2.2.6",
     "vue-router": "^2.1.1",
     "vue-touch": "next",
     "vuex": "^2.1.1",
@@ -78,9 +78,9 @@
     "sinon": "^1.17.3",
     "sinon-chai": "^2.8.0",
     "url-loader": "^0.5.7",
-    "vue-loader": "^10.0.0",
-    "vue-style-loader": "^1.0.0",
-    "vue-template-compiler": "^2.1.0",
+    "vue-loader": "^11.3.4",
+    "vue-style-loader": "^2.0.5",
+    "vue-template-compiler": "^2.2.6",
     "webpack": "^1.13.2",
     "webpack-dev-middleware": "^1.8.3",
     "webpack-hot-middleware": "^2.12.2",

diff --git a/src/assets/custom-fonts/fonts/icomoon.eot b/src/assets/custom-fonts/fonts/icomoon.eot
diff --git a/src/assets/custom-fonts/fonts/icomoon.svg b/src/assets/custom-fonts/fonts/icomoon.svg
diff --git a/src/assets/custom-fonts/fonts/icomoon.ttf b/src/assets/custom-fonts/fonts/icomoon.ttf
diff --git a/src/assets/custom-fonts/fonts/icomoon.woff b/src/assets/custom-fonts/fonts/icomoon.woff
diff --git a/src/assets/custom-fonts/style.css b/src/assets/custom-fonts/style.css
@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?i94kbs');
-  src:  url('fonts/icomoon.eot?i94kbs#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?i94kbs') format('truetype'),
-    url('fonts/icomoon.woff?i94kbs') format('woff'),
-    url('fonts/icomoon.svg?i94kbs#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?yfuwoz');
+  src:  url('fonts/icomoon.eot?yfuwoz#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?yfuwoz') format('truetype'),
+    url('fonts/icomoon.woff?yfuwoz') format('woff'),
+    url('fonts/icomoon.svg?yfuwoz#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -24,6 +24,12 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.fa-directional:before {
+  content: "\e901";
+}
+.fa-gamepad:before {
+  content: "\e900";
+}
 .fa-caret-down:before {
   content: "\f0d7";
 }
@@ -42,20 +48,4 @@
 .fa-expand:before {
   content: "\f065";
 }
-.fa-lg {
-  font-size: 1.33333333em;
-  line-height: 0.75em;
-  vertical-align: -15%;
-}
-.fa-2x {
-  font-size: 2em;
-}
-.fa-3x {
-  font-size: 3em;
-}
-.fa-4x {
-  font-size: 4em;
-}
-.fa-5x {
-  font-size: 5em;
-}
+
diff --git a/src/components/ConnectedIndicator.vue b/src/components/ConnectedIndicator.vue
@@ -1,6 +1,6 @@
 <template lang="html">
     <span class="tag is-medium"
-        :class="color">{{ text }} - {{ currentPlayer }}</span>
+        :class="color">{{ text }} - {{ player }}</span>
 </template>
 
 <script>
@@ -19,7 +19,7 @@ export default {
         color () {
             return (this.isConnected ? 'is-success' : 'is-danger')
         },
-        currentPlayer () {
+        player () {
             return this.$store.state.player
         }
     }