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

simplify ui

Browse Source
This commit is contained in:
Vaclav Tvrdik
2024-07-11 15:05:52 +02:00
parent da7f36539f
commit 1c4fa127a7
3 changed files with 106 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
ms.css
View File

@@ -16,6 +16,57 @@ body, html
display: flex; display: flex;
} }
.status_row
{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
background-color: #EEE;
}
.mine_count {
width: 35px;
height: 25px;
border: 1px solid #CCC;
padding: 10px 5px 5px 5px;
background-color: #EEE;
color: black;
font-weight: bold;
font-size: 24px;
text-align: center;
}
.timer {
width: 35px;
height: 25px;
border: 1px solid #CCC;
padding: 10px 5px 5px 5px;
background-color: #EEE;
color: red;
font-weight: bold;
font-size: 24px;
text-align: center;
}
.moves_made {
width: 35px;
height: 25px;
border: 1px solid #CCC;
padding: 10px 5px 5px 5px;
background-color: #EEE;
color: blue;
font-weight: bold;
font-size: 24px;
text-align: center;
}
.cell { .cell {
width: 35px; width: 35px;
height: 25px; height: 25px;

25
ms.html
View File

@@ -1,39 +1,28 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en' class=''> <html lang='en' class=''>
<head> <head>
<meta charset='UTF-8'> <meta charset='UTF-8'>
<title>Minesweeper</title> <title>Minesweeper</title>
<link rel="stylesheet" href="ms.css"> <link rel="stylesheet" href="ms.css">
<script src="ms.js"></script> <script src="ms.js"></script>
<script src="https://use.fontawesome.com/e51c6dea6f.js"></script> <script src="https://use.fontawesome.com/e51c6dea6f.js"></script>
</head> </head>
<body>
<div class="status_msg">
<strong>Game Status:</strong> <span id="game_status"></span>
</div>
<div class="clearfix"> <div class="clearfix">
<div id="game_container"> <div id="game_container">
<!--placeholder for game --> <!--placeholder for game -->
</div> </div>
</div> </div>
<div>
<div class="status_msg">
<strong>Mines Remaining:</strong> <span id="mine_count"></span>
</div>
<div class="status_msg">
<strong>Moves Made:</strong> <span id="moves_made"></span>
</div>
<div class="status_msg">
<strong>Game Status:</strong> <span id="game_status"></span>
</div>
<div style="margin: 10px 0px;"> <div style="margin: 10px 0px;">
<input id="validate_button" type="button" value="Did I win?" /> <input id="validate_button" type="button" value="Did I win?" />
</div>
<div style="margin: 15px 0px;">
<input id="new_game_button" type="button" value="Create new game!" /> <input id="new_game_button" type="button" value="Create new game!" />
</div> </div>
</div> </body>
</html>

69
ms.js
View File

@@ -35,40 +35,6 @@ class Minesweeper {
{ options: opts }, { options: opts },
loadedData); loadedData);
//validate options
let rows = this.options["rows"];
if (isNaN(rows)) {
this.options["rows"] = 8;
} else if (rows < 3) {
this.options["rows"] = 3;
} else if (rows > 19) {
this.options["rows"] = 19;
}
let cols = this.options["cols"];
if (isNaN(cols)) {
this.options["cols"] = 8;
} else if (cols < 3) {
this.options["cols"] = 3;
} else if (cols > 19) {
this.options["cols"] = 19;
}
if (isNaN(this.options["mines"])) {
this.options["mines"] = 10;
}
if (this.options["mines"] < 0) {
this.options["mines"] = 1;
} else if (
this.options["mines"] >
this.options["rows"] * this.options["cols"])
{
this.options["mines"] = this.options["rows"] * this.options["cols"];
}
if (this.loadGame) { if (this.loadGame) {
this.load(); this.load();
} else { } else {
@@ -140,6 +106,15 @@ class Minesweeper {
gameContainer.innerHTML = ""; gameContainer.innerHTML = "";
let content = ""; let content = "";
//create status bar
content += '<div class="status_row">';
content += `<div class="mine_count" id="mine_count" title="Mine count">10</div>`;
content += `<div class="moves_made" id="moves_made" title="Moves made">0</div>`;
content += `<div class="timer" id="timer" title="Time remaining">0</div>`;
content += "</div>";
//create cells
for (let r = 0; r < this.options.rows; r++) { for (let r = 0; r < this.options.rows; r++) {
content += '<div class="row">'; content += '<div class="row">';
for (let c = 0; c < this.options.cols; c++) { for (let c = 0; c < this.options.cols; c++) {
@@ -261,7 +236,7 @@ class Minesweeper {
this.save(); this.save();
} }
//debgugging function to print the grid to console //debugging function to print the grid to console
gridToString() { gridToString() {
let result = ""; let result = "";
for (let r = 0, r_len = this.grid.length; r < r_len; r++) { for (let r = 0, r_len = this.grid.length; r < r_len; r++) {
@@ -314,9 +289,31 @@ class Cell {
//create a new game //create a new game
function newGame(opts = {}) { function newGame(opts = {}) {
game = new Minesweeper(opts); game = new Minesweeper(opts);
startTimer()
console.log(game.gridToString()); console.log(game.gridToString());
} }
function startTimer() {
clearInterval(countdown);
document.getElementById('timer').textContent = 70;
countdown = setInterval(updateTimer, 1000);
}
function updateTimer() {
const timerDisplay = document.getElementById('timer');
const currentTime = parseInt(timerDisplay.textContent, 10);
if (currentTime > 0) {
timerDisplay.textContent = currentTime - 1;
// Call your function here every second
} else {
clearInterval(countdown);
alert('Time run out!');
}
}
window.onload = function () { window.onload = function () {
//attack click to new game button //attack click to new game button
document. document.
@@ -389,8 +386,8 @@ window.onload = function () {
}; };
//global vars //global vars
var game; var game;
var countdown
//check support for local storage: credit - http://diveintohtml5.info/storage.html //check support for local storage: credit - http://diveintohtml5.info/storage.html
const hasLocalStorage = function () { const hasLocalStorage = function () {