# Phase 7: Frontend — ColorStrip & ValueSource Game Bindings

**Status:** ✅ Complete
**Parent plan:** [PLAN.md](./PLAN.md)
**Domain:** frontend

## Objective
Add "game_event" as a selectable source type in the ColorStrip and ValueSource editors so users can create game-driven LED streams and parameter bindings from the existing entity UIs.

## Tasks

- [x] Task 1: Add "game_event" to ColorStripSource type selector (IconSelect)
  - New icon + label in the source type grid
  - When selected, show game integration picker (EntitySelect) and event mapping editor
- [x] Task 2: Game integration picker in CSS editor
  - EntitySelect dropdown listing available game integrations
  - When selected, show the integration's supported events
- [x] Task 3: Inline event mapping UI in CSS source editor
  - Simplified version of the full mapping editor from Phase 6
  - Allows override/supplement of the integration-level mappings
  - Idle color picker
- [x] Task 4: Add "game_event" to ValueSource type selector
  - New icon + label in the value source type grid
- [x] Task 5: Game value source config fields
  - Game integration picker (EntitySelect)
  - Event type picker (dropdown of continuous events from the selected integration)
  - Min/max game value inputs
  - Smoothing slider (0.0-1.0)
  - Default value input
  - Timeout input (seconds)
- [x] Task 6: Add i18n keys for new source type labels and config fields
- [x] Task 7: Update TypeScript types for new source types

## Files to Modify/Create
- `server/src/wled_controller/static/js/features/streams.ts` — CSS editor game_event fields
- `server/src/wled_controller/static/js/features/game-integration.ts` — shared helpers
- `server/src/wled_controller/static/js/types.ts` — type definitions
- `server/src/wled_controller/templates/modals/` — update CSS and value source modals
- `server/src/wled_controller/static/locales/en.json`
- `server/src/wled_controller/static/locales/ru.json`
- `server/src/wled_controller/static/locales/zh.json`

## Acceptance Criteria
- "game_event" appears in both source type selectors with appropriate icon
- Selecting it shows game integration picker and relevant config fields
- CSS editor shows event mapping override UI
- Value source editor shows normalization and smoothing controls
- All i18n keys present

## Notes
- Depends on Phase 4 (CSS source type exists) and Phase 5 (value source type exists)
- Reuse game-integration.ts helpers for adapter/event metadata fetching

## Review Checklist
- [x] All tasks completed
- [x] Code follows frontend conventions
- [x] TypeScript compiles without errors
- [x] Bundle builds successfully

## Handoff to Next Phase

All 7 tasks implemented. Key implementation details:

**Files modified:**
- `icons.ts` — added `game_event` to both `_colorStripTypeIcons` and `_valueSourceTypeIcons` maps (gamepad2 icon)
- `types.ts` — added `game_event` to `CSSSourceType` and `ValueSourceType` unions, added `GameEventValueSource` interface, added game event fields to `ColorStripSource` interface, also fixed pre-existing `system_metrics` missing from `ValueSourceType`
- `color-strips.ts` — added `game_event` to `CSS_TYPE_KEYS`, `CSS_SECTION_MAP`, `CSS_TYPE_SETUP`, and `_typeHandlers`; added helper functions for game integration EntitySelect dropdown, idle color BindableColorWidget, inline event mapping editor (add/remove/preset), and game mapping collection for save
- `value-sources.ts` — added `game_event` to `VS_FLOAT_TYPE_KEYS`; added section toggle in `onValueSourceTypeChange`; added loading/save logic for game event fields; added EntitySelect for game integration picker with filtered continuous event type dropdown
- `css-editor.html` — added `css-editor-game-event-section` with game integration select, idle color container, mapping preset select, inline mapping editor, and add mapping button
- `value-source-editor.html` — added `value-source-game-event-section` with game integration select, event type select (continuous events), min/max game value inputs, smoothing/default/timeout sliders
- `app.ts` — imported and wired `addCSSGameMapping`, `removeCSSGameMapping`, `onCSSGameMappingPresetChange` to window
- `global.d.ts` — added window type declarations for the 3 new exported functions
- `en.json`, `ru.json`, `zh.json` — added ~28 i18n keys each for CSS and value source game_event labels, hints, and errors

**UI behavior:**
- CSS editor: selecting "Game Event" type shows a game integration EntitySelect, BindableColor idle color picker, and an inline event mapping editor with preset loading (FPS Combat / MOBA Health), add/remove mapping rows (event type, effect type, color, duration, intensity, priority)
- Value source editor: selecting "Game Event" type shows a game integration EntitySelect, event type dropdown (filtered to continuous events from the adapter's supported_events), min/max game value number inputs, smoothing slider, default value slider, timeout slider

**Conventions followed:** No emoji (SVG icons only), EntitySelect for game integration picker, BindableColorWidget for idle color, fetchWithAuth, cache.invalidate() + reload pattern, all strings via t() with i18n keys in 3 locales, dirty check via snapshotValues(), widget cleanup in onForceClose().