1 Commits

Author SHA1 Message Date
62090d7e64 feat(spa): sync host/player hash routes with gameplay phase
All checks were successful
CI / test-and-quality (push) Successful in 1m53s
2026-03-01 17:59:07 +00:00
43 changed files with 277 additions and 2726 deletions

View File

@@ -31,14 +31,3 @@ jobs:
- name: Tests
run: python manage.py test lobby -v 1
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: "22"
- name: Install SPA dependencies
run: npm ci --prefix frontend/angular
- name: SPA Angular smoke tests
run: npm --prefix frontend/angular test

View File

@@ -1,48 +0,0 @@
# Shared i18n architecture (frontend + backend)
## Scope
Issue #175 requires one shared i18n contract for MVP host/player flows across frontend and backend.
## Source of truth
- Catalog: `shared/i18n/lobby.json`
- Locales:
- supported: `en`, `da`
- default/fallback: `en`
Both Angular (`frontend/angular/src/app/lobby-i18n.ts`) and Django (`lobby/i18n.py`) read from this catalog.
## Key naming convention
- Domain-first namespaces:
- `frontend.ui.common.*`
- `frontend.ui.host.*`
- `frontend.ui.player.*`
- `frontend.errors.*`
- `backend.errors.*`
- `backend.error_codes.*`
- UI lookup keys in Angular are shortened aliases mapped under `frontend.ui`, e.g.:
- `host.start_round`
- `player.submit_guess`
- `common.session_code`
- Backend API errors return stable code + localized message:
- `error_code` = machine-stable key from `backend.error_codes`
- `error` = localized message from `backend.errors`
- `locale` = resolved request locale
## Fallback model (robust)
1. Resolve requested locale (`Accept-Language` on backend, user/browser preference on frontend).
2. If locale unsupported -> use default `en`.
3. If key missing -> return key and log warning.
4. If locale translation missing for key -> fallback to `en` translation.
## Audio-routing policy
- Catalog capability: `frontend.capabilities.client_has_no_audio_output = true`
- Host/player clients expose this as a read-only capability flag.
- Policy: phone clients must not play audio directly; only primary/host output is allowed.
## Verification
- Backend tests: `lobby/tests.py` i18n coverage for locale selection + fallback + error-code/message matrix.
- Frontend smoke/e2e-level unit coverage:
- `frontend/angular/src/app/lobby-i18n.spec.ts`
- `frontend/angular/src/app/i18n-mvp-flow-smoke.spec.ts`
- `frontend/angular/src/app/features/host/host-shell.component.spec.ts`
- `frontend/angular/src/app/features/player/player-shell.component.spec.ts`

View File

@@ -1,35 +0,0 @@
# ISSUE-175 Artifact — shared i18n contract + MVP host/player flow
## Delivered
- Shared i18n contract is centralized in `shared/i18n/lobby.json` (da/en, default `en`, robust fallback).
- Frontend host/player MVP copy is read via shared keys (no hardcoded Danish strings in Angular MVP flow components).
- Backend error messages resolve from shared keyspace with locale-aware API payload (`error_code`, `error`, `locale`).
- Audio-routing policy is explicit and shared: `frontend.capabilities.client_has_no_audio_output=true`.
- Architecture + key naming documented in `docs/I18N_ARCHITECTURE.md`.
## Smoke / e2e evidence
### Backend locale + fallback
Command:
```bash
. .venv/bin/activate && python manage.py test \
lobby.tests.LobbyFlowTests.test_join_error_localizes_to_danish_with_accept_language_header \
lobby.tests.LobbyFlowTests.test_join_error_falls_back_to_english_for_unsupported_locale \
lobby.tests.I18nResolverTests
```
Result:
- PASS (7 tests)
- Confirms `da` localization and fallback to `en` for unsupported locale.
### Frontend host/player + language switch + audio policy
Command:
```bash
cd frontend/angular
npm test -- --run \
src/app/lobby-i18n.spec.ts \
src/app/i18n-mvp-flow-smoke.spec.ts \
src/app/features/host/host-shell.component.spec.ts \
src/app/features/player/player-shell.component.spec.ts
```
Result:
- PASS (22 tests)
- Includes smoke for host/player copy in **both en and da** and verifies primary-only audio policy flag (`clientHasNoAudioOutput=true`).

View File

@@ -1,47 +0,0 @@
# Issue #188 Artifact — SPA cutover hardening (asset versioning + rollback)
## Scope
Acceptance for `[READY][SPA][P11] Cutover hardening`:
1. Dokumenteret strategi for cache-busting/versionering af SPA assets i Django staticfiles/reverse proxy setup.
2. Konfigurerbar rollback-procedure for `USE_SPA_UI` (trin-for-trin, target <10 min).
3. Smoke-artefakt for både SPA on/off i samme release-vindue.
4. Ingen gameplay-ændringer.
## 1) Asset versioning/cache-busting strategi
Implementeret i SPA shell render-path:
- Konfiguration i `partyhub/settings.py`:
- `WPP_SPA_ASSET_BASE` (eksisterende)
- `WPP_SPA_ASSET_VERSION` (ny)
- `lobby/ui_views.py` injicerer `spa_asset_version` til template-context.
- `lobby/templates/lobby/spa_shell.html` appender `?v={{ spa_asset_version }}` på:
- `styles.css`
- `main.js`
Effekt:
- Ny release-version (fx SHA/tag) kan tvinge cache-miss i browser/proxy uden ændring af route.
- Rollback kan pege på tidligere stabil version-token med samme mekanisme.
## 2) Rollback playbook (`USE_SPA_UI`) — target <10 min
Dokumenteret i `docs/spa-cutover-flag.md`:
1. Sæt `USE_SPA_UI=false`.
2. Sæt `WPP_SPA_ASSET_VERSION` til sidste stabile release-token.
3. Deploy/reload app-processer.
4. Verificér legacy routes (`/lobby/ui/host` + `/lobby/ui/player`).
5. Kør hurtig smoke sanity.
6. Log trigger/timestamp/resultat i smoke artifact.
## 3) Smoke artifact for SPA OFF/ON i samme release-vindue
Dokumenteret i:
- `docs/UI_SMOKE.md` (sektion: "Samme release-vindue: SPA OFF + ON verifikation")
- `docs/STAGING_GAMEPLAY_SMOKE_ARTIFACT.md` (template udvidet med release-window check + `WPP_SPA_ASSET_VERSION`)
Krav:
- OFF-pass (legacy) og ON-pass (SPA) køres i samme deploy/release-vindue.
- Begge passes logges i samme artifact med UTC timestamps og version-token.
## Non-goals bekræftet
- Ingen gameplay-regler ændret.
- Ingen API-kontrakter ændret.
- Ingen UX-redesign; kun drift/cutover-hardening.

View File

@@ -1,57 +0,0 @@
# Issue #200 Artifact — SPA host→player phase sync (no reload)
## Scope
Acceptance for `[READY][SPA][P14] Gameplay MVP-del 5`:
1. Host handlinger (`start round` / `næste fase`) propagere korrekt til player-ruter i SPA.
2. Happy-path artefakt for én fuld faseovergang uden page reload.
3. Sync-fejl giver kontrolleret fallback/error state.
Afgrænsning overholdt: ingen nye spilregler og ingen redesign af backend event-model.
## Happy-path faseovergang (uden page reload)
Reference-flow i Angular shell:
1. **Host starter runde/fase**
- Host action kalder backend endpoint (`POST /lobby/sessions/:code/start` eller fase-endpoint)
- Host shell hydrerer session igen (`GET /lobby/sessions/:code`)
- Host route synkes via hash-rewrite i samme SPA shell:
- `#/host/<phase>/<CODE>`
- Implementeret i `HostShellComponent.syncRouteFromSession()`
2. **Player modtager ny fase via state sync**
- Player shell kører periodisk session-refresh (3s), uden hard reload
- Når `session.status` ændrer sig, synkes hash-route i samme SPA shell:
- `#/player/<phase>/<CODE>`
- Implementeret i `PlayerShellComponent.syncRouteFromSession()`
3. **Ingen page reload**
- Routing sker med `window.history.replaceState(...)`
- URL opdateres i eksisterende SPA instans (ingen template-hop, ingen full refresh)
## Kontrolleret fallback ved sync-fejl
Når player-sync fejler (netværk/fetch/session-refresh):
- UI går i kontrolleret connection-state:
- `reconnecting` ved online netværksfejl
- `offline` når browser rapporterer offline
- Fejl vises med retry/back-to-join handlinger
- Reconnect forsøges igen via timer (`scheduleReconnect`) uden at crashe shell
## Verifikation (tests)
Kørt i `frontend/angular` med Vitest:
- `src/app/features/host/host-shell.component.spec.ts`
- Verificerer host-faseflow og hash-route sync uden reload
- `src/app/features/player/player-shell.component.spec.ts`
- Verificerer periodisk player state sync + hash-route sync
- Verificerer reconnect/offline fallback ved sync-fejl
- `src/app/api-contract-smoke.spec.ts`
- `src/app/session-route-context.spec.ts`
Kommando:
```bash
npm test -- --reporter=dot
```
Resultat: **4/4 testfiler grønne, 22/22 tests bestået**.

View File

@@ -1,36 +0,0 @@
# Issue #205 — Django i18n foundation (da/en)
## Implemented acceptance checks
- **Django i18n setup for `en` + `da` with `en` fallback**
- `LANGUAGE_CODE` set to `en`.
- `LANGUAGES = [('en', 'English'), ('da', 'Danish')]`.
- `LocaleMiddleware` enabled in middleware chain.
- **Shared-key resolver/adapter (no ad hoc backend mapping)**
- Backend error responses now resolve from shared catalog keys in `shared/i18n/lobby.json`.
- `lobby.i18n.api_error()` accepts a shared key and resolves locale-specific text.
- **Representative API flow documented with key/locale behavior**
- `POST /lobby/join` with empty code returns:
- `error_code: "session_code_required"`
- localized `error`
- resolved `locale`
- **Missing key handling deterministic and loggable**
- `resolve_error_message()` returns key string when key/translation is missing.
- Warning is logged (`lobby.i18n` logger) for missing key/translation.
## Example response behavior
### Request
`POST /lobby/join` with empty code and header `Accept-Language: da`
### Response (400)
```json
{
"error": "Sessionskode er påkrævet",
"error_code": "session_code_required",
"locale": "da"
}
```
If locale is unsupported (e.g. `fr`), response uses `locale: "en"` and English message.

View File

@@ -1,35 +0,0 @@
# Issue #207 Artifact — da/en locale switch + audio routing (primary-only)
## Scope
Acceptance for `[READY][i18n][P19]`:
1. Verify one MVP host+player flow in both `en` and `da` locale context.
2. Verify controlled fallback to `en` when a locale key is missing.
3. Verify audio-routing policy is primary-only (client/player has no audio output).
No new feature behavior added — this is verification-only evidence.
## Smoke/e2e evidence (Angular shell test run)
Executed from `frontend/angular`:
```bash
npm test -- --reporter=dot src/app/lobby-i18n.spec.ts src/app/features/host/host-shell.component.spec.ts src/app/features/player/player-shell.component.spec.ts
```
Evidence covered by the run:
- `lobby-i18n.spec.ts`
- subscriber locale switch updates (`en -> da -> en`)
- controlled fallback where `da` key is removed during test and `en` copy is returned
- `clientHasNoAudioOutput === true` (primary-only audio routing)
- `host-shell.component.spec.ts`
- host actions and route sync in SPA (no reload)
- `player-shell.component.spec.ts`
- player session refresh/sync path and retry behavior
## Policy evidence
- Shared catalog capability: `shared/i18n/lobby.json`
- `frontend.capabilities.client_has_no_audio_output = true`
- Angular host/player shells bind this capability:
- `HostShellComponent.clientHasNoAudioOutput`
- `PlayerShellComponent.clientHasNoAudioOutput`
Conclusion: locale switching works in `da`/`en`, fallback resolves to `en` when locale key is intentionally missing, and client audio remains disabled by policy (`primary-only`).

View File

@@ -1,20 +0,0 @@
# Issue #223 — Telefon-klient audio guard (artifact)
## Scope leveret
- Telefon-/player-klient installerer en eksplicit audio guard ved mount (`installSecondaryDeviceAudioGuard`).
- Guard overskriver `HTMLMediaElement.prototype.play` til en no-op på secondary device (client policy: `client_has_no_audio_output=true`).
- Guard fjernes igen ved unmount (`ngOnDestroy`) så øvrige flows/enheder ikke påvirkes.
- Ingen audio-controls er eksponeret i player-shell UI.
## Acceptance mapping
1. **Telefon-klient trigger ikke audio playback i kerneflow**
- Verificeret af test: `player-shell.component.spec.ts` (`installs secondary-device audio guard while player shell is mounted`).
2. **Primær enhed påvirkes ikke negativt**
- Guard er scoped til player-shell lifecycle og restore'r original `play` ved destroy.
3. **Enkel test/verifikation dokumenteret**
- Dokumenteret her + testkørsel nedenfor.
## Testkørsel
- Kommando:
- `cd frontend/angular && npm test -- src/app/features/player/player-shell.component.spec.ts`
- Resultat: bestået (inkl. audio-guard test).

View File

@@ -1,55 +0,0 @@
# Issue #224 — Trunk-sekvens for #175 (A/B/C)
Formål: gøre #175 scheduler-klar som tre små, uafhængige og mergeklare bidder.
## Sekvens
### A) Backend i18n baseline
- Tracking issue: #225
- Scope:
- Backend resolver til locale (da/en)
- Fallback til `en` ved unsupported locale
- Stabil fejlkontrakt i payload (`error_code`, `error`, `locale`)
- Mergebarhed: Kan merges uden frontend-ændringer.
- Acceptance:
- Backend tests dækker `da` + fallback `en`
- Kontraktfelter er stabile i response
### B) Shared key-map + locale-kontrakt
- Tracking issue: #226
- Scope:
- Én shared key-map for lobby/kerneflow
- Locale-kontrakt (tilladte locales, default locale, fallback-regler)
- Dokumentation af naming + ownership
- Mergebarhed: Kan merges uden host/player UI-migrering.
- Acceptance:
- Shared kontrakt findes ét sted
- Begge sider kan importere den
- Docs opdateret med da/en eksempler
### C) Angular host/player integration + hardcoded-text cleanup
- Tracking issue: #227
- Scope:
- Angular host/player kerneflow bruger shared keys
- Hardcoded tekster fjernes i aftalte kernekomponenter
- Sprogskift verificeres i kritiske states
- Mergebarhed: Kan merges selvstændigt når frontend-tests er grønne.
- Acceptance:
- Korrekt i18n-copy i da/en i kerneflow
- Ingen hardcoded kerneflow-tekster tilbage
- Frontend tests/smoke grønne
## PR-grænser (per bid)
- 1 PR pr. bid (A/B/C) mod `main`
- Mål: ~200300 net LOC per PR (ekskl. generated artefakter)
- Undgå cross-layer scope creep
- Review-tid <30 min
## Overordnet acceptance for #224
- A/B/C-sekvens er tydelig med links
- Hver bid er mergebar isoleret
- Scheduler kan assigne direkte uden ekstra afklaring
## Verification (docs-only)
- Verificeret at dokumentet kun beskriver trunk-sekvensen for issue #224 og linker til #225/#226/#227.
- Ingen runtime-kode ændret; der er derfor ikke kørt kode/tests i denne PR.

View File

@@ -1,30 +0,0 @@
# ISSUE-226 — Shared key-map + locale-kontrakt (backend/frontend)
## Source of truth
- Single shared artifact: `shared/i18n/lobby.json`
- Ownership is documented under `contract.ownership` in the same artifact.
## Locale contract
Defined under `contract.locale`:
- default locale: `en`
- supported locales: `en`, `da`
- fallback rule: use default locale when requested locale is unsupported or a key translation is missing.
## Shared backend→frontend key-map
Defined under `contract.backend_to_frontend_error_keys`.
Examples:
- `session_not_found -> session_not_found`
- `session_not_joinable -> join_failed`
- `round_start_invalid_phase -> start_round_failed`
This allows backend error codes to remain stable while frontend copy keys stay UX-oriented.
## da/en example values
From `shared/i18n/lobby.json`:
- `frontend.errors.session_code_required.en = "Session code is required."`
- `frontend.errors.session_code_required.da = "Sessionskoden er påkrævet."`
## Verification
- Backend: `python manage.py test lobby.tests.I18nResolverTests`
- Frontend: `npm test -- --run tests/lobby-i18n.contract.test.ts`

View File

@@ -23,14 +23,11 @@ Formål: levere et lille, ensartet evidensformat for release-nær gameplay-smoke
- Active category/questions present: <yes/no>
- Participants: host + <N> players
- `USE_SPA_UI`: <on/off>
- `WPP_SPA_ASSET_VERSION`: <release-token/sha>
- UI route used:
- OFF (legacy): `/lobby/ui/host` + `/lobby/ui/player`
- ON (SPA shell): `/lobby/ui/host/<spa-path>` + `/lobby/ui/player`
#### Checks (PASS/FAIL)
0. Same release-window verification
- OFF + ON smoke kørt i samme release-vindue: <pass/fail>
1. Cutover route sanity
- Flag OFF serves legacy UI templates: <pass/fail>
- Flag ON serves SPA shell on expected path(s): <pass/fail>
@@ -42,19 +39,6 @@ Formål: levere et lille, ensartet evidensformat for release-nær gameplay-smoke
- next round transitions: <pass/fail>
- final leaderboard visible: <pass/fail>
#### Smoke-gate decision (før `USE_SPA_UI=true`)
- Gate status: <GREEN/RED>
- Gate criteria met:
- [ ] Cutover route sanity = PASS (OFF + ON)
- [ ] Full gameplay round = PASS
- [ ] Next-round/final leaderboard sanity = PASS
- [ ] Ingen nye blocker-regressioner i host/player flow
#### Rollback checkpoint
- Rollback required: <yes/no>
- Trigger reason (if yes): <kort trigger>
- Rollback done (`USE_SPA_UI=false`) verified: <yes/no>
#### Evidence pointers
- Command(s): `<exact command(s)>`
- UI notes/screenshots/log refs: <short refs>

