SusWallet

Currency strip for a lobby or shop header — label/value items, a dash for an unknown balance, a pulse on a changed one.

Package

SusGame · Molecules (commercial)

Open in Playground

SusGame · Molecules

Props

Name	Type	Default
Icon	Prop<string>	""
EmptyValue	Prop<string>	"—"

Slots

No slots.

Events

No public events.

Style hooks

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

• sus-hidden
• sus-wallet
• sus-wallet__icon
• sus-wallet__item
• sus-wallet__item--empty
• sus-wallet__item--first
• sus-wallet__item-icon
• sus-wallet__item-label
• sus-wallet__item-value
• sus-wallet__item-value--flash

SusWallet

Currency strip for a lobby or shop header — label/value items, a dash for an unknown balance, a pulse on a changed one.

Usage

SusWallet shows a row of currency items. You pass the list with SetEntries. Each item has an optional icon, a label and a value. The value is a string that you format yourself, for example "12 400", so the component never decides number formatting or locale.

var wallet = new SusWallet();
wallet.Icon.Value = "coins";            // optional wallet-level icon
wallet.SetEntries(new List<SusWallet.SusWalletEntry>
{
    SusWallet.SusWalletEntry.Of("gold", "Gold", "12 400", "coin"),
    SusWallet.SusWalletEntry.Of("gems", "Gems", "35", "diamond"),
    // Balance not loaded yet: the item renders empty and shows EmptyValue.
    new SusWallet.SusWalletEntry { Code = "tokens", Label = "Tokens", Available = false },
});

// After a balance change: replace the entries, then pulse the changed value.
wallet.FlashValue("gold");

<template>
  <sus:SusWallet :Icon="WalletIcon.Value" :EmptyValue="Dash.Value" />
</template>

<script>
public Prop<string> WalletIcon = new("coins");
public Prop<string> Dash = new("—");
</script>

In a lobby you usually do not create the wallet yourself. SusLobbyScreenContent has one in its header: call lobby.SetWallet(entries), and it stays hidden until the list has at least one entry.

Prop / API	Role
Icon	Wallet-level icon key before the items (sus-wallet__icon); empty (default) → hidden
EmptyValue	Text shown as the value of an empty item (default "—")
SetEntries(entries)	Replaces the items, in display order; null or empty clears them
Entries	Entries from the last SetEntries call (read-only)
FlashValue(code)	Adds sus-wallet__item-value--flash to that item's value for ValueFlashMs (600 ms); unknown code does nothing
WalletIcon	The SusIcon behind Icon, for host wiring

Entries

SusWallet.SusWalletEntry is a plain struct:

Field	Meaning
Code	Stable currency id ("gold") — the key for FlashValue
Label	Caption before the value; empty falls back to Code
Value	Balance text, already formatted; empty renders the item as empty
IconKey	Optional icon for this currency (sus-wallet__item-icon)
Available	false = balance unknown or still loading: the item gets sus-wallet__item--empty and shows EmptyValue

Available defaults to false, as every bool field of a struct does. Build entries with SusWalletEntry.Of(...), which sets it to true, or set it yourself. An entry created with new SusWalletEntry { ... } and no Available = true renders as empty.

Skin hooks

Class	On
sus-wallet	Root row; with no entries and no icon it has zero size
sus-wallet__icon	Wallet-level icon
sus-wallet__item	One currency item (row); sus-wallet__item--first on the first one
sus-wallet__item-icon	Item icon
sus-wallet__item-label	Item caption
sus-wallet__item-value	Item value
sus-wallet__item--empty	Item whose balance is unknown or blank
sus-wallet__item-value--flash	Value during a FlashValue pulse

The flash is a class, not a transition. The package colors a flashing value with the signal token and removes the class on a timer. A skin can restyle the class or add its own USS transition. Colors and sizes come from the --sk-* tokens, so the strip follows your theme.

Notes

• Replacing the entries rebuilds the items and cancels any pulse in progress.
• The item order on screen is the order of the list you pass.