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,57 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import type { GameStore } from '@/lib/game/store';
+
+interface GameOverScreenProps {
+  store: GameStore;
+}
+
+export function GameOverScreen({ store }: GameOverScreenProps) {
+  return (
+    <div className="fixed inset-0 game-overlay flex items-center justify-center z-50">
+      <Card className="bg-gray-900 border-gray-600 max-w-md w-full mx-4 shadow-2xl">
+        <CardHeader>
+          <CardTitle className={`text-3xl text-center game-title ${store.victory ? 'text-amber-400' : 'text-red-400'}`}>
+            {store.victory ? 'VICTORY!' : 'LOOP ENDS'}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-center text-gray-400">
+            {store.victory
+              ? 'The Awakened One falls! Your power echoes through eternity.'
+              : 'The time loop resets... but you remember.'}
+          </p>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div className="p-3 bg-gray-800 rounded">
+              <div className="text-xl font-bold text-amber-400 game-mono">{store.fmt(store.loopInsight)}</div>
+              <div className="text-xs text-gray-400">Insight Gained</div>
+            </div>
+            <div className="p-3 bg-gray-800 rounded">
+              <div className="text-xl font-bold text-blue-400 game-mono">{store.maxFloorReached}</div>
+              <div className="text-xs text-gray-400">Best Floor</div>
+            </div>
+            <div className="p-3 bg-gray-800 rounded">
+              <div className="text-xl font-bold text-purple-400 game-mono">{store.signedPacts.length}</div>
+              <div className="text-xs text-gray-400">Pacts Signed</div>
+            </div>
+            <div className="p-3 bg-gray-800 rounded">
+              <div className="text-xl font-bold text-green-400 game-mono">{store.loopCount + 1}</div>
+              <div className="text-xs text-gray-400">Total Loops</div>
+            </div>
+          </div>
+
+          <Button
+            className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
+            size="lg"
+            onClick={() => store.startNewLoop()}
+          >
+            Begin New Loop
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
@@ -0,0 +1,107 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Mountain } from 'lucide-react';
+import { ManaDisplay } from '@/components/game';
+import { ActionButtons } from '@/components/game';
+import { CalendarDisplay } from '@/components/game';
+import { DebugName } from '@/lib/game/debug-context';
+import type { GameStore } from '@/lib/game/store';
+import { computeMaxMana, computeClickMana, getMeditationBonus, getUnifiedEffects } from '@/lib/game/store';
+import { useGameLoop } from '@/lib/game/stores/gameHooks';
+
+interface LeftPanelProps {
+  store: GameStore;
+  effectiveRegen: number;
+  incursionStrength: number;
+}
+
+export function LeftPanel({ store, effectiveRegen, incursionStrength }: LeftPanelProps) {
+  const [isGathering, setIsGathering] = useState(false);
+
+  const handleGatherStart = () => {
+    setIsGathering(true);
+    store.gatherMana();
+  };
+
+  const handleGatherEnd = () => {
+    setIsGathering(false);
+  };
+
+  useEffect(() => {
+    if (!isGathering) return;
+
+    let lastGatherTime = 0;
+    const minGatherInterval = 100;
+    let animationFrameId: number;
+
+    const gatherLoop = (timestamp: number) => {
+      if (timestamp - lastGatherTime >= minGatherInterval) {
+        store.gatherMana();
+        lastGatherTime = timestamp;
+      }
+      animationFrameId = requestAnimationFrame(gatherLoop);
+    };
+
+    animationFrameId = requestAnimationFrame(gatherLoop);
+    return () => cancelAnimationFrame(animationFrameId);
+  }, [isGathering, store]);
+
+  const maxMana = computeMaxMana(store, getUnifiedEffects(store));
+  const clickMana = computeClickMana(store);
+  const meditationMultiplier = getMeditationBonus(store.meditateTicks, store.skills, getUnifiedEffects(store).meditationEfficiency);
+
+  return (
+    <div className="md:w-80 space-y-4 flex-shrink-0">
+      <DebugName name="ManaDisplay">
+        <ManaDisplay
+          rawMana={store.rawMana}
+          maxMana={maxMana}
+          effectiveRegen={effectiveRegen}
+          meditationMultiplier={meditationMultiplier}
+          clickMana={clickMana}
+          isGathering={isGathering}
+          onGatherStart={handleGatherStart}
+          onGatherEnd={handleGatherEnd}
+          elements={store.elements}
+        />
+      </DebugName>
+
+      {!store.spireMode && (
+        <DebugName name="ClimbSpireButton">
+          <Button
+            className="w-full bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-700"
+            size="lg"
+            onClick={() => store.enterSpireMode()}
+          >
+            <Mountain className="w-5 h-5 mr-2" />
+            Climb the Spire
+          </Button>
+        </DebugName>
+      )}
+
+      {!store.spireMode && (
+        <DebugName name="ActionButtons">
+          <ActionButtons
+            currentAction={store.currentAction}
+            currentStudyTarget={store.currentStudyTarget}
+            designProgress={store.designProgress}
+            designProgress2={store.designProgress2}
+            preparationProgress={store.preparationProgress}
+            applicationProgress={store.applicationProgress}
+            equipmentCraftingProgress={store.equipmentCraftingProgress}
+          />
+        </DebugName>
+      )}
+
+      <DebugName name="CalendarDisplay">
+        <CalendarDisplay
+          day={store.day}
+          hour={store.hour}
+          incursionStrength={incursionStrength}
+        />
+      </DebugName>
+    </div>
+  );
+}
@@ -1,25 +1,27 @@
 'use client';

-import { useEffect, useState, lazy, Suspense } from 'react';
+import { useEffect, useState } from 'react';
 import type { JSX } from 'react';
-import { useGameStore, useGameLoop, fmt, getFloorElement, computeMaxMana, computeRegen, computeClickMana, getMeditationBonus, getIncursionStrength, canAffordSpellCost } from '@/lib/game/store';
-import { ActivityLogEntry } from '@/lib/game/types';
-import { getActiveEquipmentSpells, getTotalDPS } from '@/lib/game/computed-stats';
-
+import { useGameStore, fmt, computeMaxMana, computeRegen, computeClickMana, getMeditationBonus, getIncursionStrength, canAffordSpellCost, getUnifiedEffects } from '@/lib/game/store';
+import { useGameLoop } from '@/lib/game/stores/gameHooks';
 import { ELEMENTS, GUARDIANS, SPELLS_DEF, PRESTIGE_DEF, getStudySpeedMultiplier, getStudyCostMultiplier } from '@/lib/game/constants';
-
-import { getUnifiedEffects, hasSpecial, SPECIAL_EFFECTS } from '@/lib/game/effects';
+import { getActiveEquipmentSpells, getTotalDPS } from '@/lib/game/computed-stats';
+import { TimeDisplay } from '@/components/game';
+import { hasSpecial, SPECIAL_EFFECTS } from '@/lib/game/effects';

 import { Button } from '@/components/ui/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { RotateCcw, Mountain, ChevronDown } from 'lucide-react';
+import { RotateCcw, Mountain } from 'lucide-react';
 import { TooltipProvider } from '@/components/ui/tooltip';
 import { DebugName } from '@/lib/game/debug-context';
-// Non-tab component imports
-import { ActionButtons, CalendarDisplay, ManaDisplay, TimeDisplay } from '@/components/game';
+
+// Import extracted components
+import { GameOverScreen } from './components/GameOverScreen';
+import { LeftPanel } from './components/LeftPanel';
+
 // Lazy load tab components
 const SpireTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.SpireTab })));
 const SkillsTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.SkillsTab })));
