Fix #5256 - Add restart/again button to Minesweeper

Games/Minesweeper/index.html

@@ -18,5 +18,6 @@ <h1>Mines: <span id="mines-count">0</span></h1>
         <div id="board"></div>
         <br>
         <button id="flag-button">🚩</button>
+        <button id="restart-button">Restart</button>
     </body>
 </html>

Games/Minesweeper/script.js

@@ -29,19 +29,26 @@ function setMines() {
 function startGame() {
     document.getElementById("mines-count").innerText = minesCount;
     document.getElementById("flag-button").addEventListener("click", setFlag);
+    document.getElementById("restart-button").addEventListener("click", resetGame);
+
+    initializeBoard();
+}
+
+function initializeBoard() {
+
     setMines();
-for (let r = 0; r < rows; r++) {
-        let row = [];
-        for (let c = 0; c < columns; c++) {
-            let tile = document.createElement("div");
-            tile.id = r.toString() + "-" + c.toString();
-            tile.addEventListener("click", clickTile);
-            document.getElementById("board").append(tile);
-            row.push(tile);
-        }
-        board.push(row);
-    }
 
+    for (let r = 0; r < rows; r++) {
+            let row = [];
+            for (let c = 0; c < columns; c++) {
+                let tile = document.createElement("div");
+                tile.id = r.toString() + "-" + c.toString();
+                tile.addEventListener("click", clickTile);
+                document.getElementById("board").append(tile);
+                row.push(tile);
+            }
+            board.push(row);
+        }
 }
 
 function setFlag() {
@@ -96,6 +103,10 @@ function revealMines() {
             }
         }
     }
+
+    const restartButton = document.getElementById("restart-button");
+    restartButton.innerText = "Restart";
+    restartButton.style.display = "block";
 }
 
 function checkMine(r, c) {
@@ -148,6 +159,10 @@ function checkMine(r, c) {
     if (tilesClicked == rows * columns - minesCount) {
         document.getElementById("mines-count").innerText = "Cleared";
         gameOver = true;
+
+        const restartButton = document.getElementById("restart-button");
+        restartButton.innerText = "AGAIN";
+        restartButton.style.display = "block";
     }
 
 }
@@ -161,4 +176,19 @@ function checkTile(r, c) {
         return 1;
     }
     return 0;
+}
+
+function resetGame() {
+    board = [];
+    minesLocation = [];
+    tilesClicked = 0;
+    flagEnabled = false;
+    gameOver = false;
+
+    document.getElementById("board").innerHTML = "";
+    document.getElementById("flag-button").style.backgroundColor = "lightgray";
+    document.getElementById("mines-count").innerText = minesCount;
+    document.getElementById("restart-button").style.display = "none";
+
+    startGame();
 }

Games/Minesweeper/styles.css

@@ -93,5 +93,19 @@ h1{
     position: absolute;
     top: 90%;
     left: 53%;
-    transform: translate(-90%, -53%);
+    transform: translate(-150%, -53%);
+}
+
+#restart-button {
+    width: 100px;
+    height: 50px;
+    font-size: 25px;
+    background-color: lightgray;
+    color: rgb(0, 0, 0);
+    border: none;
+    border-radius: 10px;
+    position: absolute;
+    top: 90%;
+    left: 51%;
+    transform: translate(20px, -50%);
 }