Remove buttons when game is finished

MrTimeey · Feb 21, 2021 · 59380fe · 59380fe
1 parent 7ee19c8
commit 59380fe
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/src/components/SudokuGrid.vue b/src/components/SudokuGrid.vue
@@ -7,7 +7,7 @@
                  v-model="cell.num"
                  class="grid-cell-editor"
                  :class="cell.given? 'given-cell': 'empty-cell'"
-                 :disabled="cell.given"
+                 :disabled="cell.given || finished"
                  @click="hint(cell, rowIndex, cellIndex)"
                  type="number"/>
         </div>
@@ -25,7 +25,10 @@ export default {
     sudokuMatrix: Array
   },
   computed: {
-    ...mapGetters({cellSolution: 'game/cellSolution'})
+    ...mapGetters({cellSolution: 'game/cellSolution'}),
+    finished() {
+      return this.$store.getters['life/isGameOver'] || this.$store.state.game.gameFinished;
+    }
   },
   methods: {
     hint(cell, rowIndex, cellIndex) {

diff --git a/src/views/GamePage.vue b/src/views/GamePage.vue
@@ -2,19 +2,19 @@
   <div class="game-container">
     <b-button class="b-btn"
               @click="verifyGame"
-              v-if="!this.$store.getters['life/isGameOver'] && !this.$store.state.game.gameFinished">
+              v-if="!finished">
       Verify
     </b-button>
     <b-button class="b-btn"
               @click="solveGame"
-              v-if="this.$store.getters['life/isGameOver'] || this.$store.state.game.gameFinished">
+              v-if="finished">
       Resolve
     </b-button>
     <life-display/>
     <sudoku-grid class="sudoku-grid" :sudoku-matrix="this.$store.state.game.currentGame"/>
     <b-button class="b-btn" @click="cancelGame">New</b-button>
-    <b-button class="b-btn" @click="$store.commit('game/clearUserInput')">Clear</b-button>
-    <hint-display class="hint"/>
+    <b-button class="b-btn" @click="$store.commit('game/clearUserInput')" v-if="!this.finished">Clear</b-button>
+    <hint-display class="hint" v-if="!this.finished"/>
 
   </div>
 </template>
@@ -28,6 +28,11 @@ import HintDisplay from "@/components/HintDisplay";
 export default {
   name: "GamePage",
   components: {HintDisplay, LifeDisplay, BButton, SudokuGrid},
+  computed: {
+    finished() {
+      return this.$store.getters['life/isGameOver'] || this.$store.state.game.gameFinished;
+    }
+  },
   methods: {
     cancelGame() {
       this.$router.push({name: 'StartPage'})