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,87 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { ATTUNEMENTS_DEF } from '@/lib/game/data/attunements';
+import { Sparkles, Unlock } from 'lucide-react';
+import type { GameStore } from '@/lib/game/types';
+
+interface AttunementDebugProps {
+  store: GameStore;
+}
+
+export function AttunementDebug({ store }: AttunementDebugProps) {
+  const handleUnlockAttunement = (id: string) => {
+    // Debug action to unlock attunements
+    if (store.debugUnlockAttunement) {
+      store.debugUnlockAttunement(id);
+    }
+  };
+  
+  const handleAddAttunementXP = (id: string, amount: number) => {
+    if (store.debugAddAttunementXP) {
+      store.debugAddAttunementXP(id, amount);
+    }
+  };
+
+  return (
+    <Card className="bg-gray-900/80 border-gray-700">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-purple-400 text-sm flex items-center gap-2">
+          <Sparkles className="w-4 h-4" />
+          Attunements
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {Object.entries(ATTUNEMENTS_DEF).map(([id, def]) => {
+          const isActive = store.attunements?.[id]?.active;
+          const level = store.attunements?.[id]?.level || 1;
+          const xp = store.attunements?.[id]?.experience || 0;
+          
+          return (
+            <div key={id} className="flex items-center justify-between p-2 bg-gray-800/50 rounded">
+              <div className="flex items-center gap-2">
+                <span>{def.icon}</span>
+                <div>
+                  <div className="text-sm font-medium">{def.name}</div>
+                  {isActive && (
+                    <div className="text-xs text-gray-400">Lv.{level} • {xp} XP</div>
+                  )}
+                </div>
+              </div>
+              <div className="flex gap-1">
+                {!isActive && (
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => handleUnlockAttunement(id)}
+                  >
+                    <Unlock className="w-3 h-3" />
+                  </Button>
+                )}
+                {isActive && (
+                  <>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => handleAddAttunementXP(id, 50)}
+                    >
+                      +50 XP
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => handleAddAttunementXP(id, 500)}
+                    >
+                      +500 XP
+                    </Button>
+                  </>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </CardContent>
+    </Card>
+  );
+}