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,83 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Trophy, CheckCircle, RotateCcw } from 'lucide-react';
+import { useCombatStore } from '@/lib/game/stores';
+import { ACHIEVEMENTS } from '@/lib/game/data/achievements';
+
+export function AchievementDebugSection() {
+  const achievements = useCombatStore((s) => s.achievements);
+
+  const unlockedCount = achievements?.unlocked?.length || 0;
+  const totalCount = Object.keys(ACHIEVEMENTS).length;
+
+  const handleUnlockAll = () => {
+    useCombatStore.setState({
+      achievements: {
+        unlocked: Object.keys(ACHIEVEMENTS),
+        progress: Object.fromEntries(
+          Object.keys(ACHIEVEMENTS).map((id) => [id, ACHIEVEMENTS[id].requirement.value])
+        ),
+      },
+    });
+  };
+
+  const handleResetAll = () => {
+    useCombatStore.setState({
+      achievements: {
+        unlocked: [],
+        progress: {},
+      },
+    });
+  };
+
+  return (
+    <Card className="bg-gray-900/80 border-gray-700">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-yellow-400 text-sm flex items-center gap-2">
+          <Trophy className="w-4 h-4" />
+          Achievement Debug
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <div className="text-xs text-gray-400">
+          Unlocked: {unlockedCount} / {totalCount}
+        </div>
+
+        <div className="flex gap-2 flex-wrap">
+          <Button size="sm" variant="outline" onClick={handleUnlockAll}>
+            <CheckCircle className="w-3 h-3 mr-1" /> Unlock All
+          </Button>
+          <Button size="sm" variant="destructive" onClick={handleResetAll}>
+            <RotateCcw className="w-3 h-3 mr-1" /> Reset All
+          </Button>
+        </div>
+
+        <div className="space-y-1 max-h-48 overflow-y-auto">
+          {Object.entries(ACHIEVEMENTS).map(([id, def]) => {
+            const isUnlocked = achievements?.unlocked?.includes(id);
+            return (
+              <div
+                key={id}
+                className={`flex items-center justify-between p-2 rounded text-xs ${
+                  isUnlocked ? 'bg-green-900/20 border border-green-600/50' : 'bg-gray-800/50'
+                }`}
+              >
+                <div>
+                  <span className="font-medium">{def.name}</span>
+                  <span className="text-gray-500 ml-2">({def.category})</span>
+                </div>
+                {isUnlocked && (
+                  <CheckCircle className="w-3 h-3 text-green-400" />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+AchievementDebugSection.displayName = "AchievementDebugSection";