Phase 3: Lazy load tabs in page.tsx

2026-04-24 14:27:14 +02:00
parent d6b85d6367
commit eea5ed1585
2 changed files with 104 additions and 30 deletions
@@ -0,0 +1,35 @@
+**Role:** You are an expert Next.js game developer.  
+**Project Context:** `/home/user/repos/Mana-Loop`  
+**Objective:** Execute a multi-system update covering UI reworks, state-machine logic, game balance, developer tools, and critical bug fixes.
+
+### **1. Workflow & State Management (Priority)**
+* **Initialization:** Check `docs/task2_progress.md` and `docs/task2.md` to identify current progress.
+* **Tracking:** Use the `todo_list` tool. Document all actions in the `docs/` files.
+* **Delegation:** Use sub-agents for modular tasks; commit and push changes incrementally.
+
+### **2. Automation & State Logic**
+* **ActionButtons Rework:**
+    * **Remove Manual Selection:** Remove buttons that allow players to manually choose their action.
+    * **Automatic Transition:** Automatically switch the state to **"Meditate"** whenever a Study or Crafting task finishes.
+    * **Status Display:** Replace buttons with a read-only "Current Activity" indicator.
+* **Research Locking:** In the `SkillsTab`, prevent switching research topics while a study action is in progress.
+
+### **3. Feature Reworks & UI**
+* **SpireTab Overhaul:** * **"Climb the Spire":** Create an entry button navigating to a dedicated, locked "Spire Mode."
+    * **Exit Condition:** Player must "climb down" to exit.
+    * **Persistent UI:** Only `ManaDisplay` and `CalendarDisplay` remain. Display Spire info and Golems.
+* **Equipment System:** Support **2-Handed Weapons**. Staves must block the offhand slot.
+
+### **4. Developer & System Tools**
+* **DebugTab Update:** Add **Invoker Debugging Buttons** to manually trigger/force **Pacts with different Guardians**.
+* **System Integrity:** Fix the **"Show Component Names"** debug option. Following the recent refactor, ensure this works for **all** components. Check for missing `displayName` properties or wrappers that might be masking component identities in the DOM/DevTools.
+
+### **5. Bug Fixes & Refinement**
+* **CRITICAL: Mana Well Bug:** Fix the "Deep Basin" upgrade logic. Currently, choosing this upgrade resets max mana capacity to 120 instead of the expected 600. Ensure the upgrade correctly calculates or adds to the base capacity rather than overwriting it with a flat value.
+* **Combat UI:** Fix the "Casting Bar" progress animation; ensure the progress bar fills correctly.
+* **LootTab:** Remove "Transference" mana from Essence/Item lists.
+* **Crafting:** Disable "Prepare" for non-enchanted items; limit "Design" to gear types currently owned.
+
+### **6. Game Balance & Progression**
+* **SkillsTab:** Delete all "Ascension" skills (Insight gain is prestige-only).
+* **StatsTab:** Lock Fire, Water, Air, and Earth at start. Only "Transference" is unlocked initially.
@@ -1,6 +1,6 @@
 'use client';

-import { useEffect, useState } from 'react';
+import { useEffect, useState, lazy, Suspense } from 'react';
 import { useGameStore, useGameLoop, fmt, getFloorElement, computeMaxMana, computeRegen, computeClickMana, getMeditationBonus, getIncursionStrength, canAffordSpellCost } from '@/lib/game/store';
 import { getActiveEquipmentSpells, getTotalDPS } from '@/lib/game/computed-stats';

@@ -13,10 +13,28 @@ 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 { RotateCcw } from 'lucide-react';
-import { CraftingTab, SpireTab, SpellsTab, LabTab, SkillsTab, StatsTab, EquipmentTab, AttunementsTab, DebugTab, LootTab, AchievementsTab, GolemancyTab } from '@/components/game/tabs';
+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';
 // Loot and Achievements moved to separate tabs
