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 { Bug, Wand2 } from 'lucide-react';
import { useCombatStore } from '@/lib/game/stores';
import { GOLEMS_DEF } from '@/lib/game/data/golems';
import { DebugName } from '@/components/game/debug/debug-context';
export function GolemDebugSection() {
const golemancy = useCombatStore((s) => s.golemancy);
@@ -29,52 +30,54 @@ export function GolemDebugSection() {
};
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.baseManaType}</div>
</div>
<Button
size="sm"
variant={isEnabled ? 'default' : 'outline'}
onClick={() => handleToggleGolem(id)}
<DebugName name="GolemDebugSection">
<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'
}`}
>
{isEnabled ? 'On' : 'Off'}
</Button>
</div>
);
})}
</div>
</CardContent>
</Card>
<div>
<div className="text-sm font-medium">{def.name}</div>
<div className="text-xs text-gray-400">{def.baseManaType}</div>
</div>
<Button
size="sm"
variant={isEnabled ? 'default' : 'outline'}
onClick={() => handleToggleGolem(id)}
>
{isEnabled ? 'On' : 'Off'}
</Button>
</div>
);
})}
</div>
</CardContent>
</Card>
</DebugName>
);
}