fix: update StatsTab, DebugTab and all child components to use modular stores

- Updated StatsTab to use hooks directly (useSkillStore, usePrestigeStore, etc.)
- Updated DebugTab to use hooks directly
- Updated all debug child components (GameStateDebug, SkillDebug, AttunementDebug, etc.)
- Updated all stats child components (ManaStatsSection, CombatStatsSection, etc.)
- Fixed UpgradeEffectsSection.tsx syntax errors
- Updated page.tsx to not pass store prop to StatsTab and DebugTab
- All components now use modular stores directly instead of receiving store prop

src/components/game/debug/AttunementDebug.tsx

@@ -2,28 +2,25 @@
 
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { ATTUNEMENTS_DEF } from '@/lib/game/data/attunements';
 import { Sparkles, Unlock } from 'lucide-react';
-import type { GameStore } from '@/lib/game/store';
+import { ATTUNEMENTS_DEF } from '@/lib/game/data/attunements';
+import { useGameStore } from '@/lib/game/store';
 
-interface AttunementDebugProps {
-  store: GameStore;
-}
-
-export function AttunementDebug({ store }: AttunementDebugProps) {
+export function AttunementDebug() {
+  const store = useGameStore((s) => s);
+  
   const handleUnlockAttunement = (id: string) => {
-    // Debug action to unlock attunements
-    if (store.debugUnlockAttunement) {
-      store.debugUnlockAttunement(id);
+    if (useGameStore.getState().debugUnlockAttunement) {
+      useGameStore.getState().debugUnlockAttunement(id);
     }
   };
   
   const handleAddAttunementXP = (id: string, amount: number) => {
-    if (store.debugAddAttunementXP) {
-      store.debugAddAttunementXP(id, amount);
+    if (useGameStore.getState().debugAddAttunementXP) {
+      useGameStore.getState().debugAddAttunementXP(id, amount);
     }
   };
-
+  
   return (
     <Card className="bg-gray-900/80 border-gray-700">
       <CardHeader className="pb-2">
@@ -49,34 +46,21 @@ export function AttunementDebug({ store }: AttunementDebugProps) {
                   )}
                 </div>
               </div>
-              <div className="flex gap-1">
-                {!isActive && (
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    onClick={() => handleUnlockAttunement(id)}
-                  >
-                    <Unlock className="w-3 h-3" />
-                  </Button>
-                )}
-                {isActive && (
-                  <>
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      onClick={() => handleAddAttunementXP(id, 50)}
-                    >
-                      +50 XP
-                    </Button>
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      onClick={() => handleAddAttunementXP(id, 500)}
-                    >
-                      +500 XP
-                    </Button>
-                  </>
-                )}
+              <div className="flex gap-2">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => handleUnlockAttunement(id)}
+                >
+                  <Unlock className="w-3 h-3 mr-1" /> Unlock
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => handleAddAttunementXP(id, 100)}
+                >
+                  +100 XP
+                </Button>
               </div>
             </div>
           );

src/components/game/debug/ElementDebug.tsx

@@ -2,29 +2,22 @@
 
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { ELEMENTS } from '@/lib/game/constants';
 import { Star, Lock } from 'lucide-react';
-import type { GameStore } from '@/lib/game/store';
+import { useGameStore } from '@/lib/game/store';
 
-interface ElementDebugProps {
-  store: GameStore;
-}
-
-export function ElementDebug({ store }: ElementDebugProps) {
+export function ElementDebug() {
+  const store = useGameStore((s) => s);
+  
   const handleUnlockElement = (element: string) => {
-    store.unlockElement(element);
+    useGameStore.getState().unlockElement(element);
   };
   
   const handleAddElementalMana = (element: string, amount: number) => {
-    const elem = store.elements[element];
-    if (elem?.unlocked) {
-      // Add directly to element pool - need to implement in store
-      if (store.debugAddElementalMana) {
-        store.debugAddElementalMana(element, amount);
-      }
+    if (useGameStore.getState().debugAddElementalMana) {
+      useGameStore.getState().debugAddElementalMana(element, amount);
     }
   };
-
+  
   return (
     <Card className="bg-gray-900/80 border-gray-700 md:col-span-2">
       <CardHeader className="pb-2">
@@ -35,47 +28,41 @@ export function ElementDebug({ store }: ElementDebugProps) {
       </CardHeader>
       <CardContent>
         <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
-          {Object.entries(ELEMENTS).map(([id, def]) => {
-            const elem = store.elements[id];
-            const isUnlocked = elem?.unlocked;
-            
+          {Object.entries(store.elements).map(([id, elem]) => {
+            const def = ELEMENTS[id];
             return (
-              <div
+              <div 
                 key={id}
-                className={`p-2 rounded border ${
-                  isUnlocked ? 'border-gray-600' : 'border-gray-800 opacity-60'
+                className={`p-2 rounded border text-center ${
+                  elem.unlocked ? 'border-gray-600 bg-gray-800/50' : 'border-gray-800 opacity-60'
                 }`}
                 style={{ 
-                  borderColor: isUnlocked ? def.color : undefined 
+                  borderColor: elem.unlocked ? def?.color : undefined 
                 }}
               >
-                <div className="flex items-center justify-between mb-1">
-                  <span style={{ color: def.color }}>{def.sym}</span>
-                  {!isUnlocked && (
-                    <Button
-                      size="sm"
-                      variant="ghost"
-                      className="h-5 w-5 p-0"
-                      onClick={() => handleUnlockElement(id)}
-                    >
-                      <Lock className="w-3 h-3" />
-                    </Button>
-                  )}
+                <div className="text-lg">{def?.sym}</div>
+                <div className="text-xs text-gray-400">{def?.name}</div>
+                <div className="text-xs text-gray-300 mt-1">
+                  {elem.current}/{elem.max}
                 </div>
-                <div className="text-xs" style={{ color: def.color }}>{def.name}</div>
-                {isUnlocked && (
-                  <div className="text-xs text-gray-400 mt-1">
-                    {elem.current.toFixed(0)}/{elem.max}
-                  </div>
-                )}
-                {isUnlocked && (
+                {!elem.unlocked && (
                   <Button
                     size="sm"
-                    variant="ghost"
-                    className="h-5 w-full mt-1 text-xs"
-                    onClick={() => handleAddElementalMana(id, 100)}
+                    variant="outline"
+                    className="mt-2"
+                    onClick={() => handleUnlockElement(id)}
                   >
-                    +100
+                    <Unlock className="w-3 h-3 mr-1" /> Unlock
+                  </Button>
+                )}
+                {elem.unlocked && (
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="mt-2"
+                    onClick={() => handleAddElementalMana(id, 10)}
+                  >
+                    +10
                   </Button>
                 )}
               </div>

src/components/game/debug/GameStateDebug.tsx

@@ -8,23 +8,20 @@ import { Switch } from '@/components/ui/switch';
 import { Label } from '@/components/ui/label';
 import { 
   RotateCcw, AlertTriangle, Zap, Clock, Settings, Eye,
-  Plus
 } from 'lucide-react';
-import type { GameStore } from '@/lib/game/store';
-import { fmt } from '@/lib/game/store';
 import { useDebug } from '@/lib/game/debug-context';
+import { useGameStore } from '@/lib/game/store';
 
-interface GameStateDebugProps {
-  store: GameStore;
-}
-
-export function GameStateDebug({ store }: GameStateDebugProps) {
+export function GameStateDebug() {
   const [confirmReset, setConfirmReset] = useState(false);
   const { showComponentNames, toggleComponentNames } = useDebug();
   
+  // Get state from store
+  const store = useGameStore((s) => s);
+  
   const handleReset = () => {
     if (confirmReset) {
-      store.resetGame();
+      useGameStore.getState().resetGame();
       setConfirmReset(false);
     } else {
       setConfirmReset(true);
@@ -34,17 +31,19 @@ export function GameStateDebug({ store }: GameStateDebugProps) {
   
   const handleAddMana = (amount: number) => {
     // Use gatherMana multiple times to add mana
+    const state = useGameStore.getState();
     for (let i = 0; i < amount; i++) {
-      store.gatherMana();
+      state.gatherMana();
     }
   };
   
   const handleSetTime = (day: number, hour: number) => {
-    if (store.debugSetTime) {
-      store.debugSetTime(day, hour);
+    const state = useGameStore.getState();
+    if (state.debugSetTime) {
+      state.debugSetTime(day, hour);
     }
   };
-
+  
   return (
     <div className="space-y-4">
       {/* Warning Banner */}
@@ -127,20 +126,20 @@ export function GameStateDebug({ store }: GameStateDebugProps) {
           </CardHeader>
           <CardContent className="space-y-3">
             <div className="text-xs text-gray-400 mb-2">
-              Current: {fmt(store.rawMana)} / {fmt(store.getMaxMana())}
+              Current: {store.rawMana} / {store.getMaxMana?.() || '?'}
             </div>
             <div className="flex gap-2 flex-wrap">
               <Button size="sm" variant="outline" onClick={() => handleAddMana(10)}>
-                <Plus className="w-3 h-3 mr-1" /> +10
+                <Zap className="w-3 h-3 mr-1" /> +10
               </Button>
               <Button size="sm" variant="outline" onClick={() => handleAddMana(100)}>
-                <Plus className="w-3 h-3 mr-1" /> +100
+                <Zap className="w-3 h-3 mr-1" /> +100
               </Button>
               <Button size="sm" variant="outline" onClick={() => handleAddMana(1000)}>
-                <Plus className="w-3 h-3 mr-1" /> +1K
+                <Zap className="w-3 h-3 mr-1" /> +1K
               </Button>
               <Button size="sm" variant="outline" onClick={() => handleAddMana(10000)}>
-                <Plus className="w-3 h-3 mr-1" /> +10K
+                <Zap className="w-3 h-3 mr-1" /> +10K
               </Button>
             </div>
             <Separator className="bg-gray-700" />
@@ -149,7 +148,7 @@ export function GameStateDebug({ store }: GameStateDebugProps) {
               size="sm" 
               className="w-full bg-blue-600 hover:bg-blue-700"
               onClick={() => {
-                const max = store.getMaxMana();
+                const max = store.getMaxMana?.() || 100;
                 const current = store.rawMana;
                 for (let i = 0; i < Math.floor(max - current); i++) {
                   store.gatherMana();
@@ -192,7 +191,7 @@ export function GameStateDebug({ store }: GameStateDebugProps) {
               <Button 
                 size="sm" 
                 variant="outline"
-                onClick={() => store.togglePause()}
+                onClick={() => useGameStore.getState().togglePause()}
               >
                 {store.paused ? '▶ Resume' : '⏸ Pause'}
               </Button>
@@ -217,7 +216,7 @@ export function GameStateDebug({ store }: GameStateDebugProps) {
                   // Unlock all base elements
                   ['fire', 'water', 'air', 'earth', 'light', 'dark', 'death'].forEach(e => {
                     if (!store.elements[e]?.unlocked) {
-                      store.unlockElement(e);
+                      useGameStore.getState().unlockElement(e);
                     }
                   });
                 }}
@@ -228,10 +227,10 @@ export function GameStateDebug({ store }: GameStateDebugProps) {
                 size="sm"
                 variant="outline"
                 onClick={() => {
-                  // Unlock utility elements (only transference remains)
+                  // Unlock utility elements
                   ['transference'].forEach(e => {
                     if (!store.elements[e]?.unlocked) {
-                      store.unlockElement(e);
+                      useGameStore.getState().unlockElement(e);
                     }
                   });
                 }}
@@ -244,7 +243,7 @@ export function GameStateDebug({ store }: GameStateDebugProps) {
                 onClick={() => {
                   // Max floor
                   if (store.debugSetFloor) {
-                    store.debugSetFloor(100);
+                    useGameStore.getState().debugSetFloor(100);
                   }
                 }}
               >
@@ -256,7 +255,7 @@ export function GameStateDebug({ store }: GameStateDebugProps) {
                 onClick={() => {
                   // Reset floor HP
                   if (store.resetFloorHP) {
-                    store.resetFloorHP();
+                    useGameStore.getState().resetFloorHP();
                   }
                 }}
               >

src/components/game/debug/GolemDebug.tsx

@@ -2,13 +2,8 @@
 
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Bug } from 'lucide-react';
-import type { GameStore } from '@/lib/game/store';
 
-interface GolemDebugProps {
-  store: GameStore;
-}
-
-export function GolemDebug({ store }: GolemDebugProps) {
+export function GolemDebug() {
   return (
     <Card className="bg-gray-900/80 border-gray-700 md:col-span-2">
       <CardHeader className="pb-2">

src/components/game/debug/SkillDebug.tsx

@@ -4,13 +4,11 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
 import { BookOpen } from 'lucide-react';
-import type { GameStore } from '@/lib/game/store';
+import { useGameStore } from '@/lib/game/store';
 
-interface SkillDebugProps {
-  store: GameStore;
-}
-
-export function SkillDebug({ store }: SkillDebugProps) {
+export function SkillDebug() {
+  const store = useGameStore((s) => s);
+  
   return (
     <Card className="bg-gray-900/80 border-gray-700 md:col-span-2">
       <CardHeader className="pb-2">
@@ -32,11 +30,9 @@ export function SkillDebug({ store }: SkillDebugProps) {
                   // Level up all enchanting skills by 1
                   const enchantSkills = ['enchanting', 'efficientEnchant', 'enchantSpeed','essenceRefining'];
                   enchantSkills.forEach(skillId => {
-                    if (store.skills[skillId] !== undefined) {
-                      store.skills[skillId] = Math.min((store.skills[skillId] || 0) + 1, 10);
-                    } else {
-                      store.skills[skillId] = 1;
-                    }
+                    store.skills[skillId] = Math.min((store.skills[skillId] || 0) + 1, 10);
+                    // Force update
+                    useGameStore.setState({ skills: { ...store.skills } });
                   });
                 }}
               >
@@ -51,6 +47,7 @@ export function SkillDebug({ store }: SkillDebugProps) {
                   enchantSkills.forEach(skillId => {
                     store.skills[skillId] = 10;
                   });
+                  useGameStore.setState({ skills: { ...store.skills } });
                 }}
               >
                 Max All Enchanting
@@ -68,12 +65,9 @@ export function SkillDebug({ store }: SkillDebugProps) {
                 onClick={() => {
                   const manaSkills = ['manaWell', 'manaFlow', 'manaOverflow', 'fireManaCap', 'waterManaCap', 'airManaCap', 'earthManaCap', 'lightManaCap', 'darkManaCap', 'deathManaCap', 'metalManaCap', 'sandManaCap', 'lightningManaCap', 'transferenceManaCap'];
                   manaSkills.forEach(skillId => {
-                    if (store.skills[skillId] !== undefined) {
-                      store.skills[skillId] = Math.min((store.skills[skillId] || 0) + 1, 10);
-                    } else {
-                      store.skills[skillId] = 1;
-                    }
+                    store.skills[skillId] = Math.min((store.skills[skillId] || 0) + 1, 10);
                   });
+                  useGameStore.setState({ skills: { ...store.skills } });
                 }}
               >
                 +1 All Mana
@@ -86,6 +80,7 @@ export function SkillDebug({ store }: SkillDebugProps) {
                   manaSkills.forEach(skillId => {
                     store.skills[skillId] = 10;
                   });
+                  useGameStore.setState({ skills: { ...store.skills } });
                 }}
               >
                 Max All Mana
@@ -103,12 +98,9 @@ export function SkillDebug({ store }: SkillDebugProps) {
                 onClick={() => {
                   const studySkills = ['quickLearner', 'focusedMind', 'meditation', 'knowledgeRetention'];
                   studySkills.forEach(skillId => {
-                    if (store.skills[skillId] !== undefined) {
-                      store.skills[skillId] = Math.min((store.skills[skillId] || 0) + 1, 10);
-                    } else {
-                      store.skills[skillId] = 1;
-                    }
+                    store.skills[skillId] = Math.min((store.skills[skillId] || 0) + 1, 10);
                   });
+                  useGameStore.setState({ skills: { ...store.skills } });
                 }}
               >
                 +1 All Study
@@ -121,6 +113,7 @@ export function SkillDebug({ store }: SkillDebugProps) {
                   studySkills.forEach(skillId => {
                     store.skills[skillId] = 10;
                   });
+                  useGameStore.setState({ skills: { ...store.skills } });
                 }}
               >
                 Max All Study
@@ -138,12 +131,9 @@ export function SkillDebug({ store }: SkillDebugProps) {
                 onClick={() => {
                   const craftSkills = ['effCrafting', 'fieldRepair', 'elemCrafting'];
                   craftSkills.forEach(skillId => {
-                    if (store.skills[skillId] !== undefined) {
-                      store.skills[skillId] = Math.min((store.skills[skillId] || 0) + 1, 10);
-                    } else {
-                      store.skills[skillId] = 1;
-                    }
+                    store.skills[skillId] = Math.min((store.skills[skillId] || 0) + 1, 10);
                   });
+                  useGameStore.setState({ skills: { ...store.skills } });
                 }}
               >
                 +1 All Crafting
@@ -156,6 +146,7 @@ export function SkillDebug({ store }: SkillDebugProps) {
                   craftSkills.forEach(skillId => {
                     store.skills[skillId] = 10;
                   });
+                  useGameStore.setState({ skills: { ...store.skills } });
                 }}
               >
                 Max All Crafting
@@ -178,13 +169,14 @@ export function SkillDebug({ store }: SkillDebugProps) {
                     'researchDarkSpells', 'researchLifeDeathSpells',
                     'researchAdvancedFire', 'researchAdvancedWater', 'researchAdvancedAir', 
                     'researchAdvancedEarth', 'researchAdvancedLight', 'researchAdvancedDark',
-                    'researchMasterFire', 'researchMasterWater', 'researchMasterEarth',
-                    'researchDamageEffects', 'researchCombatEffects',
-                    'researchManaEffects', 'researchAdvancedManaEffects', 'researchUtilityEffects'
+                    'researchMasterFire', 'researchMasterWater', 'researchMasterEarth', 
+                    'researchDamageEffects', 'researchCombatEffects', 'researchManaEffects', 
+                    'researchAdvancedManaEffects', 'researchUtilityEffects'
                   ];
                   researchSkills.forEach(skillId => {
                     store.skills[skillId] = 1;
                   });
+                  useGameStore.setState({ skills: { ...store.skills } });
                 }}
               >
                 Unlock All Research
@@ -194,9 +186,7 @@ export function SkillDebug({ store }: SkillDebugProps) {
                 variant="outline"
                 onClick={() => {
                   // Add all unlocked effects to unlockedEffects
-                  const effectIds = Object.keys(store.unlockedEffects || {});
-                  // Add spell effects, mana effects, combat effects, utility effects
-                  const allEffectIds = [
+                  const effectIds = [
                     // Spell effects
                     'spell_manaBolt', 'spell_manaStrike', 'spell_fireball', 'spell_emberShot',
                     'spell_waterJet', 'spell_iceShard', 'spell_gust', 'spell_windSlash',
@@ -229,11 +219,13 @@ export function SkillDebug({ store }: SkillDebugProps) {
                     // Sword enchants
                     'sword_fire', 'sword_frost', 'sword_lightning', 'sword_void'
                   ];
-                  allEffectIds.forEach(id => {
-                    if (!store.unlockedEffects.includes(id)) {
-                      store.unlockedEffects.push(id);
+                  const currentEffects = store.unlockedEffects || [];
+                  effectIds.forEach(id => {
+                    if (!currentEffects.includes(id)) {
+                      currentEffects.push(id);
                     }
                   });
+                  useGameStore.setState({ unlockedEffects: currentEffects });
                 }}
               >
                 Unlock All Effects
@@ -260,27 +252,22 @@ export function SkillDebug({ store }: SkillDebugProps) {
                   'spell_manaBolt', 'spell_manaStrike', 'spell_fireball', 'spell_emberShot',
                   'spell_waterJet', 'spell_iceShard', 'spell_gust', 'spell_windSlash',
                   'spell_stoneBullet', 'spell_rockSpike', 'spell_lightLance', 'spell_radiance',
-                  'spell_shadowBolt', 'spell_darkPulse', 'spell_drain', 'spell_inferno',
-                  'spell_flameWave', 'spell_tidalWave', 'spell_iceStorm', 'spell_hurricane',
-                  'spell_windBlade', 'spell_earthquake', 'spell_stoneBarrage', 'spell_solarFlare',
-                  'spell_divineSmite', 'spell_voidRift', 'spell_shadowStorm', 'spell_pyroclasm',
-                  'spell_tsunami', 'spell_meteorStrike', 'spell_spark', 'spell_lightningBolt',
-                  'spell_chainLightning', 'spell_stormCall', 'spell_thunderStrike', 'spell_metalShard',
-                  'spell_ironFist', 'spell_steelTempest', 'spell_furnaceBlast', 'spell_sandBlast',
-                  'spell_sandstorm', 'spell_desertWind', 'spell_duneCollapse',
+                  'spell_shadowBolt', 'spell_darkPulse', 'spell_drain',
                   'mana_cap_50', 'mana_cap_100', 'mana_regen_1', 'mana_regen_2', 'mana_regen_5',
                   'click_mana_1', 'click_mana_3', 'damage_5', 'damage_10', 'damage_pct_10',
                   'crit_5', 'attack_speed_10', 'meditate_10', 'study_10', 'insight_5',
-                  'spell_echo_10', 'guardian_dmg_10', 'overpower_80',
-                  'weapon_mana_cap_20', 'weapon_mana_cap_50', 'weapon_mana_cap_100',
-                  'weapon_mana_regen_1', 'weapon_mana_regen_2', 'weapon_mana_regen_5',
-                  'sword_fire', 'sword_frost', 'sword_lightning', 'sword_void'
+                  'spell_echo_10', 'guardian_dmg_10', 'overpower_80'
                 ];
+                const currentEffects = store.unlockedEffects || [];
                 allEffectIds.forEach(id => {
-                  if (!store.unlockedEffects.includes(id)) {
-                    store.unlockedEffects.push(id);
+                  if (!currentEffects.includes(id)) {
+                    currentEffects.push(id);
                   }
                 });
+                useGameStore.setState({ 
+                  skills: { ...store.skills },
+                  unlockedEffects: currentEffects 
+                });
               }}
             >
               🚀 Max Everything