From ff6f3ef3328acda46a4b990abebd53536038d824 Mon Sep 17 00:00:00 2001 From: Asger Geel Weirsoee Date: Sun, 1 Mar 2026 12:42:06 +0000 Subject: [PATCH] feat(spa): add gameplay phase state-machine skeleton --- frontend/src/spa/gameplay-phase-machine.ts | 58 ++++++++++ frontend/src/spa/vertical-slice.ts | 5 + frontend/tests/gameplay-phase-machine.test.ts | 106 ++++++++++++++++++ frontend/tests/vertical-slice.test.ts | 1 + 4 files changed, 170 insertions(+) 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 6c13e1f..f531f53 100644 --- a/frontend/src/spa/vertical-slice.ts +++ b/frontend/src/spa/vertical-slice.ts @@ -1,11 +1,13 @@ import type { ApiClient } from '../api/client'; import type { SessionDetailResponse } from '../api/types'; +import { deriveGameplayPhase, type GameplayPhase } from './gameplay-phase-machine'; export type AsyncState = 'idle' | 'loading' | 'success' | 'error'; export interface VerticalSliceState { sessionCode: string; session: SessionDetailResponse | null; + gameplayPhase: GameplayPhase | null; joinState: AsyncState; startRoundState: AsyncState; loadingSession: boolean; @@ -23,6 +25,7 @@ export function createVerticalSliceController(api: ApiClient): VerticalSliceCont const state: VerticalSliceState = { sessionCode: '', session: null, + gameplayPhase: null, joinState: 'idle', startRoundState: 'idle', loadingSession: false, @@ -41,10 +44,12 @@ export function createVerticalSliceController(api: ApiClient): VerticalSliceCont if (!result.ok) { state.errorMessage = 'Kunne ikke hente lobby-status.'; + state.gameplayPhase = null; return { ...state }; } state.session = result.data; + state.gameplayPhase = deriveGameplayPhase(result.data); return { ...state }; } 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 cbc368a..abaeebd 100644 --- a/frontend/tests/vertical-slice.test.ts +++ b/frontend/tests/vertical-slice.test.ts @@ -70,6 +70,7 @@ 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');