Merge pull request '[SPA][P4] #169 Gameplay MVP del 1: lobby join + start round flow (v2)' (#176) from issue-169-spa-lobby-join-start-round into main

frontend/src/api/angular-client.ts

@@ -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 }
+        )
       )
   };
 }

frontend/src/spa/vertical-slice.ts

@@ -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({
+    state.joinState = 'success';
-      sessionCode: join.data.session.code,
+    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(state.sessionCode);
-    return hydrateLobby(join.data.session.code);
   }
 
   async function startRound(sessionCode: string, categorySlug: string): Promise<VerticalSliceState> {
     state.startRoundState = 'loading';
     state.errorMessage = null;
 
-    const resolvedCode = resolveSessionCode(sessionCode);
+    const normalizedRequestedCode = normalizeCode(sessionCode);
-    if (!resolvedCode) {
+    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 };

frontend/tests/angular-api-client.test.ts

@@ -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);
+    expect(health.ok).toBe(false);
-    if (!result.ok) {
+    if (!health.ok) {
-      expect(result.status).toBe(503);
+      expect(health.status).toBe(503);
-      expect(result.error.kind).toBe('http');
+      expect(health.error.kind).toBe('http');
-      expect(result.error.payload).toEqual({ error: 'maintenance' });
+      expect(health.error.payload).toEqual({ error: 'maintenance' });
-      expect(result.error.message).toContain('Service unavailable');
+      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' });
     }
   });
 });

frontend/tests/vertical-slice.test.ts

@@ -1,6 +1,9 @@
 import { describe, expect, it, vi } from 'vitest';
-import { createVerticalSliceController } from '../src/spa/vertical-slice';
+import {
-import { createSessionContextStore, type StorageLike } from '../src/spa/session-context-store';
+  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 {
+function makeSessionContextStore(initial: SessionContext | null = null): SessionContextStore {
-  const memory = new Map<string, string>();
+  let value = initial;
   return {
-    getItem: (key: string) => memory.get(key) ?? null,
+    get: vi.fn(() => value),
-    setItem: (key: string, value: string) => {
+    set: vi.fn((next: SessionContext) => {
-      memory.set(key, value);
+      value = next;
-    },
+      return next;
-    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('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 = createControllerWithMock(api);
-    const controller = createVerticalSliceController(api, store);
+
+    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');
+  });
 });