View File

@@ -20,29 +20,4 @@
9. Host: Beregn score og Vis scoreboard.
10. Host: Næste runde eller Afslut spil.
## Smoke-gate (staging cutover)
`USE_SPA_UI` må kun aktiveres i staging når følgende er opfyldt:
- Cutover route sanity er PASS for både OFF (legacy) og ON (SPA shell).
- Én fuld gameplay-runde til scoreboard er PASS.
- Next-round/final leaderboard sanity er PASS.
- Ingen nye blocker-regressioner i host/player kerneflow.
## Samme release-vindue: SPA OFF + ON verifikation
Kør begge checks i samme release-vindue (samme deploy/artifact version):
1. **OFF-pass (legacy)**
- `USE_SPA_UI=false`
- Verificér legacy routes + fuld runde.
2. **ON-pass (SPA)**
- `USE_SPA_UI=true`
- Behold samme release artifact og kun toggl flag/version-token ved behov.
- Verificér SPA shell routes + fuld runde.
3. Dokumentér begge pass i samme smoke-artifact med UTC timestamps og `WPP_SPA_ASSET_VERSION`.
## Rollback check points
Skift straks tilbage til `USE_SPA_UI=false` hvis en gate fejler:
1. Verificér legacy routes (`/lobby/ui/host` + `/lobby/ui/player`) fungerer igen.
2. Log rollback trigger + kort repro i smoke artifact.
3. Opret/link blocker issue før nyt cutover-forsøg.
Resultat: En fuld runde kan køres uden rå API-kald fra terminal.

View File

@@ -1,34 +0,0 @@
# i18n key manifest + drift check
Issue: #240
This repo keeps shared lobby keyspaces in two files:
- Contract source: `shared/i18n/lobby.json`
- Key manifest: `shared/i18n/key-manifest.json`
The manifest is intentionally small and explicit. It lists:
- Supported locales (`locales`)
- Frontend error key set (`frontend_error_keys`)
- Backend error code set (`backend_error_codes`)
- Backend translation key set (`backend_error_keys`)
- Optional contract-only aliases (`allowed_contract_only_backend_codes`)
## Local check
Run the read-only drift checker from repo root:
```bash
python3 scripts/check_i18n_drift.py
```
The script returns non-zero when it detects drift, including:
- key set mismatch between manifest and shared catalog
- missing backend→frontend mapping coverage
- mapping to unknown frontend keys
- mappings for unknown backend codes
- missing/empty locale translations (`en`/`da`)
No CI gating changes are included in this task; this is a local guardrail.

View File

@@ -1,69 +0,0 @@
# i18n key-map bootstrap (Angular host/player MVP)
Issue: #220
Scope: Lobby → Join → Start round → Round → Reveal → Scoreboard
Locales: `en`, `da`
This document is the gameplay key-namespace map for Angular host/player MVP.
It maps existing text keys only (no feature expansion) and stays aligned with `shared/i18n/lobby.json`.
## Key families
- `host``frontend.ui.host.*` host-facing gameplay actions and status text.
- `player``frontend.ui.player.*` player-facing gameplay actions and status text.
- `system` — shared UI labels used across host/player views (implemented under `frontend.ui.common.*` in `shared/i18n/lobby.json`).
- `errors` — user-facing error keys shown by frontend (`frontend.errors.*`) plus backend code → frontend key bridge via `backend.error_codes.*` / `contract.backend_to_frontend_error_keys.*`.
## Gameplay flow key map
| Flow step | Family | Key | en | da |
|---|---|---|---|---|
| Lobby | `host` | `host.title` | Host gameplay flow | Vært gameplay-flow |
| Lobby | `player` | `player.title` | Player gameplay flow | Spiller gameplay-flow |
| Lobby | `system` (`frontend.ui.common`) | `common.session_code` | Session code | Sessionskode |
| Lobby | `player` | `player.nickname` | Nickname | Kaldenavn |
| Join | `player` | `player.join` | Join | Join |
| Start round | `host` | `host.start_round` | Start round | Start runde |
| Round | `host` | `host.show_question` | Show question | Vis spørgsmål |
| Round | `player` | `player.lie_label` | Lie | Løgn |
| Round | `player` | `player.submit_lie` | Submit lie | Send løgn |
| Round | `player` | `player.submit_guess` | Submit guess | Send gæt |
| Reveal | `host` | `host.mix_answers` | Mix answers → guess | Bland svar → gæt |
| Reveal | `host` | `host.calculate_scores` | Calculate scores → reveal | Udregn score → afslør |
| Scoreboard | `host` | `host.load_scoreboard` | Load scoreboard | Hent scoreboard |
| Scoreboard | `host` | `host.final_leaderboard` | Final leaderboard | Finale leaderboard |
| Scoreboard | `player` | `player.final_leaderboard` | Final leaderboard | Finale leaderboard |
| Scoreboard | `system` (`frontend.ui.common`) | `common.points_short` | pts | point |
## Frontend error keys used in flow scope
| Error family | Key | en | da |
|---|---|---|---|
| Join | `frontend.errors.session_code_required` | Session code is required. | Sessionskoden er påkrævet. |
| Join | `frontend.errors.session_not_found` | Session code is invalid or the session no longer exists. | Sessionskoden er ugyldig, eller sessionen findes ikke længere. |
| Join | `frontend.errors.nickname_invalid` | Nickname must be between 2 and 40 characters. | Kaldenavn skal være mellem 2 og 40 tegn. |
| Join | `frontend.errors.nickname_taken` | Nickname is already taken. | Kaldenavnet er allerede taget. |
| Join | `frontend.errors.join_failed` | Join failed. Check code or nickname and try again. | Kunne ikke joine. Tjek kode eller kaldenavn og prøv igen. |
| Start round | `frontend.errors.start_round_failed` | Could not start round. Refresh the lobby and try again. | Kunne ikke starte runden. Opdater lobbyen og prøv igen. |
| Any | `frontend.errors.unknown` | Action failed. Refresh status and try again. | Handlingen fejlede. Opdater status og prøv igen. |
## Backend→frontend mapping for gameplay errors
Mapped in `contract.backend_to_frontend_error_keys` (source: `shared/i18n/lobby.json`):
> Note: `host_only_action` is **not** part of the current shared contract mapping and is intentionally not listed here.
- `session_code_required``session_code_required`
- `nickname_invalid``nickname_invalid`
- `session_not_found``session_not_found`
- `session_not_joinable``join_failed`
- `nickname_taken``nickname_taken`
- `category_slug_required``start_round_failed`
- `category_not_found``start_round_failed`
- `round_start_invalid_phase``start_round_failed`
- `round_already_configured``start_round_failed`
## Notes
- This is a bootstrap key-map doc for MVP mergeability.
- The key/value source of truth remains `shared/i18n/lobby.json`.

View File

@@ -1,28 +0,0 @@
# Issue #180 SPA gameplay flow evidence
## Flow log (host + player, no page reload)
1. Host opens SPA host shell and loads scoreboard (`GET /lobby/sessions/{code}/scoreboard`).
2. Host starts next round (`POST /lobby/sessions/{code}/rounds/next`).
3. Host shell refreshes session state in-place (`GET /lobby/sessions/{code}`) and clears old scoreboard/final leaderboard payloads.
4. Player shell performs periodic session refresh while online (3s cadence) and transitions from `scoreboard` to `lobby` without page reload.
5. Host finishes game (`POST /lobby/sessions/{code}/finish`) and renders final leaderboard directly in SPA shell.
6. Player shell reads `finished` state and renders final leaderboard in SPA (sorted by score).
7. Error/retry paths available:
- Host: next-round and finish-game retry buttons with explicit error feedback.
- Player: reconnect + submit retry feedback.
## Test output snapshot
Command:
```bash
cd frontend/angular
npm test -- --run src/app/features/host/host-shell.component.spec.ts src/app/features/player/player-shell.component.spec.ts
```
Result:
- `host-shell.component.spec.ts`: 6 passed
- `player-shell.component.spec.ts`: 7 passed
- Total: 13 passed, 0 failed

View File

@@ -12,53 +12,6 @@ Sæt env var pr. miljø:
Backward compatibility under cutover:
- Hvis `USE_SPA_UI` ikke er sat, bruges `WPP_SPA_ENABLED` som fallback.
## Static asset versioning/cache-busting (hardening)
Formål: sikre at browser/proxy/CDN hurtigt henter ny SPA bundle i release-vinduet uden at kræve hard refresh.
- `WPP_SPA_ASSET_BASE` peger fortsat på build-output (`/static/frontend/angular/browser`).
- `WPP_SPA_ASSET_VERSION` injiceres i SPA shell URLs som query-param (`?v=<version>`).
- Anbefalet værdi for `WPP_SPA_ASSET_VERSION`: release-tag eller kort commit SHA.
- Ved rollback sættes `WPP_SPA_ASSET_VERSION` til den tidligere kendte stabile release-værdi.
Eksempel (staging/prod env):
```env
USE_SPA_UI=true
WPP_SPA_ASSET_BASE=/static/frontend/angular/browser
WPP_SPA_ASSET_VERSION=rel-2026-03-01-bb82357
```
## Staging rollout-checkliste (`USE_SPA_UI`)
1. **Baseline (flag OFF)**
- Bekræft at staging kører med `USE_SPA_UI=false`.
- Kør gameplay smoke på legacy routes (`/lobby/ui/host` + `/lobby/ui/player`).
2. **Smoke-gate før aktivering (skal være grøn)**
- Cutover route sanity = PASS for både OFF og ON checks.
- Full gameplay round (join/start/round/scoreboard) = PASS.
- Next-round/final leaderboard sanity = PASS.
- Ingen nye blocker-regressioner i host/player kerneflow.
3. **Kontrolleret aktivering i staging**
- Sæt `USE_SPA_UI=true` i staging miljøet.
- Kør smoke-flow igen med SPA-route-verifikation.
4. **Post-cutover dokumentation**
- Log evidens med commit/head SHA, UTC timestamp og gate-status.
## Rollback playbook (`USE_SPA_UI`) — mål: <10 min
Rollback til legacy (`USE_SPA_UI=false`) udføres straks hvis et checkpoint fejler:
- Forkert route/shell for valgt flag i cutover route sanity.
- Gameplay smoke kan ikke gennemføres til scoreboard/final leaderboard.
- Kritisk regression i host/player flow under smoke.
Trin-for-trin:
1. Sæt `USE_SPA_UI=false` i deploy-env.
2. Sæt `WPP_SPA_ASSET_VERSION` til sidste stabile release-token.
3. Deploy/reload app-processer.
4. Verificér legacy routes: `/lobby/ui/host` + `/lobby/ui/player`.
5. Kør hurtig smoke sanity (join/start/scoreboard path).
6. Log UTC tid, trigger, release-token og resultat i smoke artifact.
Target: rollback + sanity-verifikation inden for 10 minutter.
## Verifikation
- Flag OFF: `UiScreenTests.test_legacy_templates_are_used_when_spa_flag_is_off`
- Flag ON (host): `UiScreenTests.test_host_screen_can_render_angular_shell_when_feature_flag_enabled`

View File

@@ -1,247 +0,0 @@
import { describe, expect, it, vi } from 'vitest';
import { createAngularApiClient, type AngularHttpClientLike } from '../../../src/api/angular-client';
describe('SPA Angular API contract smoke (host/player foundation)', () => {
it('smoke-checks canonical host/player endpoint contracts', async () => {
const get = vi.fn<AngularHttpClientLike['get']>(async <T>(url: string) => {
if (url === '/lobby/sessions/ABCD12') {
return {
session: { code: 'ABCD12', status: 'lobby', host_id: 1, current_round: 1, players_count: 2 },
players: [
{ id: 2, nickname: 'Maja', score: 0, is_connected: true },
{ id: 3, nickname: 'Bo', score: 0, is_connected: true }
],
round_question: {
id: 77,
round_number: 1,
prompt: 'Q?',
shown_at: '2026-03-01T18:00:00Z',
answers: [{ text: 'A' }, { text: 'B' }]
},
phase_view_model: {
status: 'lobby',
round_number: 1,
players_count: 2,
constraints: {
min_players_to_start: 2,
max_players_mvp: 8,
min_players_reached: true,
max_players_allowed: true
},
host: {
can_start_round: true,
can_show_question: true,
can_mix_answers: true,
can_calculate_scores: true,
can_reveal_scoreboard: true,
can_start_next_round: true,
can_finish_game: true
},
player: {
can_join: true,
can_submit_lie: true,
can_submit_guess: true,
can_view_final_result: false
}
}
} as T;
}
if (url === '/lobby/sessions/ABCD12/scoreboard') {
return {
session: { code: 'ABCD12', status: 'reveal', current_round: 1 },
leaderboard: [
{ id: 9, nickname: 'Maja', score: 200 },
{ id: 10, nickname: 'Bo', score: 150 }
]
} as T;
}
throw { status: 404, error: { error: 'Not found' } };
});
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: 'session-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;
}
if (url === '/lobby/sessions/ABCD12/questions/show') {
expect(body).toEqual({});
return {
round_question: {
id: 77,
prompt: 'Q?',
round_number: 1,
shown_at: '2026-03-01T18:00:00Z',
lie_deadline_at: '2026-03-01T18:00:30Z'
},
config: { lie_seconds: 30 }
} as T;
}
if (url === '/lobby/sessions/ABCD12/questions/77/answers/mix') {
expect(body).toEqual({});
return {
session: { code: 'ABCD12', status: 'guess', current_round: 1 },
round_question: { id: 77, round_number: 1 },
answers: [{ text: 'A' }, { text: 'B' }]
} as T;
}
if (url === '/lobby/sessions/ABCD12/questions/77/scores/calculate') {
expect(body).toEqual({});
return {
session: { code: 'ABCD12', status: 'reveal', current_round: 1 },
round_question: { id: 77, round_number: 1 },
events_created: 2,
leaderboard: [
{ id: 9, nickname: 'Maja', score: 200 },
{ id: 10, nickname: 'Bo', score: 150 }
]
} as T;
}
if (url === '/lobby/sessions/ABCD12/rounds/next') {
expect(body).toEqual({});
return { session: { code: 'ABCD12', status: 'lie', current_round: 2 } } as T;
}
if (url === '/lobby/sessions/ABCD12/finish') {
expect(body).toEqual({});
return {
session: { code: 'ABCD12', status: 'finished', current_round: 2 },
winner: { id: 9, nickname: 'Maja', score: 250 },
leaderboard: [
{ id: 9, nickname: 'Maja', score: 250 },
{ id: 10, nickname: 'Bo', score: 150 }
]
} as T;
}
if (url === '/lobby/sessions/ABCD12/questions/77/lies/submit') {
expect(body).toEqual({ player_id: 9, session_token: 'session-token-1', text: 'my lie' });
return {
lie: {
id: 501,
player_id: 9,
round_question_id: 77,
text: 'my lie',
created_at: '2026-03-01T18:00:05Z'
},
window: { lie_deadline_at: '2026-03-01T18:00:30Z' }
} as T;
}
if (url === '/lobby/sessions/ABCD12/questions/77/guesses/submit') {
expect(body).toEqual({ player_id: 9, session_token: 'session-token-1', selected_text: 'B' });
return {
guess: {
id: 601,
player_id: 9,
round_question_id: 77,
selected_text: 'B',
is_correct: false,
fooled_player_id: null,
created_at: '2026-03-01T18:00:15Z'
},
window: { guess_deadline_at: '2026-03-01T18:01:00Z' }
} as T;
}
throw { status: 404, error: { error: 'Not found' } };
});
const client = createAngularApiClient({ get, post } as AngularHttpClientLike);
const session = await client.getSession(' abcd12 ');
expect(session.ok).toBe(true);
if (session.ok) {
expect(session.data.session.code).toBe('ABCD12');
expect(session.data.phase_view_model.host.can_start_next_round).toBe(true);
expect(session.data.phase_view_model.player.can_submit_guess).toBe(true);
}
expect((await client.joinSession({ code: ' abcd12 ', nickname: ' Maja ' })).ok).toBe(true);
expect((await client.startRound(' abcd12 ', { category_slug: 'history' })).ok).toBe(true);
expect((await client.showQuestion(' abcd12 ')).ok).toBe(true);
expect((await client.mixAnswers(' abcd12 ', 77)).ok).toBe(true);
expect((await client.calculateScores(' abcd12 ', 77)).ok).toBe(true);
expect((await client.getScoreboard(' abcd12 ')).ok).toBe(true);
expect((await client.startNextRound(' abcd12 ')).ok).toBe(true);
expect((await client.finishGame(' abcd12 ')).ok).toBe(true);
expect(
(
await client.submitLie(' abcd12 ', 77, {
player_id: 9,
session_token: 'session-token-1',
text: 'my lie'
})
).ok
).toBe(true);
expect(
(
await client.submitGuess(' abcd12 ', 77, {
player_id: 9,
session_token: 'session-token-1',
selected_text: 'B'
})
).ok
).toBe(true);
expect(get).toHaveBeenNthCalledWith(1, '/lobby/sessions/ABCD12', { withCredentials: true });
expect(get).toHaveBeenNthCalledWith(2, '/lobby/sessions/ABCD12/scoreboard', { 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 }
);
expect(post).toHaveBeenNthCalledWith(3, '/lobby/sessions/ABCD12/questions/show', {}, { withCredentials: true });
expect(post).toHaveBeenNthCalledWith(
4,
'/lobby/sessions/ABCD12/questions/77/answers/mix',
{},
{ withCredentials: true }
);
expect(post).toHaveBeenNthCalledWith(
5,
'/lobby/sessions/ABCD12/questions/77/scores/calculate',
{},
{ withCredentials: true }
);
expect(post).toHaveBeenNthCalledWith(6, '/lobby/sessions/ABCD12/rounds/next', {}, { withCredentials: true });
expect(post).toHaveBeenNthCalledWith(7, '/lobby/sessions/ABCD12/finish', {}, { withCredentials: true });
expect(post).toHaveBeenNthCalledWith(
8,
'/lobby/sessions/ABCD12/questions/77/lies/submit',
{ player_id: 9, session_token: 'session-token-1', text: 'my lie' },
{ withCredentials: true }
);
expect(post).toHaveBeenNthCalledWith(
9,
'/lobby/sessions/ABCD12/questions/77/guesses/submit',
{ player_id: 9, session_token: 'session-token-1', selected_text: 'B' },
{ withCredentials: true }
);
});
});

