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<VerticalSliceState>;
 }
 
-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<VerticalSliceState> {
     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<VerticalSliceState> {
     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 {

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>): ApiClient {
@@ -58,6 +62,16 @@ function makeApiMock(overrides?: Partial<ApiClient>): 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({