undo and undo for undo

src/components/Board.vue

@@ -34,6 +34,8 @@ export default {
       minesweeperGrid: null,
       numberOfMines: 0,
       item: null,
+      undoStack: [],
+      redoStack: [],
     };
   },
   name: "Board",
@@ -74,11 +76,14 @@ export default {
 this.minesweeperGrid.board.board[row][col] &&
 !this.minesweeperGrid.board.board[row][col].isFlagged
 ) {
+
 this.play = new Play();
 if (!this.minesweeperGrid.board.board[row][col].isMine) {
+  this.undoStack.push(JSON.parse(JSON.stringify(this.minesweeperGrid)));
   this.minesweeperGrid.board.numberToWin = JSON.parse(
             localStorage.getItem("numberToWin")
           );
+  // this.minesweeperGrid.board.numberToWin =this.$store.state.numberToWin;
 if (this.minesweeperGrid.board.numberToWin > 1) {
   this.play.onClick(row, col);
 }else {
@@ -113,6 +118,7 @@ export default {
   localStorage.getItem("minesweeperGrid")
 );
 this.getCellSymbol(row, col);
+this.redoStack = [];
 }
 },
 saver() {
@@ -151,9 +157,57 @@ export default {
   }
   return "#"; // return "#" when minesweeperGrid is null or the cell doesn't exist
 },
+undo() {
+  if (this.undoStack.length > 0) {
+    // Save the current state to the redo stack before undoing the move
+    this.redoStack.push(JSON.parse(JSON.stringify(this.minesweeperGrid)));
+
+    // Undo the move
+    this.minesweeperGrid = this.undoStack.pop();
+    localStorage.setItem(
+        "minesweeperGrid",
+        JSON.stringify(this.minesweeperGrid)
+      );
+      this.$store.state.numberToWin =this.minesweeperGrid.board.numberToWin
+      // localStorage.setItem(
+      //   "numberToWin",
+      //   JSON.stringify(this.minesweeperGrid.board.numberToWin)
+      // );
+  }
+},
+
+    redo() {
+      if (this.redoStack.length > 0) {
+        // save current state to undo stack
+        this.undoStack.push(this.minesweeperGrid);
+
+        // redo the move
+        this.minesweeperGrid = this.redoStack.pop();
+        localStorage.setItem(
+        "minesweeperGrid",
+        JSON.stringify(this.minesweeperGrid)
+      );
+      this.$store.state.numberToWin =this.minesweeperGrid.board.numberToWin
+
+      // localStorage.setItem(
+      //   "numberToWin",
+      //   JSON.stringify(this.minesweeperGrid.board.numberToWin)
+      // );
+      }
+    },
+    keydownHandler(event) {
+      if (event.ctrlKey && event.key === 'z') {
+        this.undo();
+      }
+      if (event.ctrlKey && event.key === 'y') {
+        this.redo();
+      }
+    },
 },
 mounted() {
   this.$nextTick(() => {
+    
+    window.addEventListener('keydown', this.keydownHandler);
     this.localNumberOfRows = this.$store.state.numberOfRows;
     this.localNumberOfCols = this.$store.state.numberOfCols;
     this.numberOfMines = this.$store.state.numberOfMines;
@@ -188,6 +242,9 @@ export default {
       return this.minesweeperGrid;
     });
   },
+  beforeDestroy() {
+    window.removeEventListener('keydown', this.keydownHandler);
+  },
 };
 </script>
 <!-- eslint-disable -->

src/components/Game.js

@@ -1,4 +1,6 @@
 /*eslint-disable*/
+import { state } from "vuex";
+
 // const readline = require("readline");
 // var fs = require("fs");
 // module.exports = {

src/components/LoadGame.vue

@@ -185,6 +185,14 @@ export default {
       this.numberToWin = parseInt(localStorage.getItem("numberToWin"));
     });
   },
+
+//   created() {
+//   window.addEventListener('keydown', this.keydownHandler);
+// },
+// beforeDestroy() {
+//   window.removeEventListener('keydown', this.keydownHandler);
+// },
+
 };
 </script>
 <!-- eslint-disable -->