diff --git a/ms.css b/ms.css index 97db752..1e10390 100644 --- a/ms.css +++ b/ms.css @@ -16,6 +16,57 @@ body, html 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 { width: 35px; height: 25px; diff --git a/ms.html b/ms.html index 1a7d13b..a5c488a 100644 --- a/ms.html +++ b/ms.html @@ -1,39 +1,28 @@ + + + Minesweeper - - - Minesweeper + + + + - - + +
+ Game Status: +
- +
+
+ +
+
- - -
-
- -
-
- -
-
- Mines Remaining: -
-
- Moves Made: -
-
- Game Status: -
- -
- -
- -
- -
-
+
+ + +
+ + diff --git a/ms.js b/ms.js index 3a86f98..7427883 100644 --- a/ms.js +++ b/ms.js @@ -35,40 +35,6 @@ class Minesweeper { { options: opts }, 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) { this.load(); } else { @@ -140,6 +106,15 @@ class Minesweeper { gameContainer.innerHTML = ""; let content = ""; + + //create status bar + content += '
'; + content += `
10
`; + content += `
0
`; + content += `
0
`; + content += "
"; + + //create cells for (let r = 0; r < this.options.rows; r++) { content += '
'; for (let c = 0; c < this.options.cols; c++) { @@ -261,7 +236,7 @@ class Minesweeper { this.save(); } - //debgugging function to print the grid to console + //debugging function to print the grid to console gridToString() { let result = ""; for (let r = 0, r_len = this.grid.length; r < r_len; r++) { @@ -314,9 +289,31 @@ class Cell { //create a new game function newGame(opts = {}) { game = new Minesweeper(opts); + startTimer() + 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 () { //attack click to new game button document. @@ -389,8 +386,8 @@ window.onload = function () { }; //global vars - var game; +var countdown //check support for local storage: credit - http://diveintohtml5.info/storage.html const hasLocalStorage = function () {