View File

@@ -1,5 +1,4 @@
.shell { font-family: Arial, sans-serif; margin: 1rem; }
.shell__header { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; padding-bottom: 0.75rem; }
.shell__header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; padding-bottom: 0.75rem; }
.shell__header nav { display: flex; gap: 0.75rem; }
.shell__content { margin-top: 1rem; }
.locale-picker { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; }

View File

@@ -1,20 +1,13 @@
<main class="shell">
<header class="shell__header">
<h1>{{ copy('app.title') }}</h1>
<h1>WPP Angular Shell</h1>
<nav>
<a routerLink="/host">{{ copy('app.host_nav') }}</a>
<a routerLink="/player">{{ copy('app.player_nav') }}</a>
<a routerLink="/host">Host</a>
<a routerLink="/player">Player</a>
</nav>
<label class="locale-picker">
{{ copy('app.language_label') }}
<select [ngModel]="locale" (ngModelChange)="setLocale($event)">
<option value="en">English</option>
<option value="da">Dansk</option>
</select>
</label>
</header>
<section class="shell__content" [attr.data-wpp-locale]="locale">
<section class="shell__content">
<router-outlet></router-outlet>
</section>
</main>

View File

@@ -1,33 +1,20 @@
import { Component, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Router, RouterLink, RouterOutlet } from '@angular/router';
import { resolvePreferredLocale, setPreferredLocale, t } from './lobby-i18n';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, RouterLink, FormsModule],
imports: [RouterOutlet, RouterLink],
templateUrl: './app.component.html',
styleUrl: './app.component.css',
})
export class AppComponent {
private readonly router = inject(Router);
locale = resolvePreferredLocale();
constructor() {
const shellRoute = document.body.dataset['wppShellRoute'];
if (shellRoute?.startsWith('/host') || shellRoute?.startsWith('/player')) {
void this.router.navigateByUrl(shellRoute);
}
}
copy(key: string): string {
return t(key, this.locale);
}
setLocale(locale: string): void {
this.locale = setPreferredLocale(locale);
}
}

View File

@@ -244,23 +244,4 @@ describe('HostShellComponent gameplay wiring', () => {
expect(component.nextRoundError).toContain('Session code is required');
expect(component.finishError).toContain('Session code is required');
});
it('syncs host hash-route with latest phase after refresh without page reload', async () => {
const fetchMock: FetchMock = vi.fn().mockResolvedValue(jsonResponse(200, sessionDetailPayload('guess', { roundQuestionId: 77 })));
vi.stubGlobal('fetch', fetchMock);
const replaceState = vi.fn();
vi.stubGlobal('window', {
location: { hash: '#/host/lobby/ABCD12' },
history: { state: null, replaceState },
sessionStorage: { getItem: vi.fn().mockReturnValue(null), setItem: vi.fn() },
});
const component = new HostShellComponent();
component.sessionCode = 'ABCD12';
await component.refreshSession();
expect(replaceState).toHaveBeenCalledWith(null, '', '#/host/guess/ABCD12');
});
});

View File

