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/components/move-history/move-history.component.css

@@ -88,6 +88,11 @@
   opacity: 0.8;
 }
 
+.live-label.reviewing {
+  color: var(--nc-warning);
+  opacity: 1;
+}
+
 .moves::-webkit-scrollbar { width: 6px; }
 .moves::-webkit-scrollbar-track { background: transparent; }
 .moves::-webkit-scrollbar-thumb { background: var(--nc-border-strong); border-radius: 3px; }

src/app/components/move-history/move-history.component.html

@@ -1,13 +1,16 @@
-<div class="moves" role="list">
+<div class="moves" role="list" #movesEl>
   @if (movePairs.length === 0) {
     <div class="moves-empty">No moves yet.</div>
   } @else {
     @for (pair of movePairs; track $index) {
       <div class="mv-num" role="presentation">{{ $index + 1 }}</div>
-      <div class="mv" [class.current]="currentWhiteIndex === $index" role="listitem">
+      <div class="mv" [class.current]="isWhiteViewing($index)" role="listitem"
+           tabindex="0" (click)="clickWhite($index)" (keydown.enter)="clickWhite($index)">
         {{ pair.white }}
       </div>
-      <div class="mv" [class.current]="currentBlackIndex === $index" [class.mv-empty]="!pair.black" role="listitem">
+      <div class="mv" [class.current]="isBlackViewing($index)" [class.mv-empty]="!pair.black" role="listitem"
+           [attr.tabindex]="pair.black ? 0 : null"
+           (click)="clickBlack($index, pair.black)" (keydown.enter)="clickBlack($index, pair.black)">
         {{ pair.black ?? '…' }}
       </div>
     }
@@ -31,13 +34,13 @@
         <polyline points="9 18 15 12 9 6"/>
       </svg>
     </button>
-    <button class="icon-btn" title="Last move" (click)="navigate.emit('last')">
+    <button class="icon-btn" title="Last move / return to live" (click)="navigate.emit('last')">
       <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <polyline points="13 17 18 12 13 7"/><polyline points="6 17 11 12 6 7"/>
       </svg>
     </button>
   </div>
   @if (plyCount > 0) {
-    <span class="live-label">LIVE</span>
+    <span class="live-label" [class.reviewing]="!isLive">{{ isLive ? 'LIVE' : 'REVIEWING' }}</span>
   }
 </div>

src/app/components/move-history/move-history.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core';
 
 export type MoveNavDirection = 'first' | 'prev' | 'next' | 'last';
 
@@ -16,7 +16,11 @@ interface MovePair {
 })
 export class MoveHistoryComponent implements OnChanges {
   @Input({ required: true }) moves: string[] = [];
+  @Input() viewingPly: number | null = null;
   @Output() navigate = new EventEmitter<MoveNavDirection>();
+  @Output() navigateToPly = new EventEmitter<number>();
+
+  @ViewChild('movesEl') movesEl?: ElementRef<HTMLElement>;
 
   movePairs: MovePair[] = [];
 
@@ -24,24 +28,33 @@ export class MoveHistoryComponent implements OnChanges {
     return this.moves.length;
   }
 
-  get currentWhiteIndex(): number {
-    const lastPairIndex = this.movePairs.length - 1;
-    if (lastPairIndex < 0) return -1;
-    const lastMove = this.moves.length - 1;
-    return lastMove % 2 === 0 ? lastPairIndex : -1;
-  }
-
-  get currentBlackIndex(): number {
-    const lastPairIndex = this.movePairs.length - 1;
-    if (lastPairIndex < 0) return -1;
-    const lastMove = this.moves.length - 1;
-    return lastMove % 2 === 1 ? lastPairIndex : -1;
+  get isLive(): boolean {
+    return this.viewingPly === null || this.viewingPly >= this.moves.length - 1;
   }
 
   ngOnChanges(): void {
     this.movePairs = this.buildPairs(this.moves);
   }
 
+  isWhiteViewing(pairIndex: number): boolean {
+    const ply = this.viewingPly ?? this.moves.length - 1;
+    return ply === pairIndex * 2;
+  }
+
+  isBlackViewing(pairIndex: number): boolean {
+    const ply = this.viewingPly ?? this.moves.length - 1;
+    return ply === pairIndex * 2 + 1;
+  }
+
+  clickWhite(pairIndex: number): void {
+    this.navigateToPly.emit(pairIndex * 2);
+  }
+
+  clickBlack(pairIndex: number, black: string | null): void {
+    if (!black) return;
+    this.navigateToPly.emit(pairIndex * 2 + 1);
+  }
+
   private buildPairs(moves: string[]): MovePair[] {
     const pairs: MovePair[] = [];
     for (let i = 0; i < moves.length; i += 2) {