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,11 +5,53 @@ 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;
+
+  const incrementSkillLevel = (skillId: string) => {
+    useSkillStore.getState().incrementSkillLevel(skillId);
+  };
+
+  const setSkillLevel = (skillId: string, level: number) => {
+    useSkillStore.getState().setSkillLevel(skillId, level);
+  };
+
+  const unlockAllEffects = () => {
+    const effectIds = [
+      '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',
+      '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'
+    ];
+    useManaStore.setState((prev: any) => {
+      const currentEffects = prev.unlockedEffects || [];
+      const newEffects = [...currentEffects];
+      effectIds.forEach(id => {
+        if (!newEffects.includes(id)) {
+          newEffects.push(id);
+        }
+      });
+      return { ...prev, unlockedEffects: newEffects };
+    });
+  };
 
   return (
     <Card className="bg-gray-900/80 border-gray-700 md:col-span-2">
@@ -30,13 +72,12 @@ export function SkillDebug() {
                 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 };
+                  const enchantSkills = ['enchanting', 'efficientEnchant', 'enchantSpeed', 'essenceRefining'];
+                  enchantSkills.forEach(skillId => {
+                    const currentLevel = skills[skillId] || 0;
+                    if (currentLevel < 10) {
+                      incrementSkillLevel(skillId);
+                    }
                   });
                 }}
               >
@@ -47,13 +88,9 @@ export function SkillDebug() {
                 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 };
+                  const enchantSkills = ['enchanting', 'efficientEnchant', 'enchantSpeed', 'essenceRefining'];
+                  enchantSkills.forEach(skillId => {
+                    setSkillLevel(skillId, 10);
                   });
                 }}
               >
@@ -71,12 +108,11 @@ export function SkillDebug() {
                 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 };
+                  manaSkills.forEach(skillId => {
+                    const currentLevel = skills[skillId] || 0;
+                    if (currentLevel < 10) {
+                      incrementSkillLevel(skillId);
+                    }
                   });
                 }}
               >
@@ -87,12 +123,8 @@ export function SkillDebug() {
                 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 };
+                  manaSkills.forEach(skillId => {
+                    setSkillLevel(skillId, 10);
                   });
                 }}
               >
@@ -110,12 +142,11 @@ export function SkillDebug() {
                 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 };
+                  studySkills.forEach(skillId => {
+                    const currentLevel = skills[skillId] || 0;
+                    if (currentLevel < 10) {
+                      incrementSkillLevel(skillId);
+                    }
                   });
                 }}
               >
@@ -126,12 +157,8 @@ export function SkillDebug() {
                 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 };
+                  studySkills.forEach(skillId => {
+                    setSkillLevel(skillId, 10);
                   });
                 }}
               >
@@ -149,12 +176,11 @@ export function SkillDebug() {
                 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 };
+                  craftSkills.forEach(skillId => {
+                    const currentLevel = skills[skillId] || 0;
+                    if (currentLevel < 10) {
+                      incrementSkillLevel(skillId);
+                    }
                   });
                 }}
               >
@@ -165,12 +191,8 @@ export function SkillDebug() {
                 variant="outline"
                 onClick={() => {
                   const craftSkills = ['effCrafting', 'fieldRepair', 'elemCrafting'];
-                  setSkills((prev) => {
-                    const newSkills = { ...prev.skills };
-                    craftSkills.forEach(skillId => {
-                      newSkills[skillId] = 10;
-                    });
-                    return { ...prev, skills: newSkills };
+                  craftSkills.forEach(skillId => {
+                    setSkillLevel(skillId, 10);
                   });
                 }}
               >
@@ -187,22 +209,18 @@ export function SkillDebug() {
                 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 };
+                  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);
                   });
                 }}
               >
@@ -212,37 +230,7 @@ export function SkillDebug() {
                 size="sm"
                 variant="outline"
                 onClick={() => {
-                  setGameState((prev: any) => {
-                    const effectIds = [
-                      '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',
-                      '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'
-                    ];
-                    const currentEffects = prev.unlockedEffects || [];
-                    effectIds.forEach(id => {
-                      if (!currentEffects.includes(id)) {
-                        currentEffects.push(id);
-                      }
-                    });
-                    return { ...prev, unlockedEffects: currentEffects };
-                  });
+                  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