Phase 3: Split DebugTab.tsx into functional components

2026-04-24 14:12:52 +02:00
parent 23d0a129c1
commit d6b85d6367
11 changed files with 924 additions and 861 deletions
@@ -0,0 +1,88 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { ELEMENTS } from '@/lib/game/constants';
+import { Star, Lock } from 'lucide-react';
+import type { GameStore } from '@/lib/game/types';
+
+interface ElementDebugProps {
+  store: GameStore;
+}
+
+export function ElementDebug({ store }: ElementDebugProps) {
+  const handleUnlockElement = (element: string) => {
+    store.unlockElement(element);
+  };
+  
+  const handleAddElementalMana = (element: string, amount: number) => {
+    const elem = store.elements[element];
+    if (elem?.unlocked) {
+      // Add directly to element pool - need to implement in store
+      if (store.debugAddElementalMana) {
+        store.debugAddElementalMana(element, amount);
+      }
+    }
+  };
+
+  return (
+    <Card className="bg-gray-900/80 border-gray-700 md:col-span-2">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-green-400 text-sm flex items-center gap-2">
+          <Star className="w-4 h-4" />
+          Elemental Mana
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
+          {Object.entries(ELEMENTS).map(([id, def]) => {
+            const elem = store.elements[id];
+            const isUnlocked = elem?.unlocked;
+            
+            return (
+              <div
+                key={id}
+                className={`p-2 rounded border ${
+                  isUnlocked ? 'border-gray-600' : 'border-gray-800 opacity-60'
+                }`}
+                style={{ 
+                  borderColor: isUnlocked ? def.color : undefined 
+                }}
+              >
+                <div className="flex items-center justify-between mb-1">
+                  <span style={{ color: def.color }}>{def.sym}</span>
+                  {!isUnlocked && (
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      className="h-5 w-5 p-0"
+                      onClick={() => handleUnlockElement(id)}
+                    >
+                      <Lock className="w-3 h-3" />
+                    </Button>
+                  )}
+                </div>
+                <div className="text-xs" style={{ color: def.color }}>{def.name}</div>
+                {isUnlocked && (
+                  <div className="text-xs text-gray-400 mt-1">
+                    {elem.current.toFixed(0)}/{elem.max}
+                  </div>
+                )}
+                {isUnlocked && (
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    className="h-5 w-full mt-1 text-xs"
+                    onClick={() => handleAddElementalMana(id, 100)}
+                  >
+                    +100
+                  </Button>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}