fix: resolve bugs #118 #119 #120 #123 and refactor craftingStore init

src/components/game/tabs/StatsTab/ManaStatsSection.tsx

@@ -5,7 +5,15 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Droplet } from 'lucide-react';
 import type { ComputedEffects } from '@/lib/game/effects/upgrade-effects.types';
 
-interface ManaStatsEffects extends ComputedEffects {
+interface ManaStatsSectionProps {
+  maxMana: number;
+  baseRegen: number;
+  effectiveRegen: number;
+  clickMana: number;
+  meditationMultiplier: number;
+  upgradeEffects: ComputedEffects;
+  elemMax: number;
+  // Special effect flags passed separately
   incursionStrength: number;
   rawMana: number;
   hasSteadyStream: boolean;
@@ -18,15 +26,7 @@ interface ManaStatsEffects extends ComputedEffects {
   hasEternalFlow: boolean;
 }
 
-interface ManaStatsSectionProps {
-  maxMana: number;
-  baseRegen: number;
-  effectiveRegen: number;
-  clickMana: number;
-  meditationMultiplier: number;
-  upgradeEffects: ManaStatsEffects;
-  elemMax: number;
-}
+
 
 export function ManaStatsSection({
   maxMana,
@@ -36,6 +36,16 @@ export function ManaStatsSection({
   meditationMultiplier,
   upgradeEffects,
   elemMax,
+  incursionStrength,
+  rawMana,
+  hasSteadyStream,
+  hasManaTorrent,
+  hasDesperateWells,
+  manaCascadeBonus,
+  manaWaterfallBonus,
+  hasFlowSurge,
+  hasManaOverflow,
+  hasEternalFlow,
 }: ManaStatsSectionProps) {
   return (
     <Card className="bg-[var(--bg-panel)] border-[var(--border-subtle)]">
@@ -114,7 +124,7 @@ export function ManaStatsSection({
             </div>
             <div className="flex justify-between text-sm">
               <span style={{ color: 'var(--text-muted)' }}>Incursion Strength:</span>
-              <span style={{ color: 'var(--color-danger)' }}>{Math.round(upgradeEffects.incursionStrength * 100)}%</span>
+              <span style={{ color: 'var(--color-danger)' }}>{Math.round(incursionStrength * 100)}%</span>
             </div>
             <div className="flex justify-between text-sm font-semibold border-t border-[var(--border-subtle)] pt-2">
               <span style={{ color: 'var(--text-secondary)' }}>Effective Regen:</span>
@@ -123,55 +133,55 @@ export function ManaStatsSection({
           </div>
         </div>
         {/* Special Effects */}
-        {(upgradeEffects.hasSteadyStream || upgradeEffects.hasManaTorrent ||
-          upgradeEffects.hasDesperateWells || upgradeEffects.manaCascadeBonus > 0 ||
-          upgradeEffects.manaWaterfallBonus > 0) && (
+        {(hasSteadyStream || hasManaTorrent ||
+          hasDesperateWells || manaCascadeBonus > 0 ||
+          manaWaterfallBonus > 0) && (
           <>
             <div className="mt-3 mb-2"><span className="text-xs text-[var(--mana-light)] game-panel-title">Special Effects</span></div>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-              {upgradeEffects.hasSteadyStream && (
+              {hasSteadyStream && (
                 <div className="flex justify-between text-xs bg-[var(--bg-sunken)]/50 rounded px-2 py-1">
                   <span style={{ color: 'var(--text-secondary)' }}>Steady Stream:</span>
                   <span style={{ color: 'var(--color-success)' }}>Immune to incursion</span>
                 </div>
               )}
-              {upgradeEffects.manaCascadeBonus > 0 && (
+              {manaCascadeBonus > 0 && (
                 <div className="flex justify-between text-xs bg-[var(--bg-sunken)]/50 rounded px-2 py-1">
                   <span style={{ color: 'var(--text-secondary)' }}>Mana Cascade:</span>
-                  <span style={{ color: 'var(--mana-crystal)' }}>+{fmtDec(upgradeEffects.manaCascadeBonus, 2)}/hr</span>
+                  <span style={{ color: 'var(--mana-crystal)' }}>+{fmtDec(manaCascadeBonus, 2)}/hr</span>
                 </div>
               )}
-              {upgradeEffects.manaWaterfallBonus > 0 && (
+              {manaWaterfallBonus > 0 && (
                 <div className="flex justify-between text-xs bg-[var(--bg-sunken)]/50 rounded px-2 py-1">
                   <span style={{ color: 'var(--text-secondary)' }}>Mana Waterfall:</span>
-                  <span style={{ color: 'var(--mana-crystal)' }}>+{fmtDec(upgradeEffects.manaWaterfallBonus, 2)}/hr</span>
+                  <span style={{ color: 'var(--mana-crystal)' }}>+{fmtDec(manaWaterfallBonus, 2)}/hr</span>
                 </div>
               )}
-              {upgradeEffects.hasFlowSurge && (
+              {hasFlowSurge && (
                 <div className="flex justify-between text-xs bg-[var(--bg-sunken)]/50 rounded px-2 py-1">
                   <span style={{ color: 'var(--text-secondary)' }}>Flow Surge:</span>
                   <span style={{ color: 'var(--mana-crystal)' }}>Clicks +100% regen for 1hr</span>
                 </div>
               )}
-              {upgradeEffects.hasManaOverflow && (
+              {hasManaOverflow && (
                 <div className="flex justify-between text-xs bg-[var(--bg-sunken)]/50 rounded px-2 py-1">
                   <span style={{ color: 'var(--text-secondary)' }}>Mana Overflow:</span>
                   <span style={{ color: 'var(--mana-crystal)' }}>Raw can exceed max by 20%</span>
                 </div>
               )}
-              {upgradeEffects.hasEternalFlow && (
+              {hasEternalFlow && (
                 <div className="flex justify-between text-xs bg-[var(--bg-sunken)]/50 rounded px-2 py-1">
                   <span style={{ color: 'var(--text-secondary)' }}>Eternal Flow:</span>
                   <span style={{ color: 'var(--color-success)' }}>Regen immune to ALL penalties</span>
                 </div>
               )}
-              {upgradeEffects.hasManaTorrent && upgradeEffects.rawMana > maxMana * 0.75 && (
+              {hasManaTorrent && rawMana > maxMana * 0.75 && (
                 <div className="flex justify-between text-xs bg-[var(--bg-sunken)]/50 rounded px-2 py-1">
                   <span style={{ color: 'var(--text-secondary)' }}>Mana Torrent:</span>
                   <span style={{ color: 'var(--mana-crystal)' }}>+50% regen (high mana)</span>
                 </div>
               )}
-              {upgradeEffects.hasDesperateWells && upgradeEffects.rawMana < maxMana * 0.25 && (
+              {hasDesperateWells && rawMana < maxMana * 0.25 && (
                 <div className="flex justify-between text-xs bg-[var(--bg-sunken)]/50 rounded px-2 py-1">
                   <span style={{ color: 'var(--text-secondary)' }}>Desperate Wells:</span>
                   <span style={{ color: 'var(--mana-crystal)' }}>+50% regen (low mana)</span>