Phase 3: Extract sub-components from StatsTab.tsx

2026-04-24 14:45:07 +02:00
parent eea5ed1585
commit 7d1bfbe4dc
7 changed files with 480 additions and 355 deletions
@@ -0,0 +1,82 @@
+'use client';
+
+import { SKILL_EVOLUTION_PATHS, getTierMultiplier } from '@/lib/game/skill-evolution';
+import { SKILLS_DEF } from '@/lib/game/constants';
+import type { GameStore, SkillUpgradeChoice } from '@/lib/game/types';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Star } from 'lucide-react';
+
+export interface UpgradeEffectsSectionProps {
+  store: GameStore;
+}
+
+// Helper function to get all selected skill upgrades
+function getAllSelectedUpgrades(store: GameStore) {
+  const upgrades: { skillId: string; upgrade: SkillUpgradeChoice }[] = [];
+  for (const [skillId, selectedIds] of Object.entries(store.skillUpgrades)) {
+    const baseSkillId = skillId.includes('_t') ? skillId.split('_t')[0] : skillId;
+    const path = SKILL_EVOLUTION_PATHS[baseSkillId];
+    if (!path) continue;
+    for (const tier of path.tiers) {
+      if (tier.skillId === skillId) {
+        for (const upgradeId of selectedIds) {
+          const upgrade = tier.upgrades.find(u => u.id === upgradeId);
+          if (upgrade) {
+            upgrades.push({ skillId, upgrade });
+          }
+        }
+      }
+    }
+  }
+  return upgrades;
+}
+
+export function UpgradeEffectsSection({ store }: UpgradeEffectsSectionProps) {
+  const selectedUpgrades = getAllSelectedUpgrades(store);
+
+  return (
+    <Card className="bg-gray-900/80 border-gray-700">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-amber-400 game-panel-title text-xs flex items-center gap-2">
+          <Star className="w-4 h-4" />
+          Active Skill Upgrades ({selectedUpgrades.length})
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {selectedUpgrades.length === 0 ? (
+          <div className="text-gray-500 text-sm">No skill upgrades selected yet. Level skills to 5 or 10 to choose upgrades.</div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+            {selectedUpgrades.map(({ skillId, upgrade }) => (
+              <div key={upgrade.id} className="p-2 rounded border border-amber-600/30 bg-amber-900/10">
+                <div className="flex items-center justify-between">
+                  <span className="text-amber-300 text-sm font-semibold">{upgrade.name}</span>
+                  <Badge variant="outline" className="text-xs text-gray-400">
+                    {SKILLS_DEF[skillId]?.name || skillId}
+                  </Badge>
+                </div>
+                <div className="text-xs text-gray-400 mt-1">{upgrade.desc}</div>
+                {upgrade.effect.type === 'multiplier' && (
+                  <div className="text-xs text-green-400 mt-1">
+                    +{Math.round((upgrade.effect.value! - 1) * 100)}% {upgrade.effect.stat}
+                  </div>
+                )}
+                {upgrade.effect.type === 'bonus' && (
+                  <div className="text-xs text-blue-400 mt-1">
+                    +{upgrade.effect.value} {upgrade.effect.stat}
+                  </div>
+                )}
+                {upgrade.effect.type === 'special' && (
+                  <div className="text-xs text-cyan-400 mt-1">
+                    ⚡ {upgrade.effect.specialDesc || 'Special effect active'}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}