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;
}