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

do load and store

Browse Source
This commit is contained in:
unknown 2024-05-13 16:58:04 +03:00
parent b71887a85b
commit 026e254aca
6 changed files with 468 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
src/components/Board.vue
View File

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

74
src/components/Game.js
View File

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

58
src/components/HelloWorld.vue
View File

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

271
src/components/LoadGame.vue Normal file
View File

@ -0,0 +1,271 @@
<!-- eslint-disable -->
<template>
<div id="app">
<div
v-for="(row, rowIndex) in localNumberOfRows"
:key="`row-${rowIndex}`"
class="row"
>
<div
v-for="(col, colIndex) in localNumberOfCols"
:key="`col-${colIndex}`"
class="cell"
@click="cellOpener(rowIndex, colIndex)"
@contextmenu.prevent="isCellFlagged(rowIndex, colIndex)"
:data-value="getCellSymbol(rowIndex, colIndex)"
:class="{ revealed: isCellRevealed(rowIndex, colIndex) }"
>
{{ getCellSymbol(rowIndex, colIndex) }}
</div>
</div>
<v-btn @click="saver()">save</v-btn>
</div>
</template>
<!-- eslint-disable -->
<script>
import Swal from "sweetalert2";
import { Minesweeper, EndGame, Play } from "./Game";
export default {
data: function () {
return {
localNumberOfRows: 0,
localNumberOfCols: 0,
minesweeperGrid: null,
numberOfMines: 0,
item: null,
};
},
name: "Board",
methods: {
isCellRevealed(row, col) {
let cell;
if (
this.minesweeperGrid &&
this.minesweeperGrid &&
this.minesweeperGrid.board &&
this.minesweeperGrid.board.board &&
this.minesweeperGrid.board.board[row] &&
row < this.localNumberOfRows &&
col < this.localNumberOfCols
) {
cell = this.minesweeperGrid.board.board[row][col];
if (cell) {
return cell.isRevealed;
}
}
return false; // return false when minesweeperGrid is null or the cell doesn't exist
},
isCellFlagged(row, col) {
this.play = new Play();
this.play.doFlagged(row, col);
this.minesweeperGrid = JSON.parse(
localStorage.getItem("minesweeperGrid")
);
this.getCellSymbol(row, col);
// Update the game state in the component and in local storage
this.$forceUpdate();
localStorage.setItem(
"minesweeperGrid",
JSON.stringify(this.minesweeperGrid)
);
},
cellOpener(row, col) {
// console.log("the row is",row);
// console.log("the col is",col);
if (
this.minesweeperGrid &&
this.minesweeperGrid &&
this.minesweeperGrid.board &&
this.minesweeperGrid.board.board &&
this.minesweeperGrid.board.board[row] &&
this.minesweeperGrid.board.board[row][col] &&
!this.minesweeperGrid.board.board[row][col].isFlagged
) {
this.play = new Play();
if (!this.minesweeperGrid.board.board[row][col].isMine) {
this.minesweeperGrid.board.numberToWin = JSON.parse(
localStorage.getItem("numberToWin")
);
if (this.minesweeperGrid.board.numberToWin > 1) {
this.play.onClick(row, col);
this.minesweeperGrid.board.numberToWin--;
localStorage.setItem(
"numberToWin",
this.minesweeperGrid.board.numberToWin
);
this.minesweeperGrid = JSON.parse(
localStorage.getItem("minesweeperGrid")
);
} else {
Swal.fire({
title: "you win",
text: "Do you want to continue",
icon: "success",
showCancelButton: true,
confirmButtonText: "replay",
cancelButtonText: "Do nothing",
}).then((result) => {
if (result.isConfirmed) {
this.$router.push("/")
.then(() => window.location.reload())}
});
}
} else {
Swal.fire({
title: "you lose",
text: "Do you want to continue",
icon: "error",
showCancelButton: true,
confirmButtonText: "replay",
cancelButtonText: "Do nothing",
}).then((result) => {
if (result.isConfirmed) {
this.$router.push("/")
.then(() => window.location.reload())}
});
}
this.$forceUpdate();
localStorage.setItem(
"minesweeperGrid",
JSON.stringify(this.minesweeperGrid)
);
this.getCellSymbol(row, col);
}
},
saver() {
this.$store.dispatch("writeOnFile", {
name: "yazan",
board: this.minesweeperGrid,
rows: this.localNumberOfRows,
cols: this.localNumberOfCols,
mines: this.numberOfMines,
numberToWin: this.minesweeperGrid.board.numberToWin,
});
},
getCellSymbol(row, col) {
if (
this.minesweeperGrid &&
this.minesweeperGrid &&
this.minesweeperGrid.board &&
this.minesweeperGrid.board.board &&
this.minesweeperGrid.board.board[row] &&
row < this.localNumberOfRows &&
col < this.localNumberOfCols
) {
let cell = this.minesweeperGrid.board.board[row][col];
if (cell) {
if (cell.isFlagged) {
return "F";
} else if (cell.isRevealed === true) {
return String(cell.nearbyMines); // Convert to string before returning
} else if (!cell.isRevealed) {
return "#";
}
}
}
return "#"; // return "#" when minesweeperGrid is null or the cell doesn't exist
},
},
mounted() {
this.$nextTick(() => {
this.localNumberOfRows = this.$store.state.numberOfRows;
this.localNumberOfCols = this.$store.state.numberOfCols;
this.numberOfMines = this.$store.state.numberOfMines;
this.localNumberOfRows = parseInt(this.localNumberOfRows);
this.localNumberOfCols = parseInt(this.localNumberOfCols);
this.numberOfMines = parseInt(this.numberOfMines);
let minesweeperGrid = JSON.parse(localStorage.getItem("minesweeperGrid"));
if (typeof minesweeperGrid === "string") {
minesweeperGrid = JSON.parse(minesweeperGrid); // Parse the 'item' property
}
this.minesweeperGrid = minesweeperGrid;
this.numberToWin = parseInt(localStorage.getItem("numberToWin"));
});
},
};
</script>
<!-- eslint-disable -->
<style>
#app {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
/* background-color: #f5f5f5; */
}
.row {
display: flex;
justify-content: center;
}
.cell {
width: 30px;
height: 30px;
border: 1px solid #333;
margin: 2px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: #ccc;
cursor: pointer;
transition: background-color 0.3s ease;
}
.cell:hover {
background-color: #aaa;
}
.v-btn {
margin-top: 20px;
align-self: center;
}
/* Unique colors for each number */
.cell[data-value="0"] {
background-color: blue;
}
.cell[data-value="1"] {
background-color: pink;
}
.cell[data-value="2"] {
background-color: green;
}
.cell[data-value="3"] {
background-color: red;
}
.cell[data-value="4"] {
background-color: purple;
}
.cell[data-value="5"] {
background-color: maroon;
}
.cell[data-value="6"] {
background-color: turquoise;
}
.cell[data-value="7"] {
background-color: black;
}
.cell[data-value="8"] {
background-color: gray;
}
/* Animation when a cell is revealed */
@keyframes reveal {
0% {
background-color: #ccc;
}
100% {
background-color: #eee;
}
}
.cell.revealed {
animation: reveal 0.3s ease;
}
</style>

10
src/router/index.js
View File

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

18
src/store/index.js
View File

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