From ea22cf13c1d2c09cf8102e8fd4277528a2a62455 Mon Sep 17 00:00:00 2001 From: Charles Cabergs Date: Sun, 1 Nov 2020 10:13:29 +0100 Subject: Added timer and reset when mine hit --- utils/minesweeper/digital-7.ttf | Bin 0 -> 34404 bytes utils/minesweeper/index.html | 81 +++------------------------------- utils/minesweeper/script.js | 38 +++++++++++----- utils/minesweeper/style.css | 93 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 128 insertions(+), 84 deletions(-) create mode 100644 utils/minesweeper/digital-7.ttf create mode 100644 utils/minesweeper/style.css diff --git a/utils/minesweeper/digital-7.ttf b/utils/minesweeper/digital-7.ttf new file mode 100644 index 0000000..a481b97 Binary files /dev/null and b/utils/minesweeper/digital-7.ttf differ diff --git a/utils/minesweeper/index.html b/utils/minesweeper/index.html index 546d0f8..c984ead 100644 --- a/utils/minesweeper/index.html +++ b/utils/minesweeper/index.html @@ -3,89 +3,19 @@ cacharle - minesweeper - - + +

minesweeper

-
-
@@ -99,9 +29,12 @@
+ diff --git a/utils/minesweeper/script.js b/utils/minesweeper/script.js index 059efdf..f19c7a2 100644 --- a/utils/minesweeper/script.js +++ b/utils/minesweeper/script.js @@ -1,7 +1,8 @@ -let height = 10 -let width = 10 -let mine_rate = 0.10 -let timer = undefined +let height = 10 +let width = 10 +let mine_rate = 0.10 +let current_time = undefined +let interval = undefined let mines = [] let visited = [] @@ -90,7 +91,14 @@ function initGrid() { let table_cell = document.createElement("td") let cell = document.createElement("button") cell.textContent = "" - cell.addEventListener("click", () => floodFill(i, j)) + cell.addEventListener("click", () => { + if (!running) + toggleRunning() + if (mines[i][j] === -1) + toggleRunning() + else + floodFill(i, j) + }) cells[i].push(cell) table_cell.appendChild(cell) table_row.appendChild(table_cell) @@ -104,16 +112,26 @@ for (input of document.querySelectorAll("#minesweeper-settings input")) { } function toggleRunning() { + if (running) { + clearInterval(interval) + initGrid() + } + else { + let timer_elem = document.getElementById("minesweeper-timer") + current_time = 0 + timer_elem.textContent = current_time + interval = setInterval(() => { + timer_elem.textContent = current_time + current_time++ + }, 1000) + } running = !running - settings = document.getElementById("minesweeper-settings") - info = document.getElementById("minesweeper-game-info") + let settings = document.getElementById("minesweeper-settings") + let info = document.getElementById("minesweeper-game-info") settings.hidden = !settings.hidden info.hidden = !info.hidden - // if (timer === undefined) { - // } } -document.getElementById("minesweeper-start").addEventListener("click", toggleRunning) document.getElementById("minesweeper-stop") .addEventListener("click", toggleRunning) initGrid() diff --git a/utils/minesweeper/style.css b/utils/minesweeper/style.css new file mode 100644 index 0000000..b9c6c1c --- /dev/null +++ b/utils/minesweeper/style.css @@ -0,0 +1,93 @@ +@font-face { + font-family: "Digital-7"; + src: url("digital-7.ttf"); +} + +h1 { + text-align: center; +} + +td { + padding: 0px; +} + +table { + margin: auto; + margin-top: 0; + margin-bottom: 5%; + border-collapse: collapse; + border-spacing: 0px; +} + +table td { + width: 2.5em; + height: 2.5em; +} + +table button { + display: block; + background: lightgrey; + margin: 0; + width: 100%; + height: 100%; + text-align: center; + font-size: 1.6em; + border-width: 6px; + border-style: outset; + border-radius: 0px; + border-color: grey; +} + +table button.visited { + background: lightgrey; + border-style: solid; + border-width: 1px; +} + +button { + font-weight: bold; +} + +label { + width: 15%; + text-align: right; +} + +input { + width: 45%; + margin-left: 10px; +} + +#minesweeper-settings div { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 10px; +} + +#minesweeper-game-info div { + display: flex; + justify-content: space-around; + margin: 0 30%; +} + +#minesweeper-stop, +#minesweeper-timer { + font-size: 2em; + text-transform: uppercase; +} + +#minesweeper-timer { + min-width: 100px; + font-family: "Digital-7"; + font-size: 3em; + display: block; + font-weight: bolder; + text-align: center; + background: black; + border: 2px; + border-color: white; + border-radius: 3px; + padding: 5px 10px; + margin: 0 !important; +} -- cgit