yazanMatar
This commit is contained in:
yazan matar
parent
dde13cbdca
commit
4367b0255f
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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(() => {
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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)], {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user