SusUnitCard

Roster / shop unit summary — portrait, name / type, HP · AP · level, optional badge and actions slot.

Package

SusGame · Molecules (commercial)

SusGame · Molecules

Props

Name	Type	Default
`UnitName`	`Prop<string>`	`""`
`UnitType`	`Prop<string>`	`""`
`Image`	`Prop<string>`	`""`
`Icon`	`Prop<string>`	`""`
`ImageSize`	`Prop<int>`	`160`
`IconSize`	`Prop<int>`	`32`
`Hp`	`Prop<int>`	`100`
`MaxHp`	`Prop<int>`	`100`
`Ap`	`Prop<int>`	`0`
`Level`	`Prop<int>`	`1`
`Selected`	`Prop<bool>`	`false`
`Disabled`	`Prop<bool>`	`false`
`Highlight`	`Prop<bool>`	`false`
`BadgeText`	`Prop<string>`	`""`

Slots

Name
`actions`

Events

Name	Field	Payload
`Clicked`	`OnClicked`	`SusUnitCard`

Style hooks

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

sus-slot
sus-unit-card
sus-unit-card__badge
sus-unit-card__body
sus-unit-card__footer
sus-unit-card__header
sus-unit-card__header-info
sus-unit-card__icon
sus-unit-card__image
sus-unit-card__name
sus-unit-card__stat
sus-unit-card__stat-label
sus-unit-card__stat-value
sus-unit-card__subtitle
sus-unit-card--disabled
sus-unit-card--highlight
sus-unit-card--selected

Usage

Props drive chrome; media via SusGameMedia. Click raises OnClicked unless Disabled.

csharp

var card = new SusUnitCard();
card.UnitName.Value = "Mara";
card.UnitType.Value = "Sergeant";
card.Image.Value = "portraits/mara";
card.Icon.Value = "";
card.Hp.Value = 42;
card.MaxHp.Value = 50;
card.Ap.Value = 4;
card.Level.Value = 3;
card.Selected.Value = true;
card.BadgeText.Value = "Turn";
card.OnClicked += c => { /* select unit */ };
// Optional: card.RefreshMedia();

xml

<template>
  <sus:SusUnitCard :UnitName="Name.Value"
                   :UnitType="Type.Value"
                   :Image="Img.Value"
                   :Icon="Icon.Value"
                   :IconSize="IcoSize.Value"
                   :Hp="Hp.Value"
                   :MaxHp="MaxHp.Value"
                   :Ap="Ap.Value"
                   :Level="Level.Value"
                   :Selected="Sel.Value"
                   :Disabled="Dis.Value"
                   :Highlight="Hi.Value"
                   :BadgeText="Badge.Value"
                   @clicked="OnClicked">
    <!-- slot actions: e.g. SusButton row -->
  </sus:SusUnitCard>
</template>

<script>
public Prop<string> Name = new("Mara");
public Prop<string> Type = new("Sergeant");
public Prop<string> Img = new("portraits/mara");
public Prop<string> Icon = new("");
public Prop<int> IcoSize = new(32);
public Prop<int> Hp = new(42);
public Prop<int> MaxHp = new(50);
public Prop<int> Ap = new(4);
public Prop<int> Level = new(3);
public Prop<bool> Sel = new(true);
public Prop<bool> Dis = new(false);
public Prop<bool> Hi = new(false);
public Prop<string> Badge = new("Turn");
void OnClicked(SusUnitCard card) { /* … */ }
</script>

Prop / API	Role
`UnitName` · `UnitType`	Title + subtitle (`UnitType` → subtitle label)
`Image` · `Icon`	Portrait catalog key / icon fallback (`Image` preferred)
`ImageSize`	Declared (default `160`); portrait chrome is USS 3:4 — paint does not squash via this prop
`IconSize`	Meta icon size (default `32`)
`Hp` · `MaxHp`	HP line as `Hp / MaxHp`
`Ap` · `Level`	Stat row
`Selected` · `Disabled` · `Highlight`	BEM state classes; `Disabled` blocks `OnClicked`
`BadgeText`	Corner badge when non-empty
`actions` slot	Footer actions row
`RefreshMedia()`	Re-apply image/icon after late bind
`OnClicked`	Payload = this card

Notes

Different from SusHudUnitCard (tactical rail / combat chrome).
Related squad tile: SusSquadCard.

SusUnitCard ​