Refactor large files into modular components

- Refactored page.tsx (613→252 lines) with GameOverScreen and LeftPanel extracted - Refactored StatsTab.tsx (584→92 lines) with section components - Refactored SkillsTab.tsx (434→54 lines) with sub-components - Created modular structure for GameContext, LootInventory, and other components - All extracted components organized into feature directories
2026-05-02 17:35:03 +02:00
parent c9ae2576f4
commit d2d28887b1
194 changed files with 16862 additions and 15729 deletions
@@ -0,0 +1,77 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { FlaskConical } from 'lucide-react';
+import { ELEMENTS } from '@/lib/game/constants';
+import { getTierMultiplier } from '@/lib/game/skill-evolution';
+import { fmt, fmtDec } from '@/lib/game/store';
+
+interface ElementStatsSectionProps {
+  store: any;
+  elemMax: number;
+}
+
+export function ElementStatsSection({ store, elemMax }: ElementStatsSectionProps) {
+  const getElemAttunementBonus = () => {
+    const ea = store.skillTiers?.elemAttune || 1;
+    const tieredSkillId = ea > 1 ? `elemAttune_t${ea}` : 'elemAttune';
+    const level = store.skills[tieredSkillId] || store.skills.elemAttune || 0;
+    const tierMult = getTierMultiplier(tieredSkillId);
+    return level * 50 * tierMult;
+  };
+
+  return (
+    <Card className="bg-gray-900/80 border-gray-700">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-green-400 game-panel-title text-xs flex items-center gap-2">
+          <FlaskConical className="w-4 h-4" />
+          Element Stats
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Element Capacity:</span>
+              <span className="text-green-300">{elemMax}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Elem. Attunement Bonus:</span>
+              <span className="text-green-300">+{getElemAttunementBonus()}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Prestige Attunement:</span>
+              <span className="text-green-300">+{(store.prestigeUpgrades.elementalAttune || 0) * 25}</span>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Unlocked Elements:</span>
+              <span className="text-green-300">{Object.values(store.elements).filter((e: any) => e.unlocked).length} / {Object.keys(ELEMENTS).length}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Elem. Crafting Bonus:</span>
+              <span className="text-green-300">×{fmtDec(1 + (store.skills.elemCrafting || 0) * 0.25, 2)}</span>
+            </div>
+          </div>
+        </div>
+        <Separator className="bg-gray-700 my-3" />
+        <div className="text-xs text-gray-400 mb-2">Elemental Mana Pools:</div>
+        <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-2">
+          {Object.entries(store.elements)
+            .filter(([, state]: [string, any]) => state.unlocked)
+            .map(([id, state]: [string, any]) => {
+              const def = ELEMENTS[id];
+              return (
+                <div key={id} className="p-2 rounded border border-gray-700 bg-gray-800/50 text-center">
+                  <div className="text-lg">{def?.sym}</div>
+                  <div className="text-xs text-gray-400">{state.current}/{state.max}</div>
+                </div>
+              );
+            })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}