From 4367b0255f55a18ba3eb662323875939e20dd321 Mon Sep 17 00:00:00 2001
From: yazan matar <yazanMatar>
Date: Sat, 25 May 2024 11:34:10 +0300
Subject: [PATCH] yazanMatar

---
 src/components/Board.vue      | 353 +++++++++++++++++-----------------
 src/components/Game.js        |  33 ++--
 src/components/HelloWorld.vue | 152 +++++++--------
 src/components/LoadGame.vue   | 248 +++++++++++++++---------
 src/store/index.js            |  25 ++-
 5 files changed, 438 insertions(+), 373 deletions(-)

diff --git a/src/components/Board.vue b/src/components/Board.vue
index 12266d8..5e3b368 100644
--- a/src/components/Board.vue
+++ b/src/components/Board.vue
@@ -9,7 +9,7 @@
       <div
         v-for="(col, colIndex) in localNumberOfCols"
         :key="`col-${colIndex}`"
-        class="cell"
+        class="cell no-cursor"
         @click="cellOpener(rowIndex, colIndex)"
         @contextmenu.prevent="isCellFlagged(rowIndex, colIndex)"
         :data-value="getCellSymbol(rowIndex, colIndex)"
@@ -25,6 +25,7 @@
 <script>
 import Swal from "sweetalert2";
 import { Minesweeper, EndGame, Play } from "./Game";
