fix: game crash state (#12)

src/app/controller/control-buttons/control-buttons.component.html

@@ -1,4 +1,3 @@
-<!-- <ng-container *ngIf="initialized"> -->
 <ng-container
   *ngIf="gameRunning$ | async; then pauseButton; else startButton"
 ></ng-container>
@@ -10,5 +9,4 @@
   <button (click)="startGame()" title="Start game!">start / stop</button>
 </ng-template>
 
-<button (click)="resetGame()">reset</button>
-<!-- </ng-container> -->
+<button (click)="resetGame()" [disabled]="gameRunning$ | async">reset</button>

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"
     >
       <div
         class="game-board__tile"
@@ -19,6 +20,9 @@
         <div *ngIf="tile.hasSnakeHead" class="eyes"></div>
       </div>
     </div>
+    <div class="game-over" *ngIf="gameOver$ | async">
+      Game over, you crashed!
+    </div>
   </div>
   <div class="light"></div>
 </div>

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

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<GridSize> = this.gameService.gridSize$;
+  public gameOver$: Observable<boolean> = this.gameService.state$.pipe(
+    map((state) => state.status === GameStatus.GameOver),
+  );
 
   public constructor(private gameService: GameService) {}
 

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,

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