do load and store

src/components/Board.vue

@@ -10,14 +10,15 @@
         v-for="(col, colIndex) in localNumberOfCols"
         :key="`col-${colIndex}`"
         class="cell"
-        @click="isCorrect(rowIndex, colIndex)"
+        @click="cellOpener(rowIndex, colIndex)"
+        @contextmenu.prevent="isCellFlagged(rowIndex, colIndex)"
         :data-value="getCellSymbol(rowIndex, colIndex)"
         :class="{ revealed: isCellRevealed(rowIndex, colIndex) }"
       >
         {{ getCellSymbol(rowIndex, colIndex) }}
       </div>
     </div>
-    <v-btn @click="startGame()">save</v-btn>
+    <v-btn @click="saver()">save</v-btn>
   </div>
 </template>
 <!-- eslint-disable -->
@@ -28,34 +29,53 @@ import { Minesweeper, EndGame, Play } from "./Game";
 export default {
   data: function () {
     return {
-      localNumberOfRows: null,
+      localNumberOfRows: 0,
-      localNumberOfCols: null,
+      localNumberOfCols: 0,
       minesweeperGrid: null,
+      numberOfMines: 0,
+      item: null,
     };
   },
   name: "Board",
-  props: {
+//   props: { numberOfRows: Number, numberOfCols: Number },
-    numberOfRows: Number,
-    numberOfCols: Number,
-  },
   methods: {
     isCellRevealed(row, col) {
-    if (
+      let cell;
-      this.minesweeperGrid &&
+      if (
-      row < this.localNumberOfRows &&
+        this.minesweeperGrid &&
-      col < this.localNumberOfCols
+        this.minesweeperGrid.board &&
-    ) {
+        this.minesweeperGrid.board.board &&
-      let cell = this.minesweeperGrid.board.board[row][col];
+        this.minesweeperGrid.board.board[row] &&
-      if (cell) {
+        row < this.localNumberOfRows &&
-        return cell.isRevealed;
+        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
-    return false; // return false when minesweeperGrid is null or the cell doesn't exist
+    },
-  },
+    isCellFlagged(row, col) {
-    isCorrect(row, col) {
+      this.play = new Play();
-      if (this.minesweeperGrid.board.board[row][col].isRevealed === false) {
+      this.play.doFlagged(row, col);
+      this.minesweeperGrid = JSON.parse(
+        localStorage.getItem("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
+      ) {
         this.play = new Play();
-        if (this.minesweeperGrid.board.board[row][col].isMine === false) {
+        if (!this.minesweeperGrid.board.board[row][col].isMine) {
           this.minesweeperGrid.board.numberToWin = JSON.parse(
             localStorage.getItem("numberToWin")
           );
@@ -71,8 +91,8 @@ export default {
               cancelButtonText: "Do nothing",
             }).then((result) => {
               if (result.isConfirmed) {
-                this.$router.push("/");
+                this.$router.push("/")
-              }
+                .then(() => window.location.reload())}
             });
           }
         } else {
@@ -85,8 +105,8 @@ export default {
             cancelButtonText: "Do nothing",
           }).then((result) => {
             if (result.isConfirmed) {
-              this.$router.push("/");
+                this.$router.push("/")
-            }
+                .then(() => window.location.reload())}
           });
         }
         this.minesweeperGrid = JSON.parse(
@@ -95,25 +115,33 @@ export default {
         this.getCellSymbol(row, col);
       }
     },
-    startGame() {
+    saver() {
       this.$store.dispatch("writeOnFile", {
         name: "yazan",
-        board: this.minesweeperGrid.board.board,
+        board: this.minesweeperGrid,
         rows: this.localNumberOfRows,
         cols: this.localNumberOfCols,
+        mines: this.numberOfMines,
+        numberToWin: this.minesweeperGrid.board.numberToWin,
       });
+      // 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 === 1) {
+          if (cell.isFlagged) {
-            console.log("yazan");
+            return "F";
-            return " F";
           } else if (cell.isRevealed === true) {
             return String(cell.nearbyMines); // Convert to string before returning
           } else if (!cell.isRevealed) {
@@ -121,19 +149,34 @@ export default {
           }
         }
       }
-      return "gg"; // return an empty string or some default value when minesweeperGrid is null or the cell doesn't exist
+      return "#"; // return "#" when minesweeperGrid is null or the cell doesn't exist
     },
   },
   mounted() {
     this.$nextTick(() => {
-      this.localNumberOfRows = parseInt(localStorage.getItem("numberOfRows"));
+      this.localNumberOfRows = this.$store.state.numberOfRows;
-      this.localNumberOfCols = parseInt(localStorage.getItem("numberOfCols"));
+      this.localNumberOfCols = this.$store.state.numberOfCols;
-      this.numberOfMines = parseInt(localStorage.getItem("numberOfMines"));
+      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 "){
       this.minesweeperGrid = new Minesweeper(
-        this.localNumberOfRows,
+          this.localNumberOfRows,
-        this.localNumberOfCols,
+          this.localNumberOfCols,
-        this.numberOfMines
+          this.numberOfMines
-      );
+          );   
+        //    }
       localStorage.setItem(
         "minesweeperGrid",
         JSON.stringify(this.minesweeperGrid)
@@ -155,7 +198,7 @@ export default {
   align-items: center;
   justify-content: center;
   padding: 20px;
-  background-color: #f5f5f5;
+  /* background-color: #f5f5f5; */
 }
 
 .row {
@@ -187,29 +230,32 @@ export default {
 }
 
 /* Unique colors for each number */
-.cell[data-value="1"] {
+.cell[data-value="0"] {
   background-color: blue;
 }
+.cell[data-value="1"] {
+    background-color: pink;
+}
 .cell[data-value="2"] {
-    background-color: green;
+  background-color: green;
 }
 .cell[data-value="3"] {
-    background-color: red;
+  background-color: red;
 }
 .cell[data-value="4"] {
-    background-color: purple;
+  background-color: purple;
 }
 .cell[data-value="5"] {
-    background-color: maroon;
+  background-color: maroon;
 }
 .cell[data-value="6"] {
-    background-color: turquoise;
+  background-color: turquoise;
 }
 .cell[data-value="7"] {
-    background-color: black;
+  background-color: black;
 }
 .cell[data-value="8"] {
-    background-color: gray;
+  background-color: gray;
 }
 
 /* Animation when a cell is revealed */

src/components/Game.js

@@ -20,7 +20,7 @@ class Cell {
   constructor() {
     this.isMine = false;
     this.isRevealed = false;
-    this.isFlagged = 0;
+    this.isFlagged = false;
     this.nearbyMines = 0;
     this.isHint = false;
   }
@@ -36,6 +36,7 @@ class Board {
     );
     this.numberToWin =
       this.numberOfRows * this.numberOfCols - this.numberOfMines;
+    console.log(this.numberToWin);
     // console.log(this.numberOfRows, "tt");
     // console.log(this.numberOfCols, "tt");
     // console.log(this.numberOfMines, "tt");
@@ -43,6 +44,16 @@ class Board {
     // console.log(this.numberToWin, "tt");
     this.putMine(this.numberOfMines);
   }
+  goAroundTheArray(callBack) {
+    // i = row
+    // j = col
+    for (let j = 0; j < this.numberOfCols; j++) {
+      for (let i = 0; i < this.numberOfRows; i++) {
+        callBack(i, j);
+      }
+    }
+    console.log(this.board);
+  }
   putMine(numberOfMines) {
     for (let i = 0; i < numberOfMines; ) {
       let row = Math.floor(Math.random() * this.numberOfRows);
@@ -52,17 +63,25 @@ class Board {
         i++;
       }
     }
-    this.goAroundTheArray(this.numberOfRows, this.numberOfCols);
+    console.log(this.board, "122");
+    // for (let j = 0; j < this.numberOfCols; j++) {
+    // for (let i = 0; i < this.numberOfRows; i++) {
+    this.goAroundTheArray((row, col) => this.makeNumberInBlock(row, col));
+    //   }
+    // }
+    // this.goAroundTheArray(this.numberOfRows, this.numberOfCols);
   }
-  goAroundTheArray(boardSize_row, boardSize_col) {
+
-    for (let j = 0; j < boardSize_col; j++) {
+  // goAroundTheArray(boardSize_row, boardSize_col) {
-      for (let i = 0; i < boardSize_row; i++) {
+  // for (let j = 0; j < boardSize_col; j++) {
-        this.makeNumberInBlock(i, j);
+  //   for (let i = 0; i < boardSize_row; i++) {
-      }
+  //     this.makeNumberInBlock(i, j);
-    }
+  //   }
+  // }
+  // console.log(this.board);
+  // }
+  async makeNumberInBlock(row, col) {
     // console.log(this.board);
-  }
-  makeNumberInBlock(row, col) {
     let theNumberOfMines = 0;
     // console.log();
     if (this.board[row][col].isMine === false) {
@@ -227,35 +246,44 @@ export class Play extends EndGame {
     );
   }
   doFlagged(row, col) {
-    if (!this.board[row][col].isRevealed && this.numberOfFlags > 0) {
+    this.board = JSON.parse(localStorage.getItem("minesweeperGrid"));
-      if (this.board[row][col].isFlagged === 0) {
+    this.numberToWin = JSON.parse(localStorage.getItem("numberToWin"));
-        this.numberOfFlags -= 1;
+    if (!this.board.board.board[row][col].isRevealed) {
-        this.board[row][col].isFlagged = 1;
+      if (!this.board.board.board[row][col].isFlagged) {
-      } else if (this.board[row][col].isFlagged === 1) {
+        // this.numberOfFlags -= 1;
-        this.numberOfFlags += 1;
+        // console.log(1);
-        this.board[row][col].isFlagged = 0;
+        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"));
 
     let queue = [[row, col]];
-
+    console.log("first step done");
     while (queue.length > 0) {
       let [row, col] = queue.shift();
-
       if (
         row >= 0 &&
         col >= 0 &&
         row < this.board.board.board.length &&
         col < this.board.board.board[0].length &&
-        this.board.board.board[row][col].isRevealed === false
+        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));
@@ -278,15 +306,15 @@ export class Play extends EndGame {
         }
       }
     }
-
+    console.log("finish");
     localStorage.setItem("minesweeperGrid", JSON.stringify(this.board));
   }
 }
 export class Minesweeper {
   constructor(numberOfRows, numberOfCols, numberOfMines) {
     this.board = new Board(numberOfRows, numberOfCols, numberOfMines);
-    this.board.putMine();
+    // this.board.putMine();
-    this.board.goAroundTheArray(numberOfRows, numberOfCols);
+    // this.board.goAroundTheArray(numberOfRows, numberOfCols);
     this.play = new Play(numberOfRows, numberOfCols);
     this.timeInFile = 0;
   }

src/components/HelloWorld.vue

@@ -25,10 +25,12 @@
     />
   </v-container>
 </template>
+
 <script>
 export default {
   name: "HelloWorld",
   data: () => ({
+    gameData: [],
     numberOfCols: 2,
     numberOfRows: 2,
     numberOfMines: 2,
@@ -36,55 +38,47 @@ export default {
   methods: {
     loadGame() {
       this.$refs.fileInput.click();
-      const fileInput = document.createElement("input");
-      fileInput.type = "file";
-      fileInput.addEventListener("change", (event) => {
-        const file = event.target.files[0];
-        const reader = new FileReader();
-        reader.addEventListener("load", (event) => {
-          const gameData = JSON.parse(event.target.result);
-          console.log(gameData);
-        });
-
-        reader.readAsText(file);
-      });
     },
     handleFileUpload(event) {
       const file = event.target.files[0];
       const reader = new FileReader();
-
       reader.onload = (event) => {
-        const gameData = JSON.parse(event.target.result);
+        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);
-        // Assuming the gameData has numberOfRows and numberOfCols properties
         if (gameData.rows && gameData.cols) {
           this.numberOfRows = gameData.rows;
           this.numberOfCols = gameData.cols;
-
+          this.numberOfMines = gameData.mines;
-          // Store the number of rows and columns in local storage
+          console.log(gameData, "hhhhh"); // No need to parse gameData again
-          localStorage.setItem("numberOfRows", this.numberOfRows);
+          this.$store.commit("UPDATE_ROWS", this.numberOfRows);
-          localStorage.setItem("numberOfCols", this.numberOfCols);
+          this.$store.commit("UPDATE_COLS", this.numberOfCols);
-          localStorage.setItem("numberOfMines", this.numberOfMines);
+          this.$store.commit("UPDATE_MINES", this.numberOfMines);
-
+          let numberToWin =
-          // Create the board after the data is loaded
+            this.numberOfRows * this.numberOfCols - this.numberOfMines;
-          this.createBoard();
+          localStorage.setItem(
+            "minesweeperGrid",
+            JSON.stringify(gameData.item)
+          );
+          localStorage.setItem("numberToWin", JSON.stringify(numberToWin));
         }
       };
-
       reader.readAsText(file);
-      this.$router.push("/game");
+      this.$router.push("/load");
     },
-    startGame() {
-      // Store the number of rows and columns in local storage
-      localStorage.setItem("numberOfRows", this.numberOfRows);
-      localStorage.setItem("numberOfCols", this.numberOfCols);
-      localStorage.setItem("numberOfMines", this.numberOfMines);
 
-      // Create the board
+    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() {
-      // Add your board creation logic here
       this.$router.push("/game");
     },
   },

src/components/LoadGame.vue

@@ -0,0 +1,271 @@
+<!-- eslint-disable -->
+<template>
+  <div id="app">
+    <div
+      v-for="(row, rowIndex) in localNumberOfRows"
+      :key="`row-${rowIndex}`"
+      class="row"
+    >
+      <div
+        v-for="(col, colIndex) in localNumberOfCols"
+        :key="`col-${colIndex}`"
+        class="cell"
+        @click="cellOpener(rowIndex, colIndex)"
+        @contextmenu.prevent="isCellFlagged(rowIndex, colIndex)"
+        :data-value="getCellSymbol(rowIndex, colIndex)"
+        :class="{ revealed: isCellRevealed(rowIndex, colIndex) }"
+      >
+        {{ getCellSymbol(rowIndex, colIndex) }}
+      </div>
+    </div>
+    <v-btn @click="saver()">save</v-btn>
+  </div>
+</template>
+<!-- eslint-disable -->
+<script>
+import Swal from "sweetalert2";
+import { Minesweeper, EndGame, Play } from "./Game";
+
+export default {
+  data: function () {
+    return {
+      localNumberOfRows: 0,
+      localNumberOfCols: 0,
+      minesweeperGrid: null,
+      numberOfMines: 0,
+      item: null,
+    };
+  },
+  name: "Board",
+  methods: {
+    isCellRevealed(row, col) {
+      let cell;
+      if (
+        this.minesweeperGrid &&
+        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.play = new Play();
+      this.play.doFlagged(row, col);
+      this.minesweeperGrid = JSON.parse(
+        localStorage.getItem("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,
+      });
+    },
+    getCellSymbol(row, col) {
+      if (
+        this.minesweeperGrid &&
+        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
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      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
+      }
+      this.minesweeperGrid = minesweeperGrid;
+      this.numberToWin = parseInt(localStorage.getItem("numberToWin"));
+    });
+  },
+};
+</script>
+<!-- eslint-disable -->
+<style>
+#app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  /* background-color: #f5f5f5; */
+}
+
+.row {
+  display: flex;
+  justify-content: center;
+}
+
+.cell {
+  width: 30px;
+  height: 30px;
+  border: 1px solid #333;
+  margin: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-color: #ccc;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.cell:hover {
+  background-color: #aaa;
+}
+
+.v-btn {
+  margin-top: 20px;
+  align-self: center;
+}
+
+/* Unique colors for each number */
+.cell[data-value="0"] {
+  background-color: blue;
+}
+.cell[data-value="1"] {
+  background-color: pink;
+}
+.cell[data-value="2"] {
+  background-color: green;
+}
+.cell[data-value="3"] {
+  background-color: red;
+}
+.cell[data-value="4"] {
+  background-color: purple;
+}
+.cell[data-value="5"] {
+  background-color: maroon;
+}
+.cell[data-value="6"] {
+  background-color: turquoise;
+}
+.cell[data-value="7"] {
+  background-color: black;
+}
+.cell[data-value="8"] {
+  background-color: gray;
+}
+
+/* Animation when a cell is revealed */
+@keyframes reveal {
+  0% {
+    background-color: #ccc;
+  }
+  100% {
+    background-color: #eee;
+  }
+}
+
+.cell.revealed {
+  animation: reveal 0.3s ease;
+}
+</style>

src/router/index.js

@@ -26,6 +26,16 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "about" */ "../components/Board.vue"),
   },
+  {
+    path: "/load",
+    name: "LoadGame",
+    // props: true,
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../components/LoadGame.vue"),
+  },
 ];
 
 const router = createRouter({

src/store/index.js

@@ -5,21 +5,34 @@ import axios from "axios";
 export default createStore({
   state: {
     gameData: {},
+    numberOfCols: 0,
+    numberOfMines: 0,
+    numberOfRows: 0,
   },
   mutations: {
     SET_GAME_DATA(state, payload) {
       state.gameData = payload;
     },
+    UPDATE_ROWS(state, numberOfRows) {
+      state.numberOfRows = numberOfRows;
+    },
+    UPDATE_COLS(state, numberOfCols) {
+      state.numberOfCols = numberOfCols;
+    },
+    UPDATE_MINES(state, numberOfMines) {
+      state.numberOfMines = numberOfMines;
+    },
   },
   actions: {
-    writeOnFile({ commit }, { name, board, rows, cols }) {
+    writeOnFile({ commit }, { name, board, rows, cols, mines, numberToWin }) {
       let dataForGame = {
         playerName: JSON.stringify(name),
         item: JSON.stringify(board),
         rows: JSON.stringify(rows),
         cols: JSON.stringify(cols),
+        mines: JSON.stringify(mines),
+        numberToWin: JSON.stringify(numberToWin),
       };
-
       // Create a downloadable file
       const blob = new Blob([JSON.stringify(dataForGame, null, 2)], {
         type: "application/json",
@@ -29,7 +42,6 @@ export default createStore({
       link.href = url;
       link.download = "gameData.json";
       link.click();
-
       commit("SET_GAME_DATA", dataForGame);
     },
   },