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 a7c60ac56d Implement Research system and enhance mission management 
- Introduce the ResearchManager to manage tech trees, node unlocking, and passive effects, enhancing gameplay depth.
- Update GameStateManager to integrate the ResearchManager, ensuring seamless data handling for research states.
- Implement lazy loading for mission definitions and class data to improve performance and resource management.
- Enhance UI components, including the ResearchScreen and MissionBoard, to support new research features and mission prerequisites.
- Add comprehensive tests for the ResearchManager and related UI components to validate functionality and integration within the game architecture.
2026-01-01 09:18:09 -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().
  • 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.