1.3 KiB
1.3 KiB
| description | globs | alwaysApply |
|---|---|---|
| Standards for building LitElement UI components in src/ui/ | src/ui/** | false |
UI Component Standards
Framework
- Use LitElement for all UI components.
- Filename should match the component name (kebab-case)
- Styles must be scoped within static get styles().
- Use theme styles where applicable
Integration Logic
- Event-Driven: UI components must never reference the GameLoop or GameStateManager directly for write operations.
- Wrong: gameLoop.startLevel()
- Right: this.dispatchEvent(new CustomEvent('start-level', ...))
- Data Binding: Components should accept data via Properties (static get properties()) or Subscriptions to Singleton EventTargets (e.g., gameStateManager).
- Lazy Loading: Large UI screens (TeamBuilder, MissionBoard) must be designed to be dynamically imported only when needed.
Visuals
- Aesthetic: "Voxel-Web" / High-Tech Fantasy.
- Fonts: Monospace ('Courier New').
- Colors: Dark backgrounds (rgba(0,0,0,0.8)), Neon accents (Cyan, Gold, Green).
- Elements: Borders should look like pixel art or voxel edges.
- Responsive: All screens must support Mobile (vertical stack) and Desktop (horizontal layout). Use CSS Grid/Flexbox.
- Accessibility: Interactive elements must be <button>. Use aria-label for icon-only buttons.