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
@@ -6,6 +6,7 @@ import { BookOpen, Plus, Pause, Play } from 'lucide-react';
import { useDisciplineStore } from '@/lib/game/stores/discipline-slice';
import { ALL_DISCIPLINES } from '@/lib/game/data/disciplines';
import { useManaStore } from '@/lib/game/stores/manaStore';
import { DebugName } from '@/components/game/debug/debug-context';
export function DisciplineDebugSection() {
const disciplines = useDisciplineStore((s) => s.disciplines);
@@ -55,81 +56,83 @@ export function DisciplineDebugSection() {
};
return (
<Card className="bg-gray-900/80 border-gray-700">
<CardHeader className="pb-2">
<CardTitle className="text-indigo-400 text-sm flex items-center gap-2">
<BookOpen className="w-4 h-4" />
Disciplines
</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<div className="flex gap-2 flex-wrap mb-2">
<Button size="sm" variant="outline" onClick={handleActivateAll}>
<Play className="w-3 h-3 mr-1" /> Activate All
</Button>
<Button size="sm" variant="outline" onClick={handleDeactivateAll}>
<Pause className="w-3 h-3 mr-1" /> Deactivate All
</Button>
</div>
<div className="text-xs text-gray-400">
Active: {activeIds.length} / {concurrentLimit}
</div>
<div className="space-y-2 max-h-64 overflow-y-auto">
{ALL_DISCIPLINES.map((def) => {
const disc = disciplines[def.id];
const isActive = activeIds.includes(def.id);
const xp = disc?.xp || 0;
<DebugName name="DisciplineDebugSection">
<Card className="bg-gray-900/80 border-gray-700">
<CardHeader className="pb-2">
<CardTitle className="text-indigo-400 text-sm flex items-center gap-2">
<BookOpen className="w-4 h-4" />
Disciplines
</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<div className="flex gap-2 flex-wrap mb-2">
<Button size="sm" variant="outline" onClick={handleActivateAll}>
<Play className="w-3 h-3 mr-1" /> Activate All
</Button>
<Button size="sm" variant="outline" onClick={handleDeactivateAll}>
<Pause className="w-3 h-3 mr-1" /> Deactivate All
</Button>
</div>
<div className="text-xs text-gray-400">
Active: {activeIds.length} / {concurrentLimit}
</div>
<div className="space-y-2 max-h-64 overflow-y-auto">
{ALL_DISCIPLINES.map((def) => {
const disc = disciplines[def.id];
const isActive = activeIds.includes(def.id);
const xp = disc?.xp || 0;
return (
<div
key={def.id}
className="flex items-center justify-between p-2 bg-gray-800/50 rounded"
>
<div>
<div className="text-sm font-medium">{def.name}</div>
<div className="text-xs text-gray-400">
{isActive ? `XP: ${xp}` : 'Inactive'}
return (
<div
key={def.id}
className="flex items-center justify-between p-2 bg-gray-800/50 rounded"
>
<div>
<div className="text-sm font-medium">{def.name}</div>
<div className="text-xs text-gray-400">
{isActive ? `XP: ${xp}` : 'Inactive'}
</div>
</div>
<div className="flex gap-1">
<Button
size="sm"
variant="outline"
onClick={() => handleAddXP(def.id, 100)}
>
<Plus className="w-3 h-3 mr-1" /> +100
</Button>
<Button
size="sm"
variant="outline"
onClick={() => handleAddXP(def.id, 1000)}
>
+1K
</Button>
<Button
size="sm"
variant={isActive ? 'default' : 'outline'}
onClick={() => {
if (isActive) {
deactivate(def.id);
} else {
activate(def.id, { elements });
}
}}
>
{isActive ? (
<Pause className="w-3 h-3" />
) : (
<Play className="w-3 h-3" />
)}
</Button>
</div>
</div>
<div className="flex gap-1">
<Button
size="sm"
variant="outline"
onClick={() => handleAddXP(def.id, 100)}
>
<Plus className="w-3 h-3 mr-1" /> +100
</Button>
<Button
size="sm"
variant="outline"
onClick={() => handleAddXP(def.id, 1000)}
>
+1K
</Button>
<Button
size="sm"
variant={isActive ? 'default' : 'outline'}
onClick={() => {
if (isActive) {
deactivate(def.id);
} else {
activate(def.id, { elements });
}
}}
>
{isActive ? (
<Pause className="w-3 h-3" />
) : (
<Play className="w-3 h-3" />
)}
</Button>
</div>
</div>
);
})}
</div>
</CardContent>
</Card>
);
})}
</div>
</CardContent>
</Card>
</DebugName>
);
}