init project
This commit is contained in:
unknown
parent
2d6f814223
commit
9fa2289bf7
599
package-lock.json
generated
599
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
12
package.json
12
package.json
|
|
@ -8,10 +8,16 @@
|
||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@mdi/font": "5.9.55",
|
||||||
|
"axios": "^1.6.8",
|
||||||
"core-js": "^3.8.3",
|
"core-js": "^3.8.3",
|
||||||
|
"roboto-fontface": "*",
|
||||||
|
"sweetalert2": "^11.10.8",
|
||||||
"vue": "^3.2.13",
|
"vue": "^3.2.13",
|
||||||
"vue-router": "^4.0.3",
|
"vue-router": "^4.0.3",
|
||||||
"vuex": "^4.0.0"
|
"vuetify": "^3.0.0-beta.0",
|
||||||
|
"vuex": "^4.0.2",
|
||||||
|
"webfontloader": "^1.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.12.16",
|
"@babel/core": "^7.12.16",
|
||||||
|
|
@ -25,7 +31,9 @@
|
||||||
"eslint-config-prettier": "^8.3.0",
|
"eslint-config-prettier": "^8.3.0",
|
||||||
"eslint-plugin-prettier": "^4.0.0",
|
"eslint-plugin-prettier": "^4.0.0",
|
||||||
"eslint-plugin-vue": "^8.0.3",
|
"eslint-plugin-vue": "^8.0.3",
|
||||||
"prettier": "^2.4.1"
|
"prettier": "^2.4.1",
|
||||||
|
"vue-cli-plugin-vuetify": "~2.5.8",
|
||||||
|
"webpack-plugin-vuetify": "^2.0.0-alpha.0"
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"root": true,
|
"root": true,
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
|
|
||||||
37
src/App.vue
37
src/App.vue
|
|
@ -1,30 +1,17 @@
|
||||||
<template>
|
<template>
|
||||||
<nav>
|
<v-app>
|
||||||
<router-link to="/">Home</router-link> |
|
<v-main>
|
||||||
<router-link to="/about">About</router-link>
|
|
||||||
</nav>
|
|
||||||
<router-view />
|
<router-view />
|
||||||
|
</v-main>
|
||||||
|
</v-app>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
<script>
|
||||||
#app {
|
export default {
|
||||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
name: "App",
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
text-align: center;
|
|
||||||
color: #2c3e50;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
data: () => ({
|
||||||
padding: 30px;
|
//
|
||||||
}
|
}),
|
||||||
|
};
|
||||||
nav a {
|
</script>
|
||||||
font-weight: bold;
|
|
||||||
color: #2c3e50;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a.router-link-exact-active {
|
|
||||||
color: #42b983;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
6
src/assets/logo.svg
Normal file
6
src/assets/logo.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<svg width="488" height="424" viewBox="0 0 488 424" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M249.126 95.017L151.843 263.694L243.959 423.473L365.966 211.973L487.918 0.473206H303.629L249.126 95.017Z" fill="#1697F6"/>
|
||||||
|
<path d="M122.007 211.973L128.396 223.096L219.402 65.2635L256.793 0.473206H243.959H0L122.007 211.973Z" fill="#AEDDFF"/>
|
||||||
|
<path d="M303.629 0.473206C349.743 152.355 243.959 423.473 243.959 423.473L151.843 263.694L303.629 0.473206Z" fill="#1867C0"/>
|
||||||
|
<path d="M256.793 0.473206C62.5042 0.473206 128.397 223.096 128.397 223.096L256.793 0.473206Z" fill="#7BC6FF"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 598 B |
227
src/components/Board.vue
Normal file
227
src/components/Board.vue
Normal file
|
|
@ -0,0 +1,227 @@
|
||||||
|
<!-- 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="isCorrect(rowIndex, colIndex)"
|
||||||
|
:data-value="getCellSymbol(rowIndex, colIndex)"
|
||||||
|
:class="{ revealed: isCellRevealed(rowIndex, colIndex) }"
|
||||||
|
>
|
||||||
|
{{ getCellSymbol(rowIndex, colIndex) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<v-btn @click="startGame()">save</v-btn>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<!-- eslint-disable -->
|
||||||
|
<script>
|
||||||
|
import Swal from "sweetalert2";
|
||||||
|
import { Minesweeper, EndGame, Play } from "./Game";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
|
localNumberOfRows: null,
|
||||||
|
localNumberOfCols: null,
|
||||||
|
minesweeperGrid: null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
name: "Board",
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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) {
|
||||||
|
this.play = new Play();
|
||||||
|
if (this.minesweeperGrid.board.board[row][col].isMine === false) {
|
||||||
|
this.minesweeperGrid.board.numberToWin = JSON.parse(
|
||||||
|
localStorage.getItem("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("/");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} 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("/");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.minesweeperGrid = JSON.parse(
|
||||||
|
localStorage.getItem("minesweeperGrid")
|
||||||
|
);
|
||||||
|
this.getCellSymbol(row, col);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
startGame() {
|
||||||
|
this.$store.dispatch("writeOnFile", {
|
||||||
|
name: "yazan",
|
||||||
|
board: this.minesweeperGrid.board.board,
|
||||||
|
rows: this.localNumberOfRows,
|
||||||
|
cols: this.localNumberOfCols,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getCellSymbol(row, col) {
|
||||||
|
if (
|
||||||
|
this.minesweeperGrid &&
|
||||||
|
row < this.localNumberOfRows &&
|
||||||
|
col < this.localNumberOfCols
|
||||||
|
) {
|
||||||
|
let cell = this.minesweeperGrid.board.board[row][col];
|
||||||
|
if (cell) {
|
||||||
|
if (cell.isFlagged === 1) {
|
||||||
|
return " F";
|
||||||
|
} else if (cell.isRevealed === true) {
|
||||||
|
return String(cell.nearbyMines); // Convert to string before returning
|
||||||
|
} else if (!cell.isRevealed) {
|
||||||
|
return "#";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return "gg"; // return an empty string or some default value 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.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)
|
||||||
|
);
|
||||||
|
return this.minesweeperGrid;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</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="1"] {
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
.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>
|
||||||
0
src/components/Data.js
Normal file
0
src/components/Data.js
Normal file
376
src/components/Game.js
Normal file
376
src/components/Game.js
Normal file
|
|
@ -0,0 +1,376 @@
|
||||||
|
/*eslint-disable*/
|
||||||
|
// const readline = require("readline");
|
||||||
|
// var fs = require("fs");
|
||||||
|
// module.exports = {
|
||||||
|
// resolve: {
|
||||||
|
// fallback: {
|
||||||
|
// fs: false,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// };
|
||||||
|
// const { start } = require("repl");
|
||||||
|
// const { log } = require("console");
|
||||||
|
// const rl = readline.createInterface({
|
||||||
|
// input: process.stdin,
|
||||||
|
// output: process.stdout,
|
||||||
|
// });
|
||||||
|
import minesweeperGrid from "./Board.vue";
|
||||||
|
|
||||||
|
class Cell {
|
||||||
|
constructor() {
|
||||||
|
this.isMine = false;
|
||||||
|
this.isRevealed = false;
|
||||||
|
this.isFlagged = 0;
|
||||||
|
this.nearbyMines = 0;
|
||||||
|
this.isHint = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
class Board {
|
||||||
|
constructor(numberOfRows, numberOfCols, numberOfMines) {
|
||||||
|
this.numberOfRows = numberOfRows;
|
||||||
|
this.numberOfCols = numberOfCols;
|
||||||
|
this.numberOfMines = numberOfMines;
|
||||||
|
this.numberOfFlags = this.numberOfMines;
|
||||||
|
this.board = Array.from({ length: numberOfRows }, () =>
|
||||||
|
Array.from({ length: numberOfCols }, () => new Cell())
|
||||||
|
);
|
||||||
|
this.numberToWin =
|
||||||
|
this.numberOfRows * this.numberOfCols - this.numberOfMines;
|
||||||
|
// console.log(this.numberOfRows, "tt");
|
||||||
|
// console.log(this.numberOfCols, "tt");
|
||||||
|
// console.log(this.numberOfMines, "tt");
|
||||||
|
// console.log(this.numberOfFlags, "tt");
|
||||||
|
// console.log(this.numberToWin, "tt");
|
||||||
|
this.putMine(this.numberOfMines);
|
||||||
|
}
|
||||||
|
putMine(numberOfMines) {
|
||||||
|
for (let i = 0; i < numberOfMines; ) {
|
||||||
|
let row = Math.floor(Math.random() * this.numberOfRows);
|
||||||
|
let col = Math.floor(Math.random() * this.numberOfCols);
|
||||||
|
if (!this.board[row][col].isMine) {
|
||||||
|
this.board[row][col].isMine = true;
|
||||||
|
i++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
makeNumberInBlock(row, col) {
|
||||||
|
let theNumberOfMines = 0;
|
||||||
|
// console.log();
|
||||||
|
if (this.board[row][col].isMine === false) {
|
||||||
|
for (let dy = -1; dy <= 1; dy++) {
|
||||||
|
for (let dx = -1; dx <= 1; dx++) {
|
||||||
|
const newRow = row + dy;
|
||||||
|
const newCol = col + dx;
|
||||||
|
if (
|
||||||
|
newRow >= 0 &&
|
||||||
|
newRow < this.numberOfRows &&
|
||||||
|
newCol >= 0 &&
|
||||||
|
newCol < this.numberOfCols &&
|
||||||
|
this.board[newRow][newCol].isMine
|
||||||
|
) {
|
||||||
|
theNumberOfMines++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.board[row][col].nearbyMines = theNumberOfMines;
|
||||||
|
} else {
|
||||||
|
this.board[row][col].nearbyMines = "##";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class EndGame extends Board {
|
||||||
|
savingFunction() {
|
||||||
|
rl.question("enter your name: \n", (answer) => {
|
||||||
|
let name = answer;
|
||||||
|
this.writeOnFile(name);
|
||||||
|
rl.close();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
writeOnFile(name, board, rows, cols) {
|
||||||
|
console.log("Writing into a file");
|
||||||
|
let dataForGame = {
|
||||||
|
playerName: JSON.stringify(name),
|
||||||
|
item: JSON.stringify(board),
|
||||||
|
rows: JSON.stringify(rows),
|
||||||
|
cols: JSON.stringify(cols),
|
||||||
|
};
|
||||||
|
fs.readFile("games.json", "utf8", (err, data) => {
|
||||||
|
if (err) {
|
||||||
|
console.error(err);
|
||||||
|
data = '{"games": []}';
|
||||||
|
}
|
||||||
|
let allGames = JSON.parse(data);
|
||||||
|
allGames.games.push(dataForGame);
|
||||||
|
fs.writeFile(
|
||||||
|
"newGames.json",
|
||||||
|
JSON.stringify(allGames, null, 2),
|
||||||
|
(err) => {
|
||||||
|
if (err) {
|
||||||
|
return console.error(err);
|
||||||
|
}
|
||||||
|
console.log("Data written to file");
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
finishAndGameOver() {
|
||||||
|
for (let i = 0; i < this.numberOfRows; i++) {
|
||||||
|
let row = "";
|
||||||
|
for (let j = 0; j < this.numberOfCols; j++) {
|
||||||
|
if (this.board[i][j].isFlagged === 1) {
|
||||||
|
row += "F";
|
||||||
|
} else if (this.board[i][j].isMine) {
|
||||||
|
row += "M";
|
||||||
|
} else if (this.board[i][j].isRevealed) {
|
||||||
|
row += this.board[i][j].isMine ? "M" : this.board[i][j].nearbyMines;
|
||||||
|
} else {
|
||||||
|
row += "#";
|
||||||
|
}
|
||||||
|
row += " ";
|
||||||
|
}
|
||||||
|
console.log(row);
|
||||||
|
}
|
||||||
|
console.log("Game Over");
|
||||||
|
end = new Date().getTime();
|
||||||
|
time = Math.ceil((end - timeForStart) / 1000) + timeInFile;
|
||||||
|
// console.log("end", end);
|
||||||
|
// console.log("startTime", startTime);
|
||||||
|
// console.log("start", timeForStart);
|
||||||
|
// console.log("timeInFile", timeInFile);
|
||||||
|
// console.log("time", time);
|
||||||
|
console.log("the time you spend in this game is : " + time + " second");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export class Play extends EndGame {
|
||||||
|
replay() {
|
||||||
|
rl.question(
|
||||||
|
'do you want to play again (0 for no 1 for yes) ex"0": \n',
|
||||||
|
(answer) => {
|
||||||
|
const [playAgain] = answer.split(" ").map(Number);
|
||||||
|
if (playAgain === 0) {
|
||||||
|
rl.close();
|
||||||
|
} else if (playAgain === 1) {
|
||||||
|
startGame.makeSizeOfGame();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
printBoard() {
|
||||||
|
for (let i = 0; i < this.numberOfRows; i++) {
|
||||||
|
let row = "";
|
||||||
|
for (let j = 0; j < this.numberOfCols; j++) {
|
||||||
|
if (this.board[i][j].isFlagged === 1) {
|
||||||
|
row += "F";
|
||||||
|
} else if (this.board[i][j].isRevealed) {
|
||||||
|
row += this.board[i][j].nearbyMines;
|
||||||
|
} else {
|
||||||
|
row += "#";
|
||||||
|
}
|
||||||
|
row += " ";
|
||||||
|
}
|
||||||
|
console.log(row);
|
||||||
|
}
|
||||||
|
// this.game();
|
||||||
|
}
|
||||||
|
game() {
|
||||||
|
rl.question(
|
||||||
|
'Enter row and col number and a bool flag(1 for true/0 for false) you want to open or write "save" for save this game ex "1 1 0": \n',
|
||||||
|
(answer) => {
|
||||||
|
if (answer === "exit") {
|
||||||
|
rl.close();
|
||||||
|
} else if (answer === "save") {
|
||||||
|
this.savingFunction();
|
||||||
|
} else {
|
||||||
|
const [row, col, isFlagged] = answer.split(" ").map(Number);
|
||||||
|
if (isFlagged === 0) {
|
||||||
|
if (this.board[row - 1][col - 1].isMine === true) {
|
||||||
|
this.finishAndGameOver();
|
||||||
|
this.replay();
|
||||||
|
} else {
|
||||||
|
// console.log(this.numberToWin);
|
||||||
|
if (this.numberToWin > 1) {
|
||||||
|
this.onClick(row - 1, col - 1);
|
||||||
|
this.printBoard();
|
||||||
|
this.game();
|
||||||
|
} else {
|
||||||
|
this.onClick(row - 1, col - 1);
|
||||||
|
this.printBoard();
|
||||||
|
end = new Date().getTime();
|
||||||
|
time = Math.ceil((end - timeForStart) / 1000) + timeInFile;
|
||||||
|
console.log(
|
||||||
|
"the time you spend in this game is : " + time + " second"
|
||||||
|
);
|
||||||
|
console.log("you win");
|
||||||
|
this.replay();
|
||||||
|
// rl.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (isFlagged === 1) {
|
||||||
|
this.doFlagged(row - 1, col - 1);
|
||||||
|
this.printBoard();
|
||||||
|
this.game();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log("i cannot put the flag");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onClick(row, col) {
|
||||||
|
this.board = JSON.parse(localStorage.getItem("minesweeperGrid"));
|
||||||
|
this.numberToWin = JSON.parse(localStorage.getItem("numberToWin"));
|
||||||
|
|
||||||
|
let queue = [[row, col]];
|
||||||
|
|
||||||
|
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 = true;
|
||||||
|
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++) {
|
||||||
|
if (
|
||||||
|
i >= 0 &&
|
||||||
|
j >= 0 &&
|
||||||
|
i < this.board.board.board.length &&
|
||||||
|
j < this.board.board.board[0].length &&
|
||||||
|
this.board.board.board[i][j].isRevealed === false
|
||||||
|
) {
|
||||||
|
queue.push([i, j]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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.play = new Play(numberOfRows, numberOfCols);
|
||||||
|
this.timeInFile = 0;
|
||||||
|
}
|
||||||
|
start() {
|
||||||
|
startTime = new Date().getTime();
|
||||||
|
timeForStart = startTime;
|
||||||
|
this.play.printBoard();
|
||||||
|
this.play.game();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// class StartGame {
|
||||||
|
// startTabel() {
|
||||||
|
// rl.question("1) start game \n2) load game \n", (answer) => {
|
||||||
|
// if (answer === "1") {
|
||||||
|
// this.makeSizeOfGame();
|
||||||
|
// } else if (answer === "2") {
|
||||||
|
// this.loadGame();
|
||||||
|
// } else {
|
||||||
|
// console.log("enter the correct number");
|
||||||
|
// startTabel();
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// async loadGame() {
|
||||||
|
// try {
|
||||||
|
// const answer = await new Promise((resolve) => {
|
||||||
|
// rl.question("Enter your name to get your game:\n", (input) => {
|
||||||
|
// resolve(input);
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
// let oldName = answer;
|
||||||
|
// this.readFromFile(oldName);
|
||||||
|
// } catch (error) {
|
||||||
|
// console.error("Error:", error.message);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// async readFromFile(oldName) {
|
||||||
|
// try {
|
||||||
|
// let data = await fs.promises.readFile("games.json", "utf8");
|
||||||
|
// let parsedData = JSON.parse(data);
|
||||||
|
// let oldGame = parsedData.games.find(
|
||||||
|
// (oldGame) => JSON.parse(oldGame.playerName) === oldName
|
||||||
|
// );
|
||||||
|
// if (!oldGame) {
|
||||||
|
// console.error("No game found for player:", oldName);
|
||||||
|
// rl.close();
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// let name = JSON.parse(oldGame.playerName);
|
||||||
|
// console.log("hello " + name + " this is your game");
|
||||||
|
// this.numberOfRows = JSON.parse(oldGame.rows);
|
||||||
|
// this.numberOfCols = JSON.parse(oldGame.cols);
|
||||||
|
// const game = new Minesweeper(this.numberOfRows, this.numberOfCols);
|
||||||
|
// this.board = JSON.parse(oldGame.item);
|
||||||
|
// timeInFile = JSON.parse(oldGame.timeInGame);
|
||||||
|
// this.play = new Play(this.numberOfRows, this.numberOfCols);
|
||||||
|
// startTime = new Date().getTime();
|
||||||
|
// timeForStart = startTime;
|
||||||
|
// this.play.printBoard();
|
||||||
|
// this.play.game();
|
||||||
|
// } catch (err) {
|
||||||
|
// console.error(err);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// makeSizeOfGame() {
|
||||||
|
// rl.question(
|
||||||
|
// 'Enter row and col and number you want to play ex "1 1 ": ',
|
||||||
|
// (answer) => {
|
||||||
|
// const [row, col] = answer.split(" ").map(Number);
|
||||||
|
// if (row > 1 && col > 1 && row < 15 && col < 15) {
|
||||||
|
// const game = new Minesweeper(row, col);
|
||||||
|
// game.start();
|
||||||
|
// } else {
|
||||||
|
// console.log("the board is not in the rang from 2 to 15");
|
||||||
|
// this.makeSizeOfGame();
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
let time = 0,
|
||||||
|
timeInFile = 0;
|
||||||
|
var startTime = 0;
|
||||||
|
let timeForStart = 0;
|
||||||
|
let end = 0;
|
||||||
|
// const startGame = new StartGame();
|
||||||
|
// startGame.startTabel();
|
||||||
|
|
@ -1,130 +1,92 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="hello">
|
<v-container>
|
||||||
<h1>{{ msg }}</h1>
|
<v-text-field
|
||||||
<p>
|
label="number of rows"
|
||||||
For a guide and recipes on how to configure / customize this project,<br />
|
v-model="numberOfRows"
|
||||||
check out the
|
type="number"
|
||||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
|
></v-text-field>
|
||||||
>vue-cli documentation</a
|
<v-text-field
|
||||||
>.
|
label="number of cols"
|
||||||
</p>
|
v-model="numberOfCols"
|
||||||
<h3>Installed CLI Plugins</h3>
|
type="number"
|
||||||
<ul>
|
></v-text-field>
|
||||||
<li>
|
<v-text-field
|
||||||
<a
|
label="number of mines"
|
||||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
|
v-model="numberOfMines"
|
||||||
target="_blank"
|
type="number"
|
||||||
rel="noopener"
|
></v-text-field>
|
||||||
>babel</a
|
<v-btn @click="startGame">start</v-btn>
|
||||||
>
|
<v-btn @click="loadGame">load</v-btn>
|
||||||
</li>
|
<input
|
||||||
<li>
|
type="file"
|
||||||
<a
|
ref="fileInput"
|
||||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
|
@change="handleFileUpload"
|
||||||
target="_blank"
|
style="display: none"
|
||||||
rel="noopener"
|
/>
|
||||||
>router</a
|
</v-container>
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>vuex</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>eslint</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<h3>Essential Links</h3>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
|
|
||||||
>Forum</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
|
|
||||||
>Community Chat</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
|
|
||||||
>Twitter</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<h3>Ecosystem</h3>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
|
|
||||||
>vue-router</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/vuejs/vue-devtools#vue-devtools"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>vue-devtools</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
|
|
||||||
>vue-loader</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/vuejs/awesome-vue"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>awesome-vue</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "HelloWorld",
|
name: "HelloWorld",
|
||||||
props: {
|
data: () => ({
|
||||||
msg: String,
|
numberOfCols: 2,
|
||||||
|
numberOfRows: 2,
|
||||||
|
numberOfMines: 2,
|
||||||
|
}),
|
||||||
|
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);
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
reader.readAsText(file);
|
||||||
|
this.$router.push("/game");
|
||||||
|
},
|
||||||
|
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
|
||||||
|
this.createBoard();
|
||||||
|
},
|
||||||
|
createBoard() {
|
||||||
|
// Add your board creation logic here
|
||||||
|
this.$router.push("/game");
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
||||||
<style scoped>
|
|
||||||
h3 {
|
|
||||||
margin: 40px 0 0;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: #42b983;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,11 @@
|
||||||
import { createApp } from "vue";
|
import { createApp } from "vue";
|
||||||
import App from "./App.vue";
|
import App from "./App.vue";
|
||||||
|
import Vuex from "vuex";
|
||||||
import router from "./router";
|
import router from "./router";
|
||||||
import store from "./store";
|
import store from "./store";
|
||||||
|
import vuetify from "./plugins/vuetify";
|
||||||
|
import { loadFonts } from "./plugins/webfontloader";
|
||||||
|
|
||||||
createApp(App).use(store).use(router).mount("#app");
|
loadFonts();
|
||||||
|
|
||||||
|
createApp(App).use(Vuex).use(router).use(store).use(vuetify).mount("#app");
|
||||||
|
|
|
||||||
9
src/plugins/vuetify.js
Normal file
9
src/plugins/vuetify.js
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
// Styles
|
||||||
|
import "@mdi/font/css/materialdesignicons.css";
|
||||||
|
import "vuetify/styles";
|
||||||
|
|
||||||
|
// Vuetify
|
||||||
|
import { createVuetify } from "vuetify";
|
||||||
|
|
||||||
|
export default createVuetify();
|
||||||
|
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
|
||||||
17
src/plugins/webfontloader.js
Normal file
17
src/plugins/webfontloader.js
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
/**
|
||||||
|
* plugins/webfontloader.js
|
||||||
|
*
|
||||||
|
* webfontloader documentation: https://github.com/typekit/webfontloader
|
||||||
|
*/
|
||||||
|
|
||||||
|
export async function loadFonts() {
|
||||||
|
const webFontLoader = await import(
|
||||||
|
/* webpackChunkName: "webfontloader" */ "webfontloader"
|
||||||
|
);
|
||||||
|
|
||||||
|
webFontLoader.load({
|
||||||
|
google: {
|
||||||
|
families: ["Roboto:100,300,400,500,700,900&display=swap"],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
0
src/result.txt
Normal file
0
src/result.txt
Normal file
|
|
@ -16,6 +16,16 @@ const routes = [
|
||||||
component: () =>
|
component: () =>
|
||||||
import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
|
import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/game",
|
||||||
|
name: "Board",
|
||||||
|
// 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/Board.vue"),
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,36 @@
|
||||||
|
/* eslint-disable */
|
||||||
import { createStore } from "vuex";
|
import { createStore } from "vuex";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
export default createStore({
|
export default createStore({
|
||||||
state: {},
|
state: {
|
||||||
getters: {},
|
gameData: {},
|
||||||
mutations: {},
|
},
|
||||||
actions: {},
|
mutations: {
|
||||||
modules: {},
|
SET_GAME_DATA(state, payload) {
|
||||||
|
state.gameData = payload;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
writeOnFile({ commit }, { name, board, rows, cols }) {
|
||||||
|
let dataForGame = {
|
||||||
|
playerName: JSON.stringify(name),
|
||||||
|
item: JSON.stringify(board),
|
||||||
|
rows: JSON.stringify(rows),
|
||||||
|
cols: JSON.stringify(cols),
|
||||||
|
};
|
||||||
|
|
||||||
|
// Create a downloadable file
|
||||||
|
const blob = new Blob([JSON.stringify(dataForGame, null, 2)], {
|
||||||
|
type: "application/json",
|
||||||
|
});
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.href = url;
|
||||||
|
link.download = "gameData.json";
|
||||||
|
link.click();
|
||||||
|
|
||||||
|
commit("SET_GAME_DATA", dataForGame);
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,18 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="home">
|
<HelloWorld />
|
||||||
<img alt="Vue logo" src="../assets/logo.png" />
|
|
||||||
<HelloWorld msg="Welcome to Your Vue.js App" />
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// @ is an alias to /src
|
import { defineComponent } from "vue";
|
||||||
import HelloWorld from "@/components/HelloWorld.vue";
|
|
||||||
|
|
||||||
export default {
|
// Components
|
||||||
|
import HelloWorld from "../components/HelloWorld.vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
name: "HomeView",
|
name: "HomeView",
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
HelloWorld,
|
HelloWorld,
|
||||||
},
|
},
|
||||||
};
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,25 @@
|
||||||
|
const fs = require("fs");
|
||||||
|
const webpack = require("webpack");
|
||||||
const { defineConfig } = require("@vue/cli-service");
|
const { defineConfig } = require("@vue/cli-service");
|
||||||
|
|
||||||
|
const someFileContents = fs.readFileSync("./src/components/Game.js");
|
||||||
|
|
||||||
module.exports = defineConfig({
|
module.exports = defineConfig({
|
||||||
|
lintOnSave: true,
|
||||||
|
|
||||||
|
configureWebpack: {
|
||||||
|
plugins: [
|
||||||
|
new webpack.DefinePlugin({
|
||||||
|
somevar: JSON.stringify(someFileContents),
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
transpileDependencies: true,
|
transpileDependencies: true,
|
||||||
|
|
||||||
|
pluginOptions: {
|
||||||
|
vuetify: {
|
||||||
|
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vuetify-loader
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user