feat: add DebugName wrappers to 56 components + redesign attunement cards + remove ScrollArea from AttunementsTab
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 1m31s

This commit is contained in:
2026-05-28 15:28:18 +02:00
parent 9671078fea
commit 13c185a216
59 changed files with 781 additions and 539 deletions
@@ -5,6 +5,7 @@ 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';
import { DebugName } from '@/components/game/debug/debug-context';
export function AchievementDebugSection() {
const achievements = useCombatStore((s) => s.achievements);
@@ -33,50 +34,52 @@ export function AchievementDebugSection() {
};
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>
<DebugName name="AchievementDebugSection">
<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="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 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>
{isUnlocked && (
<CheckCircle className="w-3 h-3 text-green-400" />
)}
</div>
);
})}
</div>
</CardContent>
</Card>
);
})}
</div>
</CardContent>
</Card>
</DebugName>
);
}