diff --git a/docs/guides/authenticated-shell.md b/docs/guides/authenticated-shell.md index 1633d07..efa39b8 100644 --- a/docs/guides/authenticated-shell.md +++ b/docs/guides/authenticated-shell.md @@ -3,7 +3,7 @@ type: guide title: Authenticated Shell description: How a signed-in user experiences the post-login shell, including authenticated event streaming. tags: [guide, shell, header, sse, navigation, tester] -timestamp: 2026-07-21T23:25:00Z +timestamp: 2026-07-22T09:03:53Z --- # When this view is available @@ -29,10 +29,30 @@ before the shell mounts. |---|---|---| | Page title | `[data-testid="shell-title"]` | Shows the bootstrap `pageTitle`; clicking navigates to `/challenges`. | | Active section | `[data-testid="shell-active-section"]` | Shows `Challenges`, `Scoreboard`, `Blog`, or `Admin` based on the URL. | -| Event LED | `[data-testid="shell-led"]` | Uses `led-running`, `led-countdown`, `led-stopped`, or `led-unconfigured`. | +| Event LED | `[data-testid="shell-led"]` | A 10×10 circular dot whose color reflects the current event state. See [Event LED colors](#event-led-colors) below. | | Countdown | `[data-testid="shell-countdown"]` | Displays `DD:HH:mm`, `Event ended`, or empty for an unconfigured event. | | User menu | `[data-testid="user-menu-trigger"]` | Toggles rank, change-password, optional admin, and logout entries. | +# Event LED colors + +The LED is rendered by `ShellHeaderComponent` as a `` +with one of four state classes attached via `[class.led-]`. The +visual styling lives in `frontend/src/styles.css` and is driven entirely +by the existing theme color tokens — there is no per-state color in +TypeScript. + +| Event state | CSS class | Color token | Approx. hex | Visual | +|-------------------|-----------------------|-----------------------|-------------|--------| +| `countdown` | `led led-countdown` | `--color-warning` | `#f59e0b` | Yellow filled dot | +| `running` | `led led-running` | `--color-success` | `#10b981` | Green filled dot | +| `stopped` | `led led-stopped` | `--color-danger` | `#ef4444` | Red filled dot | +| `unconfigured` | `led led-unconfigured`| `--color-secondary` | `#64748b` | Neutral gray filled dot | + +The base `.led` rule paints a 10×10 circular `inline-block`, so the LED +is always the same size and shape — only the background color changes +between states. The element also carries +`aria-label="Event status: "` for assistive tech. + ## Quick tabs The tab strip `[data-testid="quick-tabs"]` contains `Challenges`, `Scoreboard`, and @@ -62,6 +82,7 @@ error event. The shell retains the last event state until a later connection suc | `frontend/src/app/core/services/authenticated-event-source.service.ts` | Fetch-based authenticated SSE transport with abort and frame parsing. | | `frontend/src/app/core/services/event-status.store.ts` | Applies event frames and derives the live countdown. | | `frontend/src/app/features/shell/header/shell-header.component.ts` | Renders event LED, countdown, navigation, and user menu. | +| `frontend/src/styles.css` | Defines the `.led` base shape plus the four `.led-{state}` background-color rules keyed on theme tokens. | | `frontend/src/app/features/shell/tabs/quick-tabs.component.ts` | Renders the main navigation tabs. | | `tests/frontend/authenticated-event-source.spec.ts` | Verifies authorization headers, SSE frame delivery, and anonymous header omission. | diff --git a/docs/guides/event-window.md b/docs/guides/event-window.md index 70c629e..5e60d44 100644 --- a/docs/guides/event-window.md +++ b/docs/guides/event-window.md @@ -3,7 +3,7 @@ type: guide title: Event Window description: How the event window state machine is computed and surfaced via REST + SSE. tags: [guide, event, countdown, sse, state-machine] -timestamp: 2026-07-21T22:19:08Z +timestamp: 2026-07-22T09:03:53Z --- # Configuration @@ -78,7 +78,10 @@ The store: The header (`ShellHeaderComponent`) renders an LED with the `led-{state}` class so the colour reflects the current state (the exact theme colours are wired in `styles.css` against the existing -`--color-success` / `--color-warning` / `--color-danger` tokens). +`--color-success` / `--color-warning` / `--color-danger` tokens; +`unconfigured` uses `--color-secondary`). See the +[Event LED colors](/guides/authenticated-shell.md#event-led-colors) +table in the Authenticated Shell guide for the full mapping. `HomeComponent.ngOnDestroy()` (and the `DestroyRef` hook in the store itself) close the SSE source and clear the tick interval, so leaving diff --git a/docs/index.md b/docs/index.md index 3808bdf..28459fa 100644 --- a/docs/index.md +++ b/docs/index.md @@ -11,7 +11,7 @@ scoreboard, an event window with a public countdown, theming, and admin controls. The docs below are organized by purpose so agents can pull just the slice -they need. Last regenerated 2026-07-21T23:25:00Z. +they need. Last regenerated 2026-07-22T09:03:53Z. # Architecture