Start button switch added

For player 1 the start button is enabled by default,
for others is disabled by default. This is because
almost all iterations with the Start button happens
with player 1.

* Unit tests updated
* Direction component using icon

Fixed #39.

Author: atilacamurca

src/components/DirectionalPadWrapper.js

@@ -5,7 +5,10 @@ export default {
     computed: {
         ...mapGetters([
             'laf'
-        ])
+        ]),
+        startEnable () {
+            return this.$store.state.pad.startEnable
+        }
     },
     methods: {
         touchstart (command) {
@@ -28,6 +31,7 @@ export default {
         }
     },
     mounted () {
+        // TODO: use $store.state.pad.type instead of hardcoded value!
         this.$store.commit('updatePadType', 'directional')
     }
 }

src/components/RacePadWrapper.js

@@ -13,7 +13,8 @@ export default {
                 left: false,
                 right: false,
                 up: false,
-                down: false
+                down: false,
+                start: false
             },
             lastCommandSent: null,
             interval: null
@@ -23,6 +24,7 @@ export default {
         if (window.DeviceMotionEvent !== undefined) {
             window.addEventListener('devicemotion', this.onDeviceMotion, true)
         }
+        // TODO: use $store.state.pad.type instead of hardcoded value!
         this.$store.commit('updatePadType', 'race')
         // Setup a 60fps interval - 15
         this.interval = setInterval(() => {

src/components/mqtt_wrapper.js

@@ -13,6 +13,10 @@ export default {
         const { hostname, port } = this.$store.state.mqtt
         const url = `ws://${hostname}:${port}`
         const player = this.$store.state.player
+        if (!player) {
+            this.$router.push({ path: '/config' })
+            return false
+        }
         const options = {
             username: player,
             password: player

src/components/pad/Buttons.vue

@@ -3,7 +3,10 @@
         :class="{'is-turning': turning}"
         :style="{'background-color': bgColor, color: fgColor}">
         <div v-once>
-            {{ val }}
+            <span class="icon is-medium">
+                <i class="fa"
+                    :class="[icon]"></i>
+            </span>
         </div>
     </div>
 </template>
@@ -33,12 +36,12 @@ export default {
             switch (this.position) {
             case 'left':
                 values = {
-                    val: 'L'
+                    icon: 'fa-caret-left'
                 }
                 break
             case 'right':
                 values = {
-                    val: 'R'
+                    icon: 'fa-caret-right'
                 }
                 break
             }
@@ -62,7 +65,6 @@ export default {
 
 .pad-container__arrows > div {
     align-self: center;
-    font-size: 22px;
 }
 
 .is-turning {

src/components/pad/Direction.vue

@@ -91,7 +91,7 @@ export default {
 .xs {
     width: 60px;
     height: 60px;
-    font-size: 16px;
+    font-size: 14px;
     margin-top: 5px;
 }
 </style>

src/components/pad/PadButton.vue

@@ -7,7 +7,16 @@
                 :fgColor="laf.btnB.fgColor"
                 :touchstart="touchstart"
                 :touchend="touchend"></PadButton>
-            <slot name="options"></slot>
+            <div class="row-1-2">
+                <slot name="options"></slot>
+                <PadButton :keyb="laf.btnStart.keyb" size="xs"
+                    :label="laf.btnStart.label"
+                    :bgColor="laf.btnStart.bgColor"
+                    :fgColor="laf.btnStart.fgColor"
+                    :touchstart="touchstart"
+                    :touchend="touchend"
+                    v-show="startEnable"></PadButton>
+            </div>
             <PadButton keyb="X" size="sm"
                 :label="laf.btnX.label"
                 :bgColor="laf.btnX.bgColor"
@@ -97,4 +106,10 @@ export default {
     height: 50vh;
     margin: auto 20px;
 }
+.row-1-2 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+}
 </style>

src/layouts/directional/Default.vue

@@ -1,6 +1,14 @@
 <template lang="html">
     <div class="pad-container">
         <div class="row-1">
+            <PadButton :keyb="laf.btnStart.keyb" size="xs"
+                :label="laf.btnStart.label"
+                :icon="laf.btnStart.icon || ''"
+                :bgColor="laf.btnStart.bgColor"
+                :fgColor="laf.btnStart.fgColor"
+                :touchstart="touchstart"
+                :touchend="touchend"
+                v-show="startEnable"></PadButton>
             <slot name="options"></slot>
             <PadButton :keyb="laf[keyset[1]].keyb" size="sm"
                 :label="laf[keyset[1]].label"

src/layouts/directional/DirectionalAndTwoButtons.vue

@@ -19,6 +19,15 @@
                 </header>
                 <section class="modal-card-body">
                     <div class="content">
+                        <div class="field">
+                            <p class="control">
+                                <label class="checkbox">
+                                    <input type="checkbox"
+                                        v-model="startEnable">
+                                    Toggle Start button
+                                </label>
+                            </p>
+                        </div>
                         <label class="label">Select Layout</label>
                         <p class="control players-list">
                             <layout-selector-item v-for="(value, key) in layouts"
@@ -78,7 +87,15 @@ export default {
     computed: {
         ...mapGetters([
             'layouts'
-        ])
+        ]),
+        startEnable: {
+            get () {
+                return this.$store.state.pad.startEnable
+            },
+            set (value) {
+                this.$store.commit('toggleStart', value)
+            }
+        }
     }
 }
 </script>

src/layouts/directional/ModalLayoutSelector.vue

@@ -1,6 +1,14 @@
 <template lang="html">
     <div class="pad-container">
         <div class="row-1">
+            <PadButton :keyb="laf.btnStart.keyb" size="xs"
+                :label="laf.btnStart.label"
+                :icon="laf.btnStart.icon || ''"
+                :bgColor="laf.btnStart.bgColor"
+                :fgColor="laf.btnStart.fgColor"
+                :touchstart="touchstart"
+                :touchend="touchend"
+                v-show="startEnable"></PadButton>
             <slot name="options"></slot>
         </div>
         <div class="row-1">

src/layouts/directional/ThreeButtons.vue

@@ -1,6 +1,14 @@
 <template lang="html">
     <div class="pad-container">
         <div class="row-1">
+            <PadButton :keyb="laf.btnStart.keyb" size="xs"
+                :label="laf.btnStart.label"
+                :icon="laf.btnStart.icon || ''"
+                :bgColor="laf.btnStart.bgColor"
+                :fgColor="laf.btnStart.fgColor"
+                :touchstart="touchstart"
+                :touchend="touchend"
+                v-show="startEnable"></PadButton>
             <slot name="options"></slot>
         </div>
         <div class="row-1">
@@ -70,7 +78,7 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 10px 24px;
+    padding: 20px 24px;
 }
 .bottom {
     display: flex;

src/layouts/directional/TwoButtons.vue

@@ -11,7 +11,8 @@ export default {
                 left: false,
                 right: false,
                 up: false,
-                down: false
+                down: false,
+                start: false
             },
             lastCommandSent: null,
             interval: null

src/mixins/mqtt_sender_wrapper.js

@@ -100,10 +100,11 @@ export default {
             },
             pad: {
                 type: '',
-                enabled: false
+                enabled: false,
+                startEnable: false
             },
             player: '',
-            accelerationSensibility: 4,
+            accelerationSensibility: 4.5,
             accelerationRange: {
                 min: 3,
                 max: 6,
@@ -143,6 +144,7 @@ export default {
     },
     methods: {
         save () {
+            this.pad.startEnable = (this.player === 'alice')
             this.$store.commit('config', {
                 mqtt: this.mqtt,
                 pad: this.pad,