5c335b4b3c
Introduce the HubScreen as the main interface for managing resources, units, and mission selection, integrating with the GameStateManager for dynamic data binding. Implement the MissionBoard component to display and select available missions, enhancing user interaction with mission details and selection logic. Update the GameStateManager to handle transitions between game states, ensuring a seamless experience for players. Add tests for HubScreen and MissionBoard to validate functionality and integration with the overall game architecture.
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.
- Styles must be scoped within static get styles().
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.