fix: NCWF-4 Token Issues (#8)

Co-authored-by: Lala, Shahd <Shahd.Lala@sybit.de>
Co-authored-by: shahdlala66 <shahd.lala66@gmail.com>
Reviewed-on: #8

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

@@ -72,8 +72,24 @@
       <!-- Game completed banner -->
       @if (facade.isGameFinished && facade.gameCompletionMessage) {
         <div class="completion-banner">
-          <span class="completion-title">{{ facade.gameCompletionMessage }}</span>
-          <a routerLink="/" class="completion-link">Start new game</a>
+          <div class="completion-left">
+            <span class="completion-icon">♟</span>
+            <div>
+              <div class="completion-title">{{ facade.gameCompletionMessage }}</div>
+              <div class="completion-sub">Game #{{ facade.gameId }}</div>
+            </div>
+          </div>
+          <div class="completion-actions">
+            <a routerLink="/games" class="completion-link">My games</a>
+            <a routerLink="/" class="btn btn-primary completion-new">New game</a>
+          </div>
+        </div>
+      }
+
+      @if (!facade.isGameFinished && ((whiteTimerMs !== null && whiteTimerMs <= 0) || (blackTimerMs !== null && blackTimerMs <= 0))) {
+        <div class="completion-banner completion-banner--timeout">
+          <span class="completion-title">Time's up!</span>
+          <span class="completion-sub">Waiting for server to confirm result…</span>
         </div>
       }
 
@@ -104,11 +120,11 @@
           </div>
 
           <!-- Board -->
-          <div class="board-wrap">
+          <div class="board-wrap" [class.reviewing]="facade.isReviewing">
             <app-chess-board
-              [fen]="facade.state.fen"
-              [selectedSquare]="facade.selectedSquare"
-              [highlightedSquares]="facade.highlightedSquares"
+              [fen]="facade.displayFen"
+              [selectedSquare]="facade.isReviewing ? null : facade.selectedSquare"
+              [highlightedSquares]="facade.isReviewing ? [] : facade.highlightedSquares"
               [boardTheme]="boardTheme"
               (squareSelected)="facade.onBoardSquareSelected($event)" />
           </div>
@@ -146,7 +162,9 @@
             </summary>
             <app-move-history
               [moves]="facade.state.moves"
-              (navigate)="onMoveNavigate($event)" />
+              [viewingPly]="facade.viewingPly"
+              (navigate)="facade.navigateHistory($event)"
+              (navigateToPly)="facade.navigateToPly($event)" />
           </details>
 
           <!-- Play move (collapsible) -->
@@ -200,6 +218,20 @@
   </div>
 </div>
 
+<!-- Resign confirmation dialog -->
+@if (facade.resignConfirmPending) {
+  <div class="confirm-overlay" role="dialog" aria-modal="true" aria-label="Confirm resign">
+    <div class="confirm-box">
+      <p class="confirm-title">Resign this game?</p>
+      <p class="confirm-sub">Your opponent will be declared the winner.</p>
+      <div class="confirm-actions">
+        <button class="btn" type="button" (click)="facade.cancelResign()">Cancel</button>
+        <button class="btn btn-danger-solid" type="button" (click)="facade.confirmResign()">Yes, resign</button>
+      </div>
+    </div>
+  </div>
+}
+
 <!-- Toast notification -->
 @if (toastMessage) {
   <div class="toast show">{{ toastMessage }}</div>