SusHudUnitCard

Tactical unit portrait — image or icon fallback, name / rank overlay, status-effect row; click selects.

Package

SusGame · HUD (commercial)

SusGame · HUD

Props

Name	Type	Default
`UnitId`	`Prop<string>`	`""`
`UnitName`	`Prop<string>`	`""`
`Rank`	`Prop<string>`	`""`
`ImageSrc`	`Prop<string>`	`""`
`Icon`	`Prop<string>`	`""`
`Active`	`Prop<bool>`	`false`
`Ally`	`Prop<bool>`	`true`
`Hp`	`Prop<float>`	`0f`
`MaxHp`	`Prop<float>`	`0f`

Slots

No slots.

Events

Name	Field	Payload
`Selected`	`OnSelected`	`SusHudUnitCard`

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

breakpoint-sm
sus-hud-unit-card
sus-hud-unit-card__effects
sus-hud-unit-card__fallback
sus-hud-unit-card__img
sus-hud-unit-card__name
sus-hud-unit-card__overlay
sus-hud-unit-card__portrait
sus-hud-unit-card__rank
sus-hud-unit-card--active
sus-hud-unit-card--ally
sus-hud-unit-card--enemy

Usage

Drive from props, or fill with ApplyData / SetEffects (rail uses the data path).

csharp

var card = new SusHudUnitCard();
card.ApplyData(new SusHudUnitCardData
{
    Id = "u1",
    Name = "Mara",
    Rank = "Sergeant",
    ImageSrc = "portraits/mara",
    Icon = "",
    Active = true,
    Ally = true,
    Hp = 42f,
    MaxHp = 50f,
    Effects = new List<SusStatusEffectData>
    {
        new() { Id = "regen", Icon = "heart", Title = "Regen", Stacks = 2, TurnsLeft = 3 },
    },
});
card.OnSelected += c => { /* focus unit */ };

xml

<template>
  <sus:SusHudUnitCard :UnitId="Id.Value"
                      :UnitName="Name.Value"
                      :Rank="Rank.Value"
                      :ImageSrc="Img.Value"
                      :Icon="Icon.Value"
                      :Active="Active.Value"
                      :Ally="Ally.Value"
                      :Hp="Hp.Value"
                      :MaxHp="MaxHp.Value"
                      @selected="OnSelected" />
</template>

<script>
public Prop<string> Id = new("u1");
public Prop<string> Name = new("Mara");
public Prop<string> Rank = new("Sergeant");
public Prop<string> Img = new("portraits/mara");
public Prop<string> Icon = new("");
public Prop<bool> Active = new(true);
public Prop<bool> Ally = new(true);
public Prop<float> Hp = new(42f);
public Prop<float> MaxHp = new(50f);
void OnSelected(SusHudUnitCard card) { /* … */ }
// Prefer ApplyData + SetEffects when syncing from combat state.
</script>

Prop / API	Role
`UnitId`	Stable id (rail reconcile key)
`UnitName` · `Rank`	Overlay labels
`ImageSrc`	Portrait catalog key (`SusGameMedia`)
`Icon`	Fallback icon key when image empty
`Active`	Enlarged `--active` chrome; effect size `normal` vs `mini`
`Ally`	Ally / enemy border classes
`Hp` · `MaxHp`	Tooltip only (`MaxHp ≤ 0` hides HP line)
`ApplyData(SusHudUnitCardData)`	Full sync + effects
`SetEffects` / `ClearEffects`	Status row (`SusStatusEffect`)
`OnSelected`	Payload = this card

Notes

No Phosphor skull/user placeholders — only catalog ImageSrc / Icon keys.
Prefer hosting via SusHudUnitRail for ally/enemy lists.
Related molecule SusUnitCard is a different component (roster / shop), not this HUD card.

SusHudUnitCard ​