fix: cleaner components seperation

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

@@ -0,0 +1,239 @@
+import { DestroyRef, Injectable, OnDestroy, inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { interval, startWith, Subscription, switchMap } from 'rxjs';
+import { getPieceAtSquare, isPieceColor } from '../../core/chess/fen.utils';
+import { getErrorMessage } from '../../core/http/error-message.util';
+import { GameFull, GameState, GameStreamEvent, LegalMove } from '../../models/game.models';
+import { GameApiService } from '../../services/game-api.service';
+
+@Injectable()
+export class GameFacade implements OnDestroy {
+  gameId = '';
+  game: GameFull | null = null;
+  errorMessage = '';
+  moveInput = '';
+  fenInput = '';
+  pgnInput = '';
+  loading = true;
+  selectedSquare: string | null = null;
+  highlightedSquares: string[] = [];
+
+  private selectedSquareMoves: LegalMove[] = [];
+  private readonly router = inject(Router);
+  private readonly gameApi = inject(GameApiService);
+  private readonly destroyRef = inject(DestroyRef);
+  private streamSubscription: Subscription | null = null;
+  private pollSubscription: Subscription | null = null;
+
+  ngOnDestroy(): void {
+    this.streamSubscription?.unsubscribe();
+    this.pollSubscription?.unsubscribe();
+  }
+
+  get state(): GameState | null {
+    return this.game?.state ?? null;
+  }
+
+  setGameId(gameId: string): void {
+    this.gameId = gameId;
+    this.loadGame();
+  }
+
+  onBoardSquareSelected(square: string): void {
+    if (!this.state) {
+      return;
+    }
+
+    if (this.selectedSquare && this.highlightedSquares.includes(square)) {
+      const selectedMove = this.selectedSquareMoves.find((move) => move.to === square);
+      if (selectedMove) {
+        this.moveInput = selectedMove.uci;
+        this.submitMove();
+      }
+      return;
+    }
+
+    const piece = getPieceAtSquare(this.state.fen, square);
+    if (!piece || !isPieceColor(piece, this.state.turn)) {
+      this.clearSelection();
+      return;
+    }
+
+    this.errorMessage = '';
+    this.gameApi
+      .getLegalMoves(this.gameId, square)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (response) => {
+          this.selectedSquare = square;
+          this.selectedSquareMoves = response.moves;
+          this.highlightedSquares = response.moves.map((move) => move.to);
+        },
+        error: () => {
+          this.clearSelection();
+          this.errorMessage = 'Could not load legal moves for selected square.';
+        }
+      });
+  }
+
+  submitMove(): void {
+    const uci = this.moveInput.trim();
+    if (!uci) {
+      return;
+    }
+
+    this.errorMessage = '';
+    this.gameApi
+      .makeMove(this.gameId, uci)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (state) => {
+          if (this.game) {
+            this.game = { ...this.game, state };
+          }
+          this.moveInput = '';
+          this.clearSelection();
+        },
+        error: (error) => {
+          this.errorMessage = getErrorMessage(error, 'Move rejected.');
+        }
+      });
+  }
+
+  importFen(): void {
+    const fen = this.fenInput.trim();
+    if (!fen) {
+      this.errorMessage = 'Please provide a FEN string.';
+      return;
+    }
+
+    this.errorMessage = '';
+    this.gameApi
+      .importFen(fen)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (game) => {
+          this.fenInput = '';
+          this.pgnInput = '';
+          void this.router.navigate(['/game', game.gameId]);
+        },
+        error: (error) => {
+          this.errorMessage = getErrorMessage(error, 'FEN import failed.');
+        }
+      });
+  }
+
+  importPgn(): void {
+    const pgn = this.pgnInput.trim();
+    if (!pgn) {
+      this.errorMessage = 'Please provide a PGN string.';
+      return;
+    }
+
+    this.errorMessage = '';
+    this.gameApi
+      .importPgn(pgn)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (game) => {
+          this.pgnInput = '';
+          this.fenInput = '';
+          void this.router.navigate(['/game', game.gameId]);
+        },
+        error: (error) => {
+          this.errorMessage = getErrorMessage(error, 'PGN import failed.');
+        }
+      });
+  }
+
+  private loadGame(): void {
+    this.loading = true;
+    this.errorMessage = '';
+    this.clearSelection();
+    this.streamSubscription?.unsubscribe();
+    this.pollSubscription?.unsubscribe();
+    this.pollSubscription = null;
+
+    this.gameApi
+      .getGame(this.gameId)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (game) => {
+          this.game = game;
+          this.loading = false;
+          this.startStream();
+        },
+        error: (error) => {
+          this.errorMessage = getErrorMessage(error, `Could not load game ${this.gameId}.`);
+          this.loading = false;
+        }
+      });
+  }
+
+  private startStream(): void {
+    this.streamSubscription = this.gameApi
+      .streamGame(this.gameId)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (event) => this.applyStreamEvent(event),
+        error: () => {
+          this.errorMessage = 'Live stream disconnected. Falling back to polling.';
+          this.startPolling();
+        },
+        complete: () => {
+          this.errorMessage = 'Live stream ended. Falling back to polling.';
+          this.startPolling();
+        }
+      });
+  }
+
+  private startPolling(): void {
+    if (this.pollSubscription) {
+      return;
+    }
+
+    this.pollSubscription = interval(1500)
+      .pipe(
+        startWith(0),
+        switchMap(() => this.gameApi.getGame(this.gameId)),
+        takeUntilDestroyed(this.destroyRef)
+      )
+      .subscribe({
+        next: (game) => {
+          const previousMoves = this.game?.state.moves.join(',') ?? '';
+          this.game = game;
+          if (previousMoves !== game.state.moves.join(',')) {
+            this.clearSelection();
+          }
+        }
+      });
+  }
+
+  private applyStreamEvent(event: GameStreamEvent): void {
+    if (event.type === 'gameFull') {
+      this.game = event.game;
+      this.clearSelection();
+      return;
+    }
+
+    if (event.type === 'gameState' && this.game) {
+      const moveCountBefore = this.game.state.moves.length;
+      this.game = { ...this.game, state: event.state };
+      if (event.state.moves.length !== moveCountBefore) {
+        this.clearSelection();
+      }
+      return;
+    }
+
+    if (event.type === 'error') {
+      this.errorMessage = event.error.message;
+    }
+  }
+
+  private clearSelection(): void {
+    this.selectedSquare = null;
+    this.selectedSquareMoves = [];
+    this.highlightedSquares = [];
+  }
+}