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

100
src/components/Board.vue
View File

@ -10,14 +10,15 @@
v-for="(col, colIndex) in localNumberOfCols" v-for="(col, colIndex) in localNumberOfCols"
:key="`col-${colIndex}`" :key="`col-${colIndex}`"
class="cell" class="cell"
@click="isCorrect(rowIndex, colIndex)" @click="cellOpener(rowIndex, colIndex)"
@contextmenu.prevent="isCellFlagged(rowIndex, colIndex)"
:data-value="getCellSymbol(rowIndex, colIndex)" :data-value="getCellSymbol(rowIndex, colIndex)"
:class="{ revealed: isCellRevealed(rowIndex, colIndex) }" :class="{ revealed: isCellRevealed(rowIndex, colIndex) }"
> >
{{ getCellSymbol(rowIndex, colIndex) }} {{ getCellSymbol(rowIndex, colIndex) }}
</div> </div>
</div> </div>
<v-btn @click="startGame()">save</v-btn> <v-btn @click="saver()">save</v-btn>
</div> </div>
</template> </template>
<!-- eslint-disable --> <!-- eslint-disable -->
@ -28,34 +29,53 @@ import { Minesweeper, EndGame, Play } from "./Game";
export default { export default {
data: function () { data: function () {
return { return {
localNumberOfRows: null, localNumberOfRows: 0,
localNumberOfCols: null, localNumberOfCols: 0,
minesweeperGrid: null, minesweeperGrid: null,
numberOfMines: 0,
item: null,
}; };
}, },
name: "Board", name: "Board",
props: { // props: { numberOfRows: Number, numberOfCols: Number },
numberOfRows: Number,
numberOfCols: Number,
},
methods: { methods: {
isCellRevealed(row, col) { isCellRevealed(row, col) {
let cell;
if ( if (
this.minesweeperGrid && this.minesweeperGrid &&
this.minesweeperGrid.board &&
this.minesweeperGrid.board.board &&
this.minesweeperGrid.board.board[row] &&
row < this.localNumberOfRows && row < this.localNumberOfRows &&
col < this.localNumberOfCols col < this.localNumberOfCols
) { ) {
let 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
}, },
isCorrect(row, col) { isCellFlagged(row, col) {
if (this.minesweeperGrid.board.board[row][col].isRevealed === false) {
this.play = new Play(); this.play = new Play();
if (this.minesweeperGrid.board.board[row][col].isMine === false) { this.play.doFlagged(row, col);
this.minesweeperGrid = JSON.parse(
localStorage.getItem("minesweeperGrid")
);
this.getCellSymbol(row, col);
},
cellOpener(row, col) {
if (
this.minesweeperGrid &&
this.minesweeperGrid.board &&
this.minesweeperGrid.board.board &&
this.minesweeperGrid.board.board[row] &&
this.minesweeperGrid.board.board[row][col] &&
!this.minesweeperGrid.board.board[row][col].isFlagged
) {
this.play = new Play();
if (!this.minesweeperGrid.board.board[row][col].isMine) {
this.minesweeperGrid.board.numberToWin = JSON.parse( this.minesweeperGrid.board.numberToWin = JSON.parse(
localStorage.getItem("numberToWin") localStorage.getItem("numberToWin")
); );
@ -71,8 +91,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())}
}); });
} }
} else { } else {
@ -85,8 +105,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())}
}); });
} }
this.minesweeperGrid = JSON.parse( this.minesweeperGrid = JSON.parse(
@ -95,25 +115,33 @@ export default {
this.getCellSymbol(row, col); this.getCellSymbol(row, col);
} }
}, },
startGame() { saver() {
this.$store.dispatch("writeOnFile", { this.$store.dispatch("writeOnFile", {
name: "yazan", name: "yazan",
board: this.minesweeperGrid.board.board, board: this.minesweeperGrid,
rows: this.localNumberOfRows, rows: this.localNumberOfRows,
cols: this.localNumberOfCols, 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) { getCellSymbol(row, col) {
if ( if (
this.minesweeperGrid && this.minesweeperGrid &&
this.minesweeperGrid.board &&
this.minesweeperGrid.board.board &&
this.minesweeperGrid.board.board[row] &&
row < this.localNumberOfRows && row < this.localNumberOfRows &&
col < this.localNumberOfCols col < this.localNumberOfCols
) { ) {
let cell = this.minesweeperGrid.board.board[row][col]; let cell = this.minesweeperGrid.board.board[row][col];
if (cell) { if (cell) {
if (cell.isFlagged === 1) { if (cell.isFlagged) {
console.log("yazan"); 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); // Convert to string before returning
} else if (!cell.isRevealed) { } 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() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.localNumberOfRows = parseInt(localStorage.getItem("numberOfRows")); this.localNumberOfRows = this.$store.state.numberOfRows;
this.localNumberOfCols = parseInt(localStorage.getItem("numberOfCols")); this.localNumberOfCols = this.$store.state.numberOfCols;
this.numberOfMines = parseInt(localStorage.getItem("numberOfMines")); this.numberOfMines = this.$store.state.numberOfMines;
this.localNumberOfRows = parseInt(this.localNumberOfRows);
this.localNumberOfCols = parseInt(this.localNumberOfCols);
this.numberOfMines = parseInt(this.numberOfMines);
// console.log(this.localNumberOfRows," row");
// console.log(this.localNumberOfCols," col");
// console.log(this.numberOfMines," mins");
// this.minesweeperGrid = JSON.parse(localStorage.getItem("board"));
// this.numberToWin = parseInt(localStorage.getItem("numberToWin"));
// console.log(typeof(this.minesweeperGrid),"this is a type");
// console.log(this.minesweeperGrid,"this is a type");
// if(typeof(this.minesweeperGrid),"this is "){
this.minesweeperGrid = new Minesweeper( this.minesweeperGrid = new Minesweeper(
this.localNumberOfRows, this.localNumberOfRows,
this.localNumberOfCols, this.localNumberOfCols,
this.numberOfMines this.numberOfMines
); );
// }
localStorage.setItem( localStorage.setItem(
"minesweeperGrid", "minesweeperGrid",
JSON.stringify(this.minesweeperGrid) JSON.stringify(this.minesweeperGrid)
@ -155,7 +198,7 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 20px; padding: 20px;
background-color: #f5f5f5; /* background-color: #f5f5f5; */
} }
.row { .row {
@ -187,9 +230,12 @@ export default {
} }
/* Unique colors for each number */ /* Unique colors for each number */
.cell[data-value="1"] { .cell[data-value="0"] {
background-color: blue; background-color: blue;
} }
.cell[data-value="1"] {
background-color: pink;
}
.cell[data-value="2"] { .cell[data-value="2"] {
background-color: green; background-color: green;
} }

74
src/components/Game.js
View File

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

58
src/components/HelloWorld.vue
View File

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

18
src/store/index.js
View File

@ -5,21 +5,34 @@ import axios from "axios";
export default createStore({ export default createStore({
state: { state: {
gameData: {}, gameData: {},
numberOfCols: 0,
numberOfMines: 0,
numberOfRows: 0,
}, },
mutations: { mutations: {
SET_GAME_DATA(state, payload) { SET_GAME_DATA(state, payload) {
state.gameData = 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: { actions: {
writeOnFile({ commit }, { name, board, rows, cols }) { writeOnFile({ commit }, { name, board, rows, cols, mines, numberToWin }) {
let dataForGame = { let dataForGame = {
playerName: JSON.stringify(name), playerName: JSON.stringify(name),
item: JSON.stringify(board), item: JSON.stringify(board),
rows: JSON.stringify(rows), rows: JSON.stringify(rows),
cols: JSON.stringify(cols), cols: JSON.stringify(cols),
mines: JSON.stringify(mines),
numberToWin: JSON.stringify(numberToWin),
}; };
// 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)], {
type: "application/json", type: "application/json",
@ -29,7 +42,6 @@ export default createStore({
link.href = url; link.href = url;
link.download = "gameData.json"; link.download = "gameData.json";
link.click(); link.click();
commit("SET_GAME_DATA", dataForGame); commit("SET_GAME_DATA", dataForGame);
}, },
}, },