diff --git a/src/app/controller/control-buttons/control-buttons.component.html b/src/app/controller/control-buttons/control-buttons.component.html index 40eea60..8522aaf 100644 --- a/src/app/controller/control-buttons/control-buttons.component.html +++ b/src/app/controller/control-buttons/control-buttons.component.html @@ -1,4 +1,3 @@ - @@ -10,5 +9,4 @@ - - + diff --git a/src/app/game/game-board/game-board.component.html b/src/app/game/game-board/game-board.component.html index aeac88a..cd8e0ff 100644 --- a/src/app/game/game-board/game-board.component.html +++ b/src/app/game/game-board/game-board.component.html @@ -4,6 +4,7 @@ class="game-board" [style.--grid-width]="(gridSize$ | async)?.width" [style.--grid-height]="(gridSize$ | async)?.height" + *ngIf="(gameOver$ | async) !== true" >
+
+ Game over, you crashed! +
diff --git a/src/app/game/game-board/game-board.component.scss b/src/app/game/game-board/game-board.component.scss index f687dce..deec380 100644 --- a/src/app/game/game-board/game-board.component.scss +++ b/src/app/game/game-board/game-board.component.scss @@ -240,3 +240,13 @@ $monitor-shade-color: #b4b8be; initial-value: 0deg; inherits: false; } + +.game-over { + font-size: 2rem; + line-height: 3.5rem; + text-align: center; + font-family: 'Press Start 2P', cursive; + color: white; + text-shadow: 0 0 10px $blue, 0 0 20px $blue, 0 0 30px $blue, 0 0 40px $blue, + 0 0 55px $blue, 0 0 75px $blue; +} diff --git a/src/app/game/game-board/game-board.component.ts b/src/app/game/game-board/game-board.component.ts index 6ca9b52..849cf46 100644 --- a/src/app/game/game-board/game-board.component.ts +++ b/src/app/game/game-board/game-board.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { GameService } from '../game.service'; -import { Coordinates, GridSize, Snake } from '../game.model'; +import { Coordinates, GameStatus, GridSize, Snake } from '../game.model'; import { GameUtils } from '../game.utils'; import { map, Observable, withLatestFrom } from 'rxjs'; import { Tile } from './game-board.model'; @@ -47,6 +47,9 @@ export class GameBoardComponent { ), ); public gridSize$: Observable = this.gameService.gridSize$; + public gameOver$: Observable = this.gameService.state$.pipe( + map((state) => state.status === GameStatus.GameOver), + ); public constructor(private gameService: GameService) {} diff --git a/src/app/game/game.service.ts b/src/app/game/game.service.ts index fe11234..862d8a8 100644 --- a/src/app/game/game.service.ts +++ b/src/app/game/game.service.ts @@ -68,6 +68,9 @@ export class GameService { } this.speed = config?.initialSpeed ? config.initialSpeed : DEFAULT_SPEED; + + this.status = GameStatus.Initial; + this.stateSource.next({ snake: this.snake, food: this.food, diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index a5a996d..728fa9b 100644 --- a/src/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -35,7 +35,14 @@ font-family: 'Sofia Sans Condensed', sans-serif; transition: all 0.15s ease-out; - &:hover { + &:disabled { + cursor: not-allowed; + border-top-width: 3px; + border-bottom-width: 2px; + border-right-width: 2px; + } + + &:hover:not(:disabled) { border-bottom-width: 3px; border-top-width: 2px; }