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
+17 -2
View File
@@ -180,12 +180,27 @@ function NextGuardianCard({ nextGuardian, nextGuardianData }: { nextGuardian: nu
>
{nextGuardianData.element.join(' + ')}
</Badge>
<span className="text-xs text-gray-500">HP: {fmt(nextGuardianData.hp)}</span>
<span className="text-xs text-gray-500">Health: {fmt(nextGuardianData.hp)}</span>
{nextGuardianData.armor && (
<span className="text-xs text-gray-500">
Armor: {Math.round(nextGuardianData.armor * 100)}%
</span>
)}
{nextGuardianData.shield && nextGuardianData.shield > 0 && (
<span className="text-xs text-cyan-400">
Shield: {fmt(nextGuardianData.shield)}
</span>
)}
{nextGuardianData.barrier && nextGuardianData.barrier > 0 && (
<span className="text-xs text-blue-400">
Barrier: {Math.round(nextGuardianData.barrier * 100)}%
</span>
)}
{nextGuardianData.healthRegen && nextGuardianData.healthRegen > 0 && (
<span className="text-xs text-green-400">
Regen: {nextGuardianData.healthRegenIsPercent ? nextGuardianData.healthRegen + '%/tick' : nextGuardianData.healthRegen + '/tick'}
</span>
)}
</div>
</div>
</div>
@@ -289,7 +304,7 @@ function GuardianRosterItem({ floor, guardian, isDefeated }: { floor: number; gu
>
{guardian.element.join(' + ')}
</span>
<span className="text-[10px] text-gray-500">HP: {fmt(guardian.hp)}</span>
<span className="text-[10px] text-gray-500">Health: {fmt(guardian.hp)}</span>
</div>
</div>
</div>
@@ -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>
);
}