+import store from "@/store"; // adjust the path according to your project structure
 
 export default {
   data: function () {
@@ -39,88 +40,90 @@ export default {
     };
   },
   name: "Board",
-//   props: { numberOfRows: Number, numberOfCols: Number },
-methods: {
-isCellRevealed(row, col) {
-let cell;
-if (
-this.minesweeperGrid &&
-this.minesweeperGrid.board &&
-this.minesweeperGrid.board.board &&
-this.minesweeperGrid.board.board[row] &&
-row < this.localNumberOfRows &&
-col < this.localNumberOfCols
-) {
-cell = this.minesweeperGrid.board.board[row][col];
-if (cell) {
-  return cell.isRevealed;
-}
-}
-return false; // return false when minesweeperGrid is null or the cell doesn't exist
-},
-isCellFlagged(row, col) {
+  methods: {
+    isCellRevealed(row, col) {
+      let cell;
+      if (
+        this.minesweeperGrid &&
+        this.minesweeperGrid.board &&
+        this.minesweeperGrid.board.board &&
+        this.minesweeperGrid.board.board[row] &&
+        row < this.localNumberOfRows &&
+        col < this.localNumberOfCols
+      ) {
+        cell = this.minesweeperGrid.board.board[row][col];
+        if (cell) {
+          return cell.isRevealed;
+        }
+      }
+      return false; // return false when minesweeperGrid is null or the cell doesn't exist
+    },
+    isCellFlagged(row, col) {
+  this.undoStack.push({
+    minesweeperGrid: JSON.parse(JSON.stringify(this.minesweeperGrid)),
+    numberToWin: this.minesweeperGrid.board.numberToWin
+  });
   this.play = new Play();
   this.play.doFlagged(row, col);
-  this.minesweeperGrid = JSON.parse(
-    localStorage.getItem("minesweeperGrid")
-  );
+  store.commit("UPDATE_MINESWEEPER_GRID", this.minesweeperGrid);
   this.getCellSymbol(row, col);
 },
 
-cellOpener(row, col) {
-if (
-this.minesweeperGrid &&
-this.minesweeperGrid.board &&
-this.minesweeperGrid.board.board &&
-this.minesweeperGrid.board.board[row] &&
-this.minesweeperGrid.board.board[row][col] &&
-!this.minesweeperGrid.board.board[row][col].isFlagged
-) {
+    cellOpener(row, col) {
+  if (
+    this.minesweeperGrid &&
+    this.minesweeperGrid.board &&
+    this.minesweeperGrid.board.board &&
+    this.minesweeperGrid.board.board[row] &&
+    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.minesweeperGrid.board.numberToWin = this.$store.state.numberToWin
+      this.undoStack.push({
+        minesweeperGrid: JSON.parse(JSON.stringify(this.minesweeperGrid)),
+        numberToWin: this.minesweeperGrid.board.numberToWin
+      });
+      if (this.minesweeperGrid.board.numberToWin > 0) {
+        console.log(this.minesweeperGrid.board.numberToWin);
+        this.play.onClick(row, col);
+      } else if (!this.minesweeperGrid.board.board[row][col].isRevealed) {
+        Swal.fire({
+          title: "you win",
+          text: "Do you want to continue",
+          icon: "success",
+          showCancelButton: true,
+          confirmButtonText: "replay",
+          cancelButtonText: "Do nothing",
+        }).then((result) => {
+          if (result.isConfirmed) {
+            this.$router.push("/").then(() => window.location.reload());
+          }
+        });
+      }
+    } else {
+      Swal.fire({
+        title: "you lose",
+        text: "Do you want to continue",
+        icon: "error",
+        showCancelButton: true,
+        confirmButtonText: "replay",
+        cancelButtonText: "Do nothing",
+      }).then((result) => {
+        if (result.isConfirmed) {
+          this.$router.push("/").then(() => window.location.reload());
+        }
+      });
+    }
 
-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 {
-Swal.fire({
-  title: "you win",
-  text: "Do you want to continue",
-  icon: "success",
-  showCancelButton: true,
-  confirmButtonText: "replay",
-  cancelButtonText: "Do nothing",
-}).then((result) => {
-  if (result.isConfirmed) {
-    this.$router.push("/")
-    .then(() => window.location.reload())}
-});
-}
-} else {
-  Swal.fire({
-    title: "you lose",
-    text: "Do you want to continue",
-    icon: "error",
-    showCancelButton: true,
-    confirmButtonText: "replay",
-    cancelButtonText: "Do nothing",
-  }).then((result) => {
-    if (result.isConfirmed) {
-        this.$router.push("/")
-        .then(() => window.location.reload())}
-  });
-}
-this.minesweeperGrid = JSON.parse(
-  localStorage.getItem("minesweeperGrid")
-);
-this.getCellSymbol(row, col);
-this.redoStack = [];
-}
+    store.commit("UPDATE_MINESWEEPER_GRID", this.minesweeperGrid);
+
+    this.getCellSymbol(row, col);
+    this.redoStack = [];
+  }
 },
+
 saver() {
   this.$store.dispatch("writeOnFile", {
     name: "yazan",
@@ -128,122 +131,115 @@ saver() {
     rows: this.localNumberOfRows,
     cols: this.localNumberOfCols,
     mines: this.numberOfMines,
-    numberToWin: this.minesweeperGrid.board.numberToWin,
+    numberToWin: this.$store.state.numberToWin,
+    undoStack: this.undoStack,
+    redoStack: this.redoStack
   });
-  // console.log(this.minesweeperGrid.board.numberToWin);
-  //   console.log(this.localNumberOfRows);
-  //   console.log(this.localNumberOfCols);
-  //   console.log(this.numberOfMines);
 },
-getCellSymbol(row, col) {
-  if (
-    this.minesweeperGrid &&
-    this.minesweeperGrid.board &&
-    this.minesweeperGrid.board.board &&
-    this.minesweeperGrid.board.board[row] &&
-    row < this.localNumberOfRows &&
-    col < this.localNumberOfCols
-  ) {
-    let cell = this.minesweeperGrid.board.board[row][col];
-    if (cell) {
-      if (cell.isFlagged) {
-        return "F";
-      } else if (cell.isRevealed === true) {
-        return String(cell.nearbyMines); // Convert to string before returning
-      } else if (!cell.isRevealed) {
-        return "#";
-      }
-    }
-  }
-  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)
-      // );
+
+    getCellSymbol(row, col) {
+      if (
+        this.minesweeperGrid &&
+        this.minesweeperGrid.board &&
+        this.minesweeperGrid.board.board &&
+        this.minesweeperGrid.board.board[row] &&
+        row < this.localNumberOfRows &&
+        col < this.localNumberOfCols
+      ) {
+        let cell = this.minesweeperGrid.board.board[row][col];
+        if (cell) {
+          if (cell.isFlagged) {
+            return "F";
+          } else if (cell.isRevealed === true) {
+            return String(cell.nearbyMines);
+          } else if (!cell.isRevealed) {
+            return "#";
+          }
+        }
       }
+      return "#";
     },
+    undo() {
+  if (this.undoStack.length > 0) {
+    let localNumberToWin = this.$store.state.numberToWin
+    this.redoStack.push({
+      minesweeperGrid: JSON.parse(JSON.stringify(this.minesweeperGrid)),
+      numberToWin: localNumberToWin
+    });
+    let undoState = this.undoStack.pop();
+    this.minesweeperGrid = undoState.minesweeperGrid;
+    store.commit("UPDATE_NUMBER_TO_WIN", undoState.numberToWin);
+    store.commit("UPDATE_MINESWEEPER_GRID", this.minesweeperGrid);
+  }
+},
+
+redo() {
+  if (this.redoStack.length > 0) {
+    this.undoStack.push({
+      minesweeperGrid: JSON.parse(JSON.stringify(this.minesweeperGrid)),
+      numberToWin: this.minesweeperGrid.board.numberToWin
+    });
+    let redoState = this.redoStack.pop();
+    this.minesweeperGrid = redoState.minesweeperGrid;
+    store.commit("UPDATE_NUMBER_TO_WIN", redoState.numberToWin);
+    store.commit("UPDATE_MINESWEEPER_GRID", this.minesweeperGrid);
+  }
+},
     keydownHandler(event) {
-      if (event.ctrlKey && event.key === 'z') {
+      if (event.ctrlKey && event.key === "z") {
         this.undo();
       }
-      if (event.ctrlKey && event.key === 'y') {
+      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;
-    this.localNumberOfRows = parseInt(this.localNumberOfRows);
-    this.localNumberOfCols = parseInt(this.localNumberOfCols);
-    this.numberOfMines = parseInt(this.numberOfMines);
-
-    //   console.log(this.localNumberOfRows,"  row");
-    //   console.log(this.localNumberOfCols,"  col");
-    //   console.log(this.numberOfMines,"  mins");
-
-      // this.minesweeperGrid = JSON.parse(localStorage.getItem("board"));
-      // this.numberToWin = parseInt(localStorage.getItem("numberToWin"));
-
-      //   console.log(typeof(this.minesweeperGrid),"this is a type");
-    //   console.log(this.minesweeperGrid,"this is a type");
-    //   if(typeof(this.minesweeperGrid),"this is "){
+  },
+  computed: {
+    numberToWin() {
+      return this.$store.state.numberToWin;
+    }
+  },
+  watch: {
+    numberToWin(newVal) {
+      if (newVal === 0) {
+        Swal.fire({
+          title: "you win",
+          text: "Do you want to continue",
+          icon: "success",
+          showCancelButton: true,
+          confirmButtonText: "replay",
+          cancelButtonText: "Do nothing",
+        }).then((result) => {
+          if (result.isConfirmed) {
+            this.$router.push("/").then(() => window.location.reload());
+          }
+        });
+      }
+    }
+  },
+  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;
+      this.localNumberOfRows = parseInt(this.localNumberOfRows);
+      this.localNumberOfCols = parseInt(this.localNumberOfCols);
+      this.numberOfMines = parseInt(this.numberOfMines);
       this.minesweeperGrid = new Minesweeper(
-          this.localNumberOfRows,
-          this.localNumberOfCols,
-          this.numberOfMines
-          );   
-        //    }
-      localStorage.setItem(
-        "minesweeperGrid",
-        JSON.stringify(this.minesweeperGrid)
-      );
-      localStorage.setItem(
-      "numberToWin",
-      JSON.stringify(this.minesweeperGrid.board.numberToWin)
+        this.localNumberOfRows,
+        this.localNumberOfCols,
+        this.numberOfMines
       );
+
+      store.commit("UPDATE_NUMBER_TO_WIN", this.minesweeperGrid.board.numberToWin);
+      store.commit("UPDATE_MINESWEEPER_GRID", this.minesweeperGrid);
+
       return this.minesweeperGrid;
     });
   },
   beforeDestroy() {
-    window.removeEventListener('keydown', this.keydownHandler);
+    window.removeEventListener("keydown", this.keydownHandler);
   },
 };
 </script>
@@ -257,6 +253,9 @@ mounted() {
   padding: 20px;
   /* background-color: #f5f5f5; */
 }
+.no-cursor {
+  caret-color: transparent;
+}
 
 .row {
   display: flex;
@@ -291,7 +290,7 @@ mounted() {
   background-color: blue;
 }
 .cell[data-value="1"] {
-    background-color: pink;
+  background-color: pink;
 }
 .cell[data-value="2"] {
   background-color: green;
diff --git a/src/components/Game.js b/src/components/Game.js
index 02ac486..b87d409 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -1,6 +1,6 @@
 /*eslint-disable*/
 import { state } from "vuex";
-
+import store from "@/store"; // adjust the path according to your project structure
 // const readline = require("readline");
 // var fs = require("fs");
 // module.exports = {
@@ -248,28 +248,25 @@ export class Play extends EndGame {
     );
   }
   doFlagged(row, col) {
-    this.board = JSON.parse(localStorage.getItem("minesweeperGrid"));
-    this.numberToWin = JSON.parse(localStorage.getItem("numberToWin"));
+    this.board = store.state.minesweeperGrid;
+    this.numberToWin = store.state.numberToWin;
     if (!this.board.board.board[row][col].isRevealed) {
       if (!this.board.board.board[row][col].isFlagged) {
-        // this.numberOfFlags -= 1;
-        // console.log(1);
         this.board.board.board[row][col].isFlagged = true;
       } else if (this.board.board.board[row][col].isFlagged) {
-        // this.numberOfFlags += 1;
-        // console.log(2);
         this.board.board.board[row][col].isFlagged = false;
       }
-      // console.log("done");
     } else {
       console.log("i cannot put the flag");
     }
-    localStorage.setItem("minesweeperGrid", JSON.stringify(this.board));
-  }
-  onClick(row, col) {
-    this.board = JSON.parse(localStorage.getItem("minesweeperGrid"));
-    this.numberToWin = JSON.parse(localStorage.getItem("numberToWin"));
 
+    // Commit the updated board to Vuex store
+    store.commit("UPDATE_MINESWEEPER_GRID", this.board);
+  }
+
+  onClick(row, col) {
+    this.board = store.state.minesweeperGrid;
+    this.numberToWin = store.state.numberToWin;
     let queue = [[row, col]];
     console.log("first step done");
     while (queue.length > 0) {
@@ -282,15 +279,8 @@ export class Play extends EndGame {
         this.board.board.board[row][col].isRevealed === false &&
         this.board.board.board[row][col].isMine === false
       ) {
-        console.log(this.board.board.board[row][col]);
-        console.log("second step done");
         this.board.board.board[row][col].isRevealed = true;
-        console.log(this.board.board.board[row][col]);
         this.numberToWin = this.numberToWin - 1;
-        // console.log(this.numberToWin, "this is number to win");
-        localStorage.setItem("numberToWin", JSON.stringify(this.numberToWin));
-        // console.log(this.board.board.board[row][col].nearbyMines, "hello");
-
         if (this.board.board.board[row][col].nearbyMines === 0) {
           for (let j = col - 1; j <= col + 1; j++) {
             for (let i = row - 1; i <= row + 1; i++) {
@@ -306,10 +296,11 @@ export class Play extends EndGame {
             }
           }
         }
+        store.commit("UPDATE_NUMBER_TO_WIN", this.numberToWin);
+        store.commit("UPDATE_MINESWEEPER_GRID", this.board);
       }
     }
     console.log("finish");
-    localStorage.setItem("minesweeperGrid", JSON.stringify(this.board));
   }
 }
 export class Minesweeper {
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 3427c2f..d310840 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,86 +1,82 @@
+<!-- eslint-disable -->
 <template>
-  <v-container>
-    <v-text-field
-      label="number of rows"
-      v-model="numberOfRows"
-      type="number"
-    ></v-text-field>
-    <v-text-field
-      label="number of cols"
-      v-model="numberOfCols"
-      type="number"
-    ></v-text-field>
-    <v-text-field
-      label="number of mines"
-      v-model="numberOfMines"
-      type="number"
-    ></v-text-field>
-    <v-btn @click="startGame">start</v-btn>
-    <v-btn @click="loadGame">load</v-btn>
-    <input
-      type="file"
-      ref="fileInput"
-      @change="handleFileUpload"
-      style="display: none"
-    />
-  </v-container>
+<v-container>
+<v-text-field
+label="number of rows"
+v-model="numberOfRows"
+type="number"
+></v-text-field>
+<v-text-field
+label="number of cols"
+v-model="numberOfCols"
+type="number"
+></v-text-field>
+<v-text-field
+label="number of mines"
+v-model="numberOfMines"
+type="number"
+></v-text-field>
+<v-btn @click="startGame">start</v-btn>
+<v-btn @click="loadGame">load</v-btn>
+<input
+type="file"
+ref="fileInput"
+@change="handleFileUpload"
+style="display: none"
+/>
+</v-container>
 </template>
-
+<!-- eslint-disable -->
 <script>
 export default {
-  name: "HelloWorld",
-  data: () => ({
-    gameData: [],
-    numberOfCols: 2,
-    numberOfRows: 2,
-    numberOfMines: 2,
-  }),
-  methods: {
-    loadGame() {
-      this.$refs.fileInput.click();
-    },
-    handleFileUpload(event) {
-      const file = event.target.files[0];
-      const reader = new FileReader();
-      reader.onload = (event) => {
-        let gameData = JSON.parse(event.target.result);
-        gameData.item = JSON.parse(gameData.item); // Parse the 'item' property
-        gameData.playerName = JSON.parse(gameData.playerName);
-        gameData.rows = JSON.parse(gameData.rows);
-        gameData.cols = JSON.parse(gameData.cols);
-        gameData.mines = JSON.parse(gameData.mines);
-        gameData.numberToWin = JSON.parse(gameData.numberToWin);
-        this.$store.commit("SET_GAME_DATA", gameData);
-        if (gameData.rows && gameData.cols) {
-          this.numberOfRows = gameData.rows;
-          this.numberOfCols = gameData.cols;
-          this.numberOfMines = gameData.mines;
-          console.log(gameData, "hhhhh"); // No need to parse gameData again
-          this.$store.commit("UPDATE_ROWS", this.numberOfRows);
-          this.$store.commit("UPDATE_COLS", this.numberOfCols);
-          this.$store.commit("UPDATE_MINES", this.numberOfMines);
-          let numberToWin =
-            this.numberOfRows * this.numberOfCols - this.numberOfMines;
-          localStorage.setItem(
-            "minesweeperGrid",
-            JSON.stringify(gameData.item)
-          );
-          localStorage.setItem("numberToWin", JSON.stringify(numberToWin));
-        }
-      };
-      reader.readAsText(file);
-      this.$router.push("/load");
-    },
-
-    startGame() {
+name: "HelloWorld",
+data: () => ({
+gameData: [],
+numberOfCols: 2,
+numberOfRows: 2,
+numberOfMines: 2,
+}),
+methods: {
+loadGame() {
+this.$refs.fileInput.click();
+},handleFileUpload(event) {
+  const file = event.target.files[0];
+  const reader = new FileReader();
+  reader.onload = (event) => {
+    let gameData = JSON.parse(event.target.result);
+    gameData.item = JSON.parse(gameData.item); // Parse the 'item' property
+    gameData.playerName = JSON.parse(gameData.playerName);
+    gameData.rows = JSON.parse(gameData.rows);
+    gameData.cols = JSON.parse(gameData.cols);
+    gameData.mines = JSON.parse(gameData.mines);
+    gameData.numberToWin = JSON.parse(gameData.numberToWin);
+    gameData.undoStack = JSON.parse(gameData.undoStack); // Parse the 'undoStack' property
+    gameData.redoStack = JSON.parse(gameData.redoStack); // Parse the 'redoStack' property
+    this.$store.commit("SET_GAME_DATA", gameData);
+    if (gameData.rows && gameData.cols) {
+      this.numberOfRows = gameData.rows;
+      this.numberOfCols = gameData.cols;
+      this.numberOfMines = gameData.mines;
+      console.log(gameData, "hhhhh"); // No need to parse gameData again
       this.$store.commit("UPDATE_ROWS", this.numberOfRows);
       this.$store.commit("UPDATE_COLS", this.numberOfCols);
       this.$store.commit("UPDATE_MINES", this.numberOfMines);
-      this.createBoard();
-    },
-    createBoard() {
-      this.$router.push("/game");
-    },
-  },
-};
+      // let numberToWin = this.numberOfRows * this.numberOfCols - this.numberOfMines;
+      this.$store.commit("UPDATE_NUMBER_TO_WIN", gameData.numberToWin);
+      this.$store.commit("UPDATE_MINESWEEPER_GRID", gameData.item);
+      this.$store.commit("UPDATE_UNDO", gameData.undoStack);
+      this.$store.commit("UPDATE_REDO", gameData.redoStack);
+    }
+  };
+  reader.readAsText(file);
+  this.$router.push("/load");
+},
+
+startGame() {
+this.$store.commit("UPDATE_ROWS", this.numberOfRows);
+this.$store.commit("UPDATE_COLS", this.numberOfCols);
+this.$store.commit("UPDATE_MINES", this.numberOfMines);
+this.createBoard();
+},
+createBoard() {this.$router.push("/game");},},};
 </script>
diff --git a/src/components/LoadGame.vue b/src/components/LoadGame.vue
index e5e5afe..6e98bac 100644
--- a/src/components/LoadGame.vue
+++ b/src/components/LoadGame.vue
@@ -9,7 +9,7 @@
       <div
         v-for="(col, colIndex) in localNumberOfCols"
         :key="`col-${colIndex}`"
-        class="cell"
+        class="cell no-cursor"
         @click="cellOpener(rowIndex, colIndex)"
         @contextmenu.prevent="isCellFlagged(rowIndex, colIndex)"
         :data-value="getCellSymbol(rowIndex, colIndex)"
@@ -34,6 +34,8 @@ export default {
       minesweeperGrid: null,
       numberOfMines: 0,
       item: null,
+      undoStack: [],
+      redoStack: [],
     };
   },
   name: "Board",
@@ -41,7 +43,6 @@ export default {
     isCellRevealed(row, col) {
       let cell;
       if (
-        this.minesweeperGrid &&
         this.minesweeperGrid &&
         this.minesweeperGrid.board &&
         this.minesweeperGrid.board.board &&
@@ -57,97 +58,86 @@ export default {
       return false; // return false when minesweeperGrid is null or the cell doesn't exist
     },
     isCellFlagged(row, col) {
-      this.play = new Play();
-      this.play.doFlagged(row, col);
-      this.minesweeperGrid = JSON.parse(
-        localStorage.getItem("minesweeperGrid")
-      );
-      this.getCellSymbol(row, col);
+  this.undoStack.push({
+    minesweeperGrid: JSON.parse(JSON.stringify(this.minesweeperGrid)),
+    numberToWin: this.minesweeperGrid.board.numberToWin
+  });
+  this.play = new Play();
+  this.play.doFlagged(row, col);
+  store.commit("UPDATE_MINESWEEPER_GRID", this.minesweeperGrid);
+  this.getCellSymbol(row, col);
+},
 
-      // Update the game state in the component and in local storage
-      this.$forceUpdate();
-      localStorage.setItem(
-        "minesweeperGrid",
-        JSON.stringify(this.minesweeperGrid)
-      );
-    },
     cellOpener(row, col) {
-      // console.log("the row is",row);
-      // console.log("the col is",col);
-      if (
-        this.minesweeperGrid &&
-        this.minesweeperGrid &&
-        this.minesweeperGrid.board &&
-        this.minesweeperGrid.board.board &&
-        this.minesweeperGrid.board.board[row] &&
-        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.minesweeperGrid.board.numberToWin = JSON.parse(
-          localStorage.getItem("numberToWin")
-          );
-          if (this.minesweeperGrid.board.numberToWin > 1) {
-            this.play.onClick(row, col);
-            this.minesweeperGrid.board.numberToWin--;
-            localStorage.setItem(
-            "numberToWin",
-            this.minesweeperGrid.board.numberToWin
-            );
-            this.minesweeperGrid = JSON.parse(
-              localStorage.getItem("minesweeperGrid")
-            );
-          } else {
-            Swal.fire({
-              title: "you win",
-              text: "Do you want to continue",
-              icon: "success",
-              showCancelButton: true,
-              confirmButtonText: "replay",
-              cancelButtonText: "Do nothing",
-            }).then((result) => {
-              if (result.isConfirmed) {
-                this.$router.push("/")
-                .then(() => window.location.reload())}
-            });
-          }
-        } else {
-          Swal.fire({
-            title: "you lose",
-            text: "Do you want to continue",
-            icon: "error",
-            showCancelButton: true,
-            confirmButtonText: "replay",
-            cancelButtonText: "Do nothing",
-          }).then((result) => {
-            if (result.isConfirmed) {
-                this.$router.push("/")
-                .then(() => window.location.reload())}
-          });
-        }
-        this.$forceUpdate();
-        localStorage.setItem(
-          "minesweeperGrid",
-          JSON.stringify(this.minesweeperGrid)
-        );
-
-        this.getCellSymbol(row, col);
-      }
-    },
-    saver() {
-      this.$store.dispatch("writeOnFile", {
-        name: "yazan",
-        board: this.minesweeperGrid,
-        rows: this.localNumberOfRows,
-        cols: this.localNumberOfCols,
-        mines: this.numberOfMines,
-        numberToWin: this.minesweeperGrid.board.numberToWin,
+  if (
+    this.minesweeperGrid &&
+    this.minesweeperGrid.board &&
+    this.minesweeperGrid.board.board &&
+    this.minesweeperGrid.board.board[row] &&
+    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.minesweeperGrid.board.numberToWin = this.$store.state.numberToWin
+      this.undoStack.push({
+        minesweeperGrid: JSON.parse(JSON.stringify(this.minesweeperGrid)),
+        numberToWin: this.minesweeperGrid.board.numberToWin
       });
-    },
+      if (this.minesweeperGrid.board.numberToWin > 0) {
+        console.log(this.minesweeperGrid.board.numberToWin);
+        this.play.onClick(row, col);
+      } else if (!this.minesweeperGrid.board.board[row][col].isRevealed) {
+        Swal.fire({
+          title: "you win",
+          text: "Do you want to continue",
+          icon: "success",
+          showCancelButton: true,
+          confirmButtonText: "replay",
+          cancelButtonText: "Do nothing",
+        }).then((result) => {
+          if (result.isConfirmed) {
+            this.$router.push("/").then(() => window.location.reload());
+          }
+        });
+      }
+    } else {
+      Swal.fire({
+        title: "you lose",
+        text: "Do you want to continue",
+        icon: "error",
+        showCancelButton: true,
+        confirmButtonText: "replay",
+        cancelButtonText: "Do nothing",
+      }).then((result) => {
+        if (result.isConfirmed) {
+          this.$router.push("/").then(() => window.location.reload());
+        }
+      });
+    }
+
+    this.$store.commit("UPDATE_MINESWEEPER_GRID", this.minesweeperGrid);
+
+    this.getCellSymbol(row, col);
+    this.redoStack = [];
+  }
+},
+
+saver() {
+  this.$store.dispatch("writeOnFile", {
+    name: "yazan",
+    board: this.minesweeperGrid,
+    rows: this.localNumberOfRows,
+    cols: this.localNumberOfCols,
+    mines: this.numberOfMines,
+    numberToWin: this.minesweeperGrid.board.numberToWin,
+    undoStack: this.undoStack,
+    redoStack: this.redoStack
+  });
+},
+
     getCellSymbol(row, col) {
       if (
-        this.minesweeperGrid &&
         this.minesweeperGrid &&
         this.minesweeperGrid.board &&
         this.minesweeperGrid.board.board &&
@@ -160,31 +150,94 @@ export default {
           if (cell.isFlagged) {
             return "F";
           } else if (cell.isRevealed === true) {
-            return String(cell.nearbyMines); // Convert to string before returning
+            return String(cell.nearbyMines);
           } else if (!cell.isRevealed) {
             return "#";
           }
         }
       }
-      return "#"; // return "#" when minesweeperGrid is null or the cell doesn't exist
+      return "#";
+    },
+    undo() {
+  if (this.undoStack.length > 0) {
+    let localNumberToWin = this.$store.state.numberToWin
+    this.redoStack.push({
+      minesweeperGrid: JSON.parse(JSON.stringify(this.minesweeperGrid)),
+      numberToWin: localNumberToWin
+    });
+    let undoState = this.undoStack.pop();
+    this.minesweeperGrid = undoState.minesweeperGrid;
+    this.$store.commit("UPDATE_NUMBER_TO_WIN", undoState.numberToWin);
+    this.$store.commit("UPDATE_MINESWEEPER_GRID", this.minesweeperGrid);
+  }
+},
+
+redo() {
+  if (this.redoStack.length > 0) {
+    this.undoStack.push({
+      minesweeperGrid: JSON.parse(JSON.stringify(this.minesweeperGrid)),
+      numberToWin: this.minesweeperGrid.board.numberToWin
+    });
+    let redoState = this.redoStack.pop();
+    this.minesweeperGrid = redoState.minesweeperGrid;
+    this.$store.commit("UPDATE_NUMBER_TO_WIN", redoState.numberToWin);
+    this.$store.commit("UPDATE_MINESWEEPER_GRID", this.minesweeperGrid);
+  }
+},
+    keydownHandler(event) {
+      if (event.ctrlKey && event.key === "z") {
+        this.undo();
+      }
+      if (event.ctrlKey && event.key === "y") {
+        this.redo();
+      }
     },
   },
+  computed: {
+    numberToWin() {
+      return this.$store.state.numberToWin;
+    }
+  },
+  watch: {
+    numberToWin(newVal) {
+      if (newVal === 0) {
+        Swal.fire({
+          title: "you win",
+          text: "Do you want to continue",
+          icon: "success",
+          showCancelButton: true,
+          confirmButtonText: "replay",
+          cancelButtonText: "Do nothing",
+        }).then((result) => {
+          if (result.isConfirmed) {
+            this.$router.push("/").then(() => window.location.reload());
+          }
+        });
+      }
+    }
+  },
   mounted() {
-    this.$nextTick(() => {
+    this.$nextTick(() => {    
+      window.addEventListener("keydown", this.keydownHandler);
+      this.undoStack = this.$store.state.undo;
+      this.redoStack = this.$store.state.redo;
       this.localNumberOfRows = this.$store.state.numberOfRows;
       this.localNumberOfCols = this.$store.state.numberOfCols;
       this.numberOfMines = this.$store.state.numberOfMines;
       this.localNumberOfRows = parseInt(this.localNumberOfRows);
       this.localNumberOfCols = parseInt(this.localNumberOfCols);
       this.numberOfMines = parseInt(this.numberOfMines);
-      let minesweeperGrid = JSON.parse(localStorage.getItem("minesweeperGrid"));
-      if (typeof minesweeperGrid === "string") {
-        minesweeperGrid = JSON.parse(minesweeperGrid); // Parse the 'item' property
-      }
+      
+      let minesweeperGrid = this.$store.state.minesweeperGrid;
+      // let minesweeperGrid = JSON.parse(localStorage.getItem("minesweeperGrid"));
       this.minesweeperGrid = minesweeperGrid;
-      this.numberToWin = parseInt(localStorage.getItem("numberToWin"));
+      this.numberToWin = this.$store.state.numberToWin;
+      // this.numberToWin = parseInt(localStorage.getItem("numberToWin"));
     });
   },
+  beforeDestroy() {
+    window.removeEventListener("keydown", this.keydownHandler);
+  },
 
 //   created() {
 //   window.addEventListener('keydown', this.keydownHandler);
@@ -197,6 +250,9 @@ export default {
 </script>
 <!-- eslint-disable -->
 <style>
+.no-cursor {
+  caret-color: transparent;
+}
 #app {
   display: flex;
   flex-direction: column;
diff --git a/src/store/index.js b/src/store/index.js
index cd3e177..543c907 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -8,7 +8,12 @@ export default createStore({
     numberOfCols: 0,
     numberOfMines: 0,
     numberOfRows: 0,
+    numberToWin: 0, // add this line
+    minesweeperGrid: null, // and this line
+    undo: [],
+    redo: [],
   },
+
   mutations: {
     SET_GAME_DATA(state, payload) {
       state.gameData = payload;
@@ -22,9 +27,25 @@ export default createStore({
     UPDATE_MINES(state, numberOfMines) {
       state.numberOfMines = numberOfMines;
     },
+    UPDATE_NUMBER_TO_WIN(state, numberToWin) {
+      state.numberToWin = numberToWin;
+      console.log(numberToWin, "i save it");
+    },
+    UPDATE_MINESWEEPER_GRID(state, minesweeperGrid) {
+      state.minesweeperGrid = minesweeperGrid;
+    },
+    UPDATE_UNDO(state, undo) {
+      state.undo = undo;
+    },
+    UPDATE_REDO(state, redo) {
+      state.redo = redo;
+    },
   },
   actions: {
-    writeOnFile({ commit }, { name, board, rows, cols, mines, numberToWin }) {
+    writeOnFile(
+      { commit },
+      { name, board, rows, cols, mines, numberToWin, undoStack, redoStack }
+    ) {
       let dataForGame = {
         playerName: JSON.stringify(name),
         item: JSON.stringify(board),
@@ -32,6 +53,8 @@ export default createStore({
         cols: JSON.stringify(cols),
         mines: JSON.stringify(mines),
         numberToWin: JSON.stringify(numberToWin),
+        undoStack: JSON.stringify(undoStack),
+        redoStack: JSON.stringify(redoStack),
       };
       // Create a downloadable file
       const blob = new Blob([JSON.stringify(dataForGame, null, 2)], {