feat: NCS-63 User account implementation (#2)

User Profile info, no game before login/register, menu bar

---------

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

src/app/pages/game/game.component.css

@@ -1,6 +1,16 @@
+@import '../../button-template.css';
+
 .game-shell {
   min-height: 100dvh;
   padding: clamp(var(--size-md), 2vw, var(--size-xl));
+  background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-secondary-mint) 100%);
+  color: var(--color-text-primary);
+}
+
+:host-context(html[data-theme='dark']) .game-shell {
+  background:
+    radial-gradient(circle at top, rgba(185, 194, 218, 0.16) 0%, transparent 35%),
+    linear-gradient(180deg, #0f1f2e 0%, #17293d 52%, #0b1420 100%);
 }
 
 .game-card {
@@ -13,8 +23,14 @@
   box-shadow: var(--shadow-md);
 }
 
+:host-context(html[data-theme='dark']) .game-shell .game-card {
+  background: rgba(26, 47, 71, 0.88);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
+}
+
 header {
   margin-bottom: var(--size-xl);
+  margin-bottom: var(--size-xl);
 }
 
 h1,
@@ -22,9 +38,13 @@ h2 {
   color: var(--color-text-primary);
   margin: 0 0 var(--size-md);
   font-size: var(--heading-h1);
+  color: var(--color-text-primary);
+  margin: 0 0 var(--size-md);
+  font-size: var(--heading-h1);
 }
 
 .meta {
+  color: var(--color-text-primary);
   color: var(--color-text-primary);
   font-size: 0.95rem;
 }
@@ -33,6 +53,8 @@ h2 {
   display: inline-block;
   margin-bottom: var(--size-sm);
   color: var(--color-text-primary);
+  margin-bottom: var(--size-sm);
+  color: var(--color-text-primary);
   text-decoration: none;
   font-weight: 600;
 }
@@ -48,6 +70,39 @@ h2 {
   flex: 0 0 auto;
 }
 
+.board-theme-card {
+  background: var(--color-bg-card);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  padding: var(--size-md-padding);
+  display: grid;
+  gap: var(--size-sm);
+}
+
+.board-theme-card h3 {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: 1rem;
+}
+
+.board-theme-group {
+  display: flex;
+  gap: var(--size-md);
+  flex-wrap: wrap;
+}
+
+.board-theme-option {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--size-xs);
+  color: var(--color-text-primary);
+  font-weight: 600;
+}
+
+.board-theme-option input {
+  accent-color: var(--color-primary);
+}
+
 .move-card {
   padding: var(--size-lg-padding);
 }
@@ -62,6 +117,10 @@ h2 {
 }
 
 .board-section {
+  background: var(--color-bg-board);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  padding: clamp(var(--size-sm), 1vw, var(--size-lg));
   background: var(--color-bg-board);
   border: var(--border-width) solid var(--color-border);
   border-radius: var(--border-radius-md);
@@ -70,6 +129,148 @@ h2 {
   container-type: size;
 }
 
+:host-context(html[data-theme='dark']) .game-shell .board-section,
+:host-context(html[data-theme='dark']) .game-shell .timer-card,
+:host-context(html[data-theme='dark']) .game-shell .history-card,
+:host-context(html[data-theme='dark']) .game-shell .export-card,
+:host-context(html[data-theme='dark']) .game-shell .board-theme-card,
+:host-context(html[data-theme='dark']) .game-shell .player-timer {
+  background: rgba(45, 74, 111, 0.72);
+}
+
+:host-context(html[data-theme='dark']) .game-shell .export-text {
+  background: rgba(26, 47, 71, 0.9);
+}
+
+:host-context(html[data-theme='dark']) .game-shell .game-completion-alert {
+  background: linear-gradient(135deg, rgba(74, 124, 124, 0.35) 0%, rgba(90, 111, 165, 0.35) 100%);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
+}
+
+.timer-card,
+.history-card,
+.export-card {
+  background: var(--color-bg-card);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  padding: var(--size-lg-padding);
+  display: grid;
+  gap: var(--size-md);
+}
+
+.timer-card h2,
+.history-card h2,
+.export-card h2 {
+  margin: 0;
+  font-size: 1.1rem;
+  color: var(--color-text-primary);
+}
+
+.history-list {
+  margin: 0;
+  padding-left: 1.1rem;
+  display: grid;
+  gap: var(--size-xs);
+  max-height: 180px;
+  overflow: auto;
+}
+
+.history-list li {
+  color: var(--color-text-primary);
+  display: flex;
+  gap: var(--size-sm);
+  align-items: baseline;
+}
+
+.history-number {
+  font-weight: 700;
+  min-width: 1.8rem;
+}
+
+.history-move {
+  font-family: monospace;
+}
+
+.history-empty {
+  margin: 0;
+  color: var(--color-text-primary);
+}
+
+.player-timer {
+  background: var(--color-bg-input);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  padding: var(--size-md-padding);
+}
+
+.active-timer {
+  box-shadow: 0 0 0 3px rgba(185, 218, 209, 0.25);
+}
+
+.timer-label {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-weight: 600;
+}
+
+.timer-value {
+  margin: var(--size-xs) 0 0;
+  color: var(--color-text-primary);
+  font-size: 1.35rem;
+  font-weight: 700;
+}
+
+.export-mode-group {
+  display: flex;
+  gap: var(--size-lg);
+  flex-wrap: wrap;
+}
+
+.export-mode-option {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--size-sm);
+  color: var(--color-text-primary);
+  font-weight: 600;
+}
+
+.export-mode-option input {
+  accent-color: var(--color-primary);
+}
+
+.export-text {
+  width: 100%;
+  min-height: 140px;
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  background: var(--color-bg-input);
+  color: var(--color-text-primary);
+  padding: var(--size-md-padding);
+  resize: vertical;
+}
+
+.export-button {
+  width: fit-content;
+  border: var(--button-border);
+  border-radius: var(--button-radius);
+  background: var(--color-bg-button);
+  color: var(--color-text-primary);
+  font-weight: 700;
+  padding: var(--button-padding);
+  cursor: pointer;
+}
+
+.export-button:hover {
+  background: var(--color-bg-button-hover);
+  color: var(--color-text-button-hover);
+}
+
+.export-note {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-weight: 600;
+}
+
 .alert {
   border-radius: var(--border-radius-sm);
   border: var(--border-width) solid var(--color-border);
@@ -126,6 +327,7 @@ h2 {
 @media (max-width: 991px) {
   .game-card {
     padding: clamp(var(--size-md), 1.5vw, var(--size-lg));
+    padding: clamp(var(--size-md), 1.5vw, var(--size-lg));
   }
 
   .board-section {
@@ -135,25 +337,30 @@ h2 {
   h1,
   h2 {
     font-size: var(--heading-h1-tablet);
+    font-size: var(--heading-h1-tablet);
   }
 }
 
 @media (max-width: 768px) {
   .game-shell {
     padding: clamp(var(--size-sm), 1.5vw, var(--size-lg));
+    padding: clamp(var(--size-sm), 1.5vw, var(--size-lg));
   }
 
   .game-card {
     padding: clamp(var(--size-sm), 1vw, var(--size-md));
+    padding: clamp(var(--size-sm), 1vw, var(--size-md));
   }
 
   header {
     margin-bottom: var(--size-lg);
+    margin-bottom: var(--size-lg);
   }
 
   h1,
   h2 {
     font-size: var(--heading-h1-mobile);
+    font-size: var(--heading-h1-mobile);
   }
 
   .meta {
@@ -163,6 +370,8 @@ h2 {
   .top-section {
     gap: var(--size-xs);
     margin-bottom: var(--size-xs);
+    gap: var(--size-xs);
+    margin-bottom: var(--size-xs);
   }
 
   .board-section {
@@ -173,19 +382,24 @@ h2 {
 @media (max-width: 480px) {
   .game-shell {
     padding: var(--size-sm);
+    padding: var(--size-sm);
   }
 
   .game-card {
     padding: var(--size-sm);
     border-radius: var(--border-radius-md);
+    padding: var(--size-sm);
+    border-radius: var(--border-radius-md);
   }
 
   header {
     margin-bottom: var(--size-md);
+    margin-bottom: var(--size-md);
   }
 
   h1 {
     font-size: var(--heading-h1-small);
+    font-size: var(--heading-h1-small);
   }
 
   .meta {
@@ -195,6 +409,8 @@ h2 {
   .top-section {
     gap: var(--size-xs-gap);
     margin-bottom: var(--size-xs);
+    gap: var(--size-xs-gap);
+    margin-bottom: var(--size-xs);
   }
 
   .board-section {

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

@@ -1,9 +1,6 @@
-<main class="game-shell">
-  <app-promotion-dialog
-    [isOpen]="facade.isPromotionDialogOpen"
-    (promotionSelected)="facade.onPromotionSelected($event)"
-    (closed)="facade.onPromotionClosed()"
-  />
+<main class="game-shell" [class.theme-dark]="isDarkMode">
+  <app-promotion-dialog [isOpen]="facade.isPromotionDialogOpen" (promotionSelected)="facade.onPromotionSelected($event)"
+    (closed)="facade.onPromotionClosed()" />
 
   <section class="game-card">
     <header class="mb-3">
@@ -13,79 +10,126 @@
     </header>
 
     @if (facade.loading) {
-      <p>Loading game state...</p>
+    <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>
+    @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>
+    }
+    @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 - Dummy Timers -->
+        <div class="col-lg-3 col-md-6 col-12 order-lg-1 order-2">
+          <section class="timer-card">
+            <h2>Timers</h2>
+            <div class="player-timer" [class.active-timer]="facade.state.turn === 'white'">
+              <p class="timer-label">White</p>
+              <p class="timer-value">{{ formatTimer(whiteTimerSeconds) }}</p>
+            </div>
+            <div class="player-timer" [class.active-timer]="facade.state.turn === 'black'">
+              <p class="timer-label">Black</p>
+              <p class="timer-value">{{ formatTimer(blackTimerSeconds) }}</p>
+            </div>
+          </section>
         </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">
-            <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="board-section flex-grow-1 d-flex align-items-center justify-content-center">
-                <app-chess-board
-                  [fen]="facade.state.fen"
-                  [selectedSquare]="facade.selectedSquare"
-                  [highlightedSquares]="facade.highlightedSquares"
-                  (squareSelected)="facade.onBoardSquareSelected($event)"
-                />
-              </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="board-section flex-grow-1 d-flex align-items-center justify-content-center">
+              <app-chess-board [fen]="facade.state.fen" [selectedSquare]="facade.selectedSquare"
+                [highlightedSquares]="facade.highlightedSquares" [boardTheme]="boardTheme"
+                (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 class="top-section">
+              <section class="board-theme-card" aria-label="Board design chooser">
+                <h3>Board Design</h3>
+                <div class="board-theme-group" role="radiogroup" aria-label="Board design">
+                  <label class="board-theme-option">
+                    <input type="radio" name="boardTheme" [checked]="boardTheme === 'arabian'"
+                      (change)="setBoardTheme('arabian')" />
+                    <span>Arabian</span>
+                  </label>
+
+                  <label class="board-theme-option">
+                    <input type="radio" name="boardTheme" [checked]="boardTheme === 'classic'"
+                      (change)="setBoardTheme('classic')" />
+                    <span>Classic</span>
+                  </label>
+                </div>
               </section>
-            </section>
-          </div>
 
-          <!-- Right Sidebar - PGN Import -->
-          <div class="col-lg-3 col-md-6 col-12 order-lg-3 order-3">
-            <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>
+              <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 - Export -->
+        <div class="col-lg-3 col-md-6 col-12 order-lg-3 order-3">
+          <section class="history-card">
+            <h2>Move History</h2>
+
+            @if (facade.state.moves.length === 0) {
+            <p class="history-empty">No moves yet.</p>
+            } @else {
+            <ol class="history-list">
+              @for (move of facade.state.moves; track $index) {
+              <li>
+                <span class="history-number">{{ $index + 1 }}.</span>
+                <span class="history-move">{{ move }}</span>
+              </li>
+              }
+            </ol>
+            }
+          </section>
+
+          <section class="export-card">
+            <h2>Export</h2>
+            <div class="export-mode-group" role="radiogroup" aria-label="Export mode">
+              <label class="export-mode-option">
+                <input type="radio" name="exportType" [checked]="exportType === 'fen'"
+                  (change)="setExportType('fen')" />
+                <span>FEN</span>
+              </label>
+              <label class="export-mode-option">
+                <input type="radio" name="exportType" [checked]="exportType === 'pgn'"
+                  (change)="setExportType('pgn')" />
+                <span>PGN</span>
+              </label>
+            </div>
+
+            <textarea class="export-text" [value]="exportValue"
+              [placeholder]="exportType === 'fen' ? 'FEN will appear here' : 'PGN will appear here'" rows="8"
+              readonly></textarea>
+
+            <button type="button" class="app-btn w-100" (click)="completeExport()">Done</button>
+
+            @if (exportNotice) {
+            <p class="export-note">{{ exportNotice }}</p>
+            }
+          </section>
         </div>
       </div>
+    </div>
     }
 
     @if (facade.errorMessage) {
-      <p class="alert alert-danger mt-3 mb-0">{{ facade.errorMessage }}</p>
+    <p class="alert alert-danger mt-3 mb-0">{{ facade.errorMessage }}</p>
     }
   </section>
-</main>
+</main>

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

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, DestroyRef, OnInit, inject } from '@angular/core';
+import { Component, DestroyRef, OnDestroy, OnInit, inject } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, RouterLink } from '@angular/router';
@@ -8,6 +8,16 @@ 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';
+type BoardTheme = 'arabian' | 'classic';
+
+interface TimerSnapshot {
+  whiteSeconds: number;
+  blackSeconds: number;
+  turn: TimerTurn;
+  savedAt: number;
+}
+
 @Component({
   selector: 'app-game',
   standalone: true,
@@ -16,12 +26,28 @@ import { GameFacade } from './game.facade';
   templateUrl: './game.component.html',
   styleUrl: './game.component.css'
 })
-export class GameComponent implements OnInit {
+export class GameComponent implements OnInit, OnDestroy {
+  private static readonly TIMER_START_SECONDS = 10 * 60;
+  private static readonly BOARD_THEME_STORAGE_KEY = 'nowchess.boardTheme';
   private readonly route = inject(ActivatedRoute);
   private readonly destroyRef = inject(DestroyRef);
   readonly facade = inject(GameFacade);
+  whiteTimerSeconds = GameComponent.TIMER_START_SECONDS;
+  blackTimerSeconds = GameComponent.TIMER_START_SECONDS;
+  exportType: 'fen' | 'pgn' = 'fen';
+  boardTheme: BoardTheme = 'arabian';
+  isDarkMode = false;
+  exportValue = '';
+  exportNotice = '';
+  private timerIntervalId: number | null = null;
+  private activeGameId = '';
 
   ngOnInit(): void {
+    this.applyIncomingTheme();
+    this.syncThemeFromDocument();
+    this.boardTheme = this.resolveStoredBoardTheme();
+    this.startDummyTimers();
+
     this.route.paramMap.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((paramMap) => {
       const id = paramMap.get('gameId');
       if (!id) {
@@ -30,7 +56,203 @@ export class GameComponent implements OnInit {
         return;
       }
 
+      this.activeGameId = id;
+      this.restoreTimers(id);
       this.facade.setGameId(id);
+      this.syncExportValue();
     });
   }
+
+  ngOnDestroy(): void {
+    if (this.timerIntervalId !== null) {
+      window.clearInterval(this.timerIntervalId);
+    }
+
+    this.persistTimers(this.resolveCurrentTurn());
+  }
+
+  private syncThemeFromDocument(): void {
+    this.isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark';
+  }
+
+  private applyIncomingTheme(): void {
+    const incomingTheme = window.history.state?.theme;
+    if (incomingTheme === 'dark') {
+      document.documentElement.setAttribute('data-theme', 'dark');
+      localStorage.setItem('theme', 'dark');
+      return;
+    }
+
+    if (incomingTheme === 'light') {
+      document.documentElement.removeAttribute('data-theme');
+      localStorage.removeItem('theme');
+    }
+  }
+
+  setExportType(type: 'fen' | 'pgn'): void {
+    this.exportType = type;
+    this.exportNotice = '';
+    this.syncExportValue();
+  }
+
+  setBoardTheme(theme: BoardTheme): void {
+    this.boardTheme = theme;
+    localStorage.setItem(GameComponent.BOARD_THEME_STORAGE_KEY, theme);
+  }
+
+  completeExport(): void {
+    this.syncExportValue();
+    if (!this.exportValue.trim()) {
+      this.exportNotice = 'Nothing to export yet.';
+      return;
+    }
+
+    if (!navigator.clipboard?.writeText) {
+      this.exportNotice = 'Export is ready in the text box.';
+      return;
+    }
+
+    void navigator.clipboard
+      .writeText(this.exportValue)
+      .then(() => {
+        this.exportNotice = 'Copied to clipboard.';
+      })
+      .catch(() => {
+        this.exportNotice = 'Export is ready in the text box.';
+      });
+  }
+
+  formatTimer(totalSeconds: number): string {
+    const safeSeconds = Math.max(0, totalSeconds);
+    const minutes = Math.floor(safeSeconds / 60)
+      .toString()
+      .padStart(2, '0');
+    const seconds = (safeSeconds % 60).toString().padStart(2, '0');
+    return `${minutes}:${seconds}`;
+  }
+
+  private startDummyTimers(): void {
+    if (this.timerIntervalId !== null) {
+      return;
+    }
+
+    this.timerIntervalId = window.setInterval(() => {
+      this.tickDummyTimers();
+      this.syncExportValue();
+    }, 1000);
+  }
+
+  private tickDummyTimers(): void {
+    const state = this.facade.state;
+    if (!state || this.facade.loading || this.facade.isGameFinished) {
+      return;
+    }
+
+    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 {
+    const state = this.facade.state;
+    if (!state) {
+      this.exportValue = '';
+      return;
+    }
+
+    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}`;
+  }
+
+  private resolveStoredBoardTheme(): BoardTheme {
+    const stored = localStorage.getItem(GameComponent.BOARD_THEME_STORAGE_KEY);
+    return stored === 'classic' ? 'classic' : 'arabian';
+  }
 }