alexei.dolgolyov/ledgrab
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 14 Wiki Activity
Files
b36ddfd39571ca8060b8de658abf904f3ec27996
ledgrab/plans/game-integration/phase-7-frontend-bindings.md
T
alexei.dolgolyov 492bdb95e3 feat: game integration system 
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
2026-03-31 13:17:52 +03:00

5.1 KiB
Raw Blame History

Phase 7: Frontend — ColorStrip & ValueSource Game Bindings

Status: ✅ Complete Parent plan: 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

  • 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
  • Task 2: Game integration picker in CSS editor
    • EntitySelect dropdown listing available game integrations
    • When selected, show the integration's supported events
  • 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
  • Task 4: Add "game_event" to ValueSource type selector
    • New icon + label in the value source type grid
  • 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)
  • Task 6: Add i18n keys for new source type labels and config fields
  • 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

  • All tasks completed
  • Code follows frontend conventions
  • TypeScript compiles without errors
  • 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().

Reference in New Issue View Git Blame Copy Permalink