@@ -1,11 +1,13 @@
import { CommonModule } from '@angular/common';
import { Component, OnDestroy, OnInit } from '@angular/core';
import type { ActivatedRoute } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { createApiClient } from '../../../../../src/api/client';
import type { FinishGameResponse, ScoreboardResponse } from '../../../../../src/api/types';
import { createVerticalSliceController } from '../../../../../src/spa/vertical-slice';
import { clientHasNoAudioOutput, resolvePreferredLocale, subscribeToLocaleChanges, t } from '../../lobby-i18n';
import { syncHashRoute } from '../../gameplay-route-sync';
import type { RouteSessionContext } from '../../session-route-context';
interface SessionDetail {
session: { code: string; status: string; current_round: number };
@@ -21,41 +23,40 @@ type LeaderboardResponse = FinishGameResponse;
standalone: true,
imports: [CommonModule, FormsModule],
template: `
<h2>{{ copy('host.title') }}</h2>
<h2>Host SPA gameplay flow</h2>
<div class="panel" [attr.data-client-has-no-audio-output]="clientHasNoAudioOutput">
<label>{{ copy('common.session_code') }} <input [(ngModel)]="sessionCode" /></label>
<label>{{ copy('host.category') }} <input [(ngModel)]="categorySlug" /></label>
<button (click)="refreshSession()" [disabled]="loading">{{ copy('common.refresh') }}</button>
<button (click)="startRound()" [disabled]="loading">{{ copy('host.start_round') }}</button>
<button (click)="showQuestion()" [disabled]="loading || !roundQuestionId">{{ copy('host.show_question') }}</button>
<button (click)="mixAnswers()" [disabled]="loading || !roundQuestionId">{{ copy('host.mix_answers') }}</button>
<button (click)="calculateScores()" [disabled]="loading || !roundQuestionId">{{ copy('host.calculate_scores') }}</button>
<button (click)="loadScoreboard()" [disabled]="loading">{{ copy('host.load_scoreboard') }}</button>
<button (click)="startNextRound()" [disabled]="loading">{{ copy('host.start_next_round') }}</button>
<button (click)="finishGame()" [disabled]="loading">{{ copy('host.finish_game') }}</button>
<button *ngIf="scoreboardError" (click)="loadScoreboard()" [disabled]="loading">{{ copy('host.retry_scoreboard') }}</button>
<button *ngIf="nextRoundError" (click)="startNextRound()" [disabled]="loading">{{ copy('host.retry_next_round') }}</button>
<button *ngIf="finishError" (click)="finishGame()" [disabled]="loading">{{ copy('host.retry_finish') }}</button>
<div class="panel">
<label>Session code <input [(ngModel)]="sessionCode" /></label>
<label>Category <input [(ngModel)]="categorySlug" /></label>
<button (click)="refreshSession()" [disabled]="loading">Refresh</button>
<button (click)="startRound()" [disabled]="loading">Start round</button>
<button (click)="showQuestion()" [disabled]="loading || !roundQuestionId">Show question</button>
<button (click)="mixAnswers()" [disabled]="loading || !roundQuestionId">Mix answers → guess</button>
<button (click)="calculateScores()" [disabled]="loading || !roundQuestionId">Calculate scores → reveal</button>
<button (click)="loadScoreboard()" [disabled]="loading">Load scoreboard</button>
<button (click)="startNextRound()" [disabled]="loading">Start next round</button>
<button (click)="finishGame()" [disabled]="loading">Finish game</button>
<button *ngIf="scoreboardError" (click)="loadScoreboard()" [disabled]="loading">Retry scoreboard</button>
<button *ngIf="nextRoundError" (click)="startNextRound()" [disabled]="loading">Retry next round</button>
<button *ngIf="finishError" (click)="finishGame()" [disabled]="loading">Retry finish game</button>
</div>
<p *ngIf="session" class="hint">{{ copy('host.audio_locale_hint') }}: {{ locale }}</p>
<p *ngIf="error" class="error">{{ error }}</p>
<p *ngIf="scoreboardError" class="error">{{ scoreboardError }}</p>
<p *ngIf="nextRoundError" class="error">{{ nextRoundError }}</p>
<p *ngIf="finishError" class="error">{{ finishError }}</p>
<div *ngIf="session" class="panel">
<p><strong>{{ copy('common.status') }}:</strong> {{ session.session.status }} · {{ copy('common.round') }} {{ session.session.current_round }}</p>
<p><strong>{{ copy('common.round_question_id') }}:</strong> {{ roundQuestionId || '-' }}</p>
<p *ngIf="session.round_question"><strong>{{ copy('common.prompt') }}:</strong> {{ session.round_question.prompt }}</p>
<p><strong>Status:</strong> {{ session.session.status }} · round {{ session.session.current_round }}</p>
<p><strong>Round question id:</strong> {{ roundQuestionId || '-' }}</p>
<p *ngIf="session.round_question"><strong>Prompt:</strong> {{ session.round_question.prompt }}</p>
<ul>
<li *ngFor="let p of session.players">{{ p.nickname }}: {{ p.score }}</li>
</ul>
<pre *ngIf="scoreboardPayload">{{ scoreboardPayload }}</pre>
<div *ngIf="finalLeaderboard.length">
<h3>{{ copy('host.final_leaderboard') }}</h3>
<p *ngIf="finalWinner"><strong>{{ copy('host.winner') }}:</strong> {{ finalWinner.nickname }} ({{ finalWinner.score }} {{ copy('common.points_short') }})</p>
<h3>Final leaderboard</h3>
<p *ngIf="finalWinner"><strong>Winner:</strong> {{ finalWinner.nickname }} ({{ finalWinner.score }} pts)</p>
<ol>
<li *ngFor="let entry of finalLeaderboard">{{ entry.nickname }}: {{ entry.score }}</li>
</ol>
@@ -64,10 +65,7 @@ type LeaderboardResponse = FinishGameResponse;
</div>
`,
})
export class HostShellComponent implements OnInit, OnDestroy {
locale = resolvePreferredLocale();
readonly clientHasNoAudioOutput = clientHasNoAudioOutput;
export class HostShellComponent implements OnInit {
sessionCode = '';
categorySlug = 'general';
roundQuestionId = '';
@@ -84,19 +82,16 @@ export class HostShellComponent implements OnInit, OnDestroy {
private readonly api = createApiClient();
private readonly controller = createVerticalSliceController(this.api);
private unsubscribeLocale: (() => void) | null = null;
constructor(private readonly route: Pick<ActivatedRoute, 'snapshot'> = { snapshot: { data: {} } as never }) {}
ngOnInit(): void {
this.unsubscribeLocale = subscribeToLocaleChanges((locale) => {
this.locale = locale;
});
if (typeof window === 'undefined') {
return;
}
const hashRoute = window.location.hash.replace(/^#\/?/, '');
const match = hashRoute.match(/^host(?:\/[^/]+)?(?:\/([^/?#]+))?/i);
const codeFromRoute = match?.[1] ?? '';
const routeContext = this.route.snapshot.data['routeContext'] as RouteSessionContext | undefined;
const codeFromRoute = routeContext?.sessionCode ?? '';
const storedCode = window.sessionStorage.getItem('wpp.host-session-code') ?? '';
const candidate = codeFromRoute || storedCode;
@@ -109,15 +104,6 @@ export class HostShellComponent implements OnInit, OnDestroy {
void this.refreshSession();
}
ngOnDestroy(): void {
this.unsubscribeLocale?.();
this.unsubscribeLocale = null;
}
copy(key: string): string {
return t(key, this.locale);
}
private normalizeCode(value: string): string {
return value.trim().toUpperCase();
}
@@ -156,18 +142,20 @@ export class HostShellComponent implements OnInit, OnDestroy {
try {
const state = await this.controller.hydrateLobby(this.sessionCode);
if (!state.session || state.errorMessage) {
throw new Error(state.errorMessage ?? this.copy('common.unknown_error'));
throw new Error(state.errorMessage ?? 'Unknown error');
}
this.session = state.session as SessionDetail;
this.sessionCode = this.session.session.code;
this.persistSessionCode(this.sessionCode);
this.roundQuestionId = this.session.round_question?.id ? String(this.session.round_question.id) : '';
if (!syncHashRoute('host', this.session)) {
throw new Error(`Unsupported host phase status: ${this.session.session.status}`);
}
if (this.session.session.status !== 'finished') {
this.resetFinalLeaderboard();
}
this.syncRouteFromSession();
} catch (error) {
this.error = `${this.copy('host.session_refresh_failed')}: ${(error as Error).message}`;
this.error = `Session refresh failed: ${(error as Error).message}`;
} finally {
this.loading = false;
}
@@ -177,15 +165,17 @@ export class HostShellComponent implements OnInit, OnDestroy {
await this.runAction(async () => {
const state = await this.controller.startRound(this.sessionCode, this.categorySlug.trim());
if (!state.session || state.errorMessage) {
throw new Error(state.errorMessage ?? this.copy('common.unknown_error'));
throw new Error(state.errorMessage ?? 'Unknown error');
}
this.session = state.session as SessionDetail;
this.sessionCode = this.session.session.code;
this.persistSessionCode(this.sessionCode);
this.roundQuestionId = this.session.round_question?.id ? String(this.session.round_question.id) : '';
if (!syncHashRoute('host', this.session)) {
throw new Error(`Unsupported host phase status: ${this.session.session.status}`);
}
this.scoreboardPayload = '';
this.resetFinalLeaderboard();
this.syncRouteFromSession();
});
}
@@ -225,7 +215,7 @@ export class HostShellComponent implements OnInit, OnDestroy {
this.scoreboardPayload = JSON.stringify(payload, null, 2);
await this.refreshSession();
} catch (error) {
this.scoreboardError = `${this.copy('host.scoreboard_failed')}: ${(error as Error).message}`;
this.scoreboardError = `Scoreboard failed: ${(error as Error).message}`;
} finally {
this.loading = false;
}
@@ -238,14 +228,14 @@ export class HostShellComponent implements OnInit, OnDestroy {
try {
const code = this.normalizeCode(this.sessionCode);
if (!code) {
throw new Error(this.copy('host.session_code_required'));
throw new Error('Session code is required');
}
await this.request(`/lobby/sessions/${encodeURIComponent(code)}/rounds/next`, 'POST', {});
this.scoreboardPayload = '';
this.resetFinalLeaderboard();
await this.refreshSession();
} catch (error) {
this.nextRoundError = `${this.copy('host.next_round_failed')}: ${(error as Error).message}`;
this.nextRoundError = `Next round failed: ${(error as Error).message}`;
} finally {
this.loading = false;
}
@@ -258,7 +248,7 @@ export class HostShellComponent implements OnInit, OnDestroy {
try {
const code = this.normalizeCode(this.sessionCode);
if (!code) {
throw new Error(this.copy('host.session_code_required'));
throw new Error('Session code is required');
}
const payload = await this.request<LeaderboardResponse>(`/lobby/sessions/${encodeURIComponent(code)}/finish`, 'POST', {});
this.finalLeaderboardPayload = JSON.stringify(payload, null, 2);
@@ -271,7 +261,7 @@ export class HostShellComponent implements OnInit, OnDestroy {
this.finalWinner = payload.winner ?? this.finalLeaderboard[0] ?? null;
await this.refreshSession();
} catch (error) {
this.finishError = `${this.copy('host.finish_game_failed')}: ${(error as Error).message}`;
this.finishError = `Finish game failed: ${(error as Error).message}`;
} finally {
this.loading = false;
}
@@ -283,25 +273,6 @@ export class HostShellComponent implements OnInit, OnDestroy {
this.finalWinner = null;
}
private syncRouteFromSession(): void {
if (!this.session) {
return;
}
const phase = this.session.session.status || 'lobby';
const code = this.normalizeCode(this.session.session.code || this.sessionCode);
if (!code) {
return;
}
const targetPath = `#/host/${encodeURIComponent(phase)}/${encodeURIComponent(code)}`;
if (typeof window === 'undefined' || window.location.hash === targetPath) {
return;
}
window.history.replaceState(window.history.state, '', targetPath);
}
private async runAction(action: () => Promise<void>): Promise<void> {
this.loading = true;
this.error = '';

View File

@@ -198,30 +198,6 @@ describe('PlayerShellComponent gameplay wiring', () => {
expect(fetchMock).toHaveBeenCalledTimes(3);
});
it('auto-refreshes player session to avoid host/player state desync between rounds', async () => {
vi.useFakeTimers();
const fetchMock: FetchMock = vi
.fn()
.mockResolvedValueOnce(jsonResponse(200, sessionDetailPayload('scoreboard', { roundQuestionId: null })))
.mockResolvedValueOnce(jsonResponse(200, sessionDetailPayload('lobby', { roundQuestionId: null })));
vi.stubGlobal('fetch', fetchMock);
const component = new PlayerShellComponent();
component.sessionCode = 'ABCD12';
await component.refreshSession();
expect(component.session?.session.status).toBe('scoreboard');
await vi.advanceTimersByTimeAsync(3100);
expect(fetchMock).toHaveBeenCalledTimes(2);
expect(component.session?.session.status).toBe('lobby');
component.ngOnDestroy();
});
it('enters reconnecting state when network request fails while online', async () => {
vi.stubGlobal('navigator', { onLine: true });
@@ -233,8 +209,8 @@ describe('PlayerShellComponent gameplay wiring', () => {
await component.refreshSession();
expect(component.connectionState === 'reconnecting' || component.connectionState === 'online').toBe(true);
expect(component.error).toContain('Session refresh failed:');
expect(component.connectionState).toBe('reconnecting');
expect(component.error).toContain('Session refresh failed: Could not load lobby status.');
});
it('uses offline state when browser reports disconnected network', async () => {
@@ -319,121 +295,4 @@ describe('PlayerShellComponent gameplay wiring', () => {
expect(component.submitError).toBeNull();
expect(values.get('wpp.session-context')).toBeUndefined();
});
it('syncs player hash-route with latest phase during periodic state sync', async () => {
vi.useFakeTimers();
const fetchMock: FetchMock = vi
.fn()
.mockResolvedValueOnce(jsonResponse(200, sessionDetailPayload('scoreboard', { roundQuestionId: null })))
.mockResolvedValueOnce(jsonResponse(200, sessionDetailPayload('lobby', { roundQuestionId: null })));
vi.stubGlobal('fetch', fetchMock);
const replaceState = vi.fn();
const localStorage = { getItem: vi.fn().mockReturnValue(null), setItem: vi.fn(), removeItem: vi.fn() };
vi.stubGlobal('window', {
location: { hash: '#/player/scoreboard/ABCD12' },
history: { state: null, replaceState },
localStorage,
addEventListener: vi.fn(),
removeEventListener: vi.fn(),
});
const component = new PlayerShellComponent();
component.sessionCode = 'ABCD12';
await component.refreshSession();
await vi.advanceTimersByTimeAsync(3100);
expect(replaceState).toHaveBeenCalledWith(null, '', '#/player/lobby/ABCD12');
component.ngOnDestroy();
});
it('silences active media elements when secondary-device audio guard is installed', () => {
const pauseAudio = vi.fn();
const pauseVideo = vi.fn();
const audioElement = { muted: false, pause: pauseAudio };
const videoElement = { muted: false, pause: pauseVideo };
const querySelectorAll = vi.fn().mockReturnValue([audioElement, videoElement]);
vi.stubGlobal('document', { querySelectorAll });
vi.stubGlobal('window', {
location: { hash: '', search: '' },
history: { state: null, replaceState: vi.fn() },
localStorage: { getItem: vi.fn().mockReturnValue('en'), setItem: vi.fn(), removeItem: vi.fn() },
sessionStorage: { getItem: vi.fn().mockReturnValue(null), setItem: vi.fn(), removeItem: vi.fn() },
HTMLMediaElement: { prototype: { play: vi.fn().mockResolvedValue(undefined) } },
addEventListener: vi.fn(),
removeEventListener: vi.fn(),
});
vi.stubGlobal('navigator', { language: 'en-US', onLine: true });
const component = new PlayerShellComponent();
component.ngOnInit();
expect(querySelectorAll).toHaveBeenCalledWith('audio,video');
expect(audioElement.muted).toBe(true);
expect(videoElement.muted).toBe(true);
expect(pauseAudio).toHaveBeenCalledTimes(1);
expect(pauseVideo).toHaveBeenCalledTimes(1);
component.ngOnDestroy();
});
it('installs secondary-device audio guard while player shell is mounted', async () => {
const originalPlay = vi.fn().mockRejectedValue(new Error('original play'));
const mediaPrototype = { play: originalPlay };
vi.stubGlobal('window', {
location: { hash: '', search: '' },
history: { state: null, replaceState: vi.fn() },
localStorage: { getItem: vi.fn().mockReturnValue('en'), setItem: vi.fn(), removeItem: vi.fn() },
sessionStorage: { getItem: vi.fn().mockReturnValue(null), setItem: vi.fn(), removeItem: vi.fn() },
HTMLMediaElement: { prototype: mediaPrototype },
addEventListener: vi.fn(),
removeEventListener: vi.fn(),
});
vi.stubGlobal('navigator', { language: 'en-US', onLine: true });
const component = new PlayerShellComponent();
component.ngOnInit();
await expect(mediaPrototype.play()).resolves.toBeUndefined();
component.ngOnDestroy();
await expect(mediaPrototype.play()).rejects.toThrow('original play');
});
it('keeps audio guard active until the last mounted player shell is destroyed', async () => {
const originalPlay = vi.fn().mockRejectedValue(new Error('original play'));
const mediaPrototype = { play: originalPlay };
vi.stubGlobal('window', {
location: { hash: '', search: '' },
history: { state: null, replaceState: vi.fn() },
localStorage: { getItem: vi.fn().mockReturnValue('en'), setItem: vi.fn(), removeItem: vi.fn() },
sessionStorage: { getItem: vi.fn().mockReturnValue(null), setItem: vi.fn(), removeItem: vi.fn() },
HTMLMediaElement: { prototype: mediaPrototype },
addEventListener: vi.fn(),
removeEventListener: vi.fn(),
});
vi.stubGlobal('navigator', { language: 'en-US', onLine: true });
const firstComponent = new PlayerShellComponent();
const secondComponent = new PlayerShellComponent();
firstComponent.ngOnInit();
secondComponent.ngOnInit();
await expect(mediaPrototype.play()).resolves.toBeUndefined();
firstComponent.ngOnDestroy();
await expect(mediaPrototype.play()).resolves.toBeUndefined();
secondComponent.ngOnDestroy();
await expect(mediaPrototype.play()).rejects.toThrow('original play');
});
});

View File

@@ -1,11 +1,13 @@
import { CommonModule } from '@angular/common';
import type { ActivatedRoute } from '@angular/router';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { createApiClient } from '../../../../../src/api/client';
import { createSessionContextStore } from '../../../../../src/spa/session-context-store';
import { createVerticalSliceController } from '../../../../../src/spa/vertical-slice';
import { clientHasNoAudioOutput, resolvePreferredLocale, subscribeToLocaleChanges, t } from '../../lobby-i18n';
import { syncHashRoute } from '../../gameplay-route-sync';
import type { RouteSessionContext } from '../../session-route-context';
interface SessionDetail {
session: { code: string; status: string; current_round: number };
@@ -16,19 +18,6 @@ interface SessionDetail {
type ConnectionState = 'online' | 'reconnecting' | 'offline';
type LoadingTransition = 'refresh' | 'join' | 'submit-lie' | 'submit-guess' | null;
type MediaPrototypeWithGuardState = {
play?: () => Promise<void>;
__wppSecondaryDeviceAudioGuard__?: {
originalPlay: () => Promise<void>;
installs: number;
};
};
type GuardableMediaElement = {
muted?: boolean;
pause?: () => void;
};
function resolveLocalStorage(): Storage | undefined {
if (typeof window === 'undefined') {
return undefined;
@@ -41,35 +30,35 @@ function resolveLocalStorage(): Storage | undefined {
standalone: true,
imports: [CommonModule, FormsModule],
template: `
<h2>{{ copy('player.title') }}</h2>
<h2>Player SPA gameplay flow</h2>
<div class="panel" [attr.data-client-has-no-audio-output]="clientHasNoAudioOutput">
<label>{{ copy('common.session_code') }} <input [(ngModel)]="sessionCode" /></label>
<label>{{ copy('player.nickname') }} <input [(ngModel)]="nickname" /></label>
<button (click)="refreshSession()" [disabled]="loading">{{ copy('common.refresh') }}</button>
<button (click)="joinSession()" [disabled]="loading">{{ copy('player.join') }}</button>
<div class="panel">
<label>Session code <input [(ngModel)]="sessionCode" /></label>
<label>Nickname <input [(ngModel)]="nickname" /></label>
<button (click)="refreshSession()" [disabled]="loading">Refresh</button>
<button (click)="joinSession()" [disabled]="loading">Join</button>
</div>
<p *ngIf="connectionState === 'reconnecting'" class="error">
{{ copy('player.reconnecting_text') }}
<button type="button" (click)="retryReconnect()" [disabled]="loading">{{ copy('player.retry_now') }}</button>
<button type="button" (click)="returnToJoin()" [disabled]="loading">{{ copy('common.back_to_join') }}</button>
Reconnecting… trying to refresh session state.
<button type="button" (click)="retryReconnect()" [disabled]="loading">Retry now</button>
<button type="button" (click)="returnToJoin()" [disabled]="loading">Back to join</button>
</p>
<p *ngIf="connectionState === 'offline'" class="error">
{{ copy('player.offline_text') }}
<button type="button" (click)="retryReconnect()" [disabled]="loading">{{ copy('player.retry_now') }}</button>
<button type="button" (click)="returnToJoin()" [disabled]="loading">{{ copy('common.back_to_join') }}</button>
You are offline. Reconnect to continue gameplay.
<button type="button" (click)="retryReconnect()" [disabled]="loading">Retry now</button>
<button type="button" (click)="returnToJoin()" [disabled]="loading">Back to join</button>
</p>
<p *ngIf="loading" class="hint">{{ loadingMessage }}</p>
<div class="panel" *ngIf="session">
<p><strong>{{ copy('common.status') }}:</strong> {{ session.session.status }}</p>
<p *ngIf="session.round_question"><strong>{{ copy('common.prompt') }}:</strong> {{ session.round_question.prompt }}</p>
<p><strong>Status:</strong> {{ session.session.status }}</p>
<p *ngIf="session.round_question"><strong>Prompt:</strong> {{ session.round_question.prompt }}</p>
<label>{{ copy('player.lie_label') }} <input [(ngModel)]="lieText" [disabled]="loading || session.session.status !== 'lie'" /></label>
<button (click)="submitLie()" [disabled]="loading || session.session.status !== 'lie'">{{ copy('player.submit_lie') }}</button>
<button *ngIf="submitError?.kind === 'lie'" (click)="submitLie()" [disabled]="loading">{{ copy('player.retry_lie_submit') }}</button>
<label>Løgn <input [(ngModel)]="lieText" [disabled]="loading || session.session.status !== 'lie'" /></label>
<button (click)="submitLie()" [disabled]="loading || session.session.status !== 'lie'">Submit lie</button>
<button *ngIf="submitError?.kind === 'lie'" (click)="submitLie()" [disabled]="loading">Retry lie submit</button>
<div class="answers" *ngIf="session.round_question?.answers?.length">
<button
@@ -83,11 +72,11 @@ function resolveLocalStorage(): Storage | undefined {
</button>
</div>
<button (click)="submitGuess()" [disabled]="loading || session.session.status !== 'guess' || !selectedGuess">{{ copy('player.submit_guess') }}</button>
<button *ngIf="submitError?.kind === 'guess'" (click)="submitGuess()" [disabled]="loading">{{ copy('player.retry_guess_submit') }}</button>
<button (click)="submitGuess()" [disabled]="loading || session.session.status !== 'guess' || !selectedGuess">Submit guess</button>
<button *ngIf="submitError?.kind === 'guess'" (click)="submitGuess()" [disabled]="loading">Retry guess submit</button>
<div *ngIf="session.session.status === 'finished' && finalLeaderboard.length">
<h3>{{ copy('player.final_leaderboard') }}</h3>
<h3>Final leaderboard</h3>
<ol>
<li *ngFor="let entry of finalLeaderboard">{{ entry.nickname }}: {{ entry.score }}</li>
</ol>
@@ -98,15 +87,12 @@ function resolveLocalStorage(): Storage | undefined {
<p *ngIf="submitError" class="error">{{ submitError.message }}</p>
<div class="panel" *ngIf="error || submitError">
<button type="button" (click)="retryReconnect()" [disabled]="loading">{{ copy('common.retry') }}</button>
<button type="button" (click)="returnToJoin()" [disabled]="loading">{{ copy('common.back_to_join') }}</button>
<button type="button" (click)="retryReconnect()" [disabled]="loading">Retry</button>
<button type="button" (click)="returnToJoin()" [disabled]="loading">Back to join</button>
</div>
`,
})
export class PlayerShellComponent implements OnInit, OnDestroy {
locale = resolvePreferredLocale();
readonly clientHasNoAudioOutput = clientHasNoAudioOutput;
sessionCode = '';
nickname = '';
playerId = 0;
@@ -124,11 +110,8 @@ export class PlayerShellComponent implements OnInit, OnDestroy {
private readonly sessionContextStore = createSessionContextStore(resolveLocalStorage());
private readonly controller = createVerticalSliceController(createApiClient(), this.sessionContextStore);
private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
private stateSyncTimer: ReturnType<typeof setTimeout> | null = null;
private unsubscribeLocale: (() => void) | null = null;
private restoreAudioGuard: (() => void) | null = null;
constructor() {
constructor(private readonly route: Pick<ActivatedRoute, 'snapshot'> = { snapshot: { data: {} } as never }) {
if (typeof navigator !== 'undefined' && !navigator.onLine) {
this.connectionState = 'offline';
}
@@ -140,22 +123,13 @@ export class PlayerShellComponent implements OnInit, OnDestroy {
}
ngOnInit(): void {
this.unsubscribeLocale = subscribeToLocaleChanges((locale) => {
this.locale = locale;
});
this.installSecondaryDeviceAudioGuard();
const hashRoute = window.location.hash.replace(/^#\/?/, '');
const match = hashRoute.match(/^player(?:\/[^/]+)?(?:\/([^/?#]+))?/i);
const codeFromRoute = match?.[1] ?? '';
const routeContext = this.route.snapshot.data['routeContext'] as RouteSessionContext | undefined;
const persistedContext = this.sessionContextStore.get();
if (persistedContext) {
this.playerId = persistedContext.playerId;
this.sessionToken = persistedContext.token;
}
const candidate = codeFromRoute || persistedContext?.sessionCode || '';
this.playerId = routeContext?.playerId ?? persistedContext?.playerId ?? 0;
this.sessionToken = routeContext?.token ?? persistedContext?.token ?? '';
const candidate = routeContext?.sessionCode || persistedContext?.sessionCode || '';
if (!candidate) {
return;
}
@@ -170,11 +144,6 @@ export class PlayerShellComponent implements OnInit, OnDestroy {
window.removeEventListener('offline', this.handleOffline);
}
this.clearReconnectTimer();
this.clearStateSyncTimer();
this.unsubscribeLocale?.();
this.unsubscribeLocale = null;
this.restoreAudioGuard?.();
this.restoreAudioGuard = null;
}
private readonly handleOnline = (): void => {
@@ -185,7 +154,6 @@ export class PlayerShellComponent implements OnInit, OnDestroy {
private readonly handleOffline = (): void => {
this.connectionState = 'offline';
this.clearReconnectTimer();
this.clearStateSyncTimer();
};
private clearReconnectTimer(): void {
@@ -195,112 +163,20 @@ export class PlayerShellComponent implements OnInit, OnDestroy {
}
}
private clearStateSyncTimer(): void {
if (this.stateSyncTimer) {
clearTimeout(this.stateSyncTimer);
this.stateSyncTimer = null;
}
}
private installSecondaryDeviceAudioGuard(): void {
if (!this.clientHasNoAudioOutput || typeof window === 'undefined') {
return;
}
this.silenceExistingMediaElements();
const mediaPrototype = (window as Window & { HTMLMediaElement?: { prototype?: MediaPrototypeWithGuardState } }).HTMLMediaElement
?.prototype;
if (!mediaPrototype || typeof mediaPrototype.play !== 'function') {
return;
}
const guardState = mediaPrototype.__wppSecondaryDeviceAudioGuard__;
if (guardState) {
guardState.installs += 1;
} else {
const originalPlay = mediaPrototype.play;
mediaPrototype.play = () => Promise.resolve();
mediaPrototype.__wppSecondaryDeviceAudioGuard__ = {
originalPlay,
installs: 1,
};
}
this.restoreAudioGuard = () => {
const currentState = mediaPrototype.__wppSecondaryDeviceAudioGuard__;
if (!currentState) {
return;
}
currentState.installs -= 1;
if (currentState.installs <= 0) {
mediaPrototype.play = currentState.originalPlay;
delete mediaPrototype.__wppSecondaryDeviceAudioGuard__;
}
};
}
private silenceExistingMediaElements(): void {
if (typeof document === 'undefined' || typeof document.querySelectorAll !== 'function') {
return;
}
const activeElements = document.querySelectorAll('audio,video') as
| NodeListOf<GuardableMediaElement>
| GuardableMediaElement[]
| undefined;
if (!activeElements || typeof (activeElements as { forEach?: unknown }).forEach !== 'function') {
return;
}
activeElements.forEach((element) => {
element.muted = true;
element.pause?.();
});
}
private scheduleStateSync(): void {
this.clearStateSyncTimer();
if (!this.sessionCode.trim() || this.connectionState !== 'online' || !this.session) {
return;
}
if (this.session.session.status === 'finished') {
return;
}
this.stateSyncTimer = setTimeout(() => {
this.stateSyncTimer = null;
if (this.loading || this.connectionState !== 'online') {
this.scheduleStateSync();
return;
}
void this.refreshSession();
}, 3000);
}
get loadingMessage(): string {
switch (this.loadingTransition) {
case 'join':
return this.copy('player.loading_join');
return 'Joining session… restoring your player state.';
case 'submit-lie':
return this.copy('player.loading_submit_lie');
return 'Submitting lie… waiting for guess phase.';
case 'submit-guess':
return this.copy('player.loading_submit_guess');
return 'Submitting guess… waiting for reveal.';
case 'refresh':
default:
return this.copy('player.loading_refresh');
return 'Loading latest session state…';
}
}
copy(key: string): string {
return t(key, this.locale);
}
private normalizeCode(value: string): string {
return value.trim().toUpperCase();
}
@@ -309,18 +185,15 @@ export class PlayerShellComponent implements OnInit, OnDestroy {
if (error instanceof Error && error.message) {
return error.message;
}
return this.copy('common.unknown_error');
return 'Unknown error';
}
private markOnline(): void {
this.connectionState = 'online';
this.clearReconnectTimer();
this.scheduleStateSync();
}
private markConnectionIssue(error: unknown): void {
this.clearStateSyncTimer();
if (typeof navigator !== 'undefined' && !navigator.onLine) {
this.connectionState = 'offline';
return;
@@ -361,7 +234,6 @@ export class PlayerShellComponent implements OnInit, OnDestroy {
returnToJoin(): void {
this.loadingTransition = null;
this.clearReconnectTimer();
this.clearStateSyncTimer();
this.connectionState = typeof navigator !== 'undefined' && !navigator.onLine ? 'offline' : 'online';
this.session = null;
this.finalLeaderboard = [];
@@ -388,25 +260,6 @@ export class PlayerShellComponent implements OnInit, OnDestroy {
});
}
private syncRouteFromSession(): void {
if (!this.session) {
return;
}
const phase = this.session.session.status || 'lobby';
const code = this.normalizeCode(this.session.session.code || this.sessionCode);
if (!code) {
return;
}
const targetPath = `#/player/${encodeURIComponent(phase)}/${encodeURIComponent(code)}`;
if (typeof window === 'undefined' || window.location.hash === targetPath) {
return;
}
window.history.replaceState(window.history.state, '', targetPath);
}
private async request<T>(path: string, method: 'GET' | 'POST', payload?: unknown): Promise<T> {
const response = await fetch(path, {
method,
@@ -433,18 +286,20 @@ export class PlayerShellComponent implements OnInit, OnDestroy {
try {
const state = await this.controller.hydrateLobby(this.sessionCode);
if (!state.session || state.errorMessage) {
throw new Error(state.errorMessage ?? this.copy('common.unknown_error'));
throw new Error(state.errorMessage ?? 'Unknown error');
}
this.session = state.session as SessionDetail;
this.sessionCode = this.session.session.code;
if (!syncHashRoute('player', this.session)) {
throw new Error(`Unsupported player phase status: ${this.session.session.status}`);
}
if (this.session.session.status !== 'guess') {
this.selectedGuess = '';
}
this.syncFinalLeaderboard();
this.syncRouteFromSession();
this.markOnline();
} catch (error) {
this.error = `${this.copy('player.session_refresh_failed')}: ${this.toMessage(error)}`;
this.error = `Session refresh failed: ${this.toMessage(error)}`;
this.markConnectionIssue(error);
} finally {
this.loading = false;
@@ -459,10 +314,13 @@ export class PlayerShellComponent implements OnInit, OnDestroy {
try {
const state = await this.controller.joinLobby(this.sessionCode, this.nickname);
if (!state.session || state.errorMessage) {
throw new Error(state.errorMessage ?? this.copy('common.unknown_error'));
throw new Error(state.errorMessage ?? 'Unknown error');
}
this.session = state.session as SessionDetail;
this.sessionCode = this.session.session.code;
if (!syncHashRoute('player', this.session)) {
throw new Error(`Unsupported player phase status: ${this.session.session.status}`);
}
const sessionContext = this.sessionContextStore.get();
this.playerId = sessionContext?.playerId ?? 0;
@@ -471,10 +329,9 @@ export class PlayerShellComponent implements OnInit, OnDestroy {
this.selectedGuess = '';
}
this.syncFinalLeaderboard();
this.syncRouteFromSession();
this.markOnline();
} catch (error) {
this.error = `${this.copy('player.join_failed')}: ${this.toMessage(error)}`;
this.error = `Join failed: ${this.toMessage(error)}`;
this.markConnectionIssue(error);
} finally {
this.loading = false;
@@ -502,7 +359,7 @@ export class PlayerShellComponent implements OnInit, OnDestroy {
await this.refreshSession();
this.markOnline();
} catch (error) {
this.submitError = { kind: 'lie', message: `${this.copy('player.lie_submit_failed')}: ${this.toMessage(error)}` };
this.submitError = { kind: 'lie', message: `Lie submit failed: ${this.toMessage(error)}` };
this.markConnectionIssue(error);
} finally {
this.loading = false;
@@ -530,7 +387,7 @@ export class PlayerShellComponent implements OnInit, OnDestroy {
await this.refreshSession();
this.markOnline();
} catch (error) {
this.submitError = { kind: 'guess', message: `${this.copy('player.guess_submit_failed')}: ${this.toMessage(error)}` };
this.submitError = { kind: 'guess', message: `Guess submit failed: ${this.toMessage(error)}` };
this.markConnectionIssue(error);
} finally {
this.loading = false;

View File

@@ -1,96 +0,0 @@
import { describe, expect, it } from 'vitest';
import { deriveGameplayPhase, transitionGameplayPhase } from '../../../src/spa/gameplay-phase-machine';
describe('gameplay phase machine sync guards', () => {
it('keeps explicit scoreboard status as scoreboard phase', () => {
const phase = deriveGameplayPhase({
session: {
code: 'ABCD12',
status: 'scoreboard',
host_id: 1,
current_round: 1,
players_count: 2,
},
round_question: null,
players: [],
phase_view_model: {
status: 'scoreboard',
round_number: 1,
players_count: 2,
constraints: {
min_players_to_start: 2,
max_players_mvp: 8,
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: true,
can_finish_game: true,
},
player: {
can_join: false,
can_submit_lie: false,
can_submit_guess: false,
can_view_final_result: false,
},
},
});
expect(phase).toBe('scoreboard');
});
it('maps finished status to scoreboard phase fallback', () => {
const phase = deriveGameplayPhase({
session: {
code: 'ABCD12',
status: 'finished',
host_id: 1,
current_round: 1,
players_count: 2,
},
round_question: null,
players: [],
phase_view_model: {
status: 'finished',
round_number: 1,
players_count: 2,
constraints: {
min_players_to_start: 2,
max_players_mvp: 8,
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,
},
},
});
expect(phase).toBe('scoreboard');
});
it('transitions reveal -> scoreboard on SCOREBOARD_READY', () => {
expect(transitionGameplayPhase('reveal', 'SCOREBOARD_READY')).toEqual({
phase: 'scoreboard',
changed: true,
});
});
});

View File

@@ -0,0 +1,29 @@
import { describe, expect, it, vi } from 'vitest';
import { syncHashRoute } from './gameplay-route-sync';
describe('gameplay route sync', () => {
it('maps host status to hash phase route with session context', () => {
vi.stubGlobal('window', {
location: { hash: '#/host/lobby/ABCD12' },
history: { replaceState: vi.fn() },
});
const ok = syncHashRoute('host', { session: { code: 'abcd12', status: 'guess' } });
expect(ok).toBe(true);
expect(window.history.replaceState).toHaveBeenCalledWith(null, '', '#/host/guess/ABCD12');
});
it('returns false for unsupported status to allow controlled fallback', () => {
vi.stubGlobal('window', {
location: { hash: '#/player/lobby/ABCD12' },
history: { replaceState: vi.fn() },
});
const ok = syncHashRoute('player', { session: { code: 'ABCD12', status: 'waiting' } });
expect(ok).toBe(false);
expect(window.history.replaceState).not.toHaveBeenCalled();
});
});

View File

@@ -0,0 +1,73 @@
import { deriveGameplayPhase } from '../../../src/spa/gameplay-phase-machine';
type ShellMode = 'host' | 'player';
interface SessionLike {
session: {
code: string;
status: string;
};
}
function normalizeCode(value: string): string {
return value.trim().toUpperCase();
}
function toRoutePhase(status: string): string | null {
if (status === 'lobby') {
return 'lobby';
}
const phase = deriveGameplayPhase({
session: { code: 'route-sync', status, host_id: null, current_round: 1, players_count: 0 },
players: [],
round_question: null,
phase_view_model: {
status,
round_number: 1,
players_count: 0,
constraints: {
min_players_to_start: 0,
max_players_mvp: 0,
min_players_reached: false,
max_players_allowed: false,
},
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: false,
},
},
});
return phase;
}
export function syncHashRoute(mode: ShellMode, session: SessionLike): boolean {
if (typeof window === 'undefined') {
return true;
}
const code = normalizeCode(session.session.code);
const phase = toRoutePhase(session.session.status);
if (!code || !phase) {
return false;
}
const nextHash = `#/${mode}/${phase}/${encodeURIComponent(code)}`;
if (window.location.hash !== nextHash) {
window.history.replaceState(null, '', nextHash);
}
return true;
}

View File

@@ -1,61 +0,0 @@
import { afterEach, describe, expect, it, vi } from 'vitest';
import { HostShellComponent } from './features/host/host-shell.component';
import { PlayerShellComponent } from './features/player/player-shell.component';
import { setPreferredLocale } from './lobby-i18n';
describe('i18n MVP flow smoke (host/player + audio policy)', () => {
afterEach(() => {
vi.restoreAllMocks();
vi.unstubAllGlobals();
});
it('resolves host/player copy in en and da from shared catalog', () => {
vi.stubGlobal('window', {
location: { hash: '', search: '' },
history: { state: null, replaceState: vi.fn() },
localStorage: { getItem: vi.fn().mockReturnValue('en'), setItem: vi.fn(), removeItem: vi.fn() },
sessionStorage: { getItem: vi.fn().mockReturnValue(null), setItem: vi.fn(), removeItem: vi.fn() },
addEventListener: vi.fn(),
removeEventListener: vi.fn(),
});
vi.stubGlobal('navigator', { language: 'en-US', onLine: true });
const host = new HostShellComponent();
const player = new PlayerShellComponent();
host.ngOnInit();
player.ngOnInit();
expect(host.copy('game.host.start_round')).toBe('Start round');
expect(player.copy('game.player.submit_guess')).toBe('Submit guess');
setPreferredLocale('da');
expect(host.copy('game.host.start_round')).toBe('Start runde');
expect(player.copy('game.player.submit_guess')).toBe('Send gæt');
player.ngOnDestroy();
host.ngOnDestroy();
});
it('keeps audio routing policy primary-only (client has no audio output)', () => {
vi.stubGlobal('window', {
location: { hash: '', search: '' },
history: { state: null, replaceState: vi.fn() },
localStorage: { getItem: vi.fn().mockReturnValue('en'), setItem: vi.fn(), removeItem: vi.fn() },
sessionStorage: { getItem: vi.fn().mockReturnValue(null), setItem: vi.fn(), removeItem: vi.fn() },
addEventListener: vi.fn(),
removeEventListener: vi.fn(),
});
vi.stubGlobal('navigator', { language: 'en-US', onLine: true });
const host = new HostShellComponent();
const player = new PlayerShellComponent();
expect(host.clientHasNoAudioOutput).toBe(true);
expect(player.clientHasNoAudioOutput).toBe(true);
player.ngOnDestroy();
host.ngOnDestroy();
});
});

View File

@@ -1,137 +0,0 @@
import { afterEach, describe, expect, it, vi } from 'vitest';
type StorageLike = {
getItem: (key: string) => string | null;
setItem: (key: string, value: string) => void;
};
function storageMock(initial: Record<string, string> = {}): StorageLike {
const data = new Map<string, string>(Object.entries(initial));
return {
getItem: vi.fn((key: string) => data.get(key) ?? null),
setItem: vi.fn((key: string, value: string) => {
data.set(key, value);
}),
};
}
describe('lobby i18n locale propagation', () => {
afterEach(() => {
vi.restoreAllMocks();
vi.unstubAllGlobals();
vi.resetModules();
});
it('notifies subscribers immediately and on locale changes', async () => {
const localStorage = storageMock({ 'wpp.locale': 'en' });
vi.stubGlobal('window', {
location: { search: '' },
localStorage,
});
vi.stubGlobal('navigator', { language: 'en-US' });
const i18n = await import('./lobby-i18n');
const updates: string[] = [];
const unsubscribe = i18n.subscribeToLocaleChanges((locale) => updates.push(locale));
expect(updates).toEqual(['en']);
i18n.setPreferredLocale('da');
expect(updates).toEqual(['en', 'da']);
unsubscribe();
i18n.setPreferredLocale('en');
expect(updates).toEqual(['en', 'da']);
});
it('prefers backend-provided shell locale over browser defaults', async () => {
vi.stubGlobal('window', {
location: { search: '' },
localStorage: storageMock(),
});
vi.stubGlobal('document', {
body: { dataset: { wppLocale: 'da' } },
querySelector: vi.fn(() => null),
});
vi.stubGlobal('navigator', { language: 'en-US' });
const i18n = await import('./lobby-i18n');
expect(i18n.resolvePreferredLocale()).toBe('da');
});
it('falls back to default en translation when da key is intentionally missing', async () => {
vi.stubGlobal('window', {
location: { search: '' },
localStorage: storageMock({ 'wpp.locale': 'da' }),
});
vi.stubGlobal('navigator', { language: 'da-DK' });
const i18n = await import('./lobby-i18n');
const catalogModule = await import('../../../../shared/i18n/lobby.json');
const catalog = catalogModule.default as {
frontend: {
ui: {
common: {
refresh: {
en?: string;
da?: string;
};
};
};
};
};
const originalDa = catalog.frontend.ui.common.refresh.da;
catalog.frontend.ui.common.refresh.da = undefined;
try {
expect(i18n.t('common.refresh', 'da')).toBe(catalog.frontend.ui.common.refresh.en);
} finally {
catalog.frontend.ui.common.refresh.da = originalDa;
}
});
it('resolves baseline shell/game keys from shared namespaces', async () => {
vi.stubGlobal('window', {
location: { search: '' },
localStorage: storageMock({ 'wpp.locale': 'da' }),
});
vi.stubGlobal('navigator', { language: 'da-DK' });
const i18n = await import('./lobby-i18n');
const baselineKeys = [
'lobby.shell.title',
'lobby.shell.host_nav',
'lobby.shell.player_nav',
'lobby.shell.language_label',
'common.refresh',
'common.session_code',
'game.host.title',
'game.host.start_round',
'game.player.title',
'game.player.submit_guess',
] as const;
for (const key of baselineKeys) {
const value = i18n.t(key, 'da');
expect(value).toBeTypeOf('string');
expect(value.length).toBeGreaterThan(0);
expect(value).not.toBe(key);
}
});
it('exposes primary-only audio routing policy to clients', async () => {
vi.stubGlobal('window', {
location: { search: '' },
localStorage: storageMock({ 'wpp.locale': 'en' }),
});
vi.stubGlobal('navigator', { language: 'en-US' });
const i18n = await import('./lobby-i18n');
expect(i18n.clientHasNoAudioOutput).toBe(true);
});
});

View File

@@ -1,102 +0,0 @@
import lobbyCatalog from '../../../../shared/i18n/lobby.json';
type SupportedLocale = (typeof lobbyCatalog.locales.supported)[number];
const DEFAULT_LOCALE = lobbyCatalog.locales.default as SupportedLocale;
const SUPPORTED_LOCALES = lobbyCatalog.locales.supported as readonly SupportedLocale[];
let activeLocale: SupportedLocale | null = null;
const localeSubscribers = new Set<(locale: SupportedLocale) => void>();
export function normalizeLocale(rawLocale?: string | null): SupportedLocale {
const locale = (rawLocale ?? '').trim().toLowerCase();
if ((SUPPORTED_LOCALES as readonly string[]).includes(locale)) {
return locale as SupportedLocale;
}
const shortLocale = locale.split('-')[0] ?? '';
if ((SUPPORTED_LOCALES as readonly string[]).includes(shortLocale)) {
return shortLocale as SupportedLocale;
}
return DEFAULT_LOCALE;
}
export function resolvePreferredLocale(): SupportedLocale {
if (activeLocale) {
return activeLocale;
}
if (typeof window === 'undefined') {
activeLocale = DEFAULT_LOCALE;
return activeLocale;
}
const rootLocale =
typeof document !== 'undefined' ? document.querySelector<HTMLElement>('app-root')?.dataset?.['wppLocale'] : null;
const shellLocale = typeof document !== 'undefined' ? document.body?.dataset?.['wppLocale'] : null;
const queryLocale = new URLSearchParams(window.location?.search ?? '').get('lang');
const storedLocale = window.localStorage?.getItem?.('wpp.locale');
const browserLocale = typeof navigator !== 'undefined' ? navigator.language : '';
activeLocale = normalizeLocale(rootLocale || shellLocale || queryLocale || storedLocale || browserLocale || DEFAULT_LOCALE);
return activeLocale;
}
export function setPreferredLocale(locale: string): SupportedLocale {
const normalized = normalizeLocale(locale);
activeLocale = normalized;
if (typeof window !== 'undefined') {
window.localStorage?.setItem?.('wpp.locale', normalized);
}
for (const subscriber of localeSubscribers) {
subscriber(normalized);
}
return normalized;
}
export function subscribeToLocaleChanges(callback: (locale: SupportedLocale) => void): () => void {
localeSubscribers.add(callback);
callback(resolvePreferredLocale());
return () => {
localeSubscribers.delete(callback);
};
}
function resolveCatalogPath(key: string): string {
if (key.startsWith('lobby.shell.')) {
return key.replace(/^lobby\.shell\./, 'app.');
}
if (key.startsWith('game.host.')) {
return key.replace(/^game\.host\./, 'host.');
}
if (key.startsWith('game.player.')) {
return key.replace(/^game\.player\./, 'player.');
}
return key;
}
export function t(key: string, locale: string): string {
const normalizedLocale = normalizeLocale(locale);
const fallbackLocale = DEFAULT_LOCALE;
const segments = resolveCatalogPath(key).split('.');
let cursor: unknown = lobbyCatalog.frontend.ui;
for (const segment of segments) {
if (!cursor || typeof cursor !== 'object' || !(segment in (cursor as Record<string, unknown>))) {
return key;
}
cursor = (cursor as Record<string, unknown>)[segment];
}
if (!cursor || typeof cursor !== 'object') {
return key;
}
const translations = cursor as Record<string, string>;
return translations[normalizedLocale] ?? translations[fallbackLocale] ?? key;
}
export const clientHasNoAudioOutput = Boolean(lobbyCatalog.frontend.capabilities.client_has_no_audio_output);

View File

@@ -46,7 +46,7 @@ export function deriveGameplayPhase(session: SessionDetailResponse | null): Game
return null;
}
if (status === 'lie' || status === 'guess' || status === 'reveal' || status === 'scoreboard') {
if (status === 'lie' || status === 'guess' || status === 'reveal') {
return status;
}

View File

@@ -1,55 +1,31 @@
import lobbyCatalog from '../../../shared/i18n/lobby.json';
type FrontendErrorKey = keyof typeof lobbyCatalog.frontend.errors;
const frontendErrors = lobbyCatalog.frontend.errors;
const localeConfig = lobbyCatalog.locales;
const backendToFrontendErrorKeys = lobbyCatalog.contract.backend_to_frontend_error_keys as Record<string, keyof typeof frontendErrors>;
type FrontendErrorKey = keyof typeof frontendErrors;
type SupportedLocale = (typeof localeConfig.supported)[number];
const apiErrorMap: Record<string, FrontendErrorKey> = {
session_code_required: 'session_code_required',
session_not_found: 'session_not_found',
nickname_invalid: 'nickname_invalid',
nickname_taken: 'nickname_taken'
};
function isFrontendErrorKey(value: string): value is FrontendErrorKey {
return value in frontendErrors;
export function lobbyMessage(key: FrontendErrorKey): string {
return frontendErrors[key] ?? frontendErrors.unknown;
}
function normalizeLocale(rawLocale?: string): SupportedLocale {
const requested = (rawLocale ?? '').trim().toLowerCase();
if (localeConfig.supported.includes(requested as SupportedLocale)) {
return requested as SupportedLocale;
}
return localeConfig.default;
}
export function lobbyMessage(key: FrontendErrorKey, locale?: string): string {
const resolvedLocale = normalizeLocale(locale);
const translations = frontendErrors[key] as Record<string, string>;
if (translations[resolvedLocale]) {
return translations[resolvedLocale];
}
if (translations[localeConfig.default]) {
return translations[localeConfig.default];
}
return key;
}
export function lobbyMessageFromApiPayload(payload: unknown, fallbackKey: FrontendErrorKey, locale?: string): string {
export function lobbyMessageFromApiPayload(payload: unknown, fallbackKey: FrontendErrorKey): string {
if (!payload || typeof payload !== 'object') {
return lobbyMessage(fallbackKey, locale);
return lobbyMessage(fallbackKey);
}
const record = payload as Record<string, unknown>;
const code = typeof record.error_code === 'string' ? record.error_code : '';
const payloadLocale = typeof record.locale === 'string' ? record.locale : locale;
const mappedKey = code ? backendToFrontendErrorKeys[code] : undefined;
if (mappedKey && isFrontendErrorKey(mappedKey)) {
return lobbyMessage(mappedKey, payloadLocale);
const mappedKey = apiErrorMap[code];
if (!mappedKey) {
return lobbyMessage(fallbackKey);
}
if (isFrontendErrorKey(code)) {
return lobbyMessage(code, payloadLocale);
}
return lobbyMessage(fallbackKey, payloadLocale);
return lobbyMessage(mappedKey);
}

View File

@@ -1,68 +0,0 @@
import { describe, expect, it } from 'vitest';
import lobbyCatalog from '../../shared/i18n/lobby.json';
import { lobbyMessage, lobbyMessageFromApiPayload } from '../src/spa/lobby-i18n';
describe('shared i18n keyspace contract', () => {
it('keeps en as default and da/en matrix for frontend error keys', () => {
expect(lobbyCatalog.locales.default).toBe('en');
expect(lobbyCatalog.locales.supported).toEqual(expect.arrayContaining(['en', 'da']));
for (const [key, translations] of Object.entries(lobbyCatalog.frontend.errors)) {
expect(translations.en, `${key} missing en`).toBeTruthy();
expect(translations.da, `${key} missing da`).toBeTruthy();
}
});
it('keeps backend error-code keyspace aligned with shared backend→frontend map and backend translations', () => {
for (const [code, backendKey] of Object.entries(lobbyCatalog.backend.error_codes)) {
const frontendKey =
lobbyCatalog.contract.backend_to_frontend_error_keys[
code as keyof typeof lobbyCatalog.contract.backend_to_frontend_error_keys
];
expect(lobbyCatalog.backend.errors[backendKey as keyof typeof lobbyCatalog.backend.errors]).toBeDefined();
expect(frontendKey, `missing frontend mapping for ${code}`).toBeTruthy();
expect(lobbyCatalog.frontend.errors[frontendKey as keyof typeof lobbyCatalog.frontend.errors]).toBeDefined();
}
for (const [key, translations] of Object.entries(lobbyCatalog.backend.errors)) {
expect(translations.en, `${key} missing en`).toBeTruthy();
expect(translations.da, `${key} missing da`).toBeTruthy();
}
});
});
describe('lobbyMessage locale handling', () => {
it('uses english by default and falls back to default for unsupported locale', () => {
expect(lobbyMessage('session_code_required')).toBe('Session code is required.');
expect(lobbyMessage('session_code_required', 'fr')).toBe('Session code is required.');
});
it('resolves locale from api payload and maps known backend error codes directly', () => {
expect(
lobbyMessageFromApiPayload(
{ error_code: 'session_not_found', locale: 'da' },
'join_failed',
),
).toBe('Sessionskoden er ugyldig, eller sessionen findes ikke længere.');
});
it('uses shared backend→frontend key-map at runtime even when fallback key differs', () => {
expect(
lobbyMessageFromApiPayload(
{ error_code: 'session_not_joinable', locale: 'da' },
'start_round_failed',
),
).toBe('Kunne ikke joine. Tjek kode eller kaldenavn og prøv igen.');
});
it('falls back to caller-provided fallback key for unknown backend error codes', () => {
expect(
lobbyMessageFromApiPayload(
{ error_code: 'unknown_backend_key', locale: 'da' },
'join_failed',
),
).toBe('Kunne ikke joine. Tjek kode eller kaldenavn og prøv igen.');
});
});

View File

@@ -1,12 +1,8 @@
import json
import logging
from functools import lru_cache
from pathlib import Path
from django.http import HttpRequest, JsonResponse
from django.utils.translation import get_language_from_request
LOGGER = logging.getLogger(__name__)
from django.http import JsonResponse
@lru_cache(maxsize=1)
@@ -16,61 +12,9 @@ def lobby_i18n_catalog() -> dict:
return json.load(handle)
@lru_cache(maxsize=1)
def i18n_locale_config() -> tuple[str, tuple[str, ...]]:
locales = lobby_i18n_catalog().get("locales", {})
default_locale = str(locales.get("default", "en")).strip().lower() or "en"
supported_locales = tuple(
locale.strip().lower() for locale in locales.get("supported", ["en", "da"]) if str(locale).strip()
) or ("en", "da")
return default_locale, supported_locales
def lobby_i18n_errors() -> dict:
return lobby_i18n_catalog().get("backend", {}).get("error_codes", {})
def lobby_i18n_error_messages() -> dict:
return lobby_i18n_catalog().get("backend", {}).get("errors", {})
def resolve_locale(request: HttpRequest) -> str:
default_locale, supported_locales = i18n_locale_config()
raw_accept_language = (request.META.get("HTTP_ACCEPT_LANGUAGE") or "").split(",", 1)[0]
raw_requested = raw_accept_language.split(";", 1)[0].strip().replace("_", "-").split("-", 1)[0].lower()
if raw_requested in supported_locales:
return raw_requested
requested = (get_language_from_request(request) or "").replace("_", "-").split("-", 1)[0].lower()
if requested in supported_locales:
return requested
return default_locale
def resolve_error_message(*, key: str, locale: str) -> str:
default_locale, _supported_locales = i18n_locale_config()
translations = lobby_i18n_error_messages().get(key)
if not isinstance(translations, dict):
LOGGER.warning("i18n key missing in shared catalog", extra={"key": key, "locale": locale})
return key
if locale in translations and translations[locale]:
return translations[locale]
if default_locale in translations and translations[default_locale]:
return translations[default_locale]
LOGGER.warning("i18n translation missing for key", extra={"key": key, "locale": locale})
return key
def api_error(request: HttpRequest, *, key: str, status: int) -> JsonResponse:
locale = resolve_locale(request)
return JsonResponse(
{
"error": resolve_error_message(key=key, locale=locale),
"error_code": key,
"locale": locale,
},
status=status,
)
def api_error(*, code: str, message: str, status: int) -> JsonResponse:
return JsonResponse({"error": message, "error_code": code}, status=status)

View File

@@ -89,8 +89,6 @@ var connectionRetryInFlight=false;
var playerShellFatalError=false;
var playerShellRecoverInFlight=false;
var playerCriticalHydrated=false;
function silencePlayerMediaElements(){if(typeof document==="undefined"||typeof document.querySelectorAll!=="function"){return;}var elements=document.querySelectorAll("audio,video");if(!elements||typeof elements.forEach!=="function"){return;}elements.forEach(function(element){if(!element){return;}element.muted=true;if(typeof element.pause==="function"){element.pause();}});}
function installSecondaryDeviceAudioGuard(){if(typeof window==="undefined"){return;}silencePlayerMediaElements();var mediaProto=window.HTMLMediaElement&&window.HTMLMediaElement.prototype;if(!mediaProto||typeof mediaProto.play!=="function"){return;}if(mediaProto.__wppSecondaryDeviceAudioGuardInstalled){return;}mediaProto.__wppSecondaryDeviceAudioGuardInstalled=true;mediaProto.__wppSecondaryDeviceAudioGuardOriginalPlay=mediaProto.play;mediaProto.play=function(){return Promise.resolve();};}
function setPlayerCriticalLoading(isLoading){var skeleton=document.getElementById("playerCriticalSkeleton");var view=document.getElementById("playerCriticalView");if(!skeleton||!view){return;}skeleton.style.display=isLoading?"block":"none";view.style.display=isLoading?"none":"block";}
function hydratePlayerCriticalView(data){var phaseEl=document.getElementById("playerCriticalPhase");var roundEl=document.getElementById("playerCriticalRound");var joinEl=document.getElementById("playerCriticalJoin");if(phaseEl){phaseEl.textContent="Fase: "+phaseLabel(currentSessionStatus||((data&&data.session&&data.session.status)||""));}
if(roundEl){roundEl.textContent="Round question: "+(rq()||"afventer");}
@@ -155,7 +153,6 @@ function submitGuess(){if(guessSubmitted){return Promise.resolve({error:"guess_a
["code","nickname","playerId","sessionToken","roundQuestionId"].forEach(function(fieldId){var field=document.getElementById(fieldId);if(!field){return;}field.addEventListener("input",function(){if(fieldId!=="roundQuestionId"){resetRoundContextForManualChange();}updateLieSubmitState();updateGuessSubmitState();updateJoinState();updateSessionDetailState();savePlayerContext();});field.addEventListener("change",function(){if(fieldId!=="roundQuestionId"){resetRoundContextForManualChange();}updateLieSubmitState();updateGuessSubmitState();updateJoinState();updateSessionDetailState();savePlayerContext();});});
window.addEventListener("error",function(event){setPlayerShellFatalError((event&&event.message)||"Ukendt runtime-fejl");});
window.addEventListener("unhandledrejection",function(event){var reason=event&&event.reason;var detail=(reason&&reason.message)||String(reason||"Unhandled promise rejection");setPlayerShellFatalError(detail);});
installSecondaryDeviceAudioGuard();
setPlayerCriticalLoading(true);
updatePhaseStatus();
updateGuessSubmitState();

View File

@@ -1,13 +1,13 @@
<!doctype html>
<html lang="{{ shell_locale|default:'en' }}">
<html lang="da">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WPP SPA Shell</title>
<link rel="stylesheet" href="{{ spa_asset_base }}/styles.css?v={{ spa_asset_version|urlencode }}">
<link rel="stylesheet" href="{{ spa_asset_base }}/styles.css">
</head>
<body data-wpp-shell-route="{{ shell_route }}" data-wpp-shell-kind="{{ shell_kind }}" data-wpp-locale="{{ shell_locale|default:'en' }}">
<app-root data-wpp-shell-route="{{ shell_route }}" data-wpp-shell-kind="{{ shell_kind }}" data-wpp-locale="{{ shell_locale|default:'en' }}">Indlæser Angular app-shell…</app-root>
<script type="module" src="{{ spa_asset_base }}/main.js?v={{ spa_asset_version|urlencode }}"></script>
<body data-wpp-shell-route="{{ shell_route }}" data-wpp-shell-kind="{{ shell_kind }}">
<app-root data-wpp-shell-route="{{ shell_route }}" data-wpp-shell-kind="{{ shell_kind }}">Indlæser Angular app-shell…</app-root>
<script type="module" src="{{ spa_asset_base }}/main.js"></script>
</body>
</html>

View File

@@ -2,7 +2,6 @@ import json
import tempfile
from datetime import timedelta
from pathlib import Path
from unittest.mock import patch
from django.contrib.auth import get_user_model
from django.core.management import call_command
@@ -20,7 +19,6 @@ from fupogfakta.models import (
RoundConfig,
RoundQuestion,
)
from lobby.i18n import i18n_locale_config, lobby_i18n_catalog, resolve_error_message, resolve_locale
User = get_user_model()
@@ -112,32 +110,6 @@ class LobbyFlowTests(TestCase):
self.assertEqual(response.status_code, 400)
self.assertEqual(response.json()["error"], "Session is not joinable")
def test_join_error_localizes_to_danish_with_accept_language_header(self):
response = self.client.post(
reverse("lobby:join_session"),
data={"code": " ", "nickname": "Luna"},
content_type="application/json",
HTTP_ACCEPT_LANGUAGE="da",
)
self.assertEqual(response.status_code, 400)
self.assertEqual(response.json()["error_code"], "session_code_required")
self.assertEqual(response.json()["locale"], "da")
self.assertEqual(response.json()["error"], "Sessionskode er påkrævet")
def test_join_error_falls_back_to_english_for_unsupported_locale(self):
response = self.client.post(
reverse("lobby:join_session"),
data={"code": " ", "nickname": "Luna"},
content_type="application/json",
HTTP_ACCEPT_LANGUAGE="fr",
)
self.assertEqual(response.status_code, 400)
self.assertEqual(response.json()["error_code"], "session_code_required")
self.assertEqual(response.json()["locale"], "en")
self.assertEqual(response.json()["error"], "Session code is required")
def test_session_detail_returns_players(self):
session = GameSession.objects.create(host=self.host, code="LMNO45")
Player.objects.create(session=session, nickname="Mia", score=7)
@@ -209,8 +181,6 @@ class StartRoundTests(TestCase):
)
self.assertEqual(response.status_code, 403)
self.assertEqual(response.json()["error_code"], "host_only_start_round")
self.assertEqual(response.json()["locale"], "en")
self.assertEqual(response.json()["error"], "Only host can start round")
def test_start_round_requires_existing_active_category_with_questions(self):
@@ -230,8 +200,6 @@ class StartRoundTests(TestCase):
content_type="application/json",
)
self.assertEqual(response.status_code, 400)
self.assertEqual(response.json()["error_code"], "category_has_no_questions")
self.assertEqual(response.json()["locale"], "en")
self.assertEqual(response.json()["error"], "Category has no active questions")
def test_start_round_rejects_non_lobby_session(self):
@@ -248,36 +216,6 @@ class StartRoundTests(TestCase):
self.assertEqual(response.status_code, 400)
self.assertEqual(response.json()["error"], "Round can only be started from lobby")
def test_start_round_error_localizes_to_danish(self):
self.client.login(username="other", password="secret123")
response = self.client.post(
reverse("lobby:start_round", kwargs={"code": self.session.code}),
data={"category_slug": self.category.slug},
content_type="application/json",
HTTP_ACCEPT_LANGUAGE="da",
)
self.assertEqual(response.status_code, 403)
self.assertEqual(response.json()["error_code"], "host_only_start_round")
self.assertEqual(response.json()["locale"], "da")
self.assertEqual(response.json()["error"], "Kun værten kan starte runden")
def test_start_round_error_falls_back_to_english_for_unsupported_locale(self):
self.client.login(username="other", password="secret123")
response = self.client.post(
reverse("lobby:start_round", kwargs={"code": self.session.code}),
data={"category_slug": self.category.slug},
content_type="application/json",
HTTP_ACCEPT_LANGUAGE="fr",
)
self.assertEqual(response.status_code, 403)
self.assertEqual(response.json()["error_code"], "host_only_start_round")
self.assertEqual(response.json()["locale"], "en")
self.assertEqual(response.json()["error"], "Only host can start round")
class LieSubmissionTests(TestCase):
def setUp(self):
@@ -468,8 +406,6 @@ class MixAnswersTests(TestCase):
)
self.assertEqual(response.status_code, 403)
self.assertEqual(response.json()["error_code"], "host_only_mix_answers")
self.assertEqual(response.json()["locale"], "en")
self.assertEqual(response.json()["error"], "Only host can mix answers")
def test_mix_answers_deduplicates_case_insensitive_lies(self):
@@ -1035,10 +971,6 @@ class UiScreenTests(TestCase):
self.assertContains(response, "clearPlayerShellFatalError")
self.assertContains(response, "updatePlayerShellErrorBoundary")
self.assertContains(response, "player_shell_runtime_error")
self.assertContains(response, "installSecondaryDeviceAudioGuard")
self.assertContains(response, "silencePlayerMediaElements")
self.assertContains(response, "querySelectorAll(\"audio,video\")")
self.assertNotContains(response, "<audio")
self.assertContains(response, "window.addEventListener(\"error\"")
@override_settings(USE_SPA_UI=False)
@@ -1063,8 +995,7 @@ class UiScreenTests(TestCase):
self.assertContains(response, "<app-root")
self.assertContains(response, "data-wpp-shell-route=\"/host\"")
self.assertContains(response, "data-wpp-shell-kind=\"host\"")
self.assertContains(response, "/static/frontend/angular/browser/main.js?v=dev")
self.assertContains(response, "/static/frontend/angular/browser/styles.css?v=dev")
self.assertContains(response, "/static/frontend/angular/browser/main.js")
@override_settings(USE_SPA_UI=True)
def test_host_screen_deeplink_preserves_spa_path_when_feature_flag_enabled(self):
@@ -1098,17 +1029,7 @@ class UiScreenTests(TestCase):
self.assertContains(response, "<app-root")
self.assertContains(response, "data-wpp-shell-route=\"/player\"")
self.assertContains(response, "data-wpp-shell-kind=\"player\"")
self.assertContains(response, "/static/frontend/angular/browser/main.js?v=dev")
@override_settings(USE_SPA_UI=True, WPP_SPA_ASSET_VERSION="release-2026-03-01")
def test_spa_shell_uses_configured_asset_version_for_cache_busting(self):
self.client.login(username="host_ui", password="secret123")
response = self.client.get(reverse("lobby:host_screen"))
self.assertEqual(response.status_code, 200)
self.assertContains(response, "/static/frontend/angular/browser/styles.css?v=release-2026-03-01")
self.assertContains(response, "/static/frontend/angular/browser/main.js?v=release-2026-03-01")
self.assertContains(response, "/static/frontend/angular/browser/main.js")
class SessionDetailRoundQuestionTests(TestCase):
@@ -1253,85 +1174,3 @@ class SmokeStagingCommandTests(TestCase):
"finish_game",
],
)
class I18nResolverTests(TestCase):
def test_resolve_locale_accepts_language_tags_and_normalizes_to_supported_base_locale(self):
response = self.client.post(
reverse("lobby:join_session"),
data={"code": "", "nickname": "Luna"},
content_type="application/json",
HTTP_ACCEPT_LANGUAGE="da-DK,da;q=0.9,en;q=0.8",
)
self.assertEqual(response.status_code, 400)
self.assertEqual(resolve_locale(response.wsgi_request), "da")
def test_resolve_locale_accepts_underscore_language_tags(self):
response = self.client.post(
reverse("lobby:join_session"),
data={"code": "", "nickname": "Luna"},
content_type="application/json",
HTTP_ACCEPT_LANGUAGE="da_DK",
)
self.assertEqual(response.status_code, 400)
self.assertEqual(resolve_locale(response.wsgi_request), "da")
def test_resolve_locale_defaults_to_en_when_header_missing(self):
response = self.client.post(
reverse("lobby:join_session"),
data={"code": "", "nickname": "Luna"},
content_type="application/json",
)
self.assertEqual(response.status_code, 400)
self.assertEqual(resolve_locale(response.wsgi_request), "en")
def test_missing_backend_key_returns_key_deterministically(self):
self.assertEqual(resolve_error_message(key="missing_key", locale="da"), "missing_key")
def test_missing_backend_key_is_logged_with_context(self):
with self.assertLogs("lobby.i18n", level="WARNING") as logs:
result = resolve_error_message(key="missing_key", locale="da")
self.assertEqual(result, "missing_key")
self.assertTrue(any("i18n key missing in shared catalog" in entry for entry in logs.output))
def test_missing_locale_translation_falls_back_to_default_locale(self):
with patch(
"lobby.i18n.lobby_i18n_error_messages",
return_value={"session_code_required": {"en": "Session code is required"}},
):
self.assertEqual(
resolve_error_message(key="session_code_required", locale="da"),
"Session code is required",
)
def test_shared_catalog_uses_en_default_and_da_en_matrix(self):
default_locale, supported_locales = i18n_locale_config()
catalog = lobby_i18n_catalog()
self.assertEqual(default_locale, "en")
self.assertIn("en", supported_locales)
self.assertIn("da", supported_locales)
for key, translations in catalog["backend"]["errors"].items():
self.assertTrue(translations.get("en"), f"backend key {key} missing en")
self.assertTrue(translations.get("da"), f"backend key {key} missing da")
for key, translations in catalog["frontend"]["errors"].items():
self.assertTrue(translations.get("en"), f"frontend key {key} missing en")
self.assertTrue(translations.get("da"), f"frontend key {key} missing da")
def test_backend_error_codes_map_via_shared_backend_frontend_key_map(self):
catalog = lobby_i18n_catalog()
backend_errors = catalog["backend"]["errors"]
frontend_errors = catalog["frontend"]["errors"]
shared_map = catalog["contract"]["backend_to_frontend_error_keys"]
for code, backend_key in catalog["backend"]["error_codes"].items():
frontend_key = shared_map.get(code)
self.assertIn(backend_key, backend_errors)
self.assertTrue(frontend_key, f"missing frontend mapping for backend code: {code}")
self.assertIn(frontend_key, frontend_errors)

View File

@@ -5,7 +5,7 @@ from django.shortcuts import render
from fupogfakta.models import Category
from .feature_flags import use_spa_ui
from .i18n import lobby_i18n_catalog, resolve_locale
from .i18n import lobby_i18n_catalog
def _render_spa_shell(request, shell_route: str, shell_kind: str):
@@ -16,9 +16,7 @@ def _render_spa_shell(request, shell_route: str, shell_kind: str):
"shell_route": shell_route,
"shell_kind": shell_kind,
"spa_asset_base": settings.WPP_SPA_ASSET_BASE,
"spa_asset_version": getattr(settings, "WPP_SPA_ASSET_VERSION", "dev"),
"lobby_i18n": lobby_i18n_catalog(),
"shell_locale": resolve_locale(request),
},
)

View File

@@ -128,15 +128,15 @@ def join_session(request: HttpRequest) -> JsonResponse:
if not code:
return api_error(
request,
key=ERROR_CODES.get("session_code_required", "session_code_required"),
code=ERROR_CODES.get("session_code_required", "session_code_required"),
message="Session code is required",
status=400,
)
if len(nickname) < 2 or len(nickname) > 40:
return api_error(
request,
key=ERROR_CODES.get("nickname_invalid", "nickname_invalid"),
code=ERROR_CODES.get("nickname_invalid", "nickname_invalid"),
message="Nickname must be between 2 and 40 characters",
status=400,
)
@@ -144,22 +144,22 @@ def join_session(request: HttpRequest) -> JsonResponse:
session = GameSession.objects.get(code=code)
except GameSession.DoesNotExist:
return api_error(
request,
key=ERROR_CODES.get("session_not_found", "session_not_found"),
code=ERROR_CODES.get("session_not_found", "session_not_found"),
message="Session not found",
status=404,
)
if session.status not in JOINABLE_STATUSES:
return api_error(
request,
key=ERROR_CODES.get("session_not_joinable", "session_not_joinable"),
code=ERROR_CODES.get("session_not_joinable", "session_not_joinable"),
message="Session is not joinable",
status=400,
)
if Player.objects.filter(session=session, nickname__iexact=nickname).exists():
return api_error(
request,
key=ERROR_CODES.get("nickname_taken", "nickname_taken"),
code=ERROR_CODES.get("nickname_taken", "nickname_taken"),
message="Nickname already taken",
status=409,
)
@@ -190,8 +190,8 @@ def session_detail(request: HttpRequest, code: str) -> JsonResponse:
session = GameSession.objects.get(code=session_code)
except GameSession.DoesNotExist:
return api_error(
request,
key=ERROR_CODES.get("session_not_found", "session_not_found"),
code=ERROR_CODES.get("session_not_found", "session_not_found"),
message="Session not found",
status=404,
)
@@ -251,8 +251,8 @@ def start_round(request: HttpRequest, code: str) -> JsonResponse:
if not category_slug:
return api_error(
request,
key=ERROR_CODES.get("category_slug_required", "category_slug_required"),
code=ERROR_CODES.get("category_slug_required", "category_slug_required"),
message="category_slug is required",
status=400,
)
@@ -262,22 +262,18 @@ def start_round(request: HttpRequest, code: str) -> JsonResponse:
session = GameSession.objects.get(code=session_code)
except GameSession.DoesNotExist:
return api_error(
request,
key=ERROR_CODES.get("session_not_found", "session_not_found"),
code=ERROR_CODES.get("session_not_found", "session_not_found"),
message="Session not found",
status=404,
)
if session.host_id != request.user.id:
return api_error(
request,
key=ERROR_CODES.get("host_only_start_round", "host_only_start_round"),
status=403,
)
return JsonResponse({"error": "Only host can start round"}, status=403)
if session.status != GameSession.Status.LOBBY:
return api_error(
request,
key=ERROR_CODES.get("round_start_invalid_phase", "round_start_invalid_phase"),
code=ERROR_CODES.get("round_start_invalid_phase", "round_start_invalid_phase"),
message="Round can only be started from lobby",
status=400,
)
@@ -285,24 +281,20 @@ def start_round(request: HttpRequest, code: str) -> JsonResponse:
category = Category.objects.get(slug=category_slug, is_active=True)
except Category.DoesNotExist:
return api_error(
request,
key=ERROR_CODES.get("category_not_found", "category_not_found"),
code=ERROR_CODES.get("category_not_found", "category_not_found"),
message="Category not found",
status=404,
)
if not Question.objects.filter(category=category, is_active=True).exists():
return api_error(
request,
key=ERROR_CODES.get("category_has_no_questions", "category_has_no_questions"),
status=400,
)
return JsonResponse({"error": "Category has no active questions"}, status=400)
with transaction.atomic():
session = GameSession.objects.select_for_update().get(pk=session.pk)
if session.status != GameSession.Status.LOBBY:
return api_error(
request,
key=ERROR_CODES.get("round_start_invalid_phase", "round_start_invalid_phase"),
code=ERROR_CODES.get("round_start_invalid_phase", "round_start_invalid_phase"),
message="Round can only be started from lobby",
status=400,
)
@@ -313,8 +305,8 @@ def start_round(request: HttpRequest, code: str) -> JsonResponse:
)
if not created:
return api_error(
request,
key=ERROR_CODES.get("round_already_configured", "round_already_configured"),
code=ERROR_CODES.get("round_already_configured", "round_already_configured"),
message="Round already configured",
status=409,
)
@@ -348,41 +340,21 @@ def show_question(request: HttpRequest, code: str) -> JsonResponse:
try:
session = GameSession.objects.get(code=session_code)
except GameSession.DoesNotExist:
return api_error(
request,
key=ERROR_CODES.get("session_not_found", "session_not_found"),
status=404,
)
return JsonResponse({"error": "Session not found"}, status=404)
if session.host_id != request.user.id:
return api_error(
request,
key=ERROR_CODES.get("host_only_show_question", "host_only_show_question"),
status=403,
)
return JsonResponse({"error": "Only host can show question"}, status=403)
if session.status != GameSession.Status.LIE:
return api_error(
request,
key=ERROR_CODES.get("show_question_invalid_phase", "show_question_invalid_phase"),
status=400,
)
return JsonResponse({"error": "Question can only be shown in lie phase"}, status=400)
try:
round_config = RoundConfig.objects.get(session=session, number=session.current_round)
except RoundConfig.DoesNotExist:
return api_error(
request,
key=ERROR_CODES.get("round_config_missing", "round_config_missing"),
status=400,
)
return JsonResponse({"error": "Round config missing"}, status=400)
if RoundQuestion.objects.filter(session=session, round_number=session.current_round).exists():
return api_error(
request,
key=ERROR_CODES.get("question_already_shown", "question_already_shown"),
status=409,
)
return JsonResponse({"error": "Question already shown for this round"}, status=409)
used_question_ids = RoundQuestion.objects.filter(session=session).values_list("question_id", flat=True)
available_questions = Question.objects.filter(
@@ -391,11 +363,7 @@ def show_question(request: HttpRequest, code: str) -> JsonResponse:
).exclude(pk__in=used_question_ids)
if not available_questions.exists():
return api_error(
request,
key=ERROR_CODES.get("no_available_questions", "no_available_questions"),
status=400,
)
return JsonResponse({"error": "No available questions in category"}, status=400)
question = random.choice(list(available_questions))
round_question = RoundQuestion.objects.create(
@@ -505,25 +473,13 @@ def mix_answers(request: HttpRequest, code: str, round_question_id: int) -> Json
try:
session = GameSession.objects.get(code=session_code)
except GameSession.DoesNotExist:
return api_error(
request,
key=ERROR_CODES.get("session_not_found", "session_not_found"),
status=404,
)
return JsonResponse({"error": "Session not found"}, status=404)
if session.host_id != request.user.id:
return api_error(
request,
key=ERROR_CODES.get("host_only_mix_answers", "host_only_mix_answers"),
status=403,
)
return JsonResponse({"error": "Only host can mix answers"}, status=403)
if session.status not in {GameSession.Status.LIE, GameSession.Status.GUESS}:
return api_error(
request,
key=ERROR_CODES.get("mix_answers_invalid_phase", "mix_answers_invalid_phase"),
status=400,
)
return JsonResponse({"error": "Answers can only be mixed in lie or guess phase"}, status=400)
try:
round_question = RoundQuestion.objects.get(
@@ -532,20 +488,12 @@ def mix_answers(request: HttpRequest, code: str, round_question_id: int) -> Json
round_number=session.current_round,
)
except RoundQuestion.DoesNotExist:
return api_error(
request,
key=ERROR_CODES.get("round_question_not_found", "round_question_not_found"),
status=404,
)
return JsonResponse({"error": "Round question not found"}, status=404)
with transaction.atomic():
locked_session = GameSession.objects.select_for_update().get(pk=session.pk)
if locked_session.status not in {GameSession.Status.LIE, GameSession.Status.GUESS}:
return api_error(
request,
key=ERROR_CODES.get("mix_answers_invalid_phase", "mix_answers_invalid_phase"),
status=400,
)
return JsonResponse({"error": "Answers can only be mixed in lie or guess phase"}, status=400)
locked_round_question = RoundQuestion.objects.select_for_update().get(pk=round_question.pk)
@@ -561,11 +509,7 @@ def mix_answers(request: HttpRequest, code: str, round_question_id: int) -> Json
deduped_answers.append(text.strip())
if len(deduped_answers) < 2:
return api_error(
request,
key=ERROR_CODES.get("not_enough_answers_to_mix", "not_enough_answers_to_mix"),
status=400,
)
return JsonResponse({"error": "Not enough answers to mix"}, status=400)
random.shuffle(deduped_answers)
locked_round_question.mixed_answers = deduped_answers

View File

@@ -30,7 +30,6 @@ INSTALLED_APPS = [
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.locale.LocaleMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
@@ -90,12 +89,7 @@ AUTH_PASSWORD_VALIDATORS = [
{'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator'},
]
LANGUAGE_CODE = 'en'
LANGUAGES = [
('en', 'English'),
('da', 'Danish'),
]
LOCALE_PATHS = [BASE_DIR / 'locale']
LANGUAGE_CODE = 'da'
TIME_ZONE = 'Europe/Copenhagen'
USE_I18N = True
USE_TZ = True
@@ -111,9 +105,6 @@ if USE_SPA_UI_RAW is None:
USE_SPA_UI_RAW = env('WPP_SPA_ENABLED', 'false')
USE_SPA_UI = USE_SPA_UI_RAW.lower() == 'true'
WPP_SPA_ASSET_BASE = env('WPP_SPA_ASSET_BASE', '/static/frontend/angular/browser').rstrip('/')
# Cache-busting token for SPA shell static asset URLs (querystring versioning).
# Set to release id / commit SHA in deploy env for deterministic invalidation.
WPP_SPA_ASSET_VERSION = env('WPP_SPA_ASSET_VERSION', 'dev')
CHANNEL_REDIS_HOST = env('CHANNEL_REDIS_HOST', '127.0.0.1')
CHANNEL_REDIS_PORT = int(env('CHANNEL_REDIS_PORT', '6379'))

View File

@@ -1,132 +0,0 @@
#!/usr/bin/env python3
"""Read-only drift check for shared i18n key coverage.
Compares `shared/i18n/key-manifest.json` against `shared/i18n/lobby.json` and
fails fast when keyspaces drift between frontend/backend contract sections.
"""
from __future__ import annotations
import json
from pathlib import Path
import sys
from typing import Any
REPO_ROOT = Path(__file__).resolve().parents[1]
CATALOG_PATH = REPO_ROOT / "shared" / "i18n" / "lobby.json"
MANIFEST_PATH = REPO_ROOT / "shared" / "i18n" / "key-manifest.json"
def _load_json(path: Path) -> dict[str, Any]:
with path.open("r", encoding="utf-8") as handle:
return json.load(handle)
def _as_set(value: Any) -> set[str]:
if not isinstance(value, list):
return set()
return {str(item) for item in value}
def _require_translations(
errors: dict[str, Any],
locales: set[str],
label: str,
failures: list[str],
) -> None:
for key, translations in errors.items():
if not isinstance(translations, dict):
failures.append(f"{label}.{key} must be an object of locale->message")
continue
for locale in sorted(locales):
value = translations.get(locale)
if not isinstance(value, str) or not value.strip():
failures.append(f"{label}.{key} missing non-empty '{locale}' translation")
def main() -> int:
catalog = _load_json(CATALOG_PATH)
manifest = _load_json(MANIFEST_PATH)
failures: list[str] = []
manifest_locales = _as_set(manifest.get("locales"))
catalog_locales = _as_set(catalog.get("locales", {}).get("supported"))
if manifest_locales != catalog_locales:
failures.append(
"locale set mismatch: "
f"manifest={sorted(manifest_locales)} catalog={sorted(catalog_locales)}"
)
frontend_manifest = _as_set(manifest.get("frontend_error_keys"))
frontend_catalog = set(catalog.get("frontend", {}).get("errors", {}).keys())
if frontend_manifest != frontend_catalog:
failures.append(
"frontend error key mismatch: "
f"manifest-only={sorted(frontend_manifest - frontend_catalog)} "
f"catalog-only={sorted(frontend_catalog - frontend_manifest)}"
)
backend_code_manifest = _as_set(manifest.get("backend_error_codes"))
backend_code_catalog = set(catalog.get("backend", {}).get("error_codes", {}).keys())
if backend_code_manifest != backend_code_catalog:
failures.append(
"backend error code mismatch: "
f"manifest-only={sorted(backend_code_manifest - backend_code_catalog)} "
f"catalog-only={sorted(backend_code_catalog - backend_code_manifest)}"
)
backend_key_manifest = _as_set(manifest.get("backend_error_keys"))
backend_key_catalog = set(catalog.get("backend", {}).get("errors", {}).keys())
if backend_key_manifest != backend_key_catalog:
failures.append(
"backend error key mismatch: "
f"manifest-only={sorted(backend_key_manifest - backend_key_catalog)} "
f"catalog-only={sorted(backend_key_catalog - backend_key_manifest)}"
)
backend_to_frontend = catalog.get("contract", {}).get("backend_to_frontend_error_keys", {})
if not isinstance(backend_to_frontend, dict):
failures.append("contract.backend_to_frontend_error_keys must be an object")
backend_to_frontend = {}
for code in sorted(backend_code_catalog):
frontend_key = backend_to_frontend.get(code)
if frontend_key is None:
failures.append(f"missing contract mapping for backend code '{code}'")
continue
if frontend_key not in frontend_catalog:
failures.append(
f"mapping for backend code '{code}' points to unknown frontend key '{frontend_key}'"
)
allowed_contract_only_codes = _as_set(manifest.get("allowed_contract_only_backend_codes"))
unknown_mapping_codes = set(backend_to_frontend.keys()) - backend_code_catalog
disallowed_unknown_mapping_codes = unknown_mapping_codes - allowed_contract_only_codes
if disallowed_unknown_mapping_codes:
failures.append(
"contract contains mappings for unknown backend codes: "
f"{sorted(disallowed_unknown_mapping_codes)}"
)
_require_translations(catalog.get("frontend", {}).get("errors", {}), manifest_locales, "frontend.errors", failures)
_require_translations(catalog.get("backend", {}).get("errors", {}), manifest_locales, "backend.errors", failures)
if failures:
print("i18n drift check FAILED")
for failure in failures:
print(f" - {failure}")
return 1
print("i18n drift check OK")
print(f" - locales: {sorted(manifest_locales)}")
print(f" - frontend error keys: {len(frontend_catalog)}")
print(f" - backend error codes: {len(backend_code_catalog)}")
print(f" - backend error keys: {len(backend_key_catalog)}")
return 0
if __name__ == "__main__":
raise SystemExit(main())

View File

@@ -1,60 +0,0 @@
{
"locales": ["en", "da"],
"frontend_error_keys": [
"join_failed",
"nickname_invalid",
"nickname_taken",
"session_code_required",
"session_fetch_failed",
"session_not_found",
"start_round_failed",
"unknown"
],
"backend_error_codes": [
"category_has_no_questions",
"category_not_found",
"category_slug_required",
"host_only_mix_answers",
"host_only_show_question",
"host_only_start_round",
"mix_answers_invalid_phase",
"nickname_invalid",
"nickname_taken",
"no_available_questions",
"not_enough_answers_to_mix",
"question_already_shown",
"round_already_configured",
"round_config_missing",
"round_question_not_found",
"round_start_invalid_phase",
"session_code_required",
"session_not_found",
"session_not_joinable",
"show_question_invalid_phase"
],
"allowed_contract_only_backend_codes": [
"host_only_action"
],
"backend_error_keys": [
"category_has_no_questions",
"category_not_found",
"category_slug_required",
"host_only_mix_answers",
"host_only_show_question",
"host_only_start_round",
"mix_answers_invalid_phase",
"nickname_invalid",
"nickname_taken",
"no_available_questions",
"not_enough_answers_to_mix",
"question_already_shown",
"round_already_configured",
"round_config_missing",
"round_question_not_found",
"round_start_invalid_phase",
"session_code_required",
"session_not_found",
"session_not_joinable",
"show_question_invalid_phase"
]
}

View File

@@ -1,274 +1,14 @@
{
"locales": {
"default": "en",
"supported": [
"en",
"da"
]
},
"frontend": {
"errors": {
"session_code_required": {
"en": "Session code is required.",
"da": "Sessionskoden er påkrævet."
},
"session_fetch_failed": {
"en": "Could not load lobby status.",
"da": "Kunne ikke indlæse lobby-status."
},
"join_failed": {
"en": "Join failed. Check code or nickname and try again.",
"da": "Kunne ikke joine. Tjek kode eller kaldenavn og prøv igen."
},
"start_round_failed": {
"en": "Could not start round. Refresh the lobby and try again.",
"da": "Kunne ikke starte runden. Opdater lobbyen og prøv igen."
},
"session_not_found": {
"en": "Session code is invalid or the session no longer exists.",
"da": "Sessionskoden er ugyldig, eller sessionen findes ikke længere."
},
"nickname_invalid": {
"en": "Nickname must be between 2 and 40 characters.",
"da": "Kaldenavn skal være mellem 2 og 40 tegn."
},
"nickname_taken": {
"en": "Nickname is already taken.",
"da": "Kaldenavnet er allerede taget."
},
"unknown": {
"en": "Action failed. Refresh status and try again.",
"da": "Handlingen fejlede. Opdater status og prøv igen."
}
},
"ui": {
"common": {
"refresh": {
"en": "Refresh",
"da": "Opdatér"
},
"retry": {
"en": "Retry",
"da": "Prøv igen"
},
"back_to_join": {
"en": "Back to join",
"da": "Tilbage til join"
},
"session_code": {
"en": "Session code",
"da": "Sessionskode"
},
"status": {
"en": "Status",
"da": "Status"
},
"prompt": {
"en": "Prompt",
"da": "Spørgsmål"
},
"round_question_id": {
"en": "Round question id",
"da": "Rundespørgsmål-id"
},
"round": {
"en": "round",
"da": "runde"
},
"points_short": {
"en": "pts",
"da": "point"
},
"unknown_error": {
"en": "Unknown error",
"da": "Ukendt fejl"
}
},
"app": {
"title": {
"en": "WPP Angular Shell",
"da": "WPP Angular Shell"
},
"host_nav": {
"en": "Host",
"da": "Vært"
},
"player_nav": {
"en": "Player",
"da": "Spiller"
},
"language_label": {
"en": "Language",
"da": "Sprog"
}
},
"host": {
"title": {
"en": "Host gameplay flow",
"da": "Vært gameplay-flow"
},
"category": {
"en": "Category",
"da": "Kategori"
},
"start_round": {
"en": "Start round",
"da": "Start runde"
},
"show_question": {
"en": "Show question",
"da": "Vis spørgsmål"
},
"mix_answers": {
"en": "Mix answers → guess",
"da": "Bland svar → gæt"
},
"calculate_scores": {
"en": "Calculate scores → reveal",
"da": "Udregn score → afslør"
},
"load_scoreboard": {
"en": "Load scoreboard",
"da": "Hent scoreboard"
},
"start_next_round": {
"en": "Start next round",
"da": "Start næste runde"
},
"finish_game": {
"en": "Finish game",
"da": "Afslut spil"
},
"retry_scoreboard": {
"en": "Retry scoreboard",
"da": "Prøv scoreboard igen"
},
"retry_next_round": {
"en": "Retry next round",
"da": "Prøv næste runde igen"
},
"retry_finish": {
"en": "Retry finish game",
"da": "Prøv afslutning igen"
},
"session_refresh_failed": {
"en": "Session refresh failed",
"da": "Kunne ikke opdatere session"
},
"scoreboard_failed": {
"en": "Scoreboard failed",
"da": "Scoreboard fejlede"
},
"next_round_failed": {
"en": "Next round failed",
"da": "Næste runde fejlede"
},
"finish_game_failed": {
"en": "Finish game failed",
"da": "Afslutning fejlede"
},
"session_code_required": {
"en": "Session code is required",
"da": "Sessionskode er påkrævet"
},
"final_leaderboard": {
"en": "Final leaderboard",
"da": "Finale leaderboard"
},
"winner": {
"en": "Winner",
"da": "Vinder"
},
"audio_locale_hint": {
"en": "Host locale for audio references",
"da": "Værtens locale for lydreferencer"
}
},
"player": {
"title": {
"en": "Player gameplay flow",
"da": "Spiller gameplay-flow"
},
"nickname": {
"en": "Nickname",
"da": "Kaldenavn"
},
"join": {
"en": "Join",
"da": "Join"
},
"lie_label": {
"en": "Lie",
"da": "Løgn"
},
"submit_lie": {
"en": "Submit lie",
"da": "Send løgn"
},
"retry_lie_submit": {
"en": "Retry lie submit",
"da": "Prøv løgn igen"
},
"submit_guess": {
"en": "Submit guess",
"da": "Send gæt"
},
"retry_guess_submit": {
"en": "Retry guess submit",
"da": "Prøv gæt igen"
},
"final_leaderboard": {
"en": "Final leaderboard",
"da": "Finale leaderboard"
},
"reconnecting_text": {
"en": "Reconnecting… trying to refresh session state.",
"da": "Forbinder igen… prøver at opdatere session."
},
"offline_text": {
"en": "You are offline. Reconnect to continue gameplay.",
"da": "Du er offline. Forbind igen for at fortsætte."
},
"retry_now": {
"en": "Retry now",
"da": "Prøv nu"
},
"loading_refresh": {
"en": "Loading latest session state…",
"da": "Indlæser seneste session-status…"
},
"loading_join": {
"en": "Joining session… restoring your player state.",
"da": "Joiner session… gendanner spillerstatus."
},
"loading_submit_lie": {
"en": "Submitting lie… waiting for guess phase.",
"da": "Sender løgn… venter på gættefase."
},
"loading_submit_guess": {
"en": "Submitting guess… waiting for reveal.",
"da": "Sender gæt… venter på afsløring."
},
"session_refresh_failed": {
"en": "Session refresh failed",
"da": "Kunne ikke opdatere session"
},
"join_failed": {
"en": "Join failed",
"da": "Join fejlede"
},
"lie_submit_failed": {
"en": "Lie submit failed",
"da": "Løgn-fejl"
},
"guess_submit_failed": {
"en": "Guess submit failed",
"da": "Gætte-fejl"
}
}
},
"capabilities": {
"client_has_no_audio_output": true
"session_code_required": "Session code is required.",
"session_fetch_failed": "Could not load lobby status.",
"join_failed": "Join failed. Check code or nickname and try again.",
"start_round_failed": "Could not start round. Refresh the lobby and try again.",
"session_not_found": "Session code is invalid or the session no longer exists.",
"nickname_invalid": "Nickname must be between 2 and 40 characters.",
"nickname_taken": "Nickname is already taken.",
"unknown": "Action failed. Refresh status and try again."
}
},
"backend": {
@@ -281,138 +21,7 @@
"category_slug_required": "category_slug_required",
"category_not_found": "category_not_found",
"round_start_invalid_phase": "round_start_invalid_phase",
"round_already_configured": "round_already_configured",
"category_has_no_questions": "category_has_no_questions",
"show_question_invalid_phase": "show_question_invalid_phase",
"round_config_missing": "round_config_missing",
"question_already_shown": "question_already_shown",
"no_available_questions": "no_available_questions",
"mix_answers_invalid_phase": "mix_answers_invalid_phase",
"round_question_not_found": "round_question_not_found",
"not_enough_answers_to_mix": "not_enough_answers_to_mix",
"host_only_start_round": "host_only_start_round",
"host_only_show_question": "host_only_show_question",
"host_only_mix_answers": "host_only_mix_answers"
},
"errors": {
"session_code_required": {
"en": "Session code is required",
"da": "Sessionskode er påkrævet"
},
"nickname_invalid": {
"en": "Nickname must be between 2 and 40 characters",
"da": "Kaldenavn skal være mellem 2 og 40 tegn"
},
"session_not_found": {
"en": "Session not found",
"da": "Session blev ikke fundet"
},
"session_not_joinable": {
"en": "Session is not joinable",
"da": "Sessionen kan ikke joine nu"
},
"nickname_taken": {
"en": "Nickname already taken",
"da": "Kaldenavnet er allerede taget"
},
"category_slug_required": {
"en": "category_slug is required",
"da": "category_slug er påkrævet"
},
"category_not_found": {
"en": "Category not found",
"da": "Kategori blev ikke fundet"
},
"round_start_invalid_phase": {
"en": "Round can only be started from lobby",
"da": "Runden kan kun startes fra lobbyen"
},
"round_already_configured": {
"en": "Round already configured",
"da": "Runden er allerede konfigureret"
},
"category_has_no_questions": {
"en": "Category has no active questions",
"da": "Kategorien har ingen aktive spørgsmål"
},
"show_question_invalid_phase": {
"en": "Question can only be shown in lie phase",
"da": "Spørgsmålet kan kun vises i løgnefasen"
},
"round_config_missing": {
"en": "Round config missing",
"da": "Rundekonfiguration mangler"
},
"question_already_shown": {
"en": "Question already shown for this round",
"da": "Spørgsmålet er allerede vist for denne runde"
},
"no_available_questions": {
"en": "No available questions in category",
"da": "Ingen tilgængelige spørgsmål i kategorien"
},
"mix_answers_invalid_phase": {
"en": "Answers can only be mixed in lie or guess phase",
"da": "Svar kan kun blandes i løgne- eller gættefasen"
},
"round_question_not_found": {
"en": "Round question not found",
"da": "Rundespørgsmål blev ikke fundet"
},
"not_enough_answers_to_mix": {
"en": "Not enough answers to mix",
"da": "Ikke nok svar at blande"
},
"host_only_start_round": {
"en": "Only host can start round",
"da": "Kun værten kan starte runden"
},
"host_only_show_question": {
"en": "Only host can show question",
"da": "Kun værten kan vise spørgsmålet"
},
"host_only_mix_answers": {
"en": "Only host can mix answers",
"da": "Kun værten kan blande svar"
}
}
},
"contract": {
"ownership": {
"artifact": "shared/i18n/lobby.json",
"backend": "lobby/* reads backend/errors + backend/error_codes",
"frontend": "frontend/* reads frontend/errors + frontend/ui + contract/backend_to_frontend_error_keys"
},
"locale": {
"default": "en",
"supported": [
"en",
"da"
],
"fallback": "Use default locale when requested locale is unsupported or key translation is missing."
},
"backend_to_frontend_error_keys": {
"session_code_required": "session_code_required",
"nickname_invalid": "nickname_invalid",
"session_not_found": "session_not_found",
"session_not_joinable": "join_failed",
"nickname_taken": "nickname_taken",
"category_slug_required": "start_round_failed",
"category_not_found": "start_round_failed",
"round_start_invalid_phase": "start_round_failed",
"round_already_configured": "start_round_failed",
"host_only_start_round": "start_round_failed",
"host_only_show_question": "start_round_failed",
"host_only_mix_answers": "start_round_failed",
"host_only_action": "start_round_failed",
"category_has_no_questions": "start_round_failed",
"show_question_invalid_phase": "start_round_failed",
"round_config_missing": "start_round_failed",
"question_already_shown": "start_round_failed",
"no_available_questions": "start_round_failed",
"mix_answers_invalid_phase": "start_round_failed",
"round_question_not_found": "start_round_failed",
"not_enough_answers_to_mix": "start_round_failed"
"round_already_configured": "round_already_configured"
}
}
}