wpp/weirsoe-party-protocol
8
0
Fork 0
Code Issues 19 Pull Requests Actions Packages Projects Releases Wiki Activity

[SPA][P4] #169 Gameplay MVP del 1: lobby join + start round flow (v2) #176

Merged
integrator-bot merged 5 commits from issue-169-spa-lobby-join-start-round into main 2026-03-01 14:44:42 +01:00
Conversation 9 Commits 5 Files Changed 4 +244 -65
4 changed files with 244 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/src/api/angular-client.ts
View File

@@ -1,4 +1,13 @@
import type { ApiFailure, ApiResult, HealthResponse, SessionDetailResponse } from './types';
import type {
ApiFailure,
ApiResult,
HealthResponse,
JoinSessionRequest,
JoinSessionResponse,
SessionDetailResponse,
StartRoundRequest,
StartRoundResponse
} from './types';
export interface AngularHttpError {
status?: number;
@@ -8,11 +17,14 @@ export interface AngularHttpError {
export interface AngularHttpClientLike {
get<T>(url: string, options?: { withCredentials?: boolean }): Promise<T>;
post<T>(url: string, body: unknown, options?: { withCredentials?: boolean }): Promise<T>;
}
export interface AngularApiClient {
health(): Promise<ApiResult<HealthResponse>>;
getSession(code: string): Promise<ApiResult<SessionDetailResponse>>;
joinSession(payload: JoinSessionRequest): Promise<ApiResult<JoinSessionResponse>>;
startRound(code: string, payload: StartRoundRequest): Promise<ApiResult<StartRoundResponse>>;
}
function toFailure(error: unknown): ApiFailure {
@@ -40,23 +52,46 @@ function normalizeCode(code: string): string {
return code.trim().toUpperCase();
}
async function wrapGet<T>(call: () => Promise<T>): Promise<ApiResult<T>> {
async function wrap<T>(call: () => Promise<T>): Promise<ApiResult<T>> {
try {
const data = await call();
return { ok: true, status: 200, data };
} catch (error: unknown) {
return { ok: false, status: typeof (error as AngularHttpError)?.status === 'number' ? (error as AngularHttpError).status! : 0, error: toFailure(error) };
return {
ok: false,
status: typeof (error as AngularHttpError)?.status === 'number' ? (error as AngularHttpError).status! : 0,
error: toFailure(error)
};
}
}
export function createAngularApiClient(http: AngularHttpClientLike, baseUrl = ''): AngularApiClient {
return {
health: () => wrapGet(() => http.get<HealthResponse>(`${baseUrl}/healthz`, { withCredentials: true })),
health: () => wrap(() => http.get<HealthResponse>(`${baseUrl}/healthz`, { withCredentials: true })),
getSession: (code: string) =>
wrapGet(() =>
wrap(() =>
http.get<SessionDetailResponse>(`${baseUrl}/lobby/sessions/${encodeURIComponent(normalizeCode(code))}`, {
withCredentials: true
})
),
joinSession: (payload: JoinSessionRequest) =>
wrap(() =>
http.post<JoinSessionResponse>(
`${baseUrl}/lobby/sessions/join`,
{
code: normalizeCode(payload.code),
nickname: payload.nickname.trim()
},
{ withCredentials: true }
)
),
startRound: (code: string, payload: StartRoundRequest) =>
wrap(() =>
http.post<StartRoundResponse>(
`${baseUrl}/lobby/sessions/${encodeURIComponent(normalizeCode(code))}/rounds/start`,
payload,
{ withCredentials: true }
)
)
};
}

76
frontend/src/spa/vertical-slice.ts
View File

@@ -1,13 +1,19 @@
import type { ApiClient } from '../api/client';
import type { SessionDetailResponse } from '../api/types';
import { createSessionContextStore, type SessionContext, type SessionContextStore } from './session-context-store';
import {
createSessionContextStore,
type SessionContext,
type SessionContextInput,
type SessionContextStore as PersistedSessionContextStore
} from './session-context-store';
export type AsyncState = 'idle' | 'loading' | 'success' | 'error';
export type SessionContextStore = Pick<PersistedSessionContextStore, 'get' | 'set'>;
export interface VerticalSliceState {
sessionCode: string;
session: SessionDetailResponse | null;
context: SessionContext | null;
joinState: AsyncState;
startRoundState: AsyncState;
loadingSession: boolean;
@@ -25,10 +31,11 @@ export function createVerticalSliceController(
api: ApiClient,
sessionContextStore: SessionContextStore = createSessionContextStore()
): VerticalSliceController {
const persistedContext = sessionContextStore.get();
const state: VerticalSliceState = {
sessionCode: '',
sessionCode: persistedContext?.sessionCode ?? '',
session: null,
context: sessionContextStore.get(),
joinState: 'idle',
startRoundState: 'idle',
loadingSession: false,
@@ -37,31 +44,20 @@ 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<VerticalSliceState> {
state.loadingSession = true;
state.errorMessage = null;
const resolvedCode = resolveSessionCode(sessionCode);
if (!resolvedCode) {
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 };
}
state.sessionCode = resolvedCode;
const result = await api.getSession(state.sessionCode);
state.loadingSession = false;
@@ -71,7 +67,12 @@ export function createVerticalSliceController(
}
state.session = result.data;
syncContext();
state.sessionCode = normalizeCode(result.data.session.code);
if (persistedContext && state.sessionCode === normalizeCode(persistedContext.sessionCode)) {
sessionContextStore.set({ ...persistedContext, sessionCode: state.sessionCode });
}
return { ...state };
}
@@ -79,36 +80,45 @@ export function createVerticalSliceController(
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.';
return { ...state };
}
sessionContextStore.set({
sessionCode: join.data.session.code,
state.joinState = 'success';
state.sessionCode = normalizeCode(join.data.session.code || requestCode);
const nextContext: SessionContextInput = {
sessionCode: state.sessionCode,
playerId: join.data.player.id,
token: join.data.player.session_token
});
syncContext();
};
sessionContextStore.set(nextContext);
state.joinState = 'success';
return hydrateLobby(join.data.session.code);
return hydrateLobby(state.sessionCode);
}
async function startRound(sessionCode: string, categorySlug: string): Promise<VerticalSliceState> {
state.startRoundState = 'loading';
state.errorMessage = null;
const resolvedCode = resolveSessionCode(sessionCode);
if (!resolvedCode) {
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(resolvedCode, { category_slug: categorySlug });
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.';
@@ -116,7 +126,7 @@ export function createVerticalSliceController(
}
state.startRoundState = 'success';
return hydrateLobby(resolvedCode);
return hydrateLobby(codeToUse);
}
return {
@@ -126,3 +136,5 @@ export function createVerticalSliceController(
startRound
};
}
export type { SessionContext };

65
frontend/tests/angular-api-client.test.ts
View File

@@ -49,7 +49,27 @@ describe('createAngularApiClient', () => {
throw { status: 404, error: { error: 'Not found' } };
});
const http = { get };
const post = vi.fn<AngularHttpClientLike['post']>(async <T>(url: string, body: unknown) => {
if (url === '/lobby/sessions/join') {
expect(body).toEqual({ code: 'ABCD12', nickname: 'Maja' });
return {
player: { id: 9, nickname: 'Maja', session_token: 'token-1', score: 0 },
session: { code: 'ABCD12', status: 'lobby' }
} as T;
}
if (url === '/lobby/sessions/ABCD12/rounds/start') {
expect(body).toEqual({ category_slug: 'history' });
return {
session: { code: 'ABCD12', status: 'lie', current_round: 1 },
round: { number: 1, category: { slug: 'history', name: 'History' } }
} as T;
}
throw { status: 404, error: { error: 'Not found' } };
});
const http = { get, post };
const client = createAngularApiClient(http as AngularHttpClientLike);
const health = await client.health();
@@ -67,26 +87,55 @@ describe('createAngularApiClient', () => {
expect(session.data.phase_view_model.host.can_start_round).toBe(true);
}
const join = await client.joinSession({ code: ' abcd12 ', nickname: ' Maja ' });
expect(join.ok).toBe(true);
const start = await client.startRound(' abcd12 ', { category_slug: 'history' });
expect(start.ok).toBe(true);
expect(get).toHaveBeenNthCalledWith(1, '/healthz', { withCredentials: true });
expect(get).toHaveBeenNthCalledWith(2, '/lobby/sessions/ABCD12', { withCredentials: true });
expect(post).toHaveBeenNthCalledWith(
1,
'/lobby/sessions/join',
{ code: 'ABCD12', nickname: 'Maja' },
{ withCredentials: true }
);
expect(post).toHaveBeenNthCalledWith(
2,
'/lobby/sessions/ABCD12/rounds/start',
{ category_slug: 'history' },
{ withCredentials: true }
);
});
it('maps HttpErrorResponse-style failures to ApiResult errors', async () => {
const http = {
get: vi.fn<AngularHttpClientLike['get']>(async () => {
throw { status: 503, message: 'Service unavailable', error: { error: 'maintenance' } };
}),
post: vi.fn<AngularHttpClientLike['post']>(async () => {
throw { status: 403, message: 'Forbidden', error: { error: 'Only host can start round' } };
})
};
const client = createAngularApiClient(http as AngularHttpClientLike);
const result = await client.health();
const health = await client.health();
expect(result.ok).toBe(false);
if (!result.ok) {
expect(result.status).toBe(503);
expect(result.error.kind).toBe('http');
expect(result.error.payload).toEqual({ error: 'maintenance' });
expect(result.error.message).toContain('Service unavailable');
expect(health.ok).toBe(false);
if (!health.ok) {
expect(health.status).toBe(503);
expect(health.error.kind).toBe('http');
expect(health.error.payload).toEqual({ error: 'maintenance' });
expect(health.error.message).toContain('Service unavailable');
}
const start = await client.startRound('ABCD12', { category_slug: 'history' });
expect(start.ok).toBe(false);
if (!start.ok) {
expect(start.status).toBe(403);
expect(start.error.kind).toBe('http');
expect(start.error.payload).toEqual({ error: 'Only host can start round' });
}
});
});

123
frontend/tests/vertical-slice.test.ts
View File

@@ -1,6 +1,9 @@
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 {
createVerticalSliceController,
type SessionContext,
type SessionContextStore
} from '../src/spa/vertical-slice';
import type { ApiClient } from '../src/api/client';
function makeApiMock(overrides?: Partial<ApiClient>): ApiClient {
@@ -59,24 +62,52 @@ function makeApiMock(overrides?: Partial<ApiClient>): ApiClient {
return { ...base, ...overrides };
}
function makeMemoryStorage(): StorageLike {
const memory = new Map<string, string>();
function makeSessionContextStore(initial: SessionContext | null = null): SessionContextStore {
let value = initial;
return {
getItem: (key: string) => memory.get(key) ?? null,
setItem: (key: string, value: string) => {
memory.set(key, value);
},
removeItem: (key: string) => {
memory.delete(key);
}
get: vi.fn(() => value),
set: vi.fn((next: SessionContext) => {
value = next;
return next;
})
};
}
describe('vertical slice controller: lobby -> join -> start round', () => {
it('tracks loading and success state for join + start flow and stores session context', async () => {
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<typeof import('../src/spa/session-context-store')>('../src/spa/session-context-store');
return {
...actual,
createSessionContextStore: vi.fn(() => defaultStore)
};
});
const { createVerticalSliceController: createControllerWithMock } = await import('../src/spa/vertical-slice');
const api = makeApiMock();
const store = createSessionContextStore(makeMemoryStorage());
const controller = createVerticalSliceController(api, store);
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);
const beforeJoinPromise = controller.joinLobby('abcd12', 'Maja');
expect(controller.getState().joinState).toBe('loading');
@@ -85,15 +116,43 @@ 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' });
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('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',
playerId: 9,
token: 'token-1'
});
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',
playerId: 5,
token: 'token-old'
});
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 () => {
@@ -130,14 +189,38 @@ describe('vertical slice controller: lobby -> join -> start round', () => {
expect(state.errorMessage).toContain('Kunne ikke starte runden');
});
it('returns explicit error when hydrate has no session code in input or context', async () => {
it('shows local validation error and avoids API call when hydrating without any session code', async () => {
const api = makeApiMock();
const controller = createVerticalSliceController(api);
const controller = createVerticalSliceController(api, makeSessionContextStore(null));
await controller.hydrateLobby(' ');
const state = controller.getState();
expect(state.errorMessage).toContain('Session-kode mangler');
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');
});
});