fix: cleaner components seperation

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

@@ -3,30 +3,30 @@
     <header>
       <a routerLink="/" class="back-link">Back</a>
       <h1>1 vs 1 Game</h1>
-      <p class="meta">Game ID: <strong>{{ gameId }}</strong></p>
+      <p class="meta">Game ID: <strong>{{ facade.gameId }}</strong></p>
     </header>
 
-    @if (loading) {
+    @if (facade.loading) {
       <p>Loading game state...</p>
-    } @else if (state) {
+    } @else if (facade.state) {
       <section class="content-layout">
         <aside class="import-card fen-card">
           <label for="fenImport">Import FEN</label>
           <textarea
             id="fenImport"
             name="fenImport"
-            [(ngModel)]="fenInput"
+            [(ngModel)]="facade.fenInput"
             rows="4"
             placeholder="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
           ></textarea>
-          <button type="button" (click)="importFen()">Load FEN</button>
+          <button type="button" (click)="facade.importFen()">Load FEN</button>
         </aside>
 
         <section class="center-column">
           <section class="top-section">
-            <form class="move-form" (ngSubmit)="submitMove()">
+            <form class="move-form" (ngSubmit)="facade.submitMove()">
               <label for="uciMove">Play move (UCI)</label>
-              <input id="uciMove" name="uciMove" [(ngModel)]="moveInput" placeholder="e2e4" />
+              <input id="uciMove" name="uciMove" [(ngModel)]="facade.moveInput" placeholder="e2e4" />
               <button type="submit">Send Move</button>
             </form>
             <p class="board-hint">Click your piece to highlight legal targets.</p>
@@ -34,10 +34,10 @@
 
           <section class="board-section">
             <app-chess-board
-              [fen]="state.fen"
-              [selectedSquare]="selectedSquare"
-              [highlightedSquares]="highlightedSquares"
-              (squareSelected)="onBoardSquareSelected($event)"
+              [fen]="facade.state.fen"
+              [selectedSquare]="facade.selectedSquare"
+              [highlightedSquares]="facade.highlightedSquares"
+              (squareSelected)="facade.onBoardSquareSelected($event)"
             />
           </section>
         </section>
@@ -47,17 +47,17 @@
           <textarea
             id="pgnImport"
             name="pgnImport"
-            [(ngModel)]="pgnInput"
+            [(ngModel)]="facade.pgnInput"
             rows="4"
             placeholder="1. e4 e5 2. Nf3 Nc6 *"
           ></textarea>
-          <button type="button" (click)="importPgn()">Load PGN</button>
+          <button type="button" (click)="facade.importPgn()">Load PGN</button>
         </aside>
       </section>
     }
 
-    @if (errorMessage) {
-      <p class="error">{{ errorMessage }}</p>
+    @if (facade.errorMessage) {
+      <p class="error">{{ facade.errorMessage }}</p>
     }
   </section>
 </main>