feat: recreate Achievements tab with category sections, progress tracking, and hidden achievement logic

2026-05-19 14:44:27 +02:00
parent 50a9a62060
commit 639d396f80
15 changed files with 1396 additions and 4 deletions
@@ -0,0 +1,81 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Bug, Wand2 } from 'lucide-react';
+import { useCombatStore } from '@/lib/game/stores';
+import { GOLEMS_DEF } from '@/lib/game/data/golems';
+
+export function GolemDebugSection() {
+  const golemancy = useCombatStore((s) => s.golemancy);
+  const setEnabledGolems = useCombatStore((s) => s.setEnabledGolems);
+
+  const enabledGolems = golemancy?.enabledGolems || [];
+
+  const handleEnableAll = () => {
+    setEnabledGolems(Object.keys(GOLEMS_DEF));
+  };
+
+  const handleDisableAll = () => {
+    setEnabledGolems([]);
+  };
+
+  const handleToggleGolem = (golemId: string) => {
+    if (enabledGolems.includes(golemId)) {
+      setEnabledGolems(enabledGolems.filter(id => id !== golemId));
+    } else {
+      setEnabledGolems([...enabledGolems, golemId]);
+    }
+  };
+
+  return (
+    <Card className="bg-gray-900/80 border-gray-700">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-orange-400 text-sm flex items-center gap-2">
+          <Bug className="w-4 h-4" />
+          Golem Debug
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <div className="flex gap-2 flex-wrap">
+          <Button size="sm" variant="outline" onClick={handleEnableAll}>
+            <Wand2 className="w-3 h-3 mr-1" /> Enable All Golems
+          </Button>
+          <Button size="sm" variant="outline" onClick={handleDisableAll}>
+            Disable All Golems
+          </Button>
+        </div>
+        <div className="text-xs text-gray-400">
+          Enabled: {enabledGolems.length} / {Object.keys(GOLEMS_DEF).length}
+        </div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 max-h-48 overflow-y-auto">
+          {Object.entries(GOLEMS_DEF).map(([id, def]) => {
+            const isEnabled = enabledGolems.includes(id);
+            return (
+              <div
+                key={id}
+                className={`p-2 rounded border flex items-center justify-between ${
+                  isEnabled ? 'border-orange-600/50 bg-orange-900/20' : 'border-gray-700'
+                }`}
+              >
+                <div>
+                  <div className="text-sm font-medium">{def.name}</div>
+                  <div className="text-xs text-gray-400">{def.element}</div>
+                </div>
+                <Button
+                  size="sm"
+                  variant={isEnabled ? 'default' : 'outline'}
+                  onClick={() => handleToggleGolem(id)}
+                >
+                  {isEnabled ? 'On' : 'Off'}
+                </Button>
+              </div>
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+GolemDebugSection.displayName = "GolemDebugSection";