alexei.dolgolyov
492bdb95e3
Receive real-time events from games (CS2, Dota 2, LoL, etc.) and drive LED effects through the existing color strip and value source pipelines. Core: - GameEventBus (thread-safe pub/sub) with standardized 23-type event vocabulary - GameAdapter ABC + AdapterRegistry + MappingAdapter (YAML-driven) - Built-in adapters: CS2 GSI, Dota 2 GSI, LoL Live Client, Generic Webhook - Community YAML adapters: Minecraft, Valorant, Rocket League - GameEventColorStripStream with 5 effects (flash/pulse/sweep/color_shift/breathing) - GameEventValueSource with EMA smoothing and timeout - 4 built-in effect presets (FPS Combat, MOBA Health, Racing, Generic Alert) - Auto-setup for Valve GSI games (Steam path detection, cfg file writing) - Demo capture engine exposed to non-demo mode Frontend: - Game tab in Streams tree navigation with integration cards - Game integration editor modal with adapter picker, config fields, event mappings - game_event source type in CSS and ValueSource editors - Setup instructions overlay (markdown rendered) - Live event monitor and connection test API: - Full CRUD for game integrations - Event ingestion endpoint (adapter-level auth) - Adapter metadata, presets, auto-setup, status/diagnostics endpoints
80 lines
5.1 KiB
Markdown
80 lines
5.1 KiB
Markdown
# 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().
|