Initial commit

REFACTORING_PLAN.md

@@ -0,0 +1,118 @@
+# 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