feat: new spec

src/app/pages/game/game.component.css

@@ -75,6 +75,54 @@ h2 {
   border: var(--border-width) solid var(--color-border);
 }
 
+.game-completion-alert {
+  background: linear-gradient(135deg, var(--color-secondary-mint, #B9DAD1) 0%, var(--color-secondary-blue, #B9C2DA) 100%);
+  border: 2px solid var(--color-secondary-mint, #B9DAD1) !important;
+  border-radius: var(--border-radius-lg) !important;
+  padding: var(--size-xl-padding) !important;
+  box-shadow: 0 8px 16px rgba(185, 218, 209, 0.3);
+  animation: slideIn 0.4s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.completion-title {
+  color: var(--color-text-primary);
+  font-size: 1.75rem;
+  margin: 0 0 var(--size-md) 0;
+  font-weight: 700;
+  text-align: center;
+}
+
+.completion-subtitle {
+  text-align: center;
+  color: var(--color-text-primary);
+  font-size: 1rem;
+}
+
+.completion-link {
+  color: var(--color-text-primary);
+  text-decoration: none;
+  font-weight: 600;
+  border-bottom: 2px solid var(--color-text-primary);
+  transition: all 0.3s ease;
+  padding-bottom: 2px;
+}
+
+.completion-link:hover {
+  color: var(--color-secondary-blue);
+  border-bottom-color: var(--color-secondary-blue);
+}
+
 @media (max-width: 991px) {
   .game-card {
     padding: clamp(var(--size-md), 1.5vw, var(--size-lg));

src/app/pages/game/game.component.html

@@ -9,6 +9,14 @@
     @if (facade.loading) {
       <p>Loading game state...</p>
     } @else if (facade.state) {
+      @if (facade.isGameFinished && facade.gameCompletionMessage) {
+        <div class="game-completion-alert alert alert-success mb-3">
+          <h2 class="completion-title">{{ facade.gameCompletionMessage }}</h2>
+          <p class="completion-subtitle mb-0">
+            <a routerLink="/" class="completion-link">Start a new game</a>
+          </p>
+        </div>
+      }
       <div class="container-fluid">
         <div class="row g-3">
           <!-- Left Sidebar - FEN Import -->

src/app/pages/game/game.component.ts

@@ -4,7 +4,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { ChessBoardComponent } from '../../components/chess-board/chess-board.component';
-import { InputCardComponent } from '../../components/input-card/input-card.component';
+  import { InputCardComponent } from '../../components/input-card/input-card.component';
 import { GameFacade } from './game.facade';
 
 @Component({

src/app/pages/game/game.facade.ts

@@ -18,6 +18,8 @@ export class GameFacade implements OnDestroy {
   loading = true;
   selectedSquare: string | null = null;
   highlightedSquares: string[] = [];
+  gameCompletionMessage = '';
+  isGameFinished = false;
 
   private selectedSquareMoves: LegalMove[] = [];
   private readonly router = inject(Router);
@@ -27,6 +29,48 @@ export class GameFacade implements OnDestroy {
   private pollSubscription: Subscription | null = null;
   private botMoveSubscription: Subscription | null = null;
 
+  private getGameCompletionMessage(): void {
+    if (!this.game || !this.state) {
+      this.gameCompletionMessage = '';
+      this.isGameFinished = false;
+      return;
+    }
+
+    const status = this.state.status;
+    const gameEndingStatuses = ['checkmate', 'stalemate', 'resign', 'draw', 'insufficientMaterial'];
+
+    if (!gameEndingStatuses.includes(status)) {
+      this.gameCompletionMessage = '';
+      this.isGameFinished = false;
+      return;
+    }
+
+    this.isGameFinished = true;
+
+    switch (status) {
+      case 'checkmate':
+        const winner = this.state.winner === 'white' ? this.game.white.displayName : this.game.black.displayName;
+        this.gameCompletionMessage = `Checkmate! ${winner} wins!`;
+        break;
+      case 'stalemate':
+        this.gameCompletionMessage = 'Stalemate! The game is a draw.';
+        break;
+      case 'resign':
+        const resignedPlayer = this.state.winner === 'white' ? this.game.black.displayName : this.game.white.displayName;
+        const resignedWinner = this.state.winner === 'white' ? this.game.white.displayName : this.game.black.displayName;
+        this.gameCompletionMessage = `${resignedPlayer} resigned. ${resignedWinner} wins!`;
+        break;
+      case 'draw':
+        this.gameCompletionMessage = 'Draw! The game ended in a draw.';
+        break;
+      case 'insufficientMaterial':
+        this.gameCompletionMessage = 'Insufficient material! The game is a draw.';
+        break;
+      default:
+        this.gameCompletionMessage = 'Game ended!';
+    }
+  }
+
   ngOnDestroy(): void {
     this.streamSubscription?.unsubscribe();
     this.pollSubscription?.unsubscribe();
@@ -185,6 +229,7 @@ export class GameFacade implements OnDestroy {
         next: (game) => {
           this.game = game;
           this.loading = false;
+          this.getGameCompletionMessage();
           this.startStream();
           this.tryMakeBotMove();
         },
@@ -227,6 +272,7 @@ export class GameFacade implements OnDestroy {
         next: (game) => {
           const previousMoves = this.game?.state.moves.join(',') ?? '';
           this.game = game;
+          this.getGameCompletionMessage();
           if (previousMoves !== game.state.moves.join(',')) {
             this.clearSelection();
             this.tryMakeBotMove();
@@ -239,6 +285,7 @@ export class GameFacade implements OnDestroy {
     if (event.type === 'gameFull') {
       this.game = event.game;
       this.clearSelection();
+      this.getGameCompletionMessage();
       this.tryMakeBotMove();
       return;
     }
@@ -246,6 +293,7 @@ export class GameFacade implements OnDestroy {
     if (event.type === 'gameState' && this.game) {
       const moveCountBefore = this.game.state.moves.length;
       this.game = { ...this.game, state: event.state };
+      this.getGameCompletionMessage();
       if (event.state.moves.length !== moveCountBefore) {
         this.clearSelection();
         this.tryMakeBotMove();