yazanMatar/minesweeper
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

yazanMatar

Browse Source
This commit is contained in:
yazan matar 2024-05-25 11:34:10 +03:00
parent dde13cbdca
commit 4367b0255f
5 changed files with 438 additions and 373 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

261
src/components/Board.vue
View File

@ -9,7 +9,7 @@
<div <div
v-for="(col, colIndex) in localNumberOfCols" v-for="(col, colIndex) in localNumberOfCols"
:key="`col-${colIndex}`" :key="`col-${colIndex}`"
class="cell" class="cell no-cursor"
@click="cellOpener(rowIndex, colIndex)" @click="cellOpener(rowIndex, colIndex)"
@contextmenu.prevent="isCellFlagged(rowIndex, colIndex)" @contextmenu.prevent="isCellFlagged(rowIndex, colIndex)"
:data-value="getCellSymbol(rowIndex, colIndex)" :data-value="getCellSymbol(rowIndex, colIndex)"
@ -25,6 +25,7 @@
<script> <script>
import Swal from "sweetalert2"; import Swal from "sweetalert2";
import { Minesweeper, EndGame, Play } from "./Game"; import { Minesweeper, EndGame, Play } from "./Game";
import store from "@/store"; // adjust the path according to your project structure
export default { export default {
data: function () { data: function () {
@ -39,68 +40,69 @@ export default {
}; };
}, },
name: "Board", name: "Board",
// props: { numberOfRows: Number, numberOfCols: Number }, methods: {
methods: { isCellRevealed(row, col) {
isCellRevealed(row, col) { let cell;
let cell; if (
if ( this.minesweeperGrid &&
this.minesweeperGrid && this.minesweeperGrid.board &&
this.minesweeperGrid.board && this.minesweeperGrid.board.board &&
this.minesweeperGrid.board.board && this.minesweeperGrid.board.board[row] &&
this.minesweeperGrid.board.board[row] && row < this.localNumberOfRows &&
row < this.localNumberOfRows && col < this.localNumberOfCols
col < this.localNumberOfCols ) {
) { cell = this.minesweeperGrid.board.board[row][col];
cell = this.minesweeperGrid.board.board[row][col]; if (cell) {
if (cell) {
return cell.isRevealed; 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) { isCellFlagged(row, col) {
this.undoStack.push({
minesweeperGrid: JSON.parse(JSON.stringify(this.minesweeperGrid)),
numberToWin: this.minesweeperGrid.board.numberToWin
});
this.play = new Play(); this.play = new Play();
this.play.doFlagged(row, col); this.play.doFlagged(row, col);
this.minesweeperGrid = JSON.parse( store.commit("UPDATE_MINESWEEPER_GRID", this.minesweeperGrid);
localStorage.getItem("minesweeperGrid")
);
this.getCellSymbol(row, col); this.getCellSymbol(row, col);
}, },
cellOpener(row, col) { cellOpener(row, col) {
if ( if (
this.minesweeperGrid && this.minesweeperGrid &&
this.minesweeperGrid.board && this.minesweeperGrid.board &&
this.minesweeperGrid.board.board && this.minesweeperGrid.board.board &&
this.minesweeperGrid.board.board[row] && this.minesweeperGrid.board.board[row] &&
this.minesweeperGrid.board.board[row][col] && this.minesweeperGrid.board.board[row][col] &&
!this.minesweeperGrid.board.board[row][col].isFlagged !this.minesweeperGrid.board.board[row][col].isFlagged
) { ) {
this.play = new Play();
this.play = new Play(); if (!this.minesweeperGrid.board.board[row][col].isMine) {
if (!this.minesweeperGrid.board.board[row][col].isMine) { this.minesweeperGrid.board.numberToWin = this.$store.state.numberToWin
this.undoStack.push(JSON.parse(JSON.stringify(this.minesweeperGrid))); this.undoStack.push({
this.minesweeperGrid.board.numberToWin = JSON.parse( minesweeperGrid: JSON.parse(JSON.stringify(this.minesweeperGrid)),
localStorage.getItem("numberToWin") numberToWin: this.minesweeperGrid.board.numberToWin
); });
// this.minesweeperGrid.board.numberToWin =this.$store.state.numberToWin; if (this.minesweeperGrid.board.numberToWin > 0) {
if (this.minesweeperGrid.board.numberToWin > 1) { console.log(this.minesweeperGrid.board.numberToWin);
this.play.onClick(row, col); this.play.onClick(row, col);
}else { } else if (!this.minesweeperGrid.board.board[row][col].isRevealed) {
Swal.fire({ Swal.fire({
title: "you win", title: "you win",
text: "Do you want to continue", text: "Do you want to continue",
icon: "success", icon: "success",
showCancelButton: true, showCancelButton: true,
confirmButtonText: "replay", confirmButtonText: "replay",
cancelButtonText: "Do nothing", cancelButtonText: "Do nothing",
}).then((result) => { }).then((result) => {
if (result.isConfirmed) { if (result.isConfirmed) {
this.$router.push("/") this.$router.push("/").then(() => window.location.reload());
.then(() => window.location.reload())} }
}); });
} }
} else { } else {
Swal.fire({ Swal.fire({
title: "you lose", title: "you lose",
text: "Do you want to continue", text: "Do you want to continue",
@ -110,17 +112,18 @@ Swal.fire({
cancelButtonText: "Do nothing", cancelButtonText: "Do nothing",
}).then((result) => { }).then((result) => {
if (result.isConfirmed) { if (result.isConfirmed) {
this.$router.push("/") this.$router.push("/").then(() => window.location.reload());
.then(() => window.location.reload())} }
}); });
} }
this.minesweeperGrid = JSON.parse(
localStorage.getItem("minesweeperGrid") store.commit("UPDATE_MINESWEEPER_GRID", this.minesweeperGrid);
);
this.getCellSymbol(row, col); this.getCellSymbol(row, col);
this.redoStack = []; this.redoStack = [];
} }
}, },
saver() { saver() {
this.$store.dispatch("writeOnFile", { this.$store.dispatch("writeOnFile", {
name: "yazan", name: "yazan",
@ -128,14 +131,13 @@ saver() {
rows: this.localNumberOfRows, rows: this.localNumberOfRows,
cols: this.localNumberOfCols, cols: this.localNumberOfCols,
mines: this.numberOfMines, 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) {
getCellSymbol(row, col) {
if ( if (
this.minesweeperGrid && this.minesweeperGrid &&
this.minesweeperGrid.board && this.minesweeperGrid.board &&
@ -149,101 +151,95 @@ getCellSymbol(row, col) {
if (cell.isFlagged) { if (cell.isFlagged) {
return "F"; return "F";
} else if (cell.isRevealed === true) { } else if (cell.isRevealed === true) {
return String(cell.nearbyMines); // Convert to string before returning return String(cell.nearbyMines);
} else if (!cell.isRevealed) { } else if (!cell.isRevealed) {
return "#"; return "#";
} }
} }
} }
return "#"; // return "#" when minesweeperGrid is null or the cell doesn't exist return "#";
},
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)
// );
}
}, },
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) { keydownHandler(event) {
if (event.ctrlKey && event.key === 'z') { if (event.ctrlKey && event.key === "z") {
this.undo(); this.undo();
} }
if (event.ctrlKey && event.key === 'y') { if (event.ctrlKey && event.key === "y") {
this.redo(); this.redo();
} }
}, },
}, },
mounted() { 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);
window.addEventListener('keydown', this.keydownHandler);
this.localNumberOfRows = this.$store.state.numberOfRows; this.localNumberOfRows = this.$store.state.numberOfRows;
this.localNumberOfCols = this.$store.state.numberOfCols; this.localNumberOfCols = this.$store.state.numberOfCols;
this.numberOfMines = this.$store.state.numberOfMines; this.numberOfMines = this.$store.state.numberOfMines;
this.localNumberOfRows = parseInt(this.localNumberOfRows); this.localNumberOfRows = parseInt(this.localNumberOfRows);
this.localNumberOfCols = parseInt(this.localNumberOfCols); this.localNumberOfCols = parseInt(this.localNumberOfCols);
this.numberOfMines = parseInt(this.numberOfMines); 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.minesweeperGrid = new Minesweeper(
this.localNumberOfRows, this.localNumberOfRows,
this.localNumberOfCols, this.localNumberOfCols,
this.numberOfMines this.numberOfMines
); );
// }
localStorage.setItem( store.commit("UPDATE_NUMBER_TO_WIN", this.minesweeperGrid.board.numberToWin);
"minesweeperGrid", store.commit("UPDATE_MINESWEEPER_GRID", this.minesweeperGrid);
JSON.stringify(this.minesweeperGrid)
);
localStorage.setItem(
"numberToWin",
JSON.stringify(this.minesweeperGrid.board.numberToWin)
);
return this.minesweeperGrid; return this.minesweeperGrid;
}); });
}, },
beforeDestroy() { beforeDestroy() {
window.removeEventListener('keydown', this.keydownHandler); window.removeEventListener("keydown", this.keydownHandler);
}, },
}; };
</script> </script>
@ -257,6 +253,9 @@ mounted() {
padding: 20px; padding: 20px;
/* background-color: #f5f5f5; */ /* background-color: #f5f5f5; */
} }
.no-cursor {
caret-color: transparent;
}
.row { .row {
display: flex; display: flex;

33
src/components/Game.js
View File

@ -1,6 +1,6 @@
/*eslint-disable*/ /*eslint-disable*/
import { state } from "vuex"; import { state } from "vuex";
import store from "@/store"; // adjust the path according to your project structure
// const readline = require("readline"); // const readline = require("readline");
// var fs = require("fs"); // var fs = require("fs");
// module.exports = { // module.exports = {
@ -248,28 +248,25 @@ export class Play extends EndGame {
); );
} }
doFlagged(row, col) { doFlagged(row, col) {
this.board = JSON.parse(localStorage.getItem("minesweeperGrid")); this.board = store.state.minesweeperGrid;
this.numberToWin = JSON.parse(localStorage.getItem("numberToWin")); this.numberToWin = store.state.numberToWin;
if (!this.board.board.board[row][col].isRevealed) { if (!this.board.board.board[row][col].isRevealed) {
if (!this.board.board.board[row][col].isFlagged) { if (!this.board.board.board[row][col].isFlagged) {
// this.numberOfFlags -= 1;
// console.log(1);
this.board.board.board[row][col].isFlagged = true; this.board.board.board[row][col].isFlagged = true;
} else if (this.board.board.board[row][col].isFlagged) { } else if (this.board.board.board[row][col].isFlagged) {
// this.numberOfFlags += 1;
// console.log(2);
this.board.board.board[row][col].isFlagged = false; this.board.board.board[row][col].isFlagged = false;
} }
// console.log("done");
} else { } else {
console.log("i cannot put the flag"); 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]]; let queue = [[row, col]];
console.log("first step done"); console.log("first step done");
while (queue.length > 0) { 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].isRevealed === false &&
this.board.board.board[row][col].isMine === 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; this.board.board.board[row][col].isRevealed = true;
console.log(this.board.board.board[row][col]);
this.numberToWin = this.numberToWin - 1; 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) { if (this.board.board.board[row][col].nearbyMines === 0) {
for (let j = col - 1; j <= col + 1; j++) { for (let j = col - 1; j <= col + 1; j++) {
for (let i = row - 1; i <= row + 1; i++) { 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"); console.log("finish");
localStorage.setItem("minesweeperGrid", JSON.stringify(this.board));
} }
} }
export class Minesweeper { export class Minesweeper {

110
src/components/HelloWorld.vue
View File

@ -1,45 +1,45 @@
<!-- eslint-disable -->
<template> <template>
<v-container> <v-container>
<v-text-field <v-text-field
label="number of rows" label="number of rows"
v-model="numberOfRows" v-model="numberOfRows"
type="number" type="number"
></v-text-field> ></v-text-field>
<v-text-field <v-text-field
label="number of cols" label="number of cols"
v-model="numberOfCols" v-model="numberOfCols"
type="number" type="number"
></v-text-field> ></v-text-field>
<v-text-field <v-text-field
label="number of mines" label="number of mines"
v-model="numberOfMines" v-model="numberOfMines"
type="number" type="number"
></v-text-field> ></v-text-field>
<v-btn @click="startGame">start</v-btn> <v-btn @click="startGame">start</v-btn>
<v-btn @click="loadGame">load</v-btn> <v-btn @click="loadGame">load</v-btn>
<input <input
type="file" type="file"
ref="fileInput" ref="fileInput"
@change="handleFileUpload" @change="handleFileUpload"
style="display: none" style="display: none"
/> />
</v-container> </v-container>
</template> </template>
<!-- eslint-disable -->
<script> <script>
export default { export default {
name: "HelloWorld", name: "HelloWorld",
data: () => ({ data: () => ({
gameData: [], gameData: [],
numberOfCols: 2, numberOfCols: 2,
numberOfRows: 2, numberOfRows: 2,
numberOfMines: 2, numberOfMines: 2,
}), }),
methods: { methods: {
loadGame() { loadGame() {
this.$refs.fileInput.click(); this.$refs.fileInput.click();
}, },handleFileUpload(event) {
handleFileUpload(event) {
const file = event.target.files[0]; const file = event.target.files[0];
const reader = new FileReader(); const reader = new FileReader();
reader.onload = (event) => { reader.onload = (event) => {
@ -50,6 +50,8 @@ export default {
gameData.cols = JSON.parse(gameData.cols); gameData.cols = JSON.parse(gameData.cols);
gameData.mines = JSON.parse(gameData.mines); gameData.mines = JSON.parse(gameData.mines);
gameData.numberToWin = JSON.parse(gameData.numberToWin); 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); this.$store.commit("SET_GAME_DATA", gameData);
if (gameData.rows && gameData.cols) { if (gameData.rows && gameData.cols) {
this.numberOfRows = gameData.rows; this.numberOfRows = gameData.rows;
@ -59,28 +61,22 @@ export default {
this.$store.commit("UPDATE_ROWS", this.numberOfRows); this.$store.commit("UPDATE_ROWS", this.numberOfRows);
this.$store.commit("UPDATE_COLS", this.numberOfCols); this.$store.commit("UPDATE_COLS", this.numberOfCols);
this.$store.commit("UPDATE_MINES", this.numberOfMines); this.$store.commit("UPDATE_MINES", this.numberOfMines);
let numberToWin = // let numberToWin = this.numberOfRows * this.numberOfCols - this.numberOfMines;
this.numberOfRows * this.numberOfCols - this.numberOfMines; this.$store.commit("UPDATE_NUMBER_TO_WIN", gameData.numberToWin);
localStorage.setItem( this.$store.commit("UPDATE_MINESWEEPER_GRID", gameData.item);
"minesweeperGrid", this.$store.commit("UPDATE_UNDO", gameData.undoStack);
JSON.stringify(gameData.item) this.$store.commit("UPDATE_REDO", gameData.redoStack);
);
localStorage.setItem("numberToWin", JSON.stringify(numberToWin));
} }
}; };
reader.readAsText(file); reader.readAsText(file);
this.$router.push("/load"); this.$router.push("/load");
}, },
startGame() { startGame() {
this.$store.commit("UPDATE_ROWS", this.numberOfRows); this.$store.commit("UPDATE_ROWS", this.numberOfRows);
this.$store.commit("UPDATE_COLS", this.numberOfCols); this.$store.commit("UPDATE_COLS", this.numberOfCols);
this.$store.commit("UPDATE_MINES", this.numberOfMines); this.$store.commit("UPDATE_MINES", this.numberOfMines);
this.createBoard(); this.createBoard();
}, },
createBoard() { createBoard() {this.$router.push("/game");},},};
this.$router.push("/game");
},
},
};
</script> </script>

152
src/components/LoadGame.vue
View File

@ -9,7 +9,7 @@
<div <div
v-for="(col, colIndex) in localNumberOfCols" v-for="(col, colIndex) in localNumberOfCols"
:key="`col-${colIndex}`" :key="`col-${colIndex}`"
class="cell" class="cell no-cursor"
@click="cellOpener(rowIndex, colIndex)" @click="cellOpener(rowIndex, colIndex)"
@contextmenu.prevent="isCellFlagged(rowIndex, colIndex)" @contextmenu.prevent="isCellFlagged(rowIndex, colIndex)"
:data-value="getCellSymbol(rowIndex, colIndex)" :data-value="getCellSymbol(rowIndex, colIndex)"
@ -34,6 +34,8 @@ export default {
minesweeperGrid: null, minesweeperGrid: null,
numberOfMines: 0, numberOfMines: 0,
item: null, item: null,
undoStack: [],
redoStack: [],
}; };
}, },
name: "Board", name: "Board",
@ -41,7 +43,6 @@ export default {
isCellRevealed(row, col) { isCellRevealed(row, col) {
let cell; let cell;
if ( if (
this.minesweeperGrid &&
this.minesweeperGrid && this.minesweeperGrid &&
this.minesweeperGrid.board && this.minesweeperGrid.board &&
this.minesweeperGrid.board.board && this.minesweeperGrid.board.board &&
@ -57,25 +58,18 @@ export default {
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) { isCellFlagged(row, col) {
this.undoStack.push({
minesweeperGrid: JSON.parse(JSON.stringify(this.minesweeperGrid)),
numberToWin: this.minesweeperGrid.board.numberToWin
});
this.play = new Play(); this.play = new Play();
this.play.doFlagged(row, col); this.play.doFlagged(row, col);
this.minesweeperGrid = JSON.parse( store.commit("UPDATE_MINESWEEPER_GRID", this.minesweeperGrid);
localStorage.getItem("minesweeperGrid")
);
this.getCellSymbol(row, col); 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) { cellOpener(row, col) {
// console.log("the row is",row);
// console.log("the col is",col);
if ( if (
this.minesweeperGrid &&
this.minesweeperGrid && this.minesweeperGrid &&
this.minesweeperGrid.board && this.minesweeperGrid.board &&
this.minesweeperGrid.board.board && this.minesweeperGrid.board.board &&
@ -85,20 +79,15 @@ export default {
) { ) {
this.play = new Play(); this.play = new Play();
if (!this.minesweeperGrid.board.board[row][col].isMine) { if (!this.minesweeperGrid.board.board[row][col].isMine) {
this.minesweeperGrid.board.numberToWin = JSON.parse( this.minesweeperGrid.board.numberToWin = this.$store.state.numberToWin
localStorage.getItem("numberToWin") this.undoStack.push({
); minesweeperGrid: JSON.parse(JSON.stringify(this.minesweeperGrid)),
if (this.minesweeperGrid.board.numberToWin > 1) { numberToWin: this.minesweeperGrid.board.numberToWin
});
if (this.minesweeperGrid.board.numberToWin > 0) {
console.log(this.minesweeperGrid.board.numberToWin);
this.play.onClick(row, col); this.play.onClick(row, col);
this.minesweeperGrid.board.numberToWin--; } else if (!this.minesweeperGrid.board.board[row][col].isRevealed) {
localStorage.setItem(
"numberToWin",
this.minesweeperGrid.board.numberToWin
);
this.minesweeperGrid = JSON.parse(
localStorage.getItem("minesweeperGrid")
);
} else {
Swal.fire({ Swal.fire({
title: "you win", title: "you win",
text: "Do you want to continue", text: "Do you want to continue",
@ -108,8 +97,8 @@ export default {
cancelButtonText: "Do nothing", cancelButtonText: "Do nothing",
}).then((result) => { }).then((result) => {
if (result.isConfirmed) { if (result.isConfirmed) {
this.$router.push("/") this.$router.push("/").then(() => window.location.reload());
.then(() => window.location.reload())} }
}); });
} }
} else { } else {
@ -122,20 +111,19 @@ export default {
cancelButtonText: "Do nothing", cancelButtonText: "Do nothing",
}).then((result) => { }).then((result) => {
if (result.isConfirmed) { if (result.isConfirmed) {
this.$router.push("/") this.$router.push("/").then(() => window.location.reload());
.then(() => window.location.reload())} }
}); });
} }
this.$forceUpdate();
localStorage.setItem( this.$store.commit("UPDATE_MINESWEEPER_GRID", this.minesweeperGrid);
"minesweeperGrid",
JSON.stringify(this.minesweeperGrid)
);
this.getCellSymbol(row, col); this.getCellSymbol(row, col);
this.redoStack = [];
} }
}, },
saver() {
saver() {
this.$store.dispatch("writeOnFile", { this.$store.dispatch("writeOnFile", {
name: "yazan", name: "yazan",
board: this.minesweeperGrid, board: this.minesweeperGrid,
@ -143,11 +131,13 @@ export default {
cols: this.localNumberOfCols, cols: this.localNumberOfCols,
mines: this.numberOfMines, mines: this.numberOfMines,
numberToWin: this.minesweeperGrid.board.numberToWin, numberToWin: this.minesweeperGrid.board.numberToWin,
undoStack: this.undoStack,
redoStack: this.redoStack
}); });
}, },
getCellSymbol(row, col) { getCellSymbol(row, col) {
if ( if (
this.minesweeperGrid &&
this.minesweeperGrid && this.minesweeperGrid &&
this.minesweeperGrid.board && this.minesweeperGrid.board &&
this.minesweeperGrid.board.board && this.minesweeperGrid.board.board &&
@ -160,31 +150,94 @@ export default {
if (cell.isFlagged) { if (cell.isFlagged) {
return "F"; return "F";
} else if (cell.isRevealed === true) { } else if (cell.isRevealed === true) {
return String(cell.nearbyMines); // Convert to string before returning return String(cell.nearbyMines);
} else if (!cell.isRevealed) { } else if (!cell.isRevealed) {
return "#"; 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() { 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.localNumberOfRows = this.$store.state.numberOfRows;
this.localNumberOfCols = this.$store.state.numberOfCols; this.localNumberOfCols = this.$store.state.numberOfCols;
this.numberOfMines = this.$store.state.numberOfMines; this.numberOfMines = this.$store.state.numberOfMines;
this.localNumberOfRows = parseInt(this.localNumberOfRows); this.localNumberOfRows = parseInt(this.localNumberOfRows);
this.localNumberOfCols = parseInt(this.localNumberOfCols); this.localNumberOfCols = parseInt(this.localNumberOfCols);
this.numberOfMines = parseInt(this.numberOfMines); this.numberOfMines = parseInt(this.numberOfMines);
let minesweeperGrid = JSON.parse(localStorage.getItem("minesweeperGrid"));
if (typeof minesweeperGrid === "string") { let minesweeperGrid = this.$store.state.minesweeperGrid;
minesweeperGrid = JSON.parse(minesweeperGrid); // Parse the 'item' property // let minesweeperGrid = JSON.parse(localStorage.getItem("minesweeperGrid"));
}
this.minesweeperGrid = 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() { // created() {
// window.addEventListener('keydown', this.keydownHandler); // window.addEventListener('keydown', this.keydownHandler);
@ -197,6 +250,9 @@ export default {
</script> </script>
<!-- eslint-disable --> <!-- eslint-disable -->
<style> <style>
.no-cursor {
caret-color: transparent;
}
#app { #app {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

25
src/store/index.js
View File

@ -8,7 +8,12 @@ export default createStore({
numberOfCols: 0, numberOfCols: 0,
numberOfMines: 0, numberOfMines: 0,
numberOfRows: 0, numberOfRows: 0,
numberToWin: 0, // add this line
minesweeperGrid: null, // and this line
undo: [],
redo: [],
}, },
mutations: { mutations: {
SET_GAME_DATA(state, payload) { SET_GAME_DATA(state, payload) {
state.gameData = payload; state.gameData = payload;
@ -22,9 +27,25 @@ export default createStore({
UPDATE_MINES(state, numberOfMines) { UPDATE_MINES(state, numberOfMines) {
state.numberOfMines = 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: { actions: {
writeOnFile({ commit }, { name, board, rows, cols, mines, numberToWin }) { writeOnFile(
{ commit },
{ name, board, rows, cols, mines, numberToWin, undoStack, redoStack }
) {
let dataForGame = { let dataForGame = {
playerName: JSON.stringify(name), playerName: JSON.stringify(name),
item: JSON.stringify(board), item: JSON.stringify(board),
@ -32,6 +53,8 @@ export default createStore({
cols: JSON.stringify(cols), cols: JSON.stringify(cols),
mines: JSON.stringify(mines), mines: JSON.stringify(mines),
numberToWin: JSON.stringify(numberToWin), numberToWin: JSON.stringify(numberToWin),
undoStack: JSON.stringify(undoStack),
redoStack: JSON.stringify(redoStack),
}; };
// Create a downloadable file // Create a downloadable file
const blob = new Blob([JSON.stringify(dataForGame, null, 2)], { const blob = new Blob([JSON.stringify(dataForGame, null, 2)], {