@@ -34,381 +36,57 @@ const AchievementsTab = lazy(() => import('@/components/game/tabs').then(module
 const GolemancyTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.GolemancyTab })));
 const CraftingTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.CraftingTab })));

-// Loading fallback component
 const TabLoadingFallback = () => <div className="p-4 text-center text-gray-400">Loading...</div>;

 // ============================================================================
-// Extracted Components
+// Grimoire Tab Component
 // ============================================================================

-interface GameOverScreenProps {
-  store: any;
-}
-
-function GameOverScreen({ store }: GameOverScreenProps) {
-  return (
-    <div className="fixed inset-0 game-overlay flex items-center justify-center z-50">
-      <Card className="bg-gray-900 border-gray-600 max-w-md w-full mx-4 shadow-2xl">
-        <CardHeader>
-          <CardTitle className={`text-3xl text-center game-title ${store.victory ? 'text-amber-400' : 'text-red-400'}`}>
-            {store.victory ? 'VICTORY!' : 'LOOP ENDS'}
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <p className="text-center text-gray-400">
-            {store.victory
-              ? 'The Awakened One falls! Your power echoes through eternity.'
-              : 'The time loop resets... but you remember.'}
-          </p>
-
-          <div className="grid grid-cols-2 gap-3">
-            <div className="p-3 bg-gray-800 rounded">
-              <div className="text-xl font-bold text-amber-400 game-mono">{fmt(store.loopInsight)}</div>
-              <div className="text-xs text-gray-400">Insight Gained</div>
-            </div>
-            <div className="p-3 bg-gray-800 rounded">
-              <div className="text-xl font-bold text-blue-400 game-mono">{store.maxFloorReached}</div>
-              <div className="text-xs text-gray-400">Best Floor</div>
-            </div>
-            <div className="p-3 bg-gray-800 rounded">
-              <div className="text-xl font-bold text-purple-400 game-mono">{store.signedPacts.length}</div>
-              <div className="text-xs text-gray-400">Pacts Signed</div>
-            </div>
-            <div className="p-3 bg-gray-800 rounded">
-              <div className="text-xl font-bold text-green-400 game-mono">{store.loopCount + 1}</div>
-              <div className="text-xs text-gray-400">Total Loops</div>
-            </div>
-          </div>
-
-          <Button
-            className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
-            size="lg"
-            onClick={() => store.startNewLoop()}
-          >
-            Begin New Loop
-          </Button>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
-
-interface LeftPanelProps {
-  store: any;
-  effectiveRegen: number;
-  incursionStrength: number;
-}
-
-function LeftPanel({ store, effectiveRegen, incursionStrength }: LeftPanelProps) {
-  const [isGathering, setIsGathering] = useState(false);
-
-  const handleGatherStart = () => {
-    setIsGathering(true);
-    store.gatherMana();
-  };
-
-  const handleGatherEnd = () => {
-    setIsGathering(false);
-  };
-
-  useEffect(() => {
-    if (!isGathering) return;
-
-    let lastGatherTime = 0;
-    const minGatherInterval = 100;
-    let animationFrameId: number;
-
-    const gatherLoop = (timestamp: number) => {
-      if (timestamp - lastGatherTime >= minGatherInterval) {
-        store.gatherMana();
-        lastGatherTime = timestamp;
-      }
-      animationFrameId = requestAnimationFrame(gatherLoop);
-    };
-
-    animationFrameId = requestAnimationFrame(gatherLoop);
-    return () => cancelAnimationFrame(animationFrameId);
-  }, [isGathering, store]);
-
-  const maxMana = computeMaxMana(store, getUnifiedEffects(store));
-  const clickMana = computeClickMana(store);
-  const meditationMultiplier = getMeditationBonus(store.meditateTicks, store.skills, getUnifiedEffects(store).meditationEfficiency);
+function GrimoireTab() {
+  const grimoireSpells = Object.values(SPELLS_DEF).filter((s: any) => s.grimoire);
+  const availablePages = Math.ceil(grimoireSpells.length / 12);

  return (
-    <div className="md:w-80 space-y-4 flex-shrink-0">
-      <DebugName name="ManaDisplay">
-        <ManaDisplay
-          rawMana={store.rawMana}
-          maxMana={maxMana}
-          effectiveRegen={effectiveRegen}
-          meditationMultiplier={meditationMultiplier}
-          clickMana={clickMana}
-          isGathering={isGathering}
-          onGatherStart={handleGatherStart}
-          onGatherEnd={handleGatherEnd}
-          elements={store.elements}
-        />
-      </DebugName>
-
-      {!store.spireMode && (
-        <DebugName name="ClimbSpireButton">
-          <Button
-            className="w-full bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-700"
-            size="lg"
-            onClick={() => store.enterSpireMode()}
-          >
-            <Mountain className="w-5 h-5 mr-2" />
-            Climb the Spire
-          </Button>
-        </DebugName>
-      )}
-
-      {!store.spireMode && (
-        <DebugName name="ActionButtons">
-          <ActionButtons
-            currentAction={store.currentAction}
-            currentStudyTarget={store.currentStudyTarget}
-            designProgress={store.designProgress}
-            designProgress2={store.designProgress2}
-            preparationProgress={store.preparationProgress}
-            applicationProgress={store.applicationProgress}
-            equipmentCraftingProgress={store.equipmentCraftingProgress}
-          />
-        </DebugName>
-      )}
-
-      <DebugName name="CalendarDisplay">
-        <CalendarDisplay
-          day={store.day}
-          hour={store.hour}
-          incursionStrength={incursionStrength}
-        />
-      </DebugName>
-    </div>
-  );
-}
-
-interface MainTabsProps {
-  store: any;
-  upgradeEffects: any;
-  maxMana: number;
-  baseRegen: number;
-  clickMana: number;
-  meditationMultiplier: number;
-  effectiveRegen: number;
-  incursionStrength: number;
-  manaCascadeBonus: number;
-  studySpeedMult: number;
-  studyCostMult: number;
-  manaWaterfallBonus: number;
-  hasManaWaterfall: boolean;
-  hasFlowSurge: boolean;
-  hasManaOverflow: boolean;
-  hasEternalFlow: boolean;
-}
-
-function MainTabs({
-  store,
-  upgradeEffects,
-  maxMana,
-  baseRegen,
-  clickMana,
-  meditationMultiplier,
-  effectiveRegen,
-  incursionStrength,
-  manaCascadeBonus,
-  studySpeedMult,
-  studyCostMult,
-  manaWaterfallBonus,
-  hasManaWaterfall,
-  hasFlowSurge,
-  hasManaOverflow,
-  hasEternalFlow,
-}: MainTabsProps) {
-  const [activeTab, setActiveTab] = useState('spire');
-
-  const renderGrimoireTab = (): JSX.Element => {
-    const grimoireSpells = Object.values(SPELLS_DEF).filter((s: any) => s.grimoire);
-    const availablePages = Math.ceil(grimoireSpells.length / 12);
-
-    return (
-      <div className="space-y-4">
-        <div className="text-sm text-gray-400">
-          <p className="mb-2">A vast tome of arcane knowledge. Study carefully — each spell costs insight to transcribe into your repertoire.</p>
-          <p>Available pages: {availablePages}. Spells in grimoire: {grimoireSpells.length}.</p>
-        </div>
-
-        <ScrollArea className="h-[600px] rounded border border-gray-700 p-4">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            {grimoireSpells.map((spell: any) => (
-              <div
-                key={spell.id}
-                className="p-4 bg-gray-800/50 rounded border border-gray-600 hover:border-gray-500 transition-colors"
-              >
-                <div className="flex items-start justify-between mb-2">
-                  <span className="font-bold text-gray-100">{spell.name}</span>
-                  <Badge variant="outline" className="border-gray-600">
-                    {spell.element}
-                  </Badge>
-                </div>
-                <p className="text-sm text-gray-400 mb-3">{spell.desc}</p>
-                <div className="text-xs text-gray-500 space-y-1">
-                  <div>Cost: {(spell.cost as any[]).map((c: any) => `${c.amount} ${c.type}`).join(', ')}</div>
-                  <div>Power: {spell.power}</div>
-                  {spell.effect && <div>Effect: {spell.effect}</div>}
-                </div>
-              </div>
-            ))}
-          </div>
-        </ScrollArea>
+    <div className="space-y-4">
+      <div className="text-sm text-gray-400">
+        <p className="mb-2">A vast tome of arcane knowledge. Study carefully — each spell costs insight to transcribe into your repertoire.</p>
+        <p>Available pages: {availablePages}. Spells in grimoire: {grimoireSpells.length}.</p>
      </div>
-    );
-  };

-  return (
-    <div className="flex-1 min-w-0">
-      <Tabs value={activeTab} onValueChange={setActiveTab}>
-        <TabsList className="flex flex-wrap gap-1 w-full mb-4 h-auto">
-          <TabsTrigger value="spire" className="text-xs px-2 py-1">⚔️ Spire</TabsTrigger>
-          <TabsTrigger value="attunements" className="text-xs px-2 py-1">✨ Attune</TabsTrigger>
-          <TabsTrigger value="golemancy" className="text-xs px-2 py-1">🗿 Golems</TabsTrigger>
-          <TabsTrigger value="skills" className="text-xs px-2 py-1">📚 Skills</TabsTrigger>
-          <TabsTrigger value="spells" className="text-xs px-2 py-1">🔮 Spells</TabsTrigger>
-          <TabsTrigger value="equipment" className="text-xs px-2 py-1">🛡️ Gear</TabsTrigger>
-          <TabsTrigger value="crafting" className="text-xs px-2 py-1">🔧 Craft</TabsTrigger>
-          <TabsTrigger value="loot" className="text-xs px-2 py-1">💎 Loot</TabsTrigger>
-          <TabsTrigger value="achievements" className="text-xs px-2 py-1">🏆 Achieve</TabsTrigger>
-          <TabsTrigger value="lab" className="text-xs px-2 py-1">🔬 Lab</TabsTrigger>
-          <TabsTrigger value="stats" className="text-xs px-2 py-1">📊 Stats</TabsTrigger>
-          <TabsTrigger value="debug" className="text-xs px-2 py-1">🔧 Debug</TabsTrigger>
-          <TabsTrigger value="grimoire" className="text-xs px-2 py-1">📖 Grimoire</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="spire">
-          <DebugName name="SpireTab">
-            <Suspense fallback={<TabLoadingFallback />}>
-              <SpireTab store={store} />
-            </Suspense>
-          </DebugName>
-        </TabsContent>
-
-        <TabsContent value="attunements">
-          <DebugName name="AttunementsTab">
-            <Suspense fallback={<TabLoadingFallback />}>
-              <AttunementsTab store={store} />
-            </Suspense>
-          </DebugName>
-        </TabsContent>
-
-        <TabsContent value="golemancy">
-          <DebugName name="GolemancyTab">
-            <Suspense fallback={<TabLoadingFallback />}>
-              <GolemancyTab store={store} />
-            </Suspense>
-          </DebugName>
-        </TabsContent>
-
-        <TabsContent value="skills">
-          <DebugName name="SkillsTab">
-            <Suspense fallback={<TabLoadingFallback />}>
-              <SkillsTab store={store} />
-            </Suspense>
-          </DebugName>
-        </TabsContent>
-
-        <TabsContent value="spells">
-          <DebugName name="SpellsTab">
-            <Suspense fallback={<TabLoadingFallback />}>
-              <SpellsTab store={store} />
-            </Suspense>
-          </DebugName>
-        </TabsContent>
-
-        <TabsContent value="equipment">
-          <DebugName name="EquipmentTab">
-            <Suspense fallback={<TabLoadingFallback />}>
-              <EquipmentTab store={store} />
-            </Suspense>
-          </DebugName>
-        </TabsContent>
-
-        <TabsContent value="crafting">
-          <DebugName name="CraftingTab">
-            <Suspense fallback={<TabLoadingFallback />}>
-              <CraftingTab store={store} />
-            </Suspense>
-          </DebugName>
-        </TabsContent>
-
-        <TabsContent value="loot">
-          <DebugName name="LootTab">
-            <Suspense fallback={<TabLoadingFallback />}>
-              <LootTab store={store} />
-            </Suspense>
-          </DebugName>
-        </TabsContent>
-
-        <TabsContent value="achievements">
-          <DebugName name="AchievementsTab">
-            <Suspense fallback={<TabLoadingFallback />}>
-              <AchievementsTab store={store} />
-            </Suspense>
-          </DebugName>
-        </TabsContent>
-
-        <TabsContent value="lab">
-          <DebugName name="LabTab">
-            <Suspense fallback={<TabLoadingFallback />}>
-              <LabTab store={store} />
-            </Suspense>
-          </DebugName>
-        </TabsContent>
-
-        <TabsContent value="stats">
-          <DebugName name="StatsTab">
-            <Suspense fallback={<TabLoadingFallback />}>
-              <StatsTab
-                store={store}
-                upgradeEffects={upgradeEffects}
-                maxMana={maxMana}
-                baseRegen={baseRegen}
-                clickMana={clickMana}
-                meditationMultiplier={meditationMultiplier}
-                effectiveRegen={effectiveRegen}
-                incursionStrength={incursionStrength}
-                manaCascadeBonus={manaCascadeBonus}
-                manaWaterfallBonus={manaWaterfallBonus}
-                hasManaWaterfall={hasManaWaterfall}
-                hasFlowSurge={hasFlowSurge}
-                hasManaOverflow={hasManaOverflow}
-                hasEternalFlow={hasEternalFlow}
-                studySpeedMult={studySpeedMult}
-                studyCostMult={studyCostMult}
-              />
-            </Suspense>
-          </DebugName>
-        </TabsContent>
-
-        <TabsContent value="grimoire">
-          <DebugName name="GrimoireTab">
-            {renderGrimoireTab()}
-          </DebugName>
-        </TabsContent>
-
-        <TabsContent value="debug">
-          <DebugName name="DebugTab">
-            <Suspense fallback={<TabLoadingFallback />}>
-              <DebugTab store={store} />
-            </Suspense>
-          </DebugName>
-        </TabsContent>
-      </Tabs>
+      <ScrollArea className="h-[600px] rounded border border-gray-700 p-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {grimoireSpells.map((spell: any) => (
+            <div
+              key={spell.id}
+              className="p-4 bg-gray-800/50 rounded border border-gray-600 hover:border-gray-500 transition-colors"
+            >
+              <div className="flex items-start justify-between mb-2">
+                <span className="font-bold text-gray-100">{spell.name}</span>
+                <Badge variant="outline" className="border-gray-600">
+                  {spell.element}
+                </Badge>
+              </div>
+              <p className="text-sm text-gray-400 mb-3">{spell.desc}</p>
+              <div className="text-xs text-gray-500 space-y-1">
+                <div>Cost: {(spell.cost as any[]).map((c: any) => `${c.amount} ${c.type}`).join(', ')}</div>
+                <div>Power: {spell.power}</div>
+                {spell.effect && <div>Effect: {spell.effect}</div>}
+              </div>
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
    </div>
  );
 }

+// ============================================================================
+// Main Game Component
+// ============================================================================
+
 export default function ManaLoopGame() {
  const [selectedManaType, setSelectedManaType] = useState<string>('');
+  const [activeTab, setActiveTab] = useState('spire');

  // Game store
  const store: any = useGameStore();
@@ -417,23 +95,12 @@ export default function ManaLoopGame() {
  // Computed effects from upgrades and equipment
  const upgradeEffects = getUnifiedEffects(store);

-  // Get unlocked elements for mana type selector
-  Object.entries(ELEMENTS)
-    .filter(([id]) => store.elements[id]?.unlocked)
-    .map(([id, elem]) => ({ id, name: elem.name, sym: elem.sym, color: elem.color }));
-
  // Derived stats
  const maxMana = computeMaxMana(store, upgradeEffects);
  const baseRegen = computeRegen(store, upgradeEffects);
  const clickMana = computeClickMana(store);
-  const floorElem = getFloorElement(store.currentFloor);
-  const floorElemDef = ELEMENTS[floorElem];
-  const isGuardianFloor = !!GUARDIANS[store.currentFloor];
-  const currentGuardian = GUARDIANS[store.currentFloor];
  const meditationMultiplier = getMeditationBonus(store.meditateTicks, store.skills, upgradeEffects.meditationEfficiency);
  const incursionStrength = getIncursionStrength(store.day, store.hour);
-  const studySpeedMult = getStudySpeedMultiplier(store.skills);
-  const studyCostMult = getStudyCostMultiplier(store.skills);

  // Effective regen with incursion penalty
  const effectiveRegenWithSpecials = baseRegen * (1 - incursionStrength);
@@ -448,12 +115,6 @@ export default function ManaLoopGame() {
    ? Math.floor(maxMana / 100) * 0.25
    : 0;

-  // Special effects flags for mana features
-  const hasManaWaterfall = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.MANA_WATERFALL);
-  const hasFlowSurge = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.FLOW_SURGE);
-  const hasManaOverflow = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.MANA_OVERFLOW);
-  const hasEternalFlow = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.ETERNAL_FLOW);
-
  // Effective regen
  const effectiveRegen = (effectiveRegenWithSpecials + manaCascadeBonus + manaWaterfallBonus) * meditationMultiplier;

@@ -461,14 +122,7 @@ export default function ManaLoopGame() {
  const activeEquipmentSpells = getActiveEquipmentSpells(store.equippedInstances, store.equipmentInstances);

  // Compute total DPS
-  const totalDPS = getTotalDPS(store, upgradeEffects as any, floorElem);
-
-  // Check if spell can be cast
-  const canCastSpell = (spellId: string): boolean => {
-    const spell = SPELLS_DEF[spellId];
-    if (!spell) return false;
-    return canAffordSpellCost(spell.cost, store.rawMana, store.elements);
-  };
+  const totalDPS = getTotalDPS(store, upgradeEffects as any);

  // Game Over Screen
  if (store.gameOver) {
@@ -498,113 +152,101 @@ export default function ManaLoopGame() {
        <main className="flex-1 flex flex-col md:flex-row gap-4 p-4">
          <LeftPanel store={store} effectiveRegen={effectiveRegen} incursionStrength={incursionStrength} />

-          {!store.spireMode ? (
-            <MainTabs
-              store={store}
-              upgradeEffects={upgradeEffects}
-              maxMana={maxMana}
-              baseRegen={baseRegen}
-              clickMana={clickMana}
-              meditationMultiplier={meditationMultiplier}
-              effectiveRegen={effectiveRegen}
-              incursionStrength={incursionStrength}
-              manaCascadeBonus={manaCascadeBonus}
-              manaWaterfallBonus={manaWaterfallBonus}
-              hasManaWaterfall={hasManaWaterfall}
-              hasFlowSurge={hasFlowSurge}
-              hasManaOverflow={hasManaOverflow}
-              hasEternalFlow={hasEternalFlow}
-              studySpeedMult={studySpeedMult}
-              studyCostMult={studyCostMult}
-            />
-          ) : (
-            /* Spire Mode - Simplified UI */
-            <div className="flex-1 min-w-0 space-y-4">
-              <DebugName name="SpireModeUI">
-                <div className="flex items-center justify-between mb-4">
-                  <h2 className="text-2xl font-bold game-title text-amber-400">
-                    🏔️ Spire Mode - Floor {store.currentFloor}
-                  </h2>
-                  <div className="flex gap-2 items-center">
-                    {store.currentAction === 'climb' && !store.isDescending && (
-                      <Badge className="bg-green-900/50 text-green-300 border-green-600">Climbing</Badge>
-                    )}
-                    <Button
-                      variant="outline"
-                      className="border-blue-600/50 text-blue-400 hover:bg-blue-900/20"
-                      onClick={() => store.climbDownFloor()}
-                      disabled={store.isDescending}
-                    >
-                      <ChevronDown className="w-4 h-4 mr-2" />
-                      {store.isDescending ? 'Descending…' : 'Begin Descent'}
-                    </Button>
-                    <Button
-                      variant="default"
-                      className="bg-green-600 hover:bg-green-700"
-                      onClick={() => store.exitSpireMode()}
-                    >
-                      Exit Spire
-                    </Button>
-                  </div>
-                </div>
+          <div className="flex-1 min-w-0">
+            <Tabs value={activeTab} onValueChange={setActiveTab}>
+              <TabsList className="flex flex-wrap gap-1 w-full mb-4 h-auto">
+                <TabsTrigger value="spire" className="text-xs px-2 py-1">⚔️ Spire</TabsTrigger>
+                <TabsTrigger value="attunements" className="text-xs px-2 py-1">✨ Attune</TabsTrigger>
+                <TabsTrigger value="golemancy" className="text-xs px-2 py-1">🗿 Golems</TabsTrigger>
+                <TabsTrigger value="skills" className="text-xs px-2 py-1">📚 Skills</TabsTrigger>
+                <TabsTrigger value="spells" className="text-xs px-2 py-1">🔮 Spells</TabsTrigger>
+                <TabsTrigger value="equipment" className="text-xs px-2 py-1">🛡️ Gear</TabsTrigger>
+                <TabsTrigger value="crafting" className="text-xs px-2 py-1">🔧 Craft</TabsTrigger>
+                <TabsTrigger value="loot" className="text-xs px-2 py-1">💎 Loot</TabsTrigger>
+                <TabsTrigger value="achievements" className="text-xs px-2 py-1">🏆 Achieve</TabsTrigger>
+                <TabsTrigger value="lab" className="text-xs px-2 py-1">🔬 Lab</TabsTrigger>
+                <TabsTrigger value="stats" className="text-xs px-2 py-1">📊 Stats</TabsTrigger>
+                <TabsTrigger value="debug" className="text-xs px-2 py-1">🐛 Debug</TabsTrigger>
+                <TabsTrigger value="grimoire" className="text-xs px-2 py-1">📖 Grimoire</TabsTrigger>
+              </TabsList>

+              <TabsContent value="spire">
                <Suspense fallback={<TabLoadingFallback />}>
-                  <SpireTab store={store} simpleMode={true} />
+                  <SpireTab store={store} />
                </Suspense>
+              </TabsContent>

-                <Card className="bg-gray-900/80 border-gray-700">
-                  <CardHeader className="pb-2">
-                    <CardTitle className="text-amber-400 game-panel-title text-xs">Activity Log</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <ScrollArea className="h-48">
-                      <div className="space-y-1">
-                        {(store.activityLog || []).slice(0, 50).map((entry: ActivityLogEntry, i) => {
-                          const getEventStyle = (eventType: string) => {
-                            switch (eventType) {
-                              case 'enemy_defeated':
-                              case 'floor_cleared':
-                                return 'text-green-400';
-                              case 'damage_dealt':
-                                return 'text-red-400';
-                              case 'dodge':
-                                return 'text-yellow-400';
-                              case 'armor_proc':
-                                return 'text-blue-400';
-                              case 'special_effect':
-                                return 'text-purple-400';
-                              case 'floor_transition':
-                                return 'text-cyan-400';
-                              case 'spell_cast':
-                                return 'text-amber-400';
-                              case 'golem_attack':
-                                return 'text-orange-400';
-                              case 'puzzle_solved':
-                                return 'text-pink-400';
-                              default:
-                                return 'text-gray-300';
-                            }
-                          };
+              <TabsContent value="attunements">
+                <Suspense fallback={<TabLoadingFallback />}>
+                  <AttunementsTab store={store} />
+                </Suspense>
+              </TabsContent>

-                          return (
-                            <div
-                              key={entry.id}
-                              className={`text-xs ${i === 0 ? 'text-gray-200 font-semibold' : getEventStyle(entry.eventType)}`}
-                            >
-                              {entry.message}
-                            </div>
-                          );
-                        })}
-                        {(store.activityLog || []).length === 0 && (
-                          <div className="text-xs text-gray-500 italic">No activity yet...</div>
-                        )}
-                      </div>
-                    </ScrollArea>
-                  </CardContent>
-                </Card>
-              </DebugName>
-            </div>
-          )}
+              <TabsContent value="golemancy">
+                <Suspense fallback={<TabLoadingFallback />}>
+                  <GolemancyTab store={store} />
+                </Suspense>
+              </TabsContent>
+
+              <TabsContent value="skills">
+                <Suspense fallback={<TabLoadingFallback />}>
+                  <SkillsTab store={store} />
+                </Suspense>
+              </TabsContent>
+
+              <TabsContent value="spells">
+                <Suspense fallback={<TabLoadingFallback />}>
+                  <SpellsTab store={store} />
+                </Suspense>
+              </TabsContent>
+
+              <TabsContent value="equipment">
+                <Suspense fallback={<TabLoadingFallback />}>
+                  <EquipmentTab store={store} />
+                </Suspense>
+              </TabsContent>
+
+              <TabsContent value="crafting">
+                <Suspense fallback={<TabLoadingFallback />}>
+                  <CraftingTab store={store} />
+                </Suspense>
+              </TabsContent>
+
+              <TabsContent value="loot">
+                <Suspense fallback={<TabLoadingFallback />}>
+                  <LootTab store={store} />
+                </Suspense>
+              </TabsContent>
+
+              <TabsContent value="achievements">
+                <Suspense fallback={<TabLoadingFallback />}>
+                  <AchievementsTab store={store} />
+                </Suspense>
+              </TabsContent>
+
+              <TabsContent value="lab">
+                <Suspense fallback={<TabLoadingFallback />}>
+                  <LabTab store={store} />
+                </Suspense>
+              </TabsContent>
+
+              <TabsContent value="stats">
+                <Suspense fallback={<TabLoadingFallback />}>
+                  <StatsTab store={store} />
+                </Suspense>
+              </TabsContent>
+
+              <TabsContent value="debug">
+                <Suspense fallback={<TabLoadingFallback />}>
+                  <DebugTab store={store} />
+                </Suspense>
+              </TabsContent>
+
+              <TabsContent value="grimoire">
+                <GrimoireTab />
+              </TabsContent>
+            </Tabs>
+          </div>
        </main>
      </div>
    </TooltipProvider>