[feature] Update disable states of buttons

Author: g3force

src/components/GameState.vue

@@ -9,6 +9,10 @@
             {{state.stage}}
         </span>
         |
+        <span v-b-tooltip.hover title="Current command">
+            {{state.command}} <span v-if="state.commandForTeam !== ''">for {{state.commandForTeam}}</span>
+        </span>
+        |
         <span v-format-ns-duration="state.stageTimeElapsed"
               v-b-tooltip.hover
               title="Total time elapsed in the current stage">
@@ -23,10 +27,6 @@
               v-b-tooltip.hover
               title="Total real time elapsed since the match has been started">
         </span>
-        |
-        <span v-b-tooltip.hover title="Current command">
-            {{state.command}} <span v-if="state.commandForTeam !== ''">for {{state.commandForTeam}}</span>
-        </span>
     </div>
 </template>
 

src/components/control/ControlGeneral.vue

@@ -12,23 +12,23 @@
               :title="'Robots have to keep distance to the ball (' + Object.keys(keymapStop)[0] + ')'">
             <b-button v-hotkey="keymapStop"
                       v-on:click="send('stop')"
-                      v-bind:disabled="stopped || !inNormalHalf">
+                      v-bind:disabled="stopped || !stopAllowed">
                 Stop
             </b-button>
         </span>
         <span v-b-tooltip.hover
               :title="'Restart the game in draw situations (' + Object.keys(keymapForceStart)[0] + ')'">
             <b-button v-hotkey="keymapForceStart"
                       v-on:click="send('forceStart')"
-                      v-bind:disabled="!stopped || !inNormalHalf">
+                      v-bind:disabled="!stopped || !forceStartAllowed">
                 Force Start
             </b-button>
         </span>
         <span v-b-tooltip.hover
               :title="'Continue game after a prepare state (' + Object.keys(keymapNormalStart)[0] + ')'">
             <b-button v-hotkey="keymapNormalStart"
                       v-on:click="send('normalStart')"
-                      v-bind:disabled="!prepareSth || !inNormalHalf">
+                      v-bind:disabled="!prepareSth || !normalStartAllowed">
                 Normal Start
             </b-button>
         </span>
@@ -44,7 +44,7 @@
 </template>
 
 <script>
-    import {isInNormalHalf} from "../../main";
+    import {isNonPausedStage, isPreStage} from "../../refereeState";
 
     export default {
         name: "ControlGeneral",
@@ -84,8 +84,15 @@
             prepareSth() {
                 return this.state.command === 'kickoff' || this.state.command === 'penalty';
             },
-            inNormalHalf() {
-                return isInNormalHalf(this.state);
+            forceStartAllowed() {
+                return isNonPausedStage(this.state);
+            },
+            normalStartAllowed() {
+                return isNonPausedStage(this.state) || this.state.command === 'kickoff';
+            },
+            stopAllowed() {
+                return isNonPausedStage(this.$store.state.refBoxState)
+                    || isPreStage(this.$store.state.refBoxState);
             },
             gameEventPresent() {
                 return this.state.gameEvent !== 'none';

src/components/control/ControlMatch.vue

@@ -21,12 +21,12 @@
         </b-button>
         <b-button v-b-tooltip.hover title="Change back to the previous stage (if something went wrong)"
                   v-on:click="previousStage"
-                  :disabled="forbidMatchControls">
+                  :disabled="forbidMatchControls || noPreviousStage">
             Previous Stage
         </b-button>
         <b-button v-b-tooltip.hover title="Proceed to the next stage"
                   v-on:click="nextStage"
-                  :disabled="forbidMatchControls">
+                  :disabled="forbidMatchControls || noNextStage">
             Next Stage
         </b-button>
     </div>
@@ -79,6 +79,12 @@
             },
             forbidMatchControls() {
                 return !this.stopped && !this.halted;
+            },
+            noPreviousStage() {
+                return this.state.stage === 'Pre-First Half';
+            },
+            noNextStage() {
+                return this.state.stage === 'End of Game';
             }
         }
     }

src/components/control/ControlTeam.vue

@@ -12,22 +12,22 @@
               :title="'Perform direct kick (corner and goal kicks) (' + Object.keys(keymapDirect)[0] + ')'">
         <b-button v-hotkey="keymapDirect"
                   v-on:click="send('direct')"
-                  v-bind:disabled="halted || running || preparing">
+                  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')"
-                  v-bind:disabled="halted || running || preparing">
+                  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')"
-                  v-bind:disabled="halted || running || preparing">
+                  v-bind:disabled="halted || running || preparing || !nonPausedStage">
             Penalty
         </b-button>
         </span>
@@ -54,6 +54,7 @@
 
 <script>
     import ControlTeamTimeout from "./ControlTeamTimeout";
+    import {isNonPausedStage} from "../../refereeState";
 
     export default {
         name: "ControlTeam",
@@ -125,6 +126,9 @@
             preparing() {
                 return this.state.command === 'kickoff' || this.state.command === 'penalty';
             },
+            nonPausedStage() {
+                return isNonPausedStage(this.state);
+            },
         }
     }
 </script>

src/components/control/ControlTeamTimeout.vue

@@ -2,7 +2,7 @@
     <span>
         <b-button v-show="!timeoutRunning"
                   v-on:click="startTimeout"
-                  v-bind:disabled="!inNormalHalf">
+                  v-bind:disabled="disableTimeoutButton">
             Start Timeout
         </b-button>
         <b-button v-show="timeoutRunning"
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-    import {isInNormalHalf} from "../../main";
+    import {isNonPausedStage, isPreStage} from "../../refereeState";
 
     export default {
         name: "ControlTeamTimeout",
@@ -27,8 +27,9 @@
             timeoutRunning: function () {
                 return this.command === "timeout" && this.$store.state.refBoxState.commandForTeam === this.teamColor
             },
-            inNormalHalf() {
-                return isInNormalHalf(this.$store.state.refBoxState);
+            disableTimeoutButton() {
+                return !isNonPausedStage(this.$store.state.refBoxState)
+                    && !isPreStage(this.$store.state.refBoxState);
             },
         },
         methods: {

src/main.js

@@ -27,10 +27,6 @@ library.add(faCaretSquareDown);
 library.add(faCaretSquareUp);
 Vue.component('font-awesome-icon', FontAwesomeIcon);
 
-export let isInNormalHalf = function (state) {
-    return state.stage === 'First Half';
-};
-
 let wsAddress;
 if (process.env.NODE_ENV === 'development') {
     // use the default backend port

src/refereeState.js

@@ -0,0 +1,15 @@
+export let isNonPausedStage = function (state) {
+    return state.stage === 'First Half'
+        || state.stage === 'Second Half'
+        || state.stage === 'Overtime First Half'
+        || state.stage === 'Overtime Second Half'
+        || state.stage === 'Shootout';
+};
+
+export let isPreStage = function (state) {
+    return state.stage === 'Pre-First Half'
+        || state.stage === 'Pre-Second Half'
+        || state.stage === 'Pre-Overtime First Half'
+        || state.stage === 'Pre-Overtime Second Half'
+        || state.stage === 'Shootout';
+};