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"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mdi/font": "5.9.55",
|
||||
"axios": "^1.6.8",
|
||||
"core-js": "^3.8.3",
|
||||
"roboto-fontface": "*",
|
||||
"sweetalert2": "^11.10.8",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.0.3",
|
||||
"vuex": "^4.0.0"
|
||||
"vuetify": "^3.0.0-beta.0",
|
||||
"vuex": "^4.0.2",
|
||||
"webfontloader": "^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
|
|
@ -25,7 +31,9 @@
|
|||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"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": {
|
||||
"root": true,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
|
|
|||
37
src/App.vue
37
src/App.vue
|
|
@ -1,30 +1,17 @@
|
|||
<template>
|
||||
<nav>
|
||||
<router-link to="/">Home</router-link> |
|
||||
<router-link to="/about">About</router-link>
|
||||
</nav>
|
||||
<v-app>
|
||||
<v-main>
|
||||
<router-view />
|
||||
</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
}
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
|
||||
nav {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
nav a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
nav a.router-link-exact-active {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
data: () => ({
|
||||
//
|
||||
}),
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
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>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br />
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
|
||||
>vue-cli documentation</a
|
||||
>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>babel</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>router</a
|
||||
>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "HelloWorld",
|
||||
props: {
|
||||
msg: String,
|
||||
data: () => ({
|
||||
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>
|
||||
|
||||
<!-- 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 App from "./App.vue";
|
||||
import Vuex from "vuex";
|
||||
import router from "./router";
|
||||
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: () =>
|
||||
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({
|
||||
|
|
|
|||
|
|
@ -1,9 +1,36 @@
|
|||
/* eslint-disable */
|
||||
import { createStore } from "vuex";
|
||||
import axios from "axios";
|
||||
|
||||
export default createStore({
|
||||
state: {},
|
||||
getters: {},
|
||||
mutations: {},
|
||||
actions: {},
|
||||
modules: {},
|
||||
state: {
|
||||
gameData: {},
|
||||
},
|
||||
mutations: {
|
||||
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>
|
||||
<div class="home">
|
||||
<img alt="Vue logo" src="../assets/logo.png" />
|
||||
<HelloWorld msg="Welcome to Your Vue.js App" />
|
||||
</div>
|
||||
<HelloWorld />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import HelloWorld from "@/components/HelloWorld.vue";
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
export default {
|
||||
// Components
|
||||
import HelloWorld from "../components/HelloWorld.vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "HomeView",
|
||||
|
||||
components: {
|
||||
HelloWorld,
|
||||
},
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,25 @@
|
|||
const fs = require("fs");
|
||||
const webpack = require("webpack");
|
||||
const { defineConfig } = require("@vue/cli-service");
|
||||
|
||||
const someFileContents = fs.readFileSync("./src/components/Game.js");
|
||||
|
||||
module.exports = defineConfig({
|
||||
lintOnSave: true,
|
||||
|
||||
configureWebpack: {
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
somevar: JSON.stringify(someFileContents),
|
||||
}),
|
||||
],
|
||||
},
|
||||
|
||||
transpileDependencies: true,
|
||||
|
||||
pluginOptions: {
|
||||
vuetify: {
|
||||
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vuetify-loader
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user