mattmone/aether-shards
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
aether-shards/.cursor/rules/ui/RULE.md

31 lines
1.3 KiB
Markdown
Raw Normal View History

Add HubScreen and MissionBoard components for campaign management 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.
2025-12-31 18:49:26 +00:00
---
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.
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 20:25:14 +00:00
- Filename should match the component name (kebab-case)
Add HubScreen and MissionBoard components for campaign management 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.
2025-12-31 18:49:26 +00:00
- 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.
Reference in a new issue Copy permalink