mattmone/aether-shards
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
aether-shards/.cursor/rules/ui/RULE.md
Matthew Mone d804154619 Update UI components and styles for improved consistency and functionality 
- Introduce new CharacterSheet and MissionBoard components, enhancing user interaction for unit management and mission selection.
- Refactor existing components to utilize a shared theme system, consolidating styles for better maintainability and visual consistency.
- Update HubScreen to integrate new components and improve resource management interface.
- Implement dynamic imports for better performance and loading efficiency.
- Enhance existing UI elements with responsive design adjustments and improved accessibility features.
- Remove deprecated MissionBoard implementation to streamline codebase.
2025-12-31 12:25:14 -08:00

1.3 KiB
Raw Blame History

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().

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.