feat: drag and drop

src/app/pages/game/game.component.ts

@@ -8,6 +8,15 @@ import { InputCardComponent } from '../../components/input-card/input-card.compo
 import { PromotionDialogComponent } from '../../components/promotion-dialog/promotion-dialog.component';
 import { GameFacade } from './game.facade';
 
+type TimerTurn = 'white' | 'black';
+
+interface TimerSnapshot {
+  whiteSeconds: number;
+  blackSeconds: number;
+  turn: TimerTurn;
+  savedAt: number;
+}
+
 @Component({
   selector: 'app-game',
   standalone: true,
@@ -17,15 +26,17 @@ import { GameFacade } from './game.facade';
   styleUrl: './game.component.css'
 })
 export class GameComponent implements OnInit, OnDestroy {
+  private static readonly TIMER_START_SECONDS = 10 * 60;
   private readonly route = inject(ActivatedRoute);
   private readonly destroyRef = inject(DestroyRef);
   readonly facade = inject(GameFacade);
-  whiteTimerSeconds = 10 * 60;
-  blackTimerSeconds = 10 * 60;
+  whiteTimerSeconds = GameComponent.TIMER_START_SECONDS;
+  blackTimerSeconds = GameComponent.TIMER_START_SECONDS;
   exportType: 'fen' | 'pgn' = 'fen';
   exportValue = '';
   exportNotice = '';
   private timerIntervalId: number | null = null;
+  private activeGameId = '';
 
   ngOnInit(): void {
     this.startDummyTimers();
@@ -38,6 +49,8 @@ export class GameComponent implements OnInit, OnDestroy {
         return;
       }
 
+      this.activeGameId = id;
+      this.restoreTimers(id);
       this.facade.setGameId(id);
       this.syncExportValue();
     });
@@ -47,6 +60,8 @@ export class GameComponent implements OnInit, OnDestroy {
     if (this.timerIntervalId !== null) {
       window.clearInterval(this.timerIntervalId);
     }
+
+    this.persistTimers(this.resolveCurrentTurn());
   }
 
   setExportType(type: 'fen' | 'pgn'): void {
@@ -105,10 +120,12 @@ export class GameComponent implements OnInit, OnDestroy {
 
     if (state.turn === 'white') {
       this.whiteTimerSeconds = Math.max(0, this.whiteTimerSeconds - 1);
+      this.persistTimers('white');
       return;
     }
 
     this.blackTimerSeconds = Math.max(0, this.blackTimerSeconds - 1);
+    this.persistTimers('black');
   }
 
   private syncExportValue(): void {
@@ -120,4 +137,87 @@ export class GameComponent implements OnInit, OnDestroy {
 
     this.exportValue = this.exportType === 'fen' ? state.fen : state.pgn;
   }
+
+  private restoreTimers(gameId: string): void {
+    const fallbackTurn = this.resolveCurrentTurn();
+    const rawSnapshot = localStorage.getItem(this.getTimerStorageKey(gameId));
+    if (!rawSnapshot) {
+      this.resetTimers();
+      this.persistTimers(fallbackTurn);
+      return;
+    }
+
+    const snapshot = this.parseSnapshot(rawSnapshot);
+    if (!snapshot) {
+      this.resetTimers();
+      this.persistTimers(fallbackTurn);
+      return;
+    }
+
+    this.applySnapshot(snapshot);
+    this.persistTimers(snapshot.turn);
+  }
+
+  private parseSnapshot(rawSnapshot: string): TimerSnapshot | null {
+    try {
+      const parsed = JSON.parse(rawSnapshot) as Partial<TimerSnapshot>;
+      if (
+        typeof parsed.whiteSeconds !== 'number' ||
+        typeof parsed.blackSeconds !== 'number' ||
+        (parsed.turn !== 'white' && parsed.turn !== 'black') ||
+        typeof parsed.savedAt !== 'number'
+      ) {
+        return null;
+      }
+
+      return {
+        whiteSeconds: Math.max(0, Math.floor(parsed.whiteSeconds)),
+        blackSeconds: Math.max(0, Math.floor(parsed.blackSeconds)),
+        turn: parsed.turn,
+        savedAt: parsed.savedAt
+      };
+    } catch {
+      return null;
+    }
+  }
+
+  private applySnapshot(snapshot: TimerSnapshot): void {
+    const elapsedSeconds = Math.max(0, Math.floor((Date.now() - snapshot.savedAt) / 1000));
+    this.whiteTimerSeconds = snapshot.whiteSeconds;
+    this.blackTimerSeconds = snapshot.blackSeconds;
+
+    if (snapshot.turn === 'white') {
+      this.whiteTimerSeconds = Math.max(0, this.whiteTimerSeconds - elapsedSeconds);
+      return;
+    }
+
+    this.blackTimerSeconds = Math.max(0, this.blackTimerSeconds - elapsedSeconds);
+  }
+
+  private persistTimers(turn: TimerTurn): void {
+    if (!this.activeGameId) {
+      return;
+    }
+
+    const snapshot: TimerSnapshot = {
+      whiteSeconds: this.whiteTimerSeconds,
+      blackSeconds: this.blackTimerSeconds,
+      turn,
+      savedAt: Date.now()
+    };
+    localStorage.setItem(this.getTimerStorageKey(this.activeGameId), JSON.stringify(snapshot));
+  }
+
+  private resolveCurrentTurn(): TimerTurn {
+    return this.facade.state?.turn ?? 'white';
+  }
+
+  private resetTimers(): void {
+    this.whiteTimerSeconds = GameComponent.TIMER_START_SECONDS;
+    this.blackTimerSeconds = GameComponent.TIMER_START_SECONDS;
+  }
+
+  private getTimerStorageKey(gameId: string): string {
+    return `nowchess.timer.${gameId}`;
+  }
 }