Fix Bug 8: Replace direct setState calls with proper store actions in debug components

- SkillDebug.tsx: Use useSkillStore.getState().incrementSkillLevel() and setSkillLevel() instead of direct setState
- ElementDebug.tsx: Use getState() for consistency
- AttunementDebug.tsx: When unlocking Enchanter, also unlock transference element
- GameStateDebug.tsx: Use proper store actions (debugSetFloor, resetFloorHP, debugSetTime) and fix Switch component usage

docs/project-structure.txt

@@ -459,11 +459,15 @@ Mana-Loop/
 ├── Caddyfile
 ├── Dockerfile
 ├── README.md
+├── add_debugname.py
 ├── bun.lock
 ├── bunfig.toml
 ├── components.json
 ├── docker-compose.yml
 ├── eslint.config.mjs
+├── fix_remaining.py
+├── fix_tabs.py
+├── fix_tabs2.py
 ├── next.config.ts
 ├── package-lock.json
 ├── package.json

src/components/game/debug/AttunementDebug.tsx

@@ -5,6 +5,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Sparkles, Unlock } from 'lucide-react';
 import { ATTUNEMENTS_DEF } from '@/lib/game/data/attunements';
 import { useAttunementStore } from '@/lib/game/stores';
+import { useManaStore } from '@/lib/game/stores';
 
 export function AttunementDebug() {
   const attunements = useAttunementStore((s) => s.attunements);
@@ -14,6 +15,10 @@ export function AttunementDebug() {
   const handleUnlockAttunement = (id: string) => {
     if (debugUnlockAttunement) {
       debugUnlockAttunement(id);
+      // When unlocking Enchanter, also unlock the transference element
+      if (id === 'enchanter') {
+        useManaStore.getState().unlockElement('transference', 500);
+      }
     }
   };
 

src/components/game/debug/ElementDebug.tsx

@@ -8,16 +8,15 @@ import { ELEMENTS } from '@/lib/game/constants';
 
 export function ElementDebug() {
   const elements = useManaStore((s) => s.elements);
-  const unlockElement = useManaStore((s) => s.unlockElement);
-  const addElementMana = useManaStore((s) => s.addElementMana);
 
   const handleUnlockElement = (element: string) => {
-    unlockElement(element, 500);
+    useManaStore.getState().unlockElement(element, 500);
   };
 
   const handleAddElementalMana = (element: string, amount: number) => {
-    if (addElementMana) {
-      addElementMana(element, amount, 100);
+    const elem = elements?.[element];
+    if (elem?.unlocked) {
+      useManaStore.getState().addElementMana(element, amount, elem.max);
     }
   };
 

src/components/game/debug/GameStateDebug.tsx

@@ -29,8 +29,9 @@ export function GameStateDebug() {
   
   // Get actions from stores
   const resetGame = useGameStore((s) => s.resetGame);
-  const setFloor = useCombatStore((s) => s.debugSetFloor);
-  const resetHP = useCombatStore((s) => s.resetFloorHP);
+  const debugSetFloor = useCombatStore((s) => s.debugSetFloor);
+  const resetFloorHP = useCombatStore((s) => s.resetFloorHP);
+  const debugSetTime = useCombatStore((s) => s.debugSetTime);
 
   const handleReset = () => {
     if (confirmReset) {
@@ -186,13 +187,13 @@ export function GameStateDebug() {
               <Button size="sm" variant="outline" onClick={() => useGameStore.setState({ day: 1, hour: 0 })}>
                 Day 1
               </Button>
-              <Button size="sm" variant="outline" onClick={() => setTime?.(10, 0)}>
+              <Button size="sm" variant="outline" onClick={() => debugSetTime?.(10, 0)}>
                 Day 10
               </Button>
-              <Button size="sm" variant="outline" onClick={() => setTime?.(20, 0)}>
+              <Button size="sm" variant="outline" onClick={() => debugSetTime?.(20, 0)}>
                 Day 20
               </Button>
-              <Button size="sm" variant="outline" onClick={() => setTime?.(30, 0)}>
+              <Button size="sm" variant="outline" onClick={() => debugSetTime?.(30, 0)}>
                 Day 30
               </Button>
             </div>
@@ -250,14 +251,14 @@ export function GameStateDebug() {
               <Button
                 size="sm"
                 variant="outline"
-                onClick={() => setFloor?.(100)}
+                onClick={() => debugSetFloor?.(100)}
               >
                 Skip to Floor 100
               </Button>
               <Button
                 size="sm"
                 variant="outline"
-                onClick={() => resetHP?.()}
+                onClick={() => resetFloorHP?.()}
               >
                 Reset Floor HP
               </Button>

src/components/game/debug/SkillDebug.tsx

@@ -5,214 +5,20 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
 import { BookOpen } from 'lucide-react';
 import { useSkillStore } from '@/lib/game/stores';
+import { useManaStore } from '@/lib/game/stores';
 
 export function SkillDebug() {
   const skills = useSkillStore((s) => s.skills);
-  const setSkills = useSkillStore.setState;
-  const setGameState = useSkillStore.setState;
 
-  return (
-    <Card className="bg-gray-900/80 border-gray-700 md:col-span-2">
-      <CardHeader className="pb-2">
-        <CardTitle className="text-purple-400 text-sm flex items-center gap-2">
-          <BookOpen className="w-4 h-4" />
-          Skill Research Debug
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="space-y-3">
-          {/* Enchanting Skills */}
-          <div>
-            <div className="text-xs text-gray-400 mb-2">Enchanting Skills:</div>
-            <div className="flex gap-2 flex-wrap">
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={() => {
-                  // Level up all enchanting skills by 1
-                  setSkills((prev) => {
-                    const enchantSkills = ['enchanting', 'efficientEnchant', 'enchantSpeed', 'essenceRefining'];
-                    const newSkills = { ...prev.skills };
-                    enchantSkills.forEach(skillId => {
-                      newSkills[skillId] = Math.min((newSkills[skillId] || 0) + 1, 10);
-                    });
-                    return { ...prev, skills: newSkills };
-                  });
-                }}
-              >
-                +1 All Enchanting
-              </Button>
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={() => {
-                  // Max all enchanting skills
-                  setSkills((prev) => {
-                    const enchantSkills = ['enchanting', 'efficientEnchant', 'enchantSpeed', 'essenceRefining'];
-                    const newSkills = { ...prev.skills };
-                    enchantSkills.forEach(skillId => {
-                      newSkills[skillId] = 10;
-                    });
-                    return { ...prev, skills: newSkills };
-                  });
-                }}
-              >
-                Max All Enchanting
-              </Button>
-            </div>
-          </div>
+  const incrementSkillLevel = (skillId: string) => {
+    useSkillStore.getState().incrementSkillLevel(skillId);
+  };
 
-          {/* Mana Skills */}
-          <div>
-            <div className="text-xs text-gray-400 mb-2">Mana Skills:</div>
-            <div className="flex gap-2 flex-wrap">
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={() => {
-                  const manaSkills = ['manaWell', 'manaFlow', 'manaOverflow', 'fireManaCap', 'waterManaCap', 'airManaCap', 'earthManaCap', 'lightManaCap', 'darkManaCap', 'deathManaCap', 'metalManaCap', 'sandManaCap', 'lightningManaCap', 'transferenceManaCap'];
-                  setSkills((prev) => {
-                    const newSkills = { ...prev.skills };
-                    manaSkills.forEach(skillId => {
-                      newSkills[skillId] = Math.min((newSkills[skillId] || 0) + 1, 10);
-                    });
-                    return { ...prev, skills: newSkills };
-                  });
-                }}
-              >
-                +1 All Mana
-              </Button>
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={() => {
-                  const manaSkills = ['manaWell', 'manaFlow', 'manaOverflow', 'fireManaCap', 'waterManaCap', 'airManaCap', 'earthManaCap', 'lightManaCap', 'darkManaCap', 'deathManaCap', 'metalManaCap', 'sandManaCap', 'lightningManaCap', 'transferenceManaCap'];
-                  setSkills((prev) => {
-                    const newSkills = { ...prev.skills };
-                    manaSkills.forEach(skillId => {
-                      newSkills[skillId] = 10;
-                    });
-                    return { ...prev, skills: newSkills };
-                  });
-                }}
-              >
-                Max All Mana
-              </Button>
-            </div>
-          </div>
+  const setSkillLevel = (skillId: string, level: number) => {
+    useSkillStore.getState().setSkillLevel(skillId, level);
+  };
 
-          {/* Study Skills */}
-          <div>
-            <div className="text-xs text-gray-400 mb-2">Study Skills:</div>
-            <div className="flex gap-2 flex-wrap">
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={() => {
-                  const studySkills = ['quickLearner', 'focusedMind', 'meditation', 'knowledgeRetention'];
-                  setSkills((prev) => {
-                    const newSkills = { ...prev.skills };
-                    studySkills.forEach(skillId => {
-                      newSkills[skillId] = Math.min((newSkills[skillId] || 0) + 1, 10);
-                    });
-                    return { ...prev, skills: newSkills };
-                  });
-                }}
-              >
-                +1 All Study
-              </Button>
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={() => {
-                  const studySkills = ['quickLearner', 'focusedMind', 'meditation', 'knowledgeRetention'];
-                  setSkills((prev) => {
-                    const newSkills = { ...prev.skills };
-                    studySkills.forEach(skillId => {
-                      newSkills[skillId] = 10;
-                    });
-                    return { ...prev, skills: newSkills };
-                  });
-                }}
-              >
-                Max All Study
-              </Button>
-            </div>
-          </div>
-
-          {/* Crafting Skills */}
-          <div>
-            <div className="text-xs text-gray-400 mb-2">Crafting Skills:</div>
-            <div className="flex gap-2 flex-wrap">
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={() => {
-                  const craftSkills = ['effCrafting', 'fieldRepair', 'elemCrafting'];
-                  setSkills((prev) => {
-                    const newSkills = { ...prev.skills };
-                    craftSkills.forEach(skillId => {
-                      newSkills[skillId] = Math.min((newSkills[skillId] || 0) + 1, 10);
-                    });
-                    return { ...prev, skills: newSkills };
-                  });
-                }}
-              >
-                +1 All Crafting
-              </Button>
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={() => {
-                  const craftSkills = ['effCrafting', 'fieldRepair', 'elemCrafting'];
-                  setSkills((prev) => {
-                    const newSkills = { ...prev.skills };
-                    craftSkills.forEach(skillId => {
-                      newSkills[skillId] = 10;
-                    });
-                    return { ...prev, skills: newSkills };
-                  });
-                }}
-              >
-                Max All Crafting
-              </Button>
-            </div>
-          </div>
-
-          {/* Research Effects */}
-          <div>
-            <div className="text-xs text-gray-400 mb-2">Research Effects:</div>
-            <div className="flex gap-2 flex-wrap">
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={() => {
-                  setSkills((prev) => {
-                    const researchSkills = [
-                      'researchManaSpells', 'researchFireSpells', 'researchWaterSpells', 
-                      'researchAirSpells', 'researchEarthSpells', 'researchLightSpells', 
-                      'researchDarkSpells', 'researchLifeDeathSpells',
-                      'researchAdvancedFire', 'researchAdvancedWater', 'researchAdvancedAir', 
-                      'researchAdvancedEarth', 'researchAdvancedLight', 'researchAdvancedDark',
-                      'researchMasterFire', 'researchMasterWater', 'researchMasterEarth', 
-                      'researchDamageEffects', 'researchCombatEffects', 'researchManaEffects', 
-                      'researchAdvancedManaEffects', 'researchUtilityEffects'
-                    ];
-                    const newSkills = { ...prev.skills };
-                    researchSkills.forEach(skillId => {
-                      newSkills[skillId] = 1;
-                    });
-                    return { ...prev, skills: newSkills };
-                  });
-                }}
-              >
-                Unlock All Research
-              </Button>
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={() => {
-                  setGameState((prev: any) => {
+  const unlockAllEffects = () => {
     const effectIds = [
       'spell_manaBolt', 'spell_manaStrike', 'spell_fireball', 'spell_emberShot',
       'spell_waterJet', 'spell_iceShard', 'spell_gust', 'spell_windSlash',
@@ -235,14 +41,196 @@ export function SkillDebug() {
       'weapon_mana_regen_1', 'weapon_mana_regen_2', 'weapon_mana_regen_5',
       'sword_fire', 'sword_frost', 'sword_lightning', 'sword_void'
     ];
+    useManaStore.setState((prev: any) => {
       const currentEffects = prev.unlockedEffects || [];
+      const newEffects = [...currentEffects];
       effectIds.forEach(id => {
-                      if (!currentEffects.includes(id)) {
-                        currentEffects.push(id);
+        if (!newEffects.includes(id)) {
+          newEffects.push(id);
         }
       });
-                    return { ...prev, unlockedEffects: currentEffects };
+      return { ...prev, unlockedEffects: newEffects };
     });
+  };
+
+  return (
+    <Card className="bg-gray-900/80 border-gray-700 md:col-span-2">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-purple-400 text-sm flex items-center gap-2">
+          <BookOpen className="w-4 h-4" />
+          Skill Research Debug
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          {/* Enchanting Skills */}
+          <div>
+            <div className="text-xs text-gray-400 mb-2">Enchanting Skills:</div>
+            <div className="flex gap-2 flex-wrap">
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  // Level up all enchanting skills by 1
+                  const enchantSkills = ['enchanting', 'efficientEnchant', 'enchantSpeed', 'essenceRefining'];
+                  enchantSkills.forEach(skillId => {
+                    const currentLevel = skills[skillId] || 0;
+                    if (currentLevel < 10) {
+                      incrementSkillLevel(skillId);
+                    }
+                  });
+                }}
+              >
+                +1 All Enchanting
+              </Button>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  // Max all enchanting skills
+                  const enchantSkills = ['enchanting', 'efficientEnchant', 'enchantSpeed', 'essenceRefining'];
+                  enchantSkills.forEach(skillId => {
+                    setSkillLevel(skillId, 10);
+                  });
+                }}
+              >
+                Max All Enchanting
+              </Button>
+            </div>
+          </div>
+
+          {/* Mana Skills */}
+          <div>
+            <div className="text-xs text-gray-400 mb-2">Mana Skills:</div>
+            <div className="flex gap-2 flex-wrap">
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  const manaSkills = ['manaWell', 'manaFlow', 'manaOverflow', 'fireManaCap', 'waterManaCap', 'airManaCap', 'earthManaCap', 'lightManaCap', 'darkManaCap', 'deathManaCap', 'metalManaCap', 'sandManaCap', 'lightningManaCap', 'transferenceManaCap'];
+                  manaSkills.forEach(skillId => {
+                    const currentLevel = skills[skillId] || 0;
+                    if (currentLevel < 10) {
+                      incrementSkillLevel(skillId);
+                    }
+                  });
+                }}
+              >
+                +1 All Mana
+              </Button>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  const manaSkills = ['manaWell', 'manaFlow', 'manaOverflow', 'fireManaCap', 'waterManaCap', 'airManaCap', 'earthManaCap', 'lightManaCap', 'darkManaCap', 'deathManaCap', 'metalManaCap', 'sandManaCap', 'lightningManaCap', 'transferenceManaCap'];
+                  manaSkills.forEach(skillId => {
+                    setSkillLevel(skillId, 10);
+                  });
+                }}
+              >
+                Max All Mana
+              </Button>
+            </div>
+          </div>
+
+          {/* Study Skills */}
+          <div>
+            <div className="text-xs text-gray-400 mb-2">Study Skills:</div>
+            <div className="flex gap-2 flex-wrap">
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  const studySkills = ['quickLearner', 'focusedMind', 'meditation', 'knowledgeRetention'];
+                  studySkills.forEach(skillId => {
+                    const currentLevel = skills[skillId] || 0;
+                    if (currentLevel < 10) {
+                      incrementSkillLevel(skillId);
+                    }
+                  });
+                }}
+              >
+                +1 All Study
+              </Button>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  const studySkills = ['quickLearner', 'focusedMind', 'meditation', 'knowledgeRetention'];
+                  studySkills.forEach(skillId => {
+                    setSkillLevel(skillId, 10);
+                  });
+                }}
+              >
+                Max All Study
+              </Button>
+            </div>
+          </div>
+
+          {/* Crafting Skills */}
+          <div>
+            <div className="text-xs text-gray-400 mb-2">Crafting Skills:</div>
+            <div className="flex gap-2 flex-wrap">
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  const craftSkills = ['effCrafting', 'fieldRepair', 'elemCrafting'];
+                  craftSkills.forEach(skillId => {
+                    const currentLevel = skills[skillId] || 0;
+                    if (currentLevel < 10) {
+                      incrementSkillLevel(skillId);
+                    }
+                  });
+                }}
+              >
+                +1 All Crafting
+              </Button>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  const craftSkills = ['effCrafting', 'fieldRepair', 'elemCrafting'];
+                  craftSkills.forEach(skillId => {
+                    setSkillLevel(skillId, 10);
+                  });
+                }}
+              >
+                Max All Crafting
+              </Button>
+            </div>
+          </div>
+
+          {/* Research Effects */}
+          <div>
+            <div className="text-xs text-gray-400 mb-2">Research Effects:</div>
+            <div className="flex gap-2 flex-wrap">
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  const researchSkills = [
+                    'researchManaSpells', 'researchFireSpells', 'researchWaterSpells',
+                    'researchAirSpells', 'researchEarthSpells', 'researchLightSpells',
+                    'researchDarkSpells', 'researchLifeDeathSpells',
+                    'researchAdvancedFire', 'researchAdvancedWater', 'researchAdvancedAir',
+                    'researchAdvancedEarth', 'researchAdvancedLight', 'researchAdvancedDark',
+                    'researchMasterFire', 'researchMasterWater', 'researchMasterEarth',
+                    'researchDamageEffects', 'researchCombatEffects', 'researchManaEffects',
+                    'researchAdvancedManaEffects', 'researchUtilityEffects'
+                  ];
+                  researchSkills.forEach(skillId => {
+                    setSkillLevel(skillId, 1);
+                  });
+                }}
+              >
+                Unlock All Research
+              </Button>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  unlockAllEffects();
                 }}
               >
                 Unlock All Effects
@@ -257,44 +245,12 @@ export function SkillDebug() {
               size="sm"
               className="bg-purple-600 hover:bg-purple-700"
               onClick={() => {
-                setSkills((prev) => {
-                  const allEffectIds = [
-                    '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',
-                    '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'
-                  ];
-                  const newSkills = { ...prev.skills };
-                  Object.keys(newSkills).forEach(skillId => {
-                    if ((newSkills[skillId] || 0) < 10) {
-                      newSkills[skillId] = 10;
-                    }
-                  });
-                  return { ...prev, skills: newSkills };
-                });
-                setGameState((prev: any) => {
-                  const allEffectIds = [
-                    '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',
-                    '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'
-                  ];
-                  const currentEffects = prev.unlockedEffects || [];
-                  allEffectIds.forEach(id => {
-                    if (!currentEffects.includes(id)) {
-                      currentEffects.push(id);
-                    }
-                  });
-                  return { ...prev, unlockedEffects: currentEffects };
+                // Max all skills to level 10
+                Object.keys(skills).forEach(skillId => {
+                  setSkillLevel(skillId, 10);
                 });
+                // Unlock all effects
+                unlockAllEffects();
               }}
             >
               🚀 Max Everything