Refactor large files into modular components

- Refactored page.tsx (613→252 lines) with GameOverScreen and LeftPanel extracted - Refactored StatsTab.tsx (584→92 lines) with section components - Refactored SkillsTab.tsx (434→54 lines) with sub-components - Created modular structure for GameContext, LootInventory, and other components - All extracted components organized into feature directories
2026-05-02 17:35:03 +02:00
parent c9ae2576f4
commit d2d28887b1
194 changed files with 16862 additions and 15729 deletions
@@ -0,0 +1,71 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Star } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { SKILLS_DEF } from '@/lib/game/constants';
+import { SKILL_EVOLUTION_PATHS } from '@/lib/game/skill-evolution';
+import type { SkillUpgradeChoice } from '@/lib/game/types';
+
+interface ActiveUpgradesSectionProps {
+  selectedUpgrades: { skillId: string; upgrade: SkillUpgradeChoice }[];
+}
+
+export function ActiveUpgradesSection({ selectedUpgrades }: ActiveUpgradesSectionProps) {
+  if (selectedUpgrades.length === 0) {
+    return (
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-amber-400 game-panel-title text-xs flex items-center gap-2">
+            <Star className="w-4 h-4" />
+            Active Skill Upgrades (0)
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-gray-500 text-sm">No skill upgrades selected yet. Level skills to 5 or 10 to choose upgrades.</div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="bg-gray-900/80 border-gray-700">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-amber-400 game-panel-title text-xs flex items-center gap-2">
+          <Star className="w-4 h-4" />
+          Active Skill Upgrades ({selectedUpgrades.length})
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+          {selectedUpgrades.map(({ skillId, upgrade }) => (
+            <div key={upgrade.id} className="p-2 rounded border border-amber-600/30 bg-amber-900/10">
+              <div className="flex items-center justify-between">
+                <span className="text-amber-300 text-sm font-semibold">{upgrade.name}</span>
+                <Badge variant="outline" className="text-xs text-gray-400">
+                  {SKILLS_DEF[skillId]?.name || skillId}
+                </Badge>
+              </div>
+              <div className="text-xs text-gray-400 mt-1">{upgrade.desc}</div>
+              {upgrade.effect.type === 'multiplier' && (
+                <div className="text-xs text-green-400 mt-1">
+                  +{Math.round((upgrade.effect.value! - 1) * 100)}% {upgrade.effect.stat}
+                </div>
+              )}
+              {upgrade.effect.type === 'bonus' && (
+                <div className="text-xs text-blue-400 mt-1">
+                  +{upgrade.effect.value} {upgrade.effect.stat}
+                </div>
+              )}
+              {upgrade.effect.type === 'special' && (
+                <div className="text-xs text-cyan-400 mt-1">
+                  ⚡ {upgrade.effect.specialDesc || 'Special effect active'}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,76 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Swords } from 'lucide-react';
+import type { GameStore } from '@/lib/game/store';
+import { fmt, fmtDec } from '@/lib/game/store';
+import { getUnifiedEffects } from '@/lib/game/effects';
+
+interface CombatStatsSectionProps {
+  store: GameStore;
+  activeSpellDef: any;
+  pactMultiplier: number;
+}
+
+export function CombatStatsSection({ store, activeSpellDef, pactMultiplier }: CombatStatsSectionProps) {
+  const upgradeEffects = getUnifiedEffects(store);
+  
+  return (
+    <Card className="bg-gray-900/80 border-gray-700">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-red-400 game-panel-title text-xs flex items-center gap-2">
+          <Swords className="w-4 h-4" />
+          Combat Stats
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Active Spell Base Damage:</span>
+              <span className="text-gray-200">{activeSpellDef?.dmg || 5}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Combat Training Bonus:</span>
+              <span className="text-red-300">+{(store.skills.combatTrain || 0) * 5}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Arcane Fury Multiplier:</span>
+              <span className="text-red-300">×{fmtDec(1 + (store.skills.arcaneFury || 0) * 0.1, 2)}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Elemental Mastery:</span>
+              <span className="text-red-300">×{fmtDec(1 + (store.skills.elementalMastery || 0) * 0.15, 2)}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Guardian Bane:</span>
+              <span className="text-red-300">×{fmtDec(1 + (store.skills.guardianBane || 0) * 0.2, 2)} (vs guardians)</span>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Critical Hit Chance:</span>
+              <span className="text-amber-300">{((store.skills.precision || 0) * 5)}%</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Critical Multiplier:</span>
+              <span className="text-amber-300">1.5x</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Spell Echo Chance:</span>
+              <span className="text-amber-300">{((store.skills.spellEcho || 0) * 10)}%</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Pact Multiplier:</span>
+              <span className="text-amber-300">×{fmtDec(pactMultiplier, 2)}</span>
+            </div>
+            <div className="flex justify-between text-sm font-semibold border-t border-gray-700 pt-2">
+              <span className="text-gray-300">Total Damage:</span>
+              <span className="text-red-400">{fmt(store.activeSpell ? activeSpellDef?.dmg * pactMultiplier : 0)}</span>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,77 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { FlaskConical } from 'lucide-react';
+import { ELEMENTS } from '@/lib/game/constants';
+import { getTierMultiplier } from '@/lib/game/skill-evolution';
+import { fmt, fmtDec } from '@/lib/game/store';
+
+interface ElementStatsSectionProps {
+  store: any;
+  elemMax: number;
+}
+
+export function ElementStatsSection({ store, elemMax }: ElementStatsSectionProps) {
+  const getElemAttunementBonus = () => {
+    const ea = store.skillTiers?.elemAttune || 1;
+    const tieredSkillId = ea > 1 ? `elemAttune_t${ea}` : 'elemAttune';
+    const level = store.skills[tieredSkillId] || store.skills.elemAttune || 0;
+    const tierMult = getTierMultiplier(tieredSkillId);
+    return level * 50 * tierMult;
+  };
+
+  return (
+    <Card className="bg-gray-900/80 border-gray-700">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-green-400 game-panel-title text-xs flex items-center gap-2">
+          <FlaskConical className="w-4 h-4" />
+          Element Stats
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Element Capacity:</span>
+              <span className="text-green-300">{elemMax}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Elem. Attunement Bonus:</span>
+              <span className="text-green-300">+{getElemAttunementBonus()}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Prestige Attunement:</span>
+              <span className="text-green-300">+{(store.prestigeUpgrades.elementalAttune || 0) * 25}</span>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Unlocked Elements:</span>
+              <span className="text-green-300">{Object.values(store.elements).filter((e: any) => e.unlocked).length} / {Object.keys(ELEMENTS).length}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Elem. Crafting Bonus:</span>
+              <span className="text-green-300">×{fmtDec(1 + (store.skills.elemCrafting || 0) * 0.25, 2)}</span>
+            </div>
+          </div>
+        </div>
+        <Separator className="bg-gray-700 my-3" />
+        <div className="text-xs text-gray-400 mb-2">Elemental Mana Pools:</div>
+        <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-2">
+          {Object.entries(store.elements)
+            .filter(([, state]: [string, any]) => state.unlocked)
+            .map(([id, state]: [string, any]) => {
+              const def = ELEMENTS[id];
+              return (
+                <div key={id} className="p-2 rounded border border-gray-700 bg-gray-800/50 text-center">
+                  <div className="text-lg">{def?.sym}</div>
+                  <div className="text-xs text-gray-400">{state.current}/{state.max}</div>
+                </div>
+              );
+            })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,65 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { RotateCcw } from 'lucide-react';
+import { fmt } from '@/lib/game/store';
+
+interface LoopStatsSectionProps {
+  store: any;
+}
+
+export function LoopStatsSection({ store }: LoopStatsSectionProps) {
+  const spellsLearned = Object.values(store.spells as Record<string, { learned: boolean }>).filter((s) => s.learned).length;
+  const totalSkillLevels = Object.values(store.skills as Record<string, number>).reduce((a: number, b: number) => a + b, 0);
+
+  return (
+    <Card className="bg-gray-900/80 border-gray-700">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-purple-400 game-panel-title text-xs flex items-center gap-2">
+          <RotateCcw className="w-4 h-4" />
+          Loop Stats
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <div className="p-3 bg-gray-800/50 rounded text-center">
+            <div className="text-2xl font-bold text-amber-400 game-mono">{store.loopCount}</div>
+            <div className="text-xs text-gray-400">Loops Completed</div>
+          </div>
+          <div className="p-3 bg-gray-800/50 rounded text-center">
+            <div className="text-2xl font-bold text-purple-400 game-mono">{fmt(store.insight)}</div>
+            <div className="text-xs text-gray-400">Current Insight</div>
+          </div>
+          <div className="p-3 bg-gray-800/50 rounded text-center">
+            <div className="text-2xl font-bold text-blue-400 game-mono">{fmt(store.totalInsight)}</div>
+            <div className="text-xs text-gray-400">Total Insight</div>
+          </div>
+          <div className="p-3 bg-gray-800/50 rounded text-center">
+            <div className="text-2xl font-bold text-green-400 game-mono">{store.maxFloorReached}</div>
+            <div className="text-xs text-gray-400">Max Floor</div>
+          </div>
+        </div>
+        <Separator className="bg-gray-700 my-3" />
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <div className="p-3 bg-gray-800/50 rounded text-center">
+            <div className="text-xl font-bold text-gray-300 game-mono">{spellsLearned}</div>
+            <div className="text-xs text-gray-400">Spells Learned</div>
+          </div>
+          <div className="p-3 bg-gray-800/50 rounded text-center">
+            <div className="text-xl font-bold text-gray-300 game-mono">{totalSkillLevels}</div>
+            <div className="text-xs text-gray-400">Total Skill Levels</div>
+          </div>
+          <div className="p-3 bg-gray-800/50 rounded text-center">
+            <div className="text-xl font-bold text-gray-300 game-mono">{fmt(store.totalManaGathered)}</div>
+            <div className="text-xs text-gray-400">Total Mana Gathered</div>
+          </div>
+          <div className="p-3 bg-gray-800/50 rounded text-center">
+            <div className="text-xl font-bold text-gray-300 game-mono">{store.memorySlots}</div>
+            <div className="text-xs text-gray-400">Memory Slots</div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,241 @@
+'use client';
+
+import { fmt, fmtDec } from '@/lib/game/store';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Droplet } from 'lucide-react';
+import type { SkillUpgradeChoice } from '@/lib/game/types';
+
+interface ManaStatsSectionProps {
+  maxMana: number;
+  baseRegen: number;
+  effectiveRegen: number;
+  clickMana: number;
+  meditationMultiplier: number;
+  upgradeEffects: any;
+  store: any;
+  elemMax: number;
+  selectedUpgrades: { skillId: string; upgrade: SkillUpgradeChoice }[];
+}
+
+export function ManaStatsSection({
+  maxMana,
+  baseRegen,
+  effectiveRegen,
+  clickMana,
+  meditationMultiplier,
+  upgradeEffects,
+  store,
+  elemMax,
+  selectedUpgrades,
+}: ManaStatsSectionProps) {
+  const getTierMultiplier = (skillId: string) => {
+    // Simplified - import from skill-evolution in real implementation
+    return 1;
+  };
+
+  return (
+    <Card className="bg-gray-900/80 border-gray-700">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-blue-400 game-panel-title text-xs flex items-center gap-2">
+          <Droplet className="w-4 h-4" />
+          Mana Stats
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Base Max Mana:</span>
+              <span className="text-gray-200">100</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Mana Well Bonus:</span>
+              <span className="text-blue-300">
+                {(() => {
+                  const mw = store.skillTiers?.manaWell || 1;
+                  const tieredSkillId = mw > 1 ? `manaWell_t${mw}` : 'manaWell';
+                  const level = store.skills[tieredSkillId] || store.skills.manaWell || 0;
+                  const tierMult = getTierMultiplier(tieredSkillId);
+                  return `+${fmt(level * 100 * tierMult)} (${level} lvl × 100 × ${tierMult}x tier)`;
+                })()}
+              </span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Prestige Mana Well:</span>
+              <span className="text-blue-300">+{fmt((store.prestigeUpgrades.manaWell || 0) * 500)}</span>
+            </div>
+            {upgradeEffects.maxManaBonus > 0 && (
+              <div className="flex justify-between text-sm">
+                <span className="text-amber-400">Upgrade Mana Bonus:</span>
+                <span className="text-amber-300">+{fmt(upgradeEffects.maxManaBonus)}</span>
+              </div>
+            )}
+            {upgradeEffects.maxManaMultiplier > 1 && (
+              <div className="flex justify-between text-sm">
+                <span className="text-amber-400">Upgrade Mana Multiplier:</span>
+                <span className="text-amber-300">×{fmtDec(upgradeEffects.maxManaMultiplier, 2)}</span>
+              </div>
+            )}
+            <div className="flex justify-between text-sm font-semibold border-t border-gray-700 pt-2">
+              <span className="text-gray-300">Total Max Mana:</span>
+              <span className="text-blue-400">{fmt(maxMana)}</span>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Base Regen:</span>
+              <span className="text-gray-200">2/hr</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Mana Flow Bonus:</span>
+              <span className="text-blue-300">
+                {(() => {
+                  const mf = store.skillTiers?.manaFlow || 1;
+                  const tieredSkillId = mf > 1 ? `manaFlow_t${mf}` : 'manaFlow';
+                  const level = store.skills[tieredSkillId] || store.skills.manaFlow || 0;
+                  const tierMult = getTierMultiplier(tieredSkillId);
+                  return `+${fmtDec(level * 1 * tierMult)}/hr (${level} lvl × 1 × ${tierMult}x tier)`;
+                })()}
+              </span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Mana Spring Bonus:</span>
+              <span className="text-blue-300">+{(store.skills.manaSpring || 0) * 2}/hr</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Prestige Mana Flow:</span>
+              <span className="text-blue-300">+{fmtDec((store.prestigeUpgrades.manaFlow || 0) * 0.5)}/hr</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Temporal Echo:</span>
+              <span className="text-blue-300">×{fmtDec(1 + (store.prestigeUpgrades.temporalEcho || 0) * 0.1, 2)}</span>
+            </div>
+            <div className="flex justify-between text-sm font-semibold border-t border-gray-700 pt-2">
+              <span className="text-gray-300">Base Regen:</span>
+              <span className="text-blue-400">{fmtDec(baseRegen, 2)}/hr</span>
+            </div>
+            {upgradeEffects.regenBonus > 0 && (
+              <div className="flex justify-between text-sm">
+                <span className="text-amber-400">Upgrade Regen Bonus:</span>
+                <span className="text-amber-300">+{fmtDec(upgradeEffects.regenBonus, 2)}/hr</span>
+              </div>
+            )}
+            {upgradeEffects.permanentRegenBonus > 0 && (
+              <div className="flex justify-between text-sm">
+                <span className="text-amber-400">Permanent Regen Bonus:</span>
+                <span className="text-amber-300">+{fmtDec(upgradeEffects.permanentRegenBonus, 2)}/hr</span>
+              </div>
+            )}
+            {upgradeEffects.regenMultiplier > 1 && (
+              <div className="flex justify-between text-sm">
+                <span className="text-amber-400">Upgrade Regen Multiplier:</span>
+                <span className="text-amber-300">×{fmtDec(upgradeEffects.regenMultiplier, 2)}</span>
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+          <div className="space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Click Mana Value:</span>
+              <span className="text-purple-300">+{clickMana}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Mana Tap Bonus:</span>
+              <span className="text-purple-300">+{store.skills.manaTap || 0}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Mana Surge Bonus:</span>
+              <span className="text-purple-300">+{(store.skills.manaSurge || 0) * 3}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Mana Overflow:</span>
+              <span className="text-purple-300">×{fmtDec(1 + (store.skills.manaOverflow || 0) * 0.25, 2)}</span>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Meditation Multiplier:</span>
+              <span className={`font-semibold ${meditationMultiplier > 1.5 ? 'text-purple-400' : 'text-gray-300'}`}>
+                {fmtDec(meditationMultiplier, 2)}x
+              </span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Incursion Strength:</span>
+              <span className="text-red-400">{Math.round(upgradeEffects.incursionStrength * 100)}%</span>
+            </div>
+            <div className="flex justify-between text-sm font-semibold border-t border-gray-700 pt-2">
+              <span className="text-gray-300">Effective Regen:</span>
+              <span className="text-green-400 font-semibold">{fmtDec(effectiveRegen, 2)}/hr</span>
+            </div>
+          </div>
+        </div>
+        {/* Special Effects */}
+        {(upgradeEffects.hasSteadyStream || upgradeEffects.hasManaTorrent || 
+          upgradeEffects.hasDesperateWells || upgradeEffects.manaCascadeBonus > 0 ||
+          upgradeEffects.manaWaterfallBonus > 0) && (
+          <>
+            <div className="mt-3 mb-2"><span className="text-xs text-amber-400 game-panel-title">Special Effects</span></div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+              {upgradeEffects.hasSteadyStream && (
+                <div className="flex justify-between text-xs bg-gray-800/50 rounded px-2 py-1">
+                  <span className="text-gray-300">Steady Stream:</span>
+                  <span className="text-green-400">Immune to incursion</span>
+                </div>
+              )}
+              {upgradeEffects.manaCascadeBonus > 0 && (
+                <div className="flex justify-between text-xs bg-gray-800/50 rounded px-2 py-1">
+                  <span className="text-gray-300">Mana Cascade:</span>
+                  <span className="text-cyan-400">+{fmtDec(upgradeEffects.manaCascadeBonus, 2)}/hr</span>
+                </div>
+              )}
+              {upgradeEffects.manaWaterfallBonus > 0 && (
+                <div className="flex justify-between text-xs bg-gray-800/50 rounded px-2 py-1">
+                  <span className="text-gray-300">Mana Waterfall:</span>
+                  <span className="text-cyan-400">+{fmtDec(upgradeEffects.manaWaterfallBonus, 2)}/hr</span>
+                </div>
+              )}
+              {upgradeEffects.hasFlowSurge && (
+                <div className="flex justify-between text-xs bg-gray-800/50 rounded px-2 py-1">
+                  <span className="text-gray-300">Flow Surge:</span>
+                  <span className="text-cyan-400">Clicks +100% regen for 1hr</span>
+                </div>
+              )}
+              {upgradeEffects.hasManaOverflow && (
+                <div className="flex justify-between text-xs bg-gray-800/50 rounded px-2 py-1">
+                  <span className="text-gray-300">Mana Overflow:</span>
+                  <span className="text-cyan-400">Raw can exceed max by 20%</span>
+                </div>
+              )}
+              {upgradeEffects.hasEternalFlow && (
+                <div className="flex justify-between text-xs bg-gray-800/50 rounded px-2 py-1">
+                  <span className="text-gray-300">Eternal Flow:</span>
+                  <span className="text-green-400">Regen immune to ALL penalties</span>
+                </div>
+              )}
+              {upgradeEffects.hasManaTorrent && upgradeEffects.rawMana > maxMana * 0.75 && (
+                <div className="flex justify-between text-xs bg-gray-800/50 rounded px-2 py-1">
+                  <span className="text-gray-300">Mana Torrent:</span>
+                  <span className="text-cyan-400">+50% regen (high mana)</span>
+                </div>
+              )}
+              {upgradeEffects.hasDesperateWells && upgradeEffects.rawMana < maxMana * 0.25 && (
+                <div className="flex justify-between text-xs bg-gray-800/50 rounded px-2 py-1">
+                  <span className="text-gray-300">Desperate Wells:</span>
+                  <span className="text-cyan-400">+50% regen (low mana)</span>
+                </div>
+              )}
+            </div>
+          </>
+        )}
+        {/* Element Max */}
+        <div className="mt-3 pt-3 border-t border-gray-700">
+          <div className="flex justify-between text-sm">
+            <span className="text-gray-400">Element Capacity:</span>
+            <span className="text-green-300">{elemMax}</span>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,74 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Trophy } from 'lucide-react';
+import { fmtDec } from '@/lib/game/store';
+import { ELEMENTS } from '@/lib/game/constants';
+
+interface PactStatusSectionProps {
+  store: any;
+  pactMultiplier: number;
+  pactInsightMultiplier: number;
+}
+
+export function PactStatusSection({ store, pactMultiplier, pactInsightMultiplier }: PactStatusSectionProps) {
+  const pactInterferenceMitigation = store.pactInterferenceMitigation || 0;
+  
+  return (
+    <Card className="bg-gray-900/80 border-gray-700">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-amber-400 game-panel-title text-xs flex items-center gap-2">
+          <Trophy className="w-4 h-4" />
+          Pact Status
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Pact Slots:</span>
+              <span className="text-amber-300">{store.signedPacts.length} / {1 + (store.prestigeUpgrades.pactCapacity || 0)}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Damage Multiplier:</span>
+              <span className="text-amber-300">×{fmtDec(pactMultiplier, 2)}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Insight Multiplier:</span>
+              <span className="text-purple-300">×{fmtDec(pactInsightMultiplier, 2)}</span>
+            </div>
+            {store.signedPacts.length > 1 && (
+              <>
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-400">Interference Mitigation:</span>
+                  <span className="text-green-300">{Math.min(pactInterferenceMitigation, 5) * 10}%</span>
+                </div>
+                {pactInterferenceMitigation >= 5 && (
+                  <div className="flex justify-between text-sm">
+                    <span className="text-cyan-400">Synergy Bonus:</span>
+                    <span className="text-cyan-300">+{(pactInterferenceMitigation - 5) * 10}%</span>
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+          <div className="space-y-2">
+            <div className="text-sm text-gray-400 mb-2">Unlocked Mana Types:</div>
+            <div className="flex flex-wrap gap-1">
+              {Object.keys(store.elements).map((id) => {
+                const state = store.elements[id];
+                if (!state.unlocked) return null;
+                const elem = ELEMENTS[id];
+                return (
+                  <span key={id} className="px-2 py-1 text-xs rounded border" style={{ borderColor: elem?.color, color: elem?.color }}>
+                    {elem?.sym} {elem?.name}
+                  </span>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,54 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { BookOpen } from 'lucide-react';
+import { fmtDec } from '@/lib/game/store';
+
+interface StudyStatsSectionProps {
+  studySpeedMult: number;
+  studyCostMult: number;
+  store: any;
+}
+
+export function StudyStatsSection({ studySpeedMult, studyCostMult, store }: StudyStatsSectionProps) {
+  return (
+    <Card className="bg-gray-900/80 border-gray-700">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-purple-400 game-panel-title text-xs flex items-center gap-2">
+          <BookOpen className="w-4 h-4" />
+          Study Stats
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Study Speed:</span>
+              <span className="text-purple-300">×{fmtDec(studySpeedMult, 2)}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Quick Learner Bonus:</span>
+              <span className="text-purple-300">+{((store.skills.quickLearner || 0) * 10)}%</span>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Study Cost:</span>
+              <span className="text-purple-300">{Math.round(studyCostMult * 100)}%</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Focused Mind Bonus:</span>
+              <span className="text-purple-300">-{((store.skills.focusedMind || 0) * 5)}%</span>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Progress Retention:</span>
+              <span className="text-purple-300">{Math.round((1 + (store.skills.knowledgeRetention || 0) * 0.2) * 100)}%</span>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}