diff --git a/src/lib/stores/game.svelte.ts b/src/lib/stores/game.svelte.ts
index 3297b79..916aaf4 100644
--- a/src/lib/stores/game.svelte.ts
+++ b/src/lib/stores/game.svelte.ts
@@ -5,7 +5,10 @@ import {
} from '$lib/game-logic';
import type { PlayerColor, GameRecord, GameResult, ResultReason } from '$lib/types';
-let chess: Chess = $state(new Chess());
+// chess.js mutates its board in place and Svelte does not proxy class
+// instances, so every getter below subscribes to `rev` instead of to `chess`.
+let rev = $state(0);
+let chess: Chess = new Chess();
let myColor: PlayerColor = $state('white');
let whiteHandle: string | undefined = $state(undefined);
let blackHandle: string | undefined = $state(undefined);
@@ -17,19 +20,24 @@ let drawOfferedByMe = $state(false);
let drawOfferedByOpponent = $state(false);
let storedResult: { result: GameResult; reason: ResultReason } | null = $state(null);
+function touch() {
+ rev += 1;
+}
+
export const game = {
- get chess() { return chess; },
- get fen() { return chess.fen(); },
- get pgn() { return chess.pgn(); },
- get turnColor() { return turnColor(chess); },
+ get chess() { rev; return chess; },
+ get fen() { rev; return chess.fen(); },
+ get pgn() { rev; return chess.pgn(); },
+ get moves() { rev; return chess.history(); },
+ get turnColor() { rev; return turnColor(chess); },
get myColor() { return myColor; },
- get isMyTurn() { return turnColor(chess) === myColor && status === 'active'; },
- get dests(): Dests { return toDests(chess); },
- get lastMove() { return lastMoveSquares(chess); },
- get isInCheck() { return chess.inCheck(); },
- get result() { return storedResult ?? gameResult(chess); },
+ get isMyTurn() { rev; return turnColor(chess) === myColor && status === 'active'; },
+ get dests(): Dests { rev; return toDests(chess); },
+ get lastMove() { rev; return lastMoveSquares(chess); },
+ get isInCheck() { rev; return chess.inCheck(); },
+ get result() { rev; return storedResult ?? gameResult(chess); },
get status() { return status; },
- get moveCount() { return Math.ceil(chess.history().length / 2); },
+ get moveCount() { rev; return Math.ceil(chess.history().length / 2); },
get whiteHandle() { return whiteHandle; },
get blackHandle() { return blackHandle; },
get whiteDid() { return whiteDid; },
@@ -37,7 +45,7 @@ export const game = {
get pendingPromotion() { return pendingPromotion; },
get drawOfferedByMe() { return drawOfferedByMe; },
get drawOfferedByOpponent() { return drawOfferedByOpponent; },
- get startingFen(): string | undefined { return chess.getHeaders().FEN; },
+ get startingFen(): string | undefined { rev; return chess.getHeaders().FEN; },
init(options: {
pgn?: string;
@@ -62,7 +70,8 @@ export const game = {
drawOfferedByMe = false;
drawOfferedByOpponent = false;
storedResult = null;
- }, // end init
+ touch();
+ },
tryMove(orig: string, dest: string): boolean {
if (!this.isMyTurn) return false;
@@ -72,18 +81,25 @@ export const game = {
return false;
}
- return applyMove(chess, orig, dest);
+ const moved = applyMove(chess, orig, dest);
+ if (moved) touch();
+ return moved;
},
completePromotion(piece: PieceSymbol): boolean {
if (!pendingPromotion) return false;
const { orig, dest } = pendingPromotion;
pendingPromotion = null;
- return applyMove(chess, orig, dest, piece);
+ const moved = applyMove(chess, orig, dest, piece);
+ if (moved) touch();
+ return moved;
},
+ // The board has already rendered the pawn on its promotion square; bump
+ // `rev` so it gets pushed back to the real position.
cancelPromotion() {
pendingPromotion = null;
+ touch();
},
applyOpponentMove(pgn: string): boolean {
@@ -97,6 +113,7 @@ export const game = {
if (newChess.history().length > chess.history().length) {
chess = newChess;
+ touch();
return true;
}
return false;
@@ -134,6 +151,7 @@ export const game = {
reset() {
chess = new Chess();
+ touch();
myColor = 'white';
whiteHandle = undefined;
blackHandle = undefined;
diff --git a/src/routes/game/[did]/[rkey]/+page.svelte b/src/routes/game/[did]/[rkey]/+page.svelte
index ffa21bb..cf02b9f 100644
--- a/src/routes/game/[did]/[rkey]/+page.svelte
+++ b/src/routes/game/[did]/[rkey]/+page.svelte
@@ -1003,7 +1003,7 @@
{/if}
{/if}
-
+
{#if game.status !== 'completed'}
diff --git a/tests/helpers/reactive.svelte.ts b/tests/helpers/reactive.svelte.ts
new file mode 100644
index 0000000..ca08df9
--- /dev/null
+++ b/tests/helpers/reactive.svelte.ts
@@ -0,0 +1,24 @@
+import { flushSync } from 'svelte';
+
+/**
+ * Run `read` in a standalone effect and count how many times it re-runs, so a
+ * test can tell "the getter returns a fresh value" apart from "consumers were
+ * actually notified".
+ */
+export function watch(read: () => unknown): { readonly runs: number; stop: () => void } {
+ let runs = 0;
+ const stop = $effect.root(() => {
+ $effect(() => {
+ read();
+ runs += 1;
+ });
+ });
+ flushSync();
+
+ return {
+ get runs() {
+ return runs;
+ },
+ stop,
+ };
+}
diff --git a/tests/lib/stores/game.svelte.test.ts b/tests/lib/stores/game.svelte.test.ts
index aa40ec8..2d2cd9d 100644
--- a/tests/lib/stores/game.svelte.test.ts
+++ b/tests/lib/stores/game.svelte.test.ts
@@ -1,5 +1,8 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
+// @vitest-environment jsdom
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { flushSync } from 'svelte';
import { game } from '$lib/stores/game.svelte';
+import { watch } from '../../helpers/reactive.svelte';
const RBC_FEN = 'qqrnkrrb/nppppppp/8/8/8/8/NBPPPPPP/QQQBKNRB w - - 0 1';
const PROMOTION_PGN = '[SetUp "1"]\n[FEN "8/P6k/8/8/8/8/8/K7 w - - 0 1"]\n\n';
@@ -39,12 +42,105 @@ describe('init', () => {
});
});
+describe('reactivity', () => {
+ const stops: (() => void)[] = [];
+
+ function track(read: () => unknown) {
+ const w = watch(read);
+ stops.push(w.stop);
+ return w;
+ }
+
+ afterEach(() => {
+ stops.splice(0).forEach((stop) => stop());
+ });
+
+ it('notifies consumers after my own move', () => {
+ game.init({ myColor: 'white' });
+ const fen = track(() => game.fen);
+ const moves = track(() => game.moves);
+ const turn = track(() => game.turnColor);
+
+ game.tryMove('e2', 'e4');
+ flushSync();
+
+ expect(fen.runs).toBe(2);
+ expect(moves.runs).toBe(2);
+ expect(turn.runs).toBe(2);
+ });
+
+ it('notifies consumers after completing a promotion', () => {
+ game.init({ pgn: PROMOTION_PGN, myColor: 'white' });
+ game.tryMove('a7', 'a8');
+ const fen = track(() => game.fen);
+
+ game.completePromotion('q');
+ flushSync();
+
+ expect(fen.runs).toBe(2);
+ });
+
+ it('notifies consumers after cancelling a promotion so the board resyncs', () => {
+ game.init({ pgn: PROMOTION_PGN, myColor: 'white' });
+ game.tryMove('a7', 'a8');
+ const fen = track(() => game.fen);
+
+ game.cancelPromotion();
+ flushSync();
+
+ expect(fen.runs).toBe(2);
+ });
+
+ it('notifies consumers after the opponent moves', () => {
+ game.init({ pgn: '1. e4', myColor: 'black' });
+ const moves = track(() => game.moves);
+
+ game.applyOpponentMove('1. e4 e5 2. Nf3');
+ flushSync();
+
+ expect(moves.runs).toBe(2);
+ });
+
+ it('does not notify when an illegal move is rejected', () => {
+ game.init({ myColor: 'white' });
+ const fen = track(() => game.fen);
+
+ expect(game.tryMove('e2', 'e5')).toBe(false);
+ flushSync();
+
+ expect(fen.runs).toBe(1);
+ });
+
+ it('does not notify when a shorter opponent PGN is ignored', () => {
+ game.init({ pgn: '1. e4 e5', myColor: 'white' });
+ const moves = track(() => game.moves);
+
+ expect(game.applyOpponentMove('1. e4')).toBe(false);
+ flushSync();
+
+ expect(moves.runs).toBe(1);
+ });
+
+ it('notifies consumers when a new game is loaded', () => {
+ game.init({ pgn: '1. e4 e5', myColor: 'white' });
+ const moves = track(() => game.moves);
+
+ game.init({ myColor: 'black' });
+ flushSync();
+
+ expect(moves.runs).toBe(2);
+ expect(game.moves).toEqual([]);
+ });
+});
+
describe('tryMove', () => {
it('applies a legal move on my turn', () => {
game.init({ myColor: 'white' });
expect(game.tryMove('e2', 'e4')).toBe(true);
expect(game.turnColor).toBe('black');
expect(game.lastMove).toEqual(['e2', 'e4']);
+ expect(game.moves).toEqual(['e4']);
+ expect(game.isMyTurn).toBe(false);
});
it('refuses to move when it is not my turn', () => {
diff --git a/vite.config.ts b/vite.config.ts
index 73e51f8..caa4ba5 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,10 +2,12 @@ import tailwindcss from '@tailwindcss/vite';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
plugins: [tailwindcss(), sveltekit()],
server: {
host: '127.0.0.1',
port: 5173
- }
-});
+ },
+ // Tests exercise runes, and $state/$effect are inert in Svelte's server build.
+ resolve: mode === 'test' ? { conditions: ['browser'] } : undefined
+}));