diff options
| -rw-r--r-- | utils/minesweeper/digital-7.ttf | bin | 0 -> 34404 bytes | |||
| -rw-r--r-- | utils/minesweeper/index.html | 81 | ||||
| -rw-r--r-- | utils/minesweeper/script.js | 38 | ||||
| -rw-r--r-- | utils/minesweeper/style.css | 93 |
4 files changed, 128 insertions, 84 deletions
diff --git a/utils/minesweeper/digital-7.ttf b/utils/minesweeper/digital-7.ttf Binary files differnew file mode 100644 index 0000000..a481b97 --- /dev/null +++ b/utils/minesweeper/digital-7.ttf 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 @@ <html> <head> <title>cacharle - minesweeper</title> - <link rel="stylesheet" type="text/css" href="../../style.css"/> <meta charset="utf-8"/> <link rel="icon" type="image/png" href="../../favicon.png" /> - <style> - 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: 0px; - 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:hover { - background: forestgreen; - } - table button.visited { - background: lightgrey; - border-style: solid; - border-width: 1px; - } - button { - font-weight: bold; - } - - label, - input { - display: inline-block; - } - label { - width: 13%; - text-align: right; - } - input { - width: 40%; - margin: 0px; - } - button.game-state { - float: right; - margin-right: 20%; - font-size: 2em; - text-transform: uppercase; - } - #minesweeper-timer { - display: block; - font-weight: bolder; - text-align: center; - - } - - </style> + <link rel="stylesheet" type="text/css" href="../../style.css"/> + <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body><div id="page-wrapper"> <h1>minesweeper</h1> - <table id="minesweeper-table"> </table> <div id="minesweeper-settings"> - <button id="minesweeper-start" class="game-state">start</button> <div> <label for="width">width</label> <input id="minesweeper-width" name="width" type="range" min="3" max="20" value="10"/> @@ -99,9 +29,12 @@ <input id="minesweeper-mine-rate" name="mine-rate" type="range" min="0" max="100" value="20"/> </div> </div> + <div id="minesweeper-game-info" hidden> - <button id="minesweeper-stop" class="game-state">stop</button> - <div id="minesweeper-timer">timer</div> + <div> + <div id="minesweeper-timer">1:30</div> + <button id="minesweeper-stop" class="game-state">stop</button> + </div> </div> 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; +} |