-import { DebugName } from '@/lib/game/debug-context';
+
+// 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 })));
+const SpellsTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.SpellsTab })));
+const LabTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.LabTab })));
+const StatsTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.StatsTab })));
+const EquipmentTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.EquipmentTab })));
+const AttunementsTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.AttunementsTab })));
+const DebugTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.DebugTab })));
+const LootTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.LootTab })));
+const AchievementsTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.AchievementsTab })));
+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>;

 export default function ManaLoopGame() {
  const [activeTab, setActiveTab] = useState('spire');
@@ -233,79 +251,101 @@ export default function ManaLoopGame() {

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

              <TabsContent value="attunements">
                <DebugName name="AttunementsTab">
-                  <AttunementsTab store={store} />
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <AttunementsTab store={store} />
+                  </Suspense>
                </DebugName>
              </TabsContent>

              <TabsContent value="golemancy">
                <DebugName name="GolemancyTab">
-                  <GolemancyTab store={store} />
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <GolemancyTab store={store} />
+                  </Suspense>
                </DebugName>
              </TabsContent>

              <TabsContent value="skills">
                <DebugName name="SkillsTab">
-                  <SkillsTab store={store} />
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <SkillsTab store={store} />
+                  </Suspense>
                </DebugName>
              </TabsContent>

              <TabsContent value="spells">
                <DebugName name="SpellsTab">
-                  <SpellsTab store={store} />
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <SpellsTab store={store} />
+                  </Suspense>
                </DebugName>
              </TabsContent>

              <TabsContent value="equipment">
                <DebugName name="EquipmentTab">
-                  <EquipmentTab store={store} />
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <EquipmentTab store={store} />
+                  </Suspense>
                </DebugName>
              </TabsContent>

              <TabsContent value="crafting">
                <DebugName name="CraftingTab">
-                  <CraftingTab store={store} />
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <CraftingTab store={store} />
+                  </Suspense>
                </DebugName>
              </TabsContent>
              
              <TabsContent value="loot">
                <DebugName name="LootTab">
-                  <LootTab store={store} />
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <LootTab store={store} />
+                  </Suspense>
                </DebugName>
              </TabsContent>

              <TabsContent value="achievements">
                <DebugName name="AchievementsTab">
-                  <AchievementsTab store={store} />
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <AchievementsTab store={store} />
+                  </Suspense>
                </DebugName>
              </TabsContent>

              <TabsContent value="lab">
                <DebugName name="LabTab">
-                  <LabTab store={store} />
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <LabTab store={store} />
+                  </Suspense>
                </DebugName>
              </TabsContent>

              <TabsContent value="stats">
                <DebugName name="StatsTab">
-                  <StatsTab
-                    store={store}
-                    upgradeEffects={upgradeEffects}
-                    maxMana={maxMana}
-                    baseRegen={baseRegen}
-                    clickMana={clickMana}
-                    meditationMultiplier={meditationMultiplier}
-                    effectiveRegen={effectiveRegen}
-                    incursionStrength={incursionStrength}
-                    manaCascadeBonus={manaCascadeBonus}
-                    studySpeedMult={studySpeedMult}
-                    studyCostMult={studyCostMult}
-                  />
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <StatsTab
+                      store={store}
+                      upgradeEffects={upgradeEffects}
+                      maxMana={maxMana}
+                      baseRegen={baseRegen}
+                      clickMana={clickMana}
+                      meditationMultiplier={meditationMultiplier}
+                      effectiveRegen={effectiveRegen}
+                      incursionStrength={incursionStrength}
+                      manaCascadeBonus={manaCascadeBonus}
+                      studySpeedMult={studySpeedMult}
+                      studyCostMult={studyCostMult}
+                    />
+                  </Suspense>
                </DebugName>
              </TabsContent>

@@ -317,7 +357,9 @@ export default function ManaLoopGame() {

              <TabsContent value="debug">
                <DebugName name="DebugTab">
-                  <DebugTab store={store} />
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <DebugTab store={store} />
+                  </Suspense>
                </DebugName>
              </TabsContent>
            </Tabs>
@@ -460,6 +502,3 @@ export default function ManaLoopGame() {
    );
  }
 }
-
-// Import TooltipProvider
-import { TooltipProvider } from '@/components/ui/tooltip';