diff options
| author | Charles Cabergs <me@cacharle.xyz> | 2020-11-08 08:04:49 +0100 |
|---|---|---|
| committer | Charles Cabergs <me@cacharle.xyz> | 2020-11-08 08:04:49 +0100 |
| commit | f47491b3a89ba769760bb555ea72f1416cb0cb08 (patch) | |
| tree | d99a46500a83bf8eb4b7fb3bcc5c1e698fbfed64 | |
| parent | d656de03fc22e5b39117087ef4e95cfc9f239708 (diff) | |
| download | cacharle.xyz-f47491b3a89ba769760bb555ea72f1416cb0cb08.tar.gz cacharle.xyz-f47491b3a89ba769760bb555ea72f1416cb0cb08.tar.bz2 cacharle.xyz-f47491b3a89ba769760bb555ea72f1416cb0cb08.zip | |
Added flash message remove on new game, moving info bar to the top
| -rw-r--r-- | utils/minesweeper/index.html | 44 | ||||
| -rw-r--r-- | utils/minesweeper/script.js | 5 | ||||
| -rw-r--r-- | utils/minesweeper/style.css | 3 |
3 files changed, 30 insertions, 22 deletions
diff --git a/utils/minesweeper/index.html b/utils/minesweeper/index.html index a5ece6b..8945dbd 100644 --- a/utils/minesweeper/index.html +++ b/utils/minesweeper/index.html @@ -7,6 +7,7 @@ <link rel="icon" type="image/png" href="../../favicon.png" /> <link rel="stylesheet" type="text/css" href="../../style.css"/> <link rel="stylesheet" type="text/css" href="style.css"/> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body><div id="page-wrapper"> @@ -14,31 +15,34 @@ <div id="flash-message" hidden>You lost in asdf seconds</div> - <table id="minesweeper-table"> - </table> - - <div id="minesweeper-settings"> - <div> - <label for="width">width</label> - <input id="minesweeper-width" name="width" type="range" min="3" max="20" value="10"/> - </div> - <div> - <label for="height">height</label> - <input id="minesweeper-height" name="height" type="range" min="3" max="20" value="10"/> - </div> - <div> - <label for="mine-rate">mine rate</label> - <input id="minesweeper-mine-rate" name="mine-rate" type="range" min="0" max="100" value="20"/> + <div class="info-bar"> + <div id="minesweeper-game-info" hidden> + <div> + <div id="minesweeper-timer">1:30</div> + <button id="minesweeper-stop" class="game-state">stop</button> + </div> </div> - </div> - <div id="minesweeper-game-info" hidden> - <div> - <div id="minesweeper-timer">1:30</div> - <button id="minesweeper-stop" class="game-state">stop</button> + <div id="minesweeper-settings"> + <div> + <label for="width">width</label> + <input id="minesweeper-width" name="width" type="range" min="3" max="20" value="10"/> + </div> + <div> + <label for="height">height</label> + <input id="minesweeper-height" name="height" type="range" min="3" max="20" value="10"/> + </div> + <div> + <label for="mine-rate">mine rate</label> + <input id="minesweeper-mine-rate" name="mine-rate" type="range" min="0" max="100" value="20"/> + </div> </div> </div> + <table id="minesweeper-table"> + </table> + + </div></body> <script src="script.js" type="text/javascript"></script> diff --git a/utils/minesweeper/script.js b/utils/minesweeper/script.js index 3bc23f4..d05a9af 100644 --- a/utils/minesweeper/script.js +++ b/utils/minesweeper/script.js @@ -114,8 +114,8 @@ function initGrid() { return } if (mines[i][j] === -1) { - endFlashMessage(false) toggleRunning() + endFlashMessage(false) } else { floodFill(i, j) @@ -127,8 +127,8 @@ function initGrid() { } } if (won) { - endFlashMessage(true) toggleRunning() + endFlashMessage(true) } } }) @@ -156,6 +156,7 @@ for (input of document.querySelectorAll("#minesweeper-settings input")) { } function toggleRunning() { + flash_message_node.hidden = true; if (running) { clearInterval(interval) initGrid() diff --git a/utils/minesweeper/style.css b/utils/minesweeper/style.css index 7d2a0b1..066650c 100644 --- a/utils/minesweeper/style.css +++ b/utils/minesweeper/style.css @@ -117,3 +117,6 @@ input { border-color: #b71c1c; } +.info-bar { + height: 120px; +} |