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
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 1m21s
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user