feat: added bot, light and dark mode

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

@@ -1,4 +1,10 @@
 <main class="game-shell">
+  <app-promotion-dialog
+    [isOpen]="facade.isPromotionDialogOpen"
+    (promotionSelected)="facade.onPromotionSelected($event)"
+    (closed)="facade.onPromotionClosed()"
+  />
+
   <section class="game-card">
     <header class="mb-3">
       <a routerLink="/" class="back-link">Back</a>
@@ -9,41 +15,33 @@
     @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 -->
           <div class="col-lg-3 col-md-6 col-12 order-lg-1 order-2">
-            <aside class="import-card fen-card h-100">
-              <label for="fenImport">Import FEN</label>
-              <textarea
-                id="fenImport"
-                name="fenImport"
-                [(ngModel)]="facade.fenInput"
-                rows="4"
-                placeholder="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
-              ></textarea>
-              <button type="button" class="btn w-100" (click)="facade.importFen()">Load FEN</button>
-            </aside>
+            <app-input-card
+              label="Import FEN"
+              placeholder="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
+              buttonLabel="Load FEN"
+              inputType="textarea"
+              [value]="facade.fenInput"
+              cardClass="fen-card"
+              (valueChange)="facade.fenInput = $event"
+              (buttonClick)="facade.importFen()"
+            />
           </div>
 
           <!-- Center - Chess Board -->
           <div class="col-lg-6 col-md-12 col-12 order-lg-2 order-1">
             <section class="center-column d-flex flex-column h-100">
-              <div class="top-section mb-3">
-                <form class="move-form d-flex flex-wrap gap-2 mb-2" (ngSubmit)="facade.submitMove()">
-                  <label for="uciMove" class="form-label mb-0">Play move (UCI)</label>
-                  <input 
-                    id="uciMove" 
-                    name="uciMove" 
-                    class="form-control flex-grow-1"
-                    [(ngModel)]="facade.moveInput" 
-                    placeholder="e2e4" 
-                  />
-                  <button type="submit" class="btn">Send Move</button>
-                </form>
-                <p class="board-hint small mb-0">Click your piece to highlight legal targets.</p>
-              </div>
-
               <div class="board-section flex-grow-1 d-flex align-items-center justify-content-center">
                 <app-chess-board
                   [fen]="facade.state.fen"
@@ -52,22 +50,35 @@
                   (squareSelected)="facade.onBoardSquareSelected($event)"
                 />
               </div>
+
+              <section class="top-section">
+                <app-input-card
+                  label="Play move (UCI)"
+                  placeholder="e2e4"
+                  buttonLabel="Send Move"
+                  inputType="input"
+                  [value]="facade.moveInput"
+                  cardClass="move-card"
+                  hintText="Click your piece to highlight legal targets."
+                  (valueChange)="facade.moveInput = $event"
+                  (buttonClick)="facade.submitMove()"
+                />
+              </section>
             </section>
           </div>
 
           <!-- Right Sidebar - PGN Import -->
           <div class="col-lg-3 col-md-6 col-12 order-lg-3 order-3">
-            <aside class="import-card pgn-card h-100">
-              <label for="pgnImport">Import PGN</label>
-              <textarea
-                id="pgnImport"
-                name="pgnImport"
-                [(ngModel)]="facade.pgnInput"
-                rows="4"
-                placeholder="1. e4 e5 2. Nf3 Nc6 *"
-              ></textarea>
-              <button type="button" class="btn w-100" (click)="facade.importPgn()">Load PGN</button>
-            </aside>
+            <app-input-card
+              label="Import PGN"
+              placeholder="1. e4 e5 2. Nf3 Nc6 *"
+              buttonLabel="Load PGN"
+              inputType="textarea"
+              [value]="facade.pgnInput"
+              cardClass="pgn-card"
+              (valueChange)="facade.pgnInput = $event"
+              (buttonClick)="facade.importPgn()"
+            />
           </div>
         </div>
       </div>