feat: guardian defensive stats — shield, barrier, health regen + stat label renames
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 1m21s

This commit is contained in:
2026-05-29 18:18:00 +02:00
parent 71c68443c4
commit 7bd28e2085
9 changed files with 196 additions and 76 deletions
@@ -5,7 +5,7 @@ import { ELEMENTS } from '@/lib/game/constants';
import type { GuardianDef, GuardianBoon } from '@/lib/game/types';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Shield, Swords, Clock, Sparkles, Check, Lock, ChevronRight } from 'lucide-react';
import { Shield, Swords, Clock, Sparkles, Check, Lock, ChevronRight, Heart, Hexagon } from 'lucide-react';
import clsx from 'clsx';
import { DebugName } from '@/components/game/debug/debug-context';
@@ -152,20 +152,48 @@ GuardianCard.displayName = 'GuardianCard';
// ─── Guardian Stats ──────────────────────────────────────────────────────────
function GuardianStats({ guardian }: { guardian: GuardianDef }) {
const hasShield = !!(guardian.shield && guardian.shield > 0);
const hasBarrier = !!(guardian.barrier && guardian.barrier > 0);
const hasHealthRegen = !!(guardian.healthRegen && guardian.healthRegen > 0);
return (
<div className="grid grid-cols-3 gap-2 text-xs">
<div className="flex items-center gap-1 text-gray-400">
<Shield className="w-3 h-3" />
<span>HP: {guardian.hp.toLocaleString()}</span>
</div>
<div className="flex items-center gap-1 text-gray-400">
<Swords className="w-3 h-3" />
<span>PWR: {guardian.power.toLocaleString()}</span>
</div>
<div className="flex items-center gap-1 text-gray-400">
<Shield className="w-3 h-3" />
<span>ARM: {Math.round((guardian.armor ?? 0) * 100)}%</span>
<div className="space-y-1.5">
<div className="grid grid-cols-3 gap-2 text-xs">
<div className="flex items-center gap-1 text-gray-400">
<Shield className="w-3 h-3" />
<span>Health: {guardian.hp.toLocaleString()}</span>
</div>
<div className="flex items-center gap-1 text-gray-400">
<Swords className="w-3 h-3" />
<span>Power: {guardian.power.toLocaleString()}</span>
</div>
<div className="flex items-center gap-1 text-gray-400">
<Shield className="w-3 h-3" />
<span>Armor: {Math.round((guardian.armor ?? 0) * 100)}%</span>
</div>
</div>
{(hasShield || hasBarrier || hasHealthRegen) && (
<div className="grid grid-cols-3 gap-2 text-xs border-t border-gray-700/40 pt-1.5">
{hasShield && (
<div className="flex items-center gap-1 text-cyan-400">
<Hexagon className="w-3 h-3" />
<span>Shield: {guardian.shield!.toLocaleString()}</span>
</div>
)}
{hasBarrier && (
<div className="flex items-center gap-1 text-blue-400">
<Shield className="w-3 h-3" />
<span>Barrier: {Math.round(guardian.barrier! * 100)}%</span>
</div>
)}
{hasHealthRegen && (
<div className="flex items-center gap-1 text-green-400">
<Heart className="w-3 h-3" />
<span>Regen: {guardian.healthRegenIsPercent ? guardian.healthRegen + '%/tick' : guardian.healthRegen + '/tick'}</span>
</div>
)}
</div>
)}
</div>
);
}