From 093a928e6ac262be39525dd4405279ea471880b4 Mon Sep 17 00:00:00 2001 From: Asger Geel Weirsoee Date: Sun, 1 Mar 2026 12:42:06 +0000 Subject: [PATCH 1/4] feat(spa): add gameplay phase state-machine skeleton --- frontend/src/spa/gameplay-phase-machine.ts | 58 ++++++++++ frontend/src/spa/vertical-slice.ts | 56 ++------- frontend/tests/gameplay-phase-machine.test.ts | 106 ++++++++++++++++++ frontend/tests/vertical-slice.test.ts | 35 +----- 4 files changed, 178 insertions(+), 77 deletions(-) create mode 100644 frontend/src/spa/gameplay-phase-machine.ts create mode 100644 frontend/tests/gameplay-phase-machine.test.ts diff --git a/frontend/src/spa/gameplay-phase-machine.ts b/frontend/src/spa/gameplay-phase-machine.ts new file mode 100644 index 0000000..a2c24a1 --- /dev/null +++ b/frontend/src/spa/gameplay-phase-machine.ts @@ -0,0 +1,58 @@ +import type { SessionDetailResponse } from '../api/types'; + +export type GameplayPhase = 'lie' | 'guess' | 'reveal' | 'scoreboard'; + +export type GameplayPhaseEvent = + | 'LIES_LOCKED' + | 'GUESSES_LOCKED' + | 'SCOREBOARD_READY' + | 'NEXT_ROUND'; + +export interface GameplayTransitionResult { + phase: GameplayPhase; + changed: boolean; +} + +const TRANSITIONS: Record>> = { + lie: { + LIES_LOCKED: 'guess' + }, + guess: { + GUESSES_LOCKED: 'reveal' + }, + reveal: { + SCOREBOARD_READY: 'scoreboard' + }, + scoreboard: { + NEXT_ROUND: 'lie' + } +}; + +export function transitionGameplayPhase(phase: GameplayPhase, event: GameplayPhaseEvent): GameplayTransitionResult { + const next = TRANSITIONS[phase][event] ?? phase; + return { + phase: next, + changed: next !== phase + }; +} + +export function allowedGameplayEvents(phase: GameplayPhase): GameplayPhaseEvent[] { + return Object.keys(TRANSITIONS[phase]) as GameplayPhaseEvent[]; +} + +export function deriveGameplayPhase(session: SessionDetailResponse | null): GameplayPhase | null { + const status = session?.session.status; + if (!status) { + return null; + } + + if (status === 'lie' || status === 'guess' || status === 'reveal') { + return status; + } + + if (status === 'finished') { + return 'scoreboard'; + } + + return null; +} diff --git a/frontend/src/spa/vertical-slice.ts b/frontend/src/spa/vertical-slice.ts index a93e60d..f531f53 100644 --- a/frontend/src/spa/vertical-slice.ts +++ b/frontend/src/spa/vertical-slice.ts @@ -1,13 +1,13 @@ import type { ApiClient } from '../api/client'; import type { SessionDetailResponse } from '../api/types'; -import { createSessionContextStore, type SessionContext, type SessionContextStore } from './session-context-store'; +import { deriveGameplayPhase, type GameplayPhase } from './gameplay-phase-machine'; export type AsyncState = 'idle' | 'loading' | 'success' | 'error'; export interface VerticalSliceState { sessionCode: string; session: SessionDetailResponse | null; - context: SessionContext | null; + gameplayPhase: GameplayPhase | null; joinState: AsyncState; startRoundState: AsyncState; loadingSession: boolean; @@ -21,14 +21,11 @@ export interface VerticalSliceController { startRound(sessionCode: string, categorySlug: string): Promise; } -export function createVerticalSliceController( - api: ApiClient, - sessionContextStore: SessionContextStore = createSessionContextStore() -): VerticalSliceController { +export function createVerticalSliceController(api: ApiClient): VerticalSliceController { const state: VerticalSliceState = { sessionCode: '', session: null, - context: sessionContextStore.get(), + gameplayPhase: null, joinState: 'idle', startRoundState: 'idle', loadingSession: false, @@ -37,41 +34,22 @@ export function createVerticalSliceController( const normalizeCode = (value: string): string => value.trim().toUpperCase(); - function syncContext(): void { - state.context = sessionContextStore.get(); - } - - function resolveSessionCode(inputCode: string): string { - const normalizedInput = normalizeCode(inputCode); - if (normalizedInput) { - return normalizedInput; - } - - return state.context?.sessionCode ?? ''; - } - async function hydrateLobby(sessionCode: string): Promise { state.loadingSession = true; state.errorMessage = null; - const resolvedCode = resolveSessionCode(sessionCode); + state.sessionCode = normalizeCode(sessionCode); - if (!resolvedCode) { - state.loadingSession = false; - state.errorMessage = 'Session-kode mangler.'; - return { ...state }; - } - - state.sessionCode = resolvedCode; const result = await api.getSession(state.sessionCode); state.loadingSession = false; if (!result.ok) { state.errorMessage = 'Kunne ikke hente lobby-status.'; + state.gameplayPhase = null; return { ...state }; } state.session = result.data; - syncContext(); + state.gameplayPhase = deriveGameplayPhase(result.data); return { ...state }; } @@ -86,29 +64,15 @@ export function createVerticalSliceController( return { ...state }; } - sessionContextStore.set({ - sessionCode: join.data.session.code, - playerId: join.data.player.id, - token: join.data.player.session_token - }); - syncContext(); - state.joinState = 'success'; - return hydrateLobby(join.data.session.code); + return hydrateLobby(sessionCode); } async function startRound(sessionCode: string, categorySlug: string): Promise { state.startRoundState = 'loading'; state.errorMessage = null; - const resolvedCode = resolveSessionCode(sessionCode); - if (!resolvedCode) { - state.startRoundState = 'error'; - state.errorMessage = 'Session-kode mangler.'; - return { ...state }; - } - - const start = await api.startRound(resolvedCode, { category_slug: categorySlug }); + const start = await api.startRound(sessionCode, { category_slug: categorySlug }); if (!start.ok) { state.startRoundState = 'error'; state.errorMessage = 'Kunne ikke starte runden. Opdatér lobbyen og prøv igen.'; @@ -116,7 +80,7 @@ export function createVerticalSliceController( } state.startRoundState = 'success'; - return hydrateLobby(resolvedCode); + return hydrateLobby(sessionCode); } return { diff --git a/frontend/tests/gameplay-phase-machine.test.ts b/frontend/tests/gameplay-phase-machine.test.ts new file mode 100644 index 0000000..2d71a7b --- /dev/null +++ b/frontend/tests/gameplay-phase-machine.test.ts @@ -0,0 +1,106 @@ +import { describe, expect, it } from 'vitest'; +import { + allowedGameplayEvents, + deriveGameplayPhase, + transitionGameplayPhase, + type GameplayPhase +} from '../src/spa/gameplay-phase-machine'; + +describe('gameplay phase machine skeleton', () => { + it('supports canonical phase progression lie -> guess -> reveal -> scoreboard -> lie', () => { + let phase: GameplayPhase = 'lie'; + + phase = transitionGameplayPhase(phase, 'LIES_LOCKED').phase; + expect(phase).toBe('guess'); + + phase = transitionGameplayPhase(phase, 'GUESSES_LOCKED').phase; + expect(phase).toBe('reveal'); + + phase = transitionGameplayPhase(phase, 'SCOREBOARD_READY').phase; + expect(phase).toBe('scoreboard'); + + phase = transitionGameplayPhase(phase, 'NEXT_ROUND').phase; + expect(phase).toBe('lie'); + }); + + it('keeps state unchanged for invalid transition events', () => { + const transition = transitionGameplayPhase('lie', 'NEXT_ROUND'); + expect(transition.phase).toBe('lie'); + expect(transition.changed).toBe(false); + }); + + it('exposes allowed events per phase', () => { + expect(allowedGameplayEvents('guess')).toEqual(['GUESSES_LOCKED']); + expect(allowedGameplayEvents('scoreboard')).toEqual(['NEXT_ROUND']); + }); + + it('derives gameplay phase from session detail status', () => { + expect( + deriveGameplayPhase({ + session: { code: 'ABCD12', status: 'lie', host_id: 1, current_round: 1, players_count: 3 }, + players: [], + round_question: null, + phase_view_model: { + status: 'lie', + round_number: 1, + players_count: 3, + constraints: { + min_players_to_start: 3, + max_players_mvp: 5, + min_players_reached: true, + max_players_allowed: true + }, + host: { + can_start_round: false, + can_show_question: true, + can_mix_answers: true, + can_calculate_scores: false, + can_reveal_scoreboard: false, + can_start_next_round: false, + can_finish_game: false + }, + player: { + can_join: false, + can_submit_lie: true, + can_submit_guess: false, + can_view_final_result: false + } + } + }) + ).toBe('lie'); + + expect( + deriveGameplayPhase({ + session: { code: 'ABCD12', status: 'finished', host_id: 1, current_round: 1, players_count: 3 }, + players: [], + round_question: null, + phase_view_model: { + status: 'finished', + round_number: 1, + players_count: 3, + constraints: { + min_players_to_start: 3, + max_players_mvp: 5, + min_players_reached: true, + max_players_allowed: true + }, + host: { + can_start_round: false, + can_show_question: false, + can_mix_answers: false, + can_calculate_scores: false, + can_reveal_scoreboard: false, + can_start_next_round: false, + can_finish_game: false + }, + player: { + can_join: false, + can_submit_lie: false, + can_submit_guess: false, + can_view_final_result: true + } + } + }) + ).toBe('scoreboard'); + }); +}); diff --git a/frontend/tests/vertical-slice.test.ts b/frontend/tests/vertical-slice.test.ts index ae81175..abaeebd 100644 --- a/frontend/tests/vertical-slice.test.ts +++ b/frontend/tests/vertical-slice.test.ts @@ -1,6 +1,5 @@ import { describe, expect, it, vi } from 'vitest'; import { createVerticalSliceController } from '../src/spa/vertical-slice'; -import { createSessionContextStore, type StorageLike } from '../src/spa/session-context-store'; import type { ApiClient } from '../src/api/client'; function makeApiMock(overrides?: Partial): ApiClient { @@ -59,24 +58,10 @@ function makeApiMock(overrides?: Partial): ApiClient { return { ...base, ...overrides }; } -function makeMemoryStorage(): StorageLike { - const memory = new Map(); - return { - getItem: (key: string) => memory.get(key) ?? null, - setItem: (key: string, value: string) => { - memory.set(key, value); - }, - removeItem: (key: string) => { - memory.delete(key); - } - }; -} - describe('vertical slice controller: lobby -> join -> start round', () => { - it('tracks loading and success state for join + start flow and stores session context', async () => { + it('tracks loading and success state for join + start flow', async () => { const api = makeApiMock(); - const store = createSessionContextStore(makeMemoryStorage()); - const controller = createVerticalSliceController(api, store); + const controller = createVerticalSliceController(api); const beforeJoinPromise = controller.joinLobby('abcd12', 'Maja'); expect(controller.getState().joinState).toBe('loading'); @@ -85,15 +70,14 @@ describe('vertical slice controller: lobby -> join -> start round', () => { const postJoin = controller.getState(); expect(postJoin.joinState).toBe('success'); expect(postJoin.session?.session.code).toBe('ABCD12'); - expect(postJoin.context).toEqual({ sessionCode: 'ABCD12', playerId: 9, token: 'token-1' }); + expect(postJoin.gameplayPhase).toBeNull(); - const beforeStartPromise = controller.startRound('', 'history'); + const beforeStartPromise = controller.startRound('abcd12', 'history'); expect(controller.getState().startRoundState).toBe('loading'); await beforeStartPromise; const postStart = controller.getState(); expect(postStart.startRoundState).toBe('success'); - expect(api.startRound).toHaveBeenCalledWith('ABCD12', { category_slug: 'history' }); }); it('surfaces a friendly error when join fails', async () => { @@ -129,15 +113,4 @@ describe('vertical slice controller: lobby -> join -> start round', () => { expect(state.startRoundState).toBe('error'); expect(state.errorMessage).toContain('Kunne ikke starte runden'); }); - - it('returns explicit error when hydrate has no session code in input or context', async () => { - const api = makeApiMock(); - const controller = createVerticalSliceController(api); - - await controller.hydrateLobby(' '); - - const state = controller.getState(); - expect(state.errorMessage).toContain('Session-kode mangler'); - expect(api.getSession).not.toHaveBeenCalled(); - }); }); -- 2.39.5 From 24a319fd8f68a1bb9d8902a2b9aa7e6312a5ba14 Mon Sep 17 00:00:00 2001 From: Asger Geel Weirsoee Date: Sun, 1 Mar 2026 12:50:29 +0000 Subject: [PATCH 2/4] fix(frontend): restore session context behavior in vertical slice --- frontend/src/spa/vertical-slice.ts | 60 +++++++++++++++++++++++---- frontend/tests/vertical-slice.test.ts | 46 +++++++++++++++++++- 2 files changed, 98 insertions(+), 8 deletions(-) diff --git a/frontend/src/spa/vertical-slice.ts b/frontend/src/spa/vertical-slice.ts index f531f53..a63bf93 100644 --- a/frontend/src/spa/vertical-slice.ts +++ b/frontend/src/spa/vertical-slice.ts @@ -4,6 +4,17 @@ import { deriveGameplayPhase, type GameplayPhase } from './gameplay-phase-machin export type AsyncState = 'idle' | 'loading' | 'success' | 'error'; +export interface SessionContext { + sessionCode: string; + playerToken: string; + nickname: string; +} + +export interface SessionContextStore { + get(): SessionContext | null; + set(context: SessionContext): void; +} + export interface VerticalSliceState { sessionCode: string; session: SessionDetailResponse | null; @@ -21,9 +32,19 @@ export interface VerticalSliceController { startRound(sessionCode: string, categorySlug: string): Promise; } -export function createVerticalSliceController(api: ApiClient): VerticalSliceController { +const NOOP_SESSION_CONTEXT_STORE: SessionContextStore = { + get: () => null, + set: () => undefined +}; + +export function createVerticalSliceController( + api: ApiClient, + sessionContextStore: SessionContextStore = NOOP_SESSION_CONTEXT_STORE +): VerticalSliceController { + const persistedContext = sessionContextStore.get(); + const state: VerticalSliceState = { - sessionCode: '', + sessionCode: persistedContext?.sessionCode ?? '', session: null, gameplayPhase: null, joinState: 'idle', @@ -37,7 +58,10 @@ export function createVerticalSliceController(api: ApiClient): VerticalSliceCont async function hydrateLobby(sessionCode: string): Promise { state.loadingSession = true; state.errorMessage = null; - state.sessionCode = normalizeCode(sessionCode); + + const normalizedRequestedCode = normalizeCode(sessionCode); + const fallbackCode = normalizeCode(state.sessionCode || persistedContext?.sessionCode || ''); + state.sessionCode = normalizedRequestedCode || fallbackCode; const result = await api.getSession(state.sessionCode); state.loadingSession = false; @@ -50,6 +74,12 @@ export function createVerticalSliceController(api: ApiClient): VerticalSliceCont state.session = result.data; state.gameplayPhase = deriveGameplayPhase(result.data); + state.sessionCode = normalizeCode(result.data.session.code); + + if (persistedContext && state.sessionCode === normalizeCode(persistedContext.sessionCode)) { + sessionContextStore.set({ ...persistedContext, sessionCode: state.sessionCode }); + } + return { ...state }; } @@ -57,7 +87,11 @@ export function createVerticalSliceController(api: ApiClient): VerticalSliceCont state.joinState = 'loading'; state.errorMessage = null; - const join = await api.joinSession({ code: sessionCode, nickname }); + const normalizedRequestedCode = normalizeCode(sessionCode); + const fallbackCode = normalizeCode(state.sessionCode || persistedContext?.sessionCode || ''); + const requestCode = normalizedRequestedCode || fallbackCode; + + const join = await api.joinSession({ code: requestCode, nickname }); if (!join.ok) { state.joinState = 'error'; state.errorMessage = 'Join fejlede. Tjek kode eller nickname og prøv igen.'; @@ -65,14 +99,26 @@ export function createVerticalSliceController(api: ApiClient): VerticalSliceCont } state.joinState = 'success'; - return hydrateLobby(sessionCode); + state.sessionCode = normalizeCode(join.data.session.code || requestCode); + + sessionContextStore.set({ + sessionCode: state.sessionCode, + playerToken: join.data.player.session_token, + nickname: join.data.player.nickname + }); + + return hydrateLobby(state.sessionCode); } async function startRound(sessionCode: string, categorySlug: string): Promise { state.startRoundState = 'loading'; state.errorMessage = null; - const start = await api.startRound(sessionCode, { category_slug: categorySlug }); + const normalizedRequestedCode = normalizeCode(sessionCode); + const fallbackCode = normalizeCode(state.sessionCode || persistedContext?.sessionCode || ''); + const codeToUse = normalizedRequestedCode || fallbackCode; + + const start = await api.startRound(codeToUse, { category_slug: categorySlug }); if (!start.ok) { state.startRoundState = 'error'; state.errorMessage = 'Kunne ikke starte runden. Opdatér lobbyen og prøv igen.'; @@ -80,7 +126,7 @@ export function createVerticalSliceController(api: ApiClient): VerticalSliceCont } state.startRoundState = 'success'; - return hydrateLobby(sessionCode); + return hydrateLobby(codeToUse); } return { diff --git a/frontend/tests/vertical-slice.test.ts b/frontend/tests/vertical-slice.test.ts index abaeebd..ef1e004 100644 --- a/frontend/tests/vertical-slice.test.ts +++ b/frontend/tests/vertical-slice.test.ts @@ -1,5 +1,9 @@ import { describe, expect, it, vi } from 'vitest'; -import { createVerticalSliceController } from '../src/spa/vertical-slice'; +import { + createVerticalSliceController, + type SessionContext, + type SessionContextStore +} from '../src/spa/vertical-slice'; import type { ApiClient } from '../src/api/client'; function makeApiMock(overrides?: Partial): ApiClient { @@ -58,6 +62,16 @@ function makeApiMock(overrides?: Partial): ApiClient { return { ...base, ...overrides }; } +function makeSessionContextStore(initial: SessionContext | null = null): SessionContextStore { + let value = initial; + return { + get: vi.fn(() => value), + set: vi.fn((next: SessionContext) => { + value = next; + }) + }; +} + describe('vertical slice controller: lobby -> join -> start round', () => { it('tracks loading and success state for join + start flow', async () => { const api = makeApiMock(); @@ -80,6 +94,36 @@ describe('vertical slice controller: lobby -> join -> start round', () => { expect(postStart.startRoundState).toBe('success'); }); + it('persists session context after join and syncs normalized session code', async () => { + const api = makeApiMock(); + const sessionContextStore = makeSessionContextStore(); + const controller = createVerticalSliceController(api, sessionContextStore); + + await controller.joinLobby('abcd12', 'Maja'); + + expect(sessionContextStore.set).toHaveBeenCalledWith({ + sessionCode: 'ABCD12', + playerToken: 'token-1', + nickname: 'Maja' + }); + expect(controller.getState().sessionCode).toBe('ABCD12'); + }); + + it('uses stored session code as fallback for join + hydrate flow when input code is empty', async () => { + const api = makeApiMock(); + const sessionContextStore = makeSessionContextStore({ + sessionCode: 'wxyz99', + playerToken: 'token-old', + nickname: 'Maja' + }); + const controller = createVerticalSliceController(api, sessionContextStore); + + await controller.joinLobby(' ', 'Maja'); + + expect(api.joinSession).toHaveBeenCalledWith({ code: 'WXYZ99', nickname: 'Maja' }); + expect(api.getSession).toHaveBeenCalledWith('ABCD12'); + }); + it('surfaces a friendly error when join fails', async () => { const api = makeApiMock({ joinSession: vi.fn().mockResolvedValue({ -- 2.39.5 From b0aca04420d7a02a52eddb9a20be757189d779d3 Mon Sep 17 00:00:00 2001 From: Asger Geel Weirsoee Date: Sun, 1 Mar 2026 12:53:58 +0000 Subject: [PATCH 3/4] fix(frontend): restore session context store integration in vertical slice --- frontend/src/spa/vertical-slice.ts | 33 +++++++++------ frontend/tests/vertical-slice.test.ts | 61 +++++++++++++++++++++++++++ 2 files changed, 80 insertions(+), 14 deletions(-) diff --git a/frontend/src/spa/vertical-slice.ts b/frontend/src/spa/vertical-slice.ts index a63bf93..a89b18b 100644 --- a/frontend/src/spa/vertical-slice.ts +++ b/frontend/src/spa/vertical-slice.ts @@ -41,10 +41,10 @@ export function createVerticalSliceController( api: ApiClient, sessionContextStore: SessionContextStore = NOOP_SESSION_CONTEXT_STORE ): VerticalSliceController { - const persistedContext = sessionContextStore.get(); + let contextState = sessionContextStore.get(); const state: VerticalSliceState = { - sessionCode: persistedContext?.sessionCode ?? '', + sessionCode: contextState?.sessionCode ?? '', session: null, gameplayPhase: null, joinState: 'idle', @@ -55,13 +55,22 @@ export function createVerticalSliceController( const normalizeCode = (value: string): string => value.trim().toUpperCase(); + const syncContext = (next: SessionContext): void => { + contextState = next; + sessionContextStore.set(next); + }; + + const resolveSessionCode = (sessionCode: string): string => { + const normalizedRequestedCode = normalizeCode(sessionCode); + const fallbackCode = normalizeCode(state.sessionCode || contextState?.sessionCode || ''); + return normalizedRequestedCode || fallbackCode; + }; + async function hydrateLobby(sessionCode: string): Promise { state.loadingSession = true; state.errorMessage = null; - const normalizedRequestedCode = normalizeCode(sessionCode); - const fallbackCode = normalizeCode(state.sessionCode || persistedContext?.sessionCode || ''); - state.sessionCode = normalizedRequestedCode || fallbackCode; + state.sessionCode = resolveSessionCode(sessionCode); const result = await api.getSession(state.sessionCode); state.loadingSession = false; @@ -76,8 +85,8 @@ export function createVerticalSliceController( state.gameplayPhase = deriveGameplayPhase(result.data); state.sessionCode = normalizeCode(result.data.session.code); - if (persistedContext && state.sessionCode === normalizeCode(persistedContext.sessionCode)) { - sessionContextStore.set({ ...persistedContext, sessionCode: state.sessionCode }); + if (contextState) { + syncContext({ ...contextState, sessionCode: state.sessionCode }); } return { ...state }; @@ -87,9 +96,7 @@ export function createVerticalSliceController( state.joinState = 'loading'; state.errorMessage = null; - const normalizedRequestedCode = normalizeCode(sessionCode); - const fallbackCode = normalizeCode(state.sessionCode || persistedContext?.sessionCode || ''); - const requestCode = normalizedRequestedCode || fallbackCode; + const requestCode = resolveSessionCode(sessionCode); const join = await api.joinSession({ code: requestCode, nickname }); if (!join.ok) { @@ -101,7 +108,7 @@ export function createVerticalSliceController( state.joinState = 'success'; state.sessionCode = normalizeCode(join.data.session.code || requestCode); - sessionContextStore.set({ + syncContext({ sessionCode: state.sessionCode, playerToken: join.data.player.session_token, nickname: join.data.player.nickname @@ -114,9 +121,7 @@ export function createVerticalSliceController( state.startRoundState = 'loading'; state.errorMessage = null; - const normalizedRequestedCode = normalizeCode(sessionCode); - const fallbackCode = normalizeCode(state.sessionCode || persistedContext?.sessionCode || ''); - const codeToUse = normalizedRequestedCode || fallbackCode; + const codeToUse = resolveSessionCode(sessionCode); const start = await api.startRound(codeToUse, { category_slug: categorySlug }); if (!start.ok) { diff --git a/frontend/tests/vertical-slice.test.ts b/frontend/tests/vertical-slice.test.ts index ef1e004..5f9c4ad 100644 --- a/frontend/tests/vertical-slice.test.ts +++ b/frontend/tests/vertical-slice.test.ts @@ -124,6 +124,67 @@ describe('vertical slice controller: lobby -> join -> start round', () => { expect(api.getSession).toHaveBeenCalledWith('ABCD12'); }); + it('uses stored session code for startRound when input code is empty after join', async () => { + const api = makeApiMock(); + const sessionContextStore = makeSessionContextStore(); + const controller = createVerticalSliceController(api, sessionContextStore); + + await controller.joinLobby('abcd12', 'Maja'); + await controller.startRound('', 'history'); + + expect(api.startRound).toHaveBeenCalledWith('ABCD12', { category_slug: 'history' }); + }); + + it('keeps joined player context when hydrate syncs normalized session code', async () => { + const api = makeApiMock({ + getSession: vi.fn().mockResolvedValue({ + ok: true, + status: 200, + data: { + session: { code: 'abcd12', status: 'lobby', host_id: 1, current_round: 1, players_count: 3 }, + players: [], + round_question: null, + phase_view_model: { + status: 'lobby', + round_number: 1, + players_count: 3, + constraints: { + min_players_to_start: 3, + max_players_mvp: 5, + min_players_reached: true, + max_players_allowed: true + }, + host: { + can_start_round: true, + can_show_question: false, + can_mix_answers: false, + can_calculate_scores: false, + can_reveal_scoreboard: false, + can_start_next_round: false, + can_finish_game: false + }, + player: { + can_join: true, + can_submit_lie: false, + can_submit_guess: false, + can_view_final_result: false + } + } + } + }) + }); + const sessionContextStore = makeSessionContextStore(); + const controller = createVerticalSliceController(api, sessionContextStore); + + await controller.joinLobby('abcd12', 'Maja'); + + expect(sessionContextStore.set).toHaveBeenLastCalledWith({ + sessionCode: 'ABCD12', + playerToken: 'token-1', + nickname: 'Maja' + }); + }); + it('surfaces a friendly error when join fails', async () => { const api = makeApiMock({ joinSession: vi.fn().mockResolvedValue({ -- 2.39.5 From 176218c3606cbd8466078d20086fbf2c0eb43248 Mon Sep 17 00:00:00 2001 From: Asger Geel Weirsoee Date: Sun, 1 Mar 2026 14:03:28 +0000 Subject: [PATCH 4/4] fix(frontend): restore default session context persistence and empty-code guards --- frontend/src/spa/vertical-slice.ts | 78 ++++++++------- frontend/tests/vertical-slice.test.ts | 138 ++++++++++++++------------ 2 files changed, 112 insertions(+), 104 deletions(-) diff --git a/frontend/src/spa/vertical-slice.ts b/frontend/src/spa/vertical-slice.ts index a89b18b..7a2d6d0 100644 --- a/frontend/src/spa/vertical-slice.ts +++ b/frontend/src/spa/vertical-slice.ts @@ -1,19 +1,16 @@ import type { ApiClient } from '../api/client'; import type { SessionDetailResponse } from '../api/types'; +import { + createSessionContextStore, + type SessionContext, + type SessionContextInput, + type SessionContextStore as PersistedSessionContextStore +} from './session-context-store'; import { deriveGameplayPhase, type GameplayPhase } from './gameplay-phase-machine'; export type AsyncState = 'idle' | 'loading' | 'success' | 'error'; -export interface SessionContext { - sessionCode: string; - playerToken: string; - nickname: string; -} - -export interface SessionContextStore { - get(): SessionContext | null; - set(context: SessionContext): void; -} +export type SessionContextStore = Pick; export interface VerticalSliceState { sessionCode: string; @@ -32,19 +29,14 @@ export interface VerticalSliceController { startRound(sessionCode: string, categorySlug: string): Promise; } -const NOOP_SESSION_CONTEXT_STORE: SessionContextStore = { - get: () => null, - set: () => undefined -}; - export function createVerticalSliceController( api: ApiClient, - sessionContextStore: SessionContextStore = NOOP_SESSION_CONTEXT_STORE + sessionContextStore: SessionContextStore = createSessionContextStore() ): VerticalSliceController { - let contextState = sessionContextStore.get(); + const persistedContext = sessionContextStore.get(); const state: VerticalSliceState = { - sessionCode: contextState?.sessionCode ?? '', + sessionCode: persistedContext?.sessionCode ?? '', session: null, gameplayPhase: null, joinState: 'idle', @@ -55,22 +47,19 @@ export function createVerticalSliceController( const normalizeCode = (value: string): string => value.trim().toUpperCase(); - const syncContext = (next: SessionContext): void => { - contextState = next; - sessionContextStore.set(next); - }; - - const resolveSessionCode = (sessionCode: string): string => { - const normalizedRequestedCode = normalizeCode(sessionCode); - const fallbackCode = normalizeCode(state.sessionCode || contextState?.sessionCode || ''); - return normalizedRequestedCode || fallbackCode; - }; - async function hydrateLobby(sessionCode: string): Promise { state.loadingSession = true; state.errorMessage = null; - state.sessionCode = resolveSessionCode(sessionCode); + const normalizedRequestedCode = normalizeCode(sessionCode); + const fallbackCode = normalizeCode(state.sessionCode || persistedContext?.sessionCode || ''); + state.sessionCode = normalizedRequestedCode || fallbackCode; + + if (!state.sessionCode) { + state.loadingSession = false; + state.errorMessage = 'Session-kode mangler.'; + return { ...state }; + } const result = await api.getSession(state.sessionCode); state.loadingSession = false; @@ -85,8 +74,8 @@ export function createVerticalSliceController( state.gameplayPhase = deriveGameplayPhase(result.data); state.sessionCode = normalizeCode(result.data.session.code); - if (contextState) { - syncContext({ ...contextState, sessionCode: state.sessionCode }); + if (persistedContext && state.sessionCode === normalizeCode(persistedContext.sessionCode)) { + sessionContextStore.set({ ...persistedContext, sessionCode: state.sessionCode }); } return { ...state }; @@ -96,7 +85,9 @@ export function createVerticalSliceController( state.joinState = 'loading'; state.errorMessage = null; - const requestCode = resolveSessionCode(sessionCode); + const normalizedRequestedCode = normalizeCode(sessionCode); + const fallbackCode = normalizeCode(state.sessionCode || persistedContext?.sessionCode || ''); + const requestCode = normalizedRequestedCode || fallbackCode; const join = await api.joinSession({ code: requestCode, nickname }); if (!join.ok) { @@ -108,11 +99,12 @@ export function createVerticalSliceController( state.joinState = 'success'; state.sessionCode = normalizeCode(join.data.session.code || requestCode); - syncContext({ + const nextContext: SessionContextInput = { sessionCode: state.sessionCode, - playerToken: join.data.player.session_token, - nickname: join.data.player.nickname - }); + playerId: join.data.player.id, + token: join.data.player.session_token + }; + sessionContextStore.set(nextContext); return hydrateLobby(state.sessionCode); } @@ -121,7 +113,15 @@ export function createVerticalSliceController( state.startRoundState = 'loading'; state.errorMessage = null; - const codeToUse = resolveSessionCode(sessionCode); + const normalizedRequestedCode = normalizeCode(sessionCode); + const fallbackCode = normalizeCode(state.sessionCode || persistedContext?.sessionCode || ''); + const codeToUse = normalizedRequestedCode || fallbackCode; + + if (!codeToUse) { + state.startRoundState = 'error'; + state.errorMessage = 'Session-kode mangler.'; + return { ...state }; + } const start = await api.startRound(codeToUse, { category_slug: categorySlug }); if (!start.ok) { @@ -141,3 +141,5 @@ export function createVerticalSliceController( startRound }; } + +export type { SessionContext }; diff --git a/frontend/tests/vertical-slice.test.ts b/frontend/tests/vertical-slice.test.ts index 5f9c4ad..07be788 100644 --- a/frontend/tests/vertical-slice.test.ts +++ b/frontend/tests/vertical-slice.test.ts @@ -68,11 +68,44 @@ function makeSessionContextStore(initial: SessionContext | null = null): Session get: vi.fn(() => value), set: vi.fn((next: SessionContext) => { value = next; + return next; }) }; } describe('vertical slice controller: lobby -> join -> start round', () => { + it('uses createSessionContextStore by default (no manual injection)', async () => { + vi.resetModules(); + const defaultStore = { + get: vi.fn(() => null), + set: vi.fn((next: SessionContext) => next), + clear: vi.fn() + }; + + vi.doMock('../src/spa/session-context-store', async () => { + const actual = await vi.importActual('../src/spa/session-context-store'); + return { + ...actual, + createSessionContextStore: vi.fn(() => defaultStore) + }; + }); + + const { createVerticalSliceController: createControllerWithMock } = await import('../src/spa/vertical-slice'); + const api = makeApiMock(); + const controller = createControllerWithMock(api); + + await controller.joinLobby('ABCD12', 'Maja'); + + expect(defaultStore.set).toHaveBeenCalledWith({ + sessionCode: 'ABCD12', + playerId: 9, + token: 'token-1' + }); + + vi.doUnmock('../src/spa/session-context-store'); + vi.resetModules(); + }); + it('tracks loading and success state for join + start flow', async () => { const api = makeApiMock(); const controller = createVerticalSliceController(api); @@ -84,7 +117,6 @@ describe('vertical slice controller: lobby -> join -> start round', () => { const postJoin = controller.getState(); expect(postJoin.joinState).toBe('success'); expect(postJoin.session?.session.code).toBe('ABCD12'); - expect(postJoin.gameplayPhase).toBeNull(); const beforeStartPromise = controller.startRound('abcd12', 'history'); expect(controller.getState().startRoundState).toBe('loading'); @@ -103,8 +135,8 @@ describe('vertical slice controller: lobby -> join -> start round', () => { expect(sessionContextStore.set).toHaveBeenCalledWith({ sessionCode: 'ABCD12', - playerToken: 'token-1', - nickname: 'Maja' + playerId: 9, + token: 'token-1' }); expect(controller.getState().sessionCode).toBe('ABCD12'); }); @@ -113,8 +145,8 @@ describe('vertical slice controller: lobby -> join -> start round', () => { const api = makeApiMock(); const sessionContextStore = makeSessionContextStore({ sessionCode: 'wxyz99', - playerToken: 'token-old', - nickname: 'Maja' + playerId: 5, + token: 'token-old' }); const controller = createVerticalSliceController(api, sessionContextStore); @@ -124,67 +156,6 @@ describe('vertical slice controller: lobby -> join -> start round', () => { expect(api.getSession).toHaveBeenCalledWith('ABCD12'); }); - it('uses stored session code for startRound when input code is empty after join', async () => { - const api = makeApiMock(); - const sessionContextStore = makeSessionContextStore(); - const controller = createVerticalSliceController(api, sessionContextStore); - - await controller.joinLobby('abcd12', 'Maja'); - await controller.startRound('', 'history'); - - expect(api.startRound).toHaveBeenCalledWith('ABCD12', { category_slug: 'history' }); - }); - - it('keeps joined player context when hydrate syncs normalized session code', async () => { - const api = makeApiMock({ - getSession: vi.fn().mockResolvedValue({ - ok: true, - status: 200, - data: { - session: { code: 'abcd12', status: 'lobby', host_id: 1, current_round: 1, players_count: 3 }, - players: [], - round_question: null, - phase_view_model: { - status: 'lobby', - round_number: 1, - players_count: 3, - constraints: { - min_players_to_start: 3, - max_players_mvp: 5, - min_players_reached: true, - max_players_allowed: true - }, - host: { - can_start_round: true, - can_show_question: false, - can_mix_answers: false, - can_calculate_scores: false, - can_reveal_scoreboard: false, - can_start_next_round: false, - can_finish_game: false - }, - player: { - can_join: true, - can_submit_lie: false, - can_submit_guess: false, - can_view_final_result: false - } - } - } - }) - }); - const sessionContextStore = makeSessionContextStore(); - const controller = createVerticalSliceController(api, sessionContextStore); - - await controller.joinLobby('abcd12', 'Maja'); - - expect(sessionContextStore.set).toHaveBeenLastCalledWith({ - sessionCode: 'ABCD12', - playerToken: 'token-1', - nickname: 'Maja' - }); - }); - it('surfaces a friendly error when join fails', async () => { const api = makeApiMock({ joinSession: vi.fn().mockResolvedValue({ @@ -218,4 +189,39 @@ describe('vertical slice controller: lobby -> join -> start round', () => { expect(state.startRoundState).toBe('error'); expect(state.errorMessage).toContain('Kunne ikke starte runden'); }); + + it('shows local validation error and avoids API call when hydrating without any session code', async () => { + const api = makeApiMock(); + const controller = createVerticalSliceController(api, makeSessionContextStore(null)); + + await controller.hydrateLobby(' '); + + const state = controller.getState(); + expect(state.errorMessage).toBe('Session-kode mangler.'); + expect(state.loadingSession).toBe(false); + expect(api.getSession).not.toHaveBeenCalled(); + }); + + it('shows local validation error and avoids API call when starting round without any session code', async () => { + const api = makeApiMock(); + const controller = createVerticalSliceController(api, makeSessionContextStore(null)); + + await controller.startRound(' ', 'history'); + + const state = controller.getState(); + expect(state.startRoundState).toBe('error'); + expect(state.errorMessage).toBe('Session-kode mangler.'); + expect(api.startRound).not.toHaveBeenCalled(); + }); + + it('uses joined session code when starting round without a reload', async () => { + const api = makeApiMock(); + const controller = createVerticalSliceController(api); + + await controller.joinLobby(' abcd12 ', 'Maja'); + await controller.startRound('', 'history'); + + expect(api.startRound).toHaveBeenCalledWith('ABCD12', { category_slug: 'history' }); + expect(controller.getState().sessionCode).toBe('ABCD12'); + }); }); -- 2.39.5