[bugfix] Block shortcuts when buttons are disabled

Author: g3force

src/components/control/ControlGeneral.vue

@@ -3,6 +3,7 @@
         <span v-b-tooltip.hover
               :title="'Immediately stop all robots (' + Object.keys(keymapHalt)[0] + ')'">
             <b-button v-hotkey="keymapHalt"
+                      ref="btnHalt"
                       v-on:click="send('halt')"
                       v-bind:disabled="halted">
                 Halt
@@ -11,6 +12,7 @@
         <span v-b-tooltip.hover
               :title="'Robots have to keep distance to the ball (' + Object.keys(keymapStop)[0] + ')'">
             <b-button v-hotkey="keymapStop"
+                      ref="btnStop"
                       v-on:click="send('stop')"
                       v-bind:disabled="stopped || !stopAllowed">
                 Stop
@@ -19,6 +21,7 @@
         <span v-b-tooltip.hover
               :title="'Restart the game in draw situations (' + Object.keys(keymapForceStart)[0] + ')'">
             <b-button v-hotkey="keymapForceStart"
+                      ref="btnForceStart"
                       v-on:click="send('forceStart')"
                       v-bind:disabled="!stopped || !forceStartAllowed">
                 Force Start
@@ -27,6 +30,7 @@
         <span v-b-tooltip.hover
               :title="'Continue game after a prepare state (' + Object.keys(keymapNormalStart)[0] + ')'">
             <b-button v-hotkey="keymapNormalStart"
+                      ref="btnNormalStart"
                       v-on:click="send('normalStart')"
                       v-bind:disabled="!prepareSth || !normalStartAllowed">
                 Normal Start
@@ -35,6 +39,7 @@
         <span v-b-tooltip.hover
               :title="'Continue based on last game event (' + Object.keys(keymapContinue)[0] + ')'">
             <b-button v-hotkey="keymapContinue"
+                      ref="btnContinue"
                       v-on:click="triggerContinue"
                       v-bind:disabled="!gameEventPresent">
                 Continue
@@ -58,19 +63,49 @@
         },
         computed: {
             keymapHalt() {
-                return {'numpad .': () => this.send('halt')}
+                return {
+                    'esc': () => {
+                        if (!this.$refs.btnHalt.disabled) {
+                            this.send('halt')
+                        }
+                    }
+                }
             },
             keymapStop() {
-                return {'numpad 0': () => this.send('stop')}
+                return {
+                    'numpad 0': () => {
+                        if (!this.$refs.btnStop.disabled) {
+                            this.send('stop')
+                        }
+                    }
+                }
             },
             keymapForceStart() {
-                return {'numpad 5': () => this.send('forceStart')}
+                return {
+                    'numpad 5': () => {
+                        if (!this.$refs.btnForceStart.disabled) {
+                            this.send('forceStart')
+                        }
+                    }
+                }
             },
             keymapNormalStart() {
-                return {'numpad -': () => this.send('normalStart')}
+                return {
+                    'numpad -': () => {
+                        if (!this.$refs.btnNormalStart.disabled) {
+                            this.send('normalStart')
+                        }
+                    }
+                }
             },
             keymapContinue() {
-                return {'numpad +': () => this.triggerContinue()}
+                return {
+                    'numpad +': () => {
+                        if (!this.$refs.btnContinue.disabled) {
+                            this.triggerContinue()
+                        }
+                    }
+                }
             },
             state() {
                 return this.$store.state.refBoxState

src/components/control/ControlTeam.vue

@@ -3,30 +3,33 @@
         <span v-b-tooltip.hover
               :title="'Prepare for a kickoff (' + Object.keys(keymapKickoff)[0] + ')'">
         <b-button v-hotkey="keymapKickoff"
-                  v-on:click="send('kickoff')"
+                  ref="btnKickoff"
+                  v-on:click="sendKickoff"
                   v-bind:disabled="halted || running || preparing">
             Kickoff
         </b-button>
         </span>
         <span v-b-tooltip.hover
               :title="'Perform direct kick (corner and goal kicks) (' + Object.keys(keymapDirect)[0] + ')'">
         <b-button v-hotkey="keymapDirect"
-                  v-on:click="send('direct')"
+                  ref="btnDirect"
+                  v-on:click="sendDirect"
                   v-bind:disabled="halted || running || preparing || !nonPausedStage">
             Direct
         </b-button>
         </span>
         <span v-b-tooltip.hover
               :title="'Perform indirect kick (throw-in) (' + Object.keys(keymapIndirect)[0] + ')'">
         <b-button v-hotkey="keymapIndirect"
-                  v-on:click="send('indirect')"
+                  ref="btnIndirect"
+                  v-on:click="sendIndirect"
                   v-bind:disabled="halted || running || preparing || !nonPausedStage">
             Indirect
         </b-button>
         </span>
         <span v-b-tooltip.hover
               title="Prepare for a penalty kick">
-        <b-button v-on:click="send('penalty')"
+        <b-button v-on:click="sendPenalty"
                   v-bind:disabled="halted || running || preparing || !nonPausedStage">
             Penalty
         </b-button>
@@ -38,8 +41,7 @@
         <b-button v-on:click="addGoal">
             Goal
         </b-button>
-        <b-button v-on:click="addYellowCard"
-                  v-hotkey="keymapYellowCard">
+        <b-button v-on:click="addYellowCard">
             Yellow Card
         </b-button>
 
@@ -77,38 +79,48 @@
             addGoal: function () {
                 this.$socket.sendObj({'modify': {'forTeam': this.teamColor, 'goals': this.teamState.goals + 1}})
             },
+            sendKickoff() {
+                if (!this.$refs.btnKickoff.disabled) {
+                    this.send('kickoff')
+                }
+            },
+            sendDirect() {
+                if (!this.$refs.btnDirect.disabled) {
+                    this.send('direct')
+                }
+            },
+            sendIndirect() {
+                if (!this.$refs.btnIndirect.disabled) {
+                    this.send('indirect')
+                }
+            },
+            sendPenalty() {
+                this.send('penalty')
+            },
         },
         computed: {
             teamState: function () {
                 return this.$store.state.refBoxState.teamState[this.teamColor]
             },
             keymapKickoff() {
                 if (this.teamColor === 'Yellow') {
-                    return {'numpad 1': () => this.send('kickoff')};
+                    return {'numpad 1': this.sendKickoff};
                 } else if (this.teamColor === 'Blue') {
-                    return {'numpad 3': () => this.send('kickoff')};
+                    return {'numpad 3': this.sendKickoff};
                 }
             },
             keymapDirect() {
                 if (this.teamColor === 'Yellow') {
-                    return {'numpad 7': () => this.send('direct')};
+                    return {'numpad 7': this.sendDirect};
                 } else if (this.teamColor === 'Blue') {
-                    return {'numpad 9': () => this.send('direct')};
+                    return {'numpad 9': this.sendDirect};
                 }
             },
             keymapIndirect() {
                 if (this.teamColor === 'Yellow') {
-                    return {'numpad 4': () => this.send('indirect')};
+                    return {'numpad 4': this.sendIndirect};
                 } else if (this.teamColor === 'Blue') {
-                    return {'numpad 6': () => this.send('indirect')};
-                }
-            },
-            keymapYellowCard() {
-                switch (this.teamColor) {
-                    case 'Yellow':
-                        return {'numpad 4': this.addYellowCard};
-                    case 'Blue':
-                        return {'numpad 6': this.addYellowCard};
+                    return {'numpad 6': this.sendIndirect};
                 }
             },
             state() {