Added mine flagging, lost and won flash messages, won detection

1 files changed, 49 insertions, 6 deletions

diff --git a/utils/minesweeper/script.js b/utils/minesweeper/script.js
index f19c7a2..3bc23f4 100644
--- a/utils/minesweeper/script.js
+++ b/utils/minesweeper/script.js
@@ -51,6 +51,21 @@ function floodFill(y, x) {
             floodFill(ny, nx)
 }
 
+const timer_node = document.getElementById("minesweeper-timer")
+
+const flash_message_node = document.getElementById("flash-message")
+flash_message_node.addEventListener("click", () => { flash_message_node.hidden = true })
+
+function endFlashMessage(won) {
+    flash_message_node.textContent =
+        `You ${won ? "won" : "lost"} in ${timer_node.textContent} seconds`
+    flash_message_node.classList.remove("flash-won")
+    flash_message_node.classList.remove("flash-lost")
+    flash_message_node.classList.add(won ? "flash-won" : "flash-lost")
+    flash_message_node.hidden = false;
+    setTimeout(() => { flash_message_node.hidden = true }, 5000)
+}
+
 function initGrid() {
     let table = document.getElementById("minesweeper-table")
     table.innerHTML = ""
@@ -94,10 +109,39 @@ function initGrid() {
             cell.addEventListener("click", () => {
                 if (!running)
                     toggleRunning()
-                if (mines[i][j] === -1)
+                if (cell.classList.contains("flagged")) {
+                    cell.classList.remove("flagged")
+                    return
+                }
+                if (mines[i][j] === -1) {
+                    endFlashMessage(false)
                     toggleRunning()
-                else
+                }
+                else {
                     floodFill(i, j)
+                    won = true;
+                    for (let y = 0; y < width; y++) {
+                        for (let x = 0; x < width; x++) {
+                            if (mines[y][x] !== -1 && !cells[y][x].classList.contains("visited"))
+                                won = false
+                        }
+                    }
+                    if (won) {
+                        endFlashMessage(true)
+                        toggleRunning()
+                    }
+                }
+            })
+            cell.addEventListener("contextmenu", event => {
+                event.preventDefault()
+                if (!running)
+                    toggleRunning()
+                if (cell.classList.contains("visited"))
+                    return
+                if (cell.classList.contains("flagged"))
+                    cell.classList.remove("flagged")
+                else
+                    cell.classList.add("flagged")
             })
             cells[i].push(cell)
             table_cell.appendChild(cell)
@@ -117,11 +161,10 @@ function toggleRunning() {
         initGrid()
     }
     else {
-        let timer_elem = document.getElementById("minesweeper-timer")
         current_time = 0
-        timer_elem.textContent = current_time
+        timer_node.textContent = current_time
         interval = setInterval(() => {
-            timer_elem.textContent = current_time
+            timer_node.textContent = current_time
             current_time++
         }, 1000)
     }
@@ -132,6 +175,6 @@ function toggleRunning() {
     info.hidden     = !info.hidden
 }
 
-document.getElementById("minesweeper-stop") .addEventListener("click", toggleRunning)
+document.getElementById("minesweeper-stop").addEventListener("click", toggleRunning)
 
 initGrid()