diff --git a/html/index.html b/html/index.html index 762999d..8c4b1bc 100644 --- a/html/index.html +++ b/html/index.html @@ -22,6 +22,11 @@ + + + \ No newline at end of file diff --git a/scss/index.scss b/scss/index.scss index 56b29ff..228cb45 100644 --- a/scss/index.scss +++ b/scss/index.scss @@ -1,7 +1,9 @@ body { - font-family: 'Courier New', Courier, monospace; - background: #121212; - color: lightgray; + font-family: monospace; + padding: 2em; + 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; - background-color: #1E1E1E; + border-radius: 0.25em; + 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; - row-gap: 0.25em; + column-gap: 3px; + row-gap: 3px; span.cell { - border: 1px solid grey; - color: lightgray; + color: white; text-align: center; width: 1em; height: 1em; - padding: 0.5em; - border-radius: 0.25em; + padding: 0.4em; + 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; + } + } + } \ No newline at end of file diff --git a/src/screens/game.js b/src/screens/game.js index fb28cd6..a28fef1 100644 --- a/src/screens/game.js +++ b/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++) { - var rand = math.default.rand(0, this.size); - this.bombs[rand] = 1; - } + // for (let index = 0; index < this.bombAmount; index++) { + // var rand = math.default.rand(0, this.size); + // 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.active = false; - for (let index = 0; index < this.size; index++) { - if (this.bombs[index]) { - this.children[index].innerHTML = "[]"; - this.children[index].classList.add("bomb"); - } - } + this.gameOver(); 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; \ No newline at end of file