a0595e6077
All checks were successful
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 3m9s
- Increase attunement mana conversion rates (0.2 -> 2 for Enchanter) - Hide mana types with current < 1 in ManaDisplay and LabTab - Only show owned equipment types when designing enchantments
119 lines
3.9 KiB
Markdown
Executable File
119 lines
3.9 KiB
Markdown
Executable File
# Mana Loop - Component Refactoring Plan
|
|
|
|
## Current State
|
|
The main `page.tsx` file is ~2000+ lines and contains all game logic and rendering in a single component. This makes it:
|
|
- Hard to maintain
|
|
- Hard to test individual features
|
|
- Prone to performance issues (entire component re-renders on any state change)
|
|
- Difficult for multiple developers to work on
|
|
|
|
## Proposed Component Structure
|
|
|
|
### Directory: `/src/components/game/`
|
|
|
|
#### Layout Components
|
|
```
|
|
GameLayout.tsx - Main layout wrapper with header/footer
|
|
Calendar.tsx - Day calendar display in header
|
|
ResourceBar.tsx - Day/time/insight display in header
|
|
```
|
|
|
|
#### Sidebar Components
|
|
```
|
|
ManaSidebar.tsx - Left sidebar container
|
|
ManaDisplay.tsx - Current mana, max mana, regen display
|
|
GatherButton.tsx - Click-to-gather button with hold functionality
|
|
ActionButtons.tsx - Meditate/Climb/Study/Convert buttons
|
|
FloorStatus.tsx - Current floor display with HP bar
|
|
```
|
|
|
|
#### Tab Content Components
|
|
```
|
|
SpireTab.tsx - Main spire/combat tab
|
|
├── CurrentFloor.tsx - Floor info, guardian, HP bar
|
|
├── ActiveSpell.tsx - Active spell details and cast progress
|
|
├── StudyProgress.tsx - Current study progress display
|
|
├── KnownSpells.tsx - Grid of learned spells
|
|
└── ActivityLog.tsx - Game event log
|
|
|
|
SpellsTab.tsx - Spell learning tab
|
|
├── SpellTier.tsx - Spells grouped by tier
|
|
└── SpellCard.tsx - Individual spell card
|
|
|
|
LabTab.tsx - Elemental mana lab tab
|
|
├── ElementalMana.tsx - Grid of elemental mana
|
|
├── ElementConversion.tsx - Convert raw to element
|
|
├── UnlockElements.tsx - Unlock new elements
|
|
└── CompositeCrafting.tsx - Craft composite elements
|
|
|
|
SkillsTab.tsx - Skill learning tab
|
|
├── SkillCategory.tsx - Skills grouped by category
|
|
└── SkillCard.tsx - Individual skill card
|
|
|
|
GrimoireTab.tsx - Prestige upgrades tab
|
|
└── PrestigeCard.tsx - Individual prestige upgrade
|
|
|
|
StatsTab.tsx - Detailed stats breakdown
|
|
├── ManaStats.tsx - Mana-related stats
|
|
├── CombatStats.tsx - Combat-related stats
|
|
├── StudyStats.tsx - Study-related stats
|
|
└── ActiveUpgrades.tsx - List of active skill upgrades
|
|
```
|
|
|
|
#### Shared Components
|
|
```
|
|
SpellCost.tsx - Formatted spell cost display
|
|
DamageBreakdown.tsx - Damage calculation breakdown
|
|
BuffIndicator.tsx - Active buff/debuff display
|
|
UpgradeDialog.tsx - Skill upgrade selection dialog
|
|
```
|
|
|
|
## Implementation Phases
|
|
|
|
### Phase 1: Extract Simple Components (Low Risk)
|
|
- [ ] Calendar.tsx
|
|
- [ ] ActivityLog.tsx
|
|
- [ ] SpellCost.tsx
|
|
- [ ] KnownSpells.tsx
|
|
|
|
### Phase 2: Extract Tab Components (Medium Risk)
|
|
- [ ] SpireTab.tsx
|
|
- [ ] SpellsTab.tsx
|
|
- [ ] LabTab.tsx
|
|
- [ ] SkillsTab.tsx
|
|
- [ ] GrimoireTab.tsx
|
|
- [ ] StatsTab.tsx
|
|
|
|
### Phase 3: Extract Sidebar Components (Medium Risk)
|
|
- [ ] ManaDisplay.tsx
|
|
- [ ] GatherButton.tsx
|
|
- [ ] ActionButtons.tsx
|
|
- [ ] FloorStatus.tsx
|
|
|
|
### Phase 4: Create Shared Hooks
|
|
- [ ] useGameState.ts - Custom hook for game state access
|
|
- [ ] useComputedStats.ts - Memoized computed stats
|
|
- [ ] useSpellCast.ts - Spell casting logic
|
|
- [ ] useStudy.ts - Skill/spell study logic
|
|
|
|
## Benefits
|
|
1. **Maintainability**: Each component has a single responsibility
|
|
2. **Performance**: React can skip re-rendering unchanged components
|
|
3. **Testability**: Individual components can be tested in isolation
|
|
4. **Collaboration**: Multiple developers can work on different components
|
|
5. **Code Reuse**: Shared components can be used across tabs
|
|
|
|
## Migration Strategy
|
|
1. Create new component file
|
|
2. Move relevant code from page.tsx
|
|
3. Pass required props or use store directly
|
|
4. Add TypeScript types
|
|
5. Test functionality
|
|
6. Remove code from page.tsx
|
|
7. Repeat for each component
|
|
|
|
## Estimated Lines of Code Reduction
|
|
- Current page.tsx: ~2000 lines
|
|
- After refactoring: ~200-300 lines (main layout only)
|
|
- Total component files: ~30-40 files averaging 50-100 lines each
|