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

353
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,88 +40,90 @@ 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();
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(); store.commit("UPDATE_MINESWEEPER_GRID", this.minesweeperGrid);
if (!this.minesweeperGrid.board.board[row][col].isMine) {
this.undoStack.push(JSON.parse(JSON.stringify(this.minesweeperGrid))); this.getCellSymbol(row, col);
this.minesweeperGrid.board.numberToWin = JSON.parse( this.redoStack = [];
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 = [];
}
}, },
saver() { saver() {
this.$store.dispatch("writeOnFile", { this.$store.dispatch("writeOnFile", {
name: "yazan", name: "yazan",
@ -128,122 +131,115 @@ 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) {
if ( getCellSymbol(row, col) {
this.minesweeperGrid && if (
this.minesweeperGrid.board && this.minesweeperGrid &&
this.minesweeperGrid.board.board && this.minesweeperGrid.board &&
this.minesweeperGrid.board.board[row] && this.minesweeperGrid.board.board &&
row < this.localNumberOfRows && this.minesweeperGrid.board.board[row] &&
col < this.localNumberOfCols row < this.localNumberOfRows &&
) { col < this.localNumberOfCols
let cell = this.minesweeperGrid.board.board[row][col]; ) {
if (cell) { let cell = this.minesweeperGrid.board.board[row][col];
if (cell.isFlagged) { if (cell) {
return "F"; if (cell.isFlagged) {
} else if (cell.isRevealed === true) { return "F";
return String(cell.nearbyMines); // Convert to string before returning } else if (cell.isRevealed === true) {
} else if (!cell.isRevealed) { return String(cell.nearbyMines);
return "#"; } 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)
// );
} }
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) { 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: {
this.$nextTick(() => { numberToWin() {
return this.$store.state.numberToWin;
window.addEventListener('keydown', this.keydownHandler); }
this.localNumberOfRows = this.$store.state.numberOfRows; },
this.localNumberOfCols = this.$store.state.numberOfCols; watch: {
this.numberOfMines = this.$store.state.numberOfMines; numberToWin(newVal) {
this.localNumberOfRows = parseInt(this.localNumberOfRows); if (newVal === 0) {
this.localNumberOfCols = parseInt(this.localNumberOfCols); Swal.fire({
this.numberOfMines = parseInt(this.numberOfMines); title: "you win",
text: "Do you want to continue",
// console.log(this.localNumberOfRows," row"); icon: "success",
// console.log(this.localNumberOfCols," col"); showCancelButton: true,
// console.log(this.numberOfMines," mins"); confirmButtonText: "replay",
cancelButtonText: "Do nothing",
// this.minesweeperGrid = JSON.parse(localStorage.getItem("board")); }).then((result) => {
// this.numberToWin = parseInt(localStorage.getItem("numberToWin")); if (result.isConfirmed) {
this.$router.push("/").then(() => window.location.reload());
// console.log(typeof(this.minesweeperGrid),"this is a type"); }
// console.log(this.minesweeperGrid,"this is a type"); });
// if(typeof(this.minesweeperGrid),"this is "){ }
}
},
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.minesweeperGrid = new Minesweeper(
this.localNumberOfRows, this.localNumberOfRows,
this.localNumberOfCols, this.localNumberOfCols,
this.numberOfMines this.numberOfMines
);
// }
localStorage.setItem(
"minesweeperGrid",
JSON.stringify(this.minesweeperGrid)
);
localStorage.setItem(
"numberToWin",
JSON.stringify(this.minesweeperGrid.board.numberToWin)
); );
store.commit("UPDATE_NUMBER_TO_WIN", this.minesweeperGrid.board.numberToWin);
store.commit("UPDATE_MINESWEEPER_GRID", this.minesweeperGrid);
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;
@ -291,7 +290,7 @@ mounted() {
background-color: blue; background-color: blue;
} }
.cell[data-value="1"] { .cell[data-value="1"] {
background-color: pink; background-color: pink;
} }
.cell[data-value="2"] { .cell[data-value="2"] {
background-color: green; background-color: green;

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 {

152
src/components/HelloWorld.vue
View File

@ -1,86 +1,82 @@
<!-- 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) => { let gameData = JSON.parse(event.target.result);
let gameData = JSON.parse(event.target.result); gameData.item = JSON.parse(gameData.item); // Parse the 'item' property
gameData.item = JSON.parse(gameData.item); // Parse the 'item' property gameData.playerName = JSON.parse(gameData.playerName);
gameData.playerName = JSON.parse(gameData.playerName); gameData.rows = JSON.parse(gameData.rows);
gameData.rows = JSON.parse(gameData.rows); 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
this.$store.commit("SET_GAME_DATA", gameData); gameData.redoStack = JSON.parse(gameData.redoStack); // Parse the 'redoStack' property
if (gameData.rows && gameData.cols) { this.$store.commit("SET_GAME_DATA", gameData);
this.numberOfRows = gameData.rows; if (gameData.rows && gameData.cols) {
this.numberOfCols = gameData.cols; this.numberOfRows = gameData.rows;
this.numberOfMines = gameData.mines; this.numberOfCols = gameData.cols;
console.log(gameData, "hhhhh"); // No need to parse gameData again this.numberOfMines = gameData.mines;
this.$store.commit("UPDATE_ROWS", this.numberOfRows); console.log(gameData, "hhhhh"); // No need to parse gameData again
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() {
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(); // let numberToWin = this.numberOfRows * this.numberOfCols - this.numberOfMines;
}, this.$store.commit("UPDATE_NUMBER_TO_WIN", gameData.numberToWin);
createBoard() { this.$store.commit("UPDATE_MINESWEEPER_GRID", gameData.item);
this.$router.push("/game"); 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> </script>

246
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,97 +58,86 @@ 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.play = new Play(); this.undoStack.push({
this.play.doFlagged(row, col); minesweeperGrid: JSON.parse(JSON.stringify(this.minesweeperGrid)),
this.minesweeperGrid = JSON.parse( numberToWin: this.minesweeperGrid.board.numberToWin
localStorage.getItem("minesweeperGrid") });
); this.play = new Play();
this.getCellSymbol(row, col); 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) { cellOpener(row, col) {
// console.log("the row is",row); if (
// console.log("the col is",col); this.minesweeperGrid &&
if ( this.minesweeperGrid.board &&
this.minesweeperGrid && this.minesweeperGrid.board.board &&
this.minesweeperGrid && this.minesweeperGrid.board.board[row] &&
this.minesweeperGrid.board && this.minesweeperGrid.board.board[row][col] &&
this.minesweeperGrid.board.board && !this.minesweeperGrid.board.board[row][col].isFlagged
this.minesweeperGrid.board.board[row] && ) {
this.minesweeperGrid.board.board[row][col] && this.play = new Play();
!this.minesweeperGrid.board.board[row][col].isFlagged if (!this.minesweeperGrid.board.board[row][col].isMine) {
) { this.minesweeperGrid.board.numberToWin = this.$store.state.numberToWin
this.play = new Play(); this.undoStack.push({
if (!this.minesweeperGrid.board.board[row][col].isMine) { minesweeperGrid: JSON.parse(JSON.stringify(this.minesweeperGrid)),
this.minesweeperGrid.board.numberToWin = JSON.parse( numberToWin: this.minesweeperGrid.board.numberToWin
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.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) { 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)], {