diff --git a/public/index.html b/public/index.html index 96c2fce..ba99f4b 100644 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,9 @@ +
+
\ No newline at end of file diff --git a/public/style.css b/public/style.css index 5ec9ccb..4388a3a 100644 --- a/public/style.css +++ b/public/style.css @@ -6,9 +6,32 @@ --padding: 2px; } +* { + font-family: sans-serif; +} + +.game-info { + font-size: 40px; +} + +.gameover { + display: none; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + backdrop-filter: blur(10px); + background: rgba(255, 255, 255, 0.5); + font-size: 30px; + text-align: center; + padding-top: 20%; + z-index: 100; +} + .board { - width: calc(var(--size-x) * var(--tile-width) + var(--padding) * (var(--size-x) - 1)); - height: calc(var(--size-y) * var(--tile-height) + var(--padding) * (var(--size-y) - 1)); + width: calc(var(--size-x) * var(--tile-width) + var(--padding) * (var(--size-x) + 1)); + height: calc(var(--size-y) * var(--tile-height) + var(--padding) * (var(--size-y) + 1)); position: relative; } @@ -16,4 +39,7 @@ position: absolute; cursor: pointer; transition: bottom 0.5s; + object-fit: cover; + width: var(--tile-width); + height: var(--tile-height); } \ No newline at end of file diff --git a/src/Game/Board.ts b/src/Game/Board.ts index e8bbc87..4c903df 100644 --- a/src/Game/Board.ts +++ b/src/Game/Board.ts @@ -64,6 +64,16 @@ export class Board { } this.applyGravity(); - this.render(); + } + + public hasMove(n: number) { + for (let y = 0; y < this.height; y++) { + for (let x = 0; x < this.width; x++) { + if (this.board[y][x]?.findSimilarNeighbors([])?.length >= n) { + return true; + } + } + } + return false; } } \ No newline at end of file diff --git a/src/Game/Game.ts b/src/Game/Game.ts index d66d6e9..cf18552 100644 --- a/src/Game/Game.ts +++ b/src/Game/Game.ts @@ -1,20 +1,62 @@ import {Board} from "./Board"; import {Tile} from "./Tile"; +const threshold: number = 3; + export class Game { private board: Board; + private score: number = 0; + private gameInfo: HTMLElement; + private gameover: HTMLElement; - constructor(boardElement: HTMLElement, bannerSelection: string[]) { - console.log(bannerSelection); + constructor( + boardElement: HTMLElement, + gameInfo: HTMLElement, + gameover: HTMLElement, + bannerSelection: string[] + ) { + this.gameInfo = gameInfo; + this.gameover = gameover; this.board = new Board(boardElement, this.clickHandler); this.board.makeTiles(bannerSelection); + + this.render(); + } + + private updateScore(n: number) { + this.score += n * 100; + this.score += (n - 3) * 200; + } + + private checkGameState() { + if (!this.board.hasMove(threshold)) { + this.gameInfo.style.opacity = "0"; + this.gameover.style.display = "block"; + this.gameover.innerHTML = ` +

Game Over

+

Score: ${this.getScoreString()}

+ Try again! + `; + } + } + + private getScoreString() { + return (this.score.toString().padStart(7, "0")) + } + + private render() { this.board.render(); + + this.gameInfo.innerText = `Score: ${this.getScoreString()}` } private clickHandler = (tile: Tile) => { const neighbors = tile.findSimilarNeighbors([]); - if (neighbors.length >= 3) { + if (neighbors.length >= threshold) { this.board.remove(neighbors); + this.updateScore(neighbors.length); + this.checkGameState(); + this.render(); } } } \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index c883724..06d7d22 100644 --- a/src/main.ts +++ b/src/main.ts @@ -16,5 +16,10 @@ function getRandomBanners(n: number): string[] { } window.addEventListener("load", () => { - new Game(document.querySelector(".board"), getRandomBanners(5)); + new Game( + document.querySelector(".board"), + document.querySelector(".game-info"), + document.querySelector(".gameover"), + getRandomBanners(5) + ); }); \ No newline at end of file