Added flags and better styling

html/index.html

@@ -22,6 +22,11 @@
     </div>
 
     <script src="/main.js"></script>
+
+    <footer>
+        > Coded by <a href="//arnweb.nl">McArn</a>.
+    </footer>
+
 </body>
 
 </html>

scss/index.scss

@@ -1,7 +1,9 @@
 body {
-    font-family: 'Courier New', Courier, monospace;
+    font-family: monospace;
-    background: #121212;
+    padding: 2em;
-    color: lightgray;
+    margin: 0;
+    background-color: #111111;
+    color: white;
     // * {
     //     border: 1px solid white;
     // }
@@ -17,28 +19,32 @@ body {
         margin: 0 auto;
         div {
             padding: 1em;
-            border-radius: 0.75em;
+            border-radius: 0.25em;
-            background-color: #1E1E1E;
+            background-color: #212121;
             &#board {
                 text-align: center;
                 width: min-content;
                 display: grid;
                 grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
-                column-gap: 0.25em;
+                column-gap: 3px;
-                row-gap: 0.25em;
+                row-gap: 3px;
                 span.cell {
-                    border: 1px solid grey;
+                    color: white;
-                    color: lightgray;
                     text-align: center;
                     width: 1em;
                     height: 1em;
-                    padding: 0.5em;
+                    padding: 0.4em;
-                    border-radius: 0.25em;
+                    border-radius: 0.1em;
+                    background-color: #303030;
+                    font-size: large;
                     &.discovered {
-                        background-color: #5c5c5c;
+                        background-color: #424242;
                     }
                     &.bomb {
-                        background-color: #5e3030;
+                        background-color: #FC5130;
+                    }
+                    &.flag {
+                        background-color: #51CB20;
                     }
                 }
             }
@@ -66,4 +72,15 @@ body {
             }
         }
     }
+    footer {
+        position: absolute;
+        bottom: 1em;
+        left: 1em;
+        color: darkgray;
+        height: 1em;
+        a {
+            color: white;
+        }
+    }
+
 }

src/screens/game.js

@@ -10,9 +10,12 @@ class Game {
         
         this.sides = 15;
         this.size = Math.pow(this.sides, 2);
-        this.bombAmount = 35;
+
+        this.generated = false;
+        this.bombAmount = 25;
         this.bombs = [];
         this.discovered = [];
+        this.strikes = 3;
 
         for (let cell = 0; cell < this.size; cell++) {
             this.bombs.push(0);
@@ -20,37 +23,48 @@ class Game {
 
             var child = document.createElement("span");
             child.className = "cell";
-
+            
             child.addEventListener("click", () => {
                 this.discover(cell);
             });
 
+            child.addEventListener("contextmenu", (e) => {
+                e.preventDefault();
+                this.flag(cell);
+            });
+
             this.board.appendChild(child);
         }
 
-        for (let index = 0; index < this.bombAmount; index++) {
+        // for (let index = 0; index < this.bombAmount; index++) {
-            var rand = math.default.rand(0, this.size);
+        //     var rand = math.default.rand(0, this.size);
-            this.bombs[rand] = 1;
+        //     this.bombs[rand] = 1;
-        }
+        // }
 
         console.log(this.bombs);
         console.log(this.discovered);
     }
 
     discover(cell) {
+        if (!this.generated) {
+            this.generated = true;
+            
+            let index = 0;
+            while (index < this.bombAmount) {
+                var rand = math.default.rand(0, this.size);
+                if (rand != cell && !this.bombs[rand]) {
+                    this.bombs[rand] = 1;
+                    index++;
+                }
+            }
+        }
+
         if (this.active && !this.discovered[cell]) {
             this.discovered[cell] = 1;
             this.children[cell].classList.add("discovered");
 
             if (this.bombs[cell]) {
-                log("Game over", "error");
+                this.gameOver();
-                this.active = false;
-                for (let index = 0; index < this.size; index++) {
-                    if (this.bombs[index]) {
-                        this.children[index].innerHTML = "[]";
-                        this.children[index].classList.add("bomb");
-                    }
-                }
                 return;
             }
 
@@ -128,6 +142,35 @@ class Game {
             }
         }
     }
+
+    flag(cell) {
+        if (this.bombs[cell]) {
+            this.children[cell].innerHTML = "#";
+            this.children[cell].classList.add("flag");
+            this.bombAmount--;
+            log(`Correctly flagged. ${String(this.bombAmount)} bombs left!`);
+        } else {
+            if (this.strikes - 1 == 0) {
+                this.gameOver();
+                return;
+            } else {
+                this.strikes--;
+                log(`Incorrectly flagged. ${String(this.strikes)} strikes left!`, "alert");
+            }
+            this.discover(cell);
+        }
+    }
+
+    gameOver() {
+        log("Game over", "error");
+        this.active = false;
+        for (let index = 0; index < this.size; index++) {
+            if (this.bombs[index]) {
+                this.children[index].innerHTML = "[]";
+                this.children[index].classList.add("bomb");
+            }
+        }
+    }
 }
 
 export default Game;