NowChess/NowChess-Frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: timer now in sync with backend

Browse Source
This commit is contained in:
Lala, Shahd
2026-05-14 19:13:03 +00:00
parent 1e6cd34f61
commit 3fa687c450
4 changed files with 47 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/game/game.component.ts
+31 -122
View File
@@ -8,16 +8,8 @@ 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,
@@ -27,26 +19,28 @@ interface TimerSnapshot {
styleUrl: './game.component.css'
})
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;
whiteTimerMs: number | null = null;
blackTimerMs: number | null = null;
exportType: 'fen' | 'pgn' = 'fen';
boardTheme: BoardTheme = 'arabian';
isDarkMode = false;
exportValue = '';
exportNotice = '';
private timerIntervalId: number | null = null;
private activeGameId = '';
get hasTimer(): boolean {
return this.facade.state?.clock != null;
}
ngOnInit(): void {
this.applyIncomingTheme();
this.syncThemeFromDocument();
this.boardTheme = this.resolveStoredBoardTheme();
this.startDummyTimers();
this.startClock();
this.route.paramMap.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((paramMap) => {
const id = paramMap.get('gameId');
@@ -56,8 +50,6 @@ export class GameComponent implements OnInit, OnDestroy {
return;
}
this.activeGameId = id;
this.restoreTimers(id);
this.facade.setGameId(id);
this.syncExportValue();
});
@@ -67,8 +59,6 @@ export class GameComponent implements OnInit, OnDestroy {
if (this.timerIntervalId !== null) {
window.clearInterval(this.timerIntervalId);
}
this.persistTimers(this.resolveCurrentTurn());
}
private syncThemeFromDocument(): void {
@@ -122,40 +112,42 @@ export class GameComponent implements OnInit, OnDestroy {
});
}
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');
formatTimer(ms: number | null): string {
if (ms === null) {
return '--:--';
}
if (ms < 0) {
return '—';
}
const totalSeconds = Math.floor(ms / 1000);
const minutes = Math.floor(totalSeconds / 60).toString().padStart(2, '0');
const seconds = (totalSeconds % 60).toString().padStart(2, '0');
return `${minutes}:${seconds}`;
}
private startDummyTimers(): void {
private startClock(): void {
if (this.timerIntervalId !== null) {
return;
}
this.timerIntervalId = window.setInterval(() => {
this.tickDummyTimers();
this.syncExportValue();
}, 1000);
this.timerIntervalId = window.setInterval(() => this.tickClock(), 200);
}
private tickDummyTimers(): void {
private tickClock(): void {
const state = this.facade.state;
if (!state || this.facade.loading || this.facade.isGameFinished) {
const clock = state?.clock;
if (!clock || this.facade.isGameFinished) {
this.whiteTimerMs = null;
this.blackTimerMs = null;
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');
const elapsed = Math.max(0, Date.now() - this.facade.clockSyncedAt);
const activeIsWhite = state!.turn === 'white';
this.whiteTimerMs =
clock.whiteRemainingMs < 0 ? -1 : Math.max(0, clock.whiteRemainingMs - (activeIsWhite ? elapsed : 0));
this.blackTimerMs =
clock.blackRemainingMs < 0 ? -1 : Math.max(0, clock.blackRemainingMs - (!activeIsWhite ? elapsed : 0));
this.syncExportValue();
}
private syncExportValue(): void {
@@ -168,89 +160,6 @@ 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}`;
}
private resolveStoredBoardTheme(): BoardTheme {
const stored = localStorage.getItem(GameComponent.BOARD_THEME_STORAGE_KEY);
return stored === 'classic' ? 'classic' : 'arabian';