31 lines
1.3 KiB
Markdown
31 lines
1.3 KiB
Markdown
---
|
|
description: Standards for building LitElement UI components in src/ui/
|
|
globs: src/ui/**
|
|
alwaysApply: 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**
|
|
|
|
1. **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', ...))
|
|
2. **Data Binding:** Components should accept data via **Properties** (static get properties()) or **Subscriptions** to Singleton EventTargets (e.g., gameStateManager).
|
|
3. **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.
|