SusLobbyScreenContent

Оболочка хаба / лобби — back, title chip, tabs, empty alert, хост child-view, footer Ready + Vs AI.

Пакет

SusGame · Экраны (коммерческий)

Открыть в песочнице

SusGame · Screens

Свойства

Имя	Тип	По умолчанию
Title	Prop<string>	"Hub"
TitleStyle	Prop<string>	"chip"
Crumbs	Prop<List<string>>	[]
EmptyText	Prop<string>	"No data"
CanAct	Prop<bool>	false
HasData	Prop<bool>	false
ActionLabel	Prop<string>	"Ready"
SoloActionLabel	Prop<string>	"Vs AI"
IsReady	Prop<bool>	false
StatusKicker	Prop<string>	""
StatusIsError	Prop<bool>	false
StatusLink	Prop<string>	""
BlockReason	Prop<string>	""

Слоты

Слотов нет.

События

Имя	Поле	Payload
StatusLinkClicked	OnStatusLinkClicked	—

Хуки стиля

Контракт USS-классов — внешний вид переопределяется без правки C#. Состояния переключаются этими классами:

• sc-lobby-footer
• sc-lobby-header
• sus-hidden
• sus-lobby-screen
• sus-lobby-screen__action
• sus-lobby-screen__action-flash
• sus-lobby-screen__action-line
• sus-lobby-screen__action-sweep
• sus-lobby-screen__back-btn
• sus-lobby-screen__block-reason
• sus-lobby-screen__child-view
• sus-lobby-screen__content
• sus-lobby-screen__crumbs
• sus-lobby-screen__empty-text
• sus-lobby-screen__footer-center
• sus-lobby-screen__footer-end
• sus-lobby-screen__footer-end-host
• sus-lobby-screen__footer-start
• sus-lobby-screen__footer-start-host
• sus-lobby-screen__mark
• sus-lobby-screen__row
• sus-lobby-screen__row-icon
• sus-lobby-screen__row-label
• sus-lobby-screen__row-value
• sus-lobby-screen__row-value--flash
• sus-lobby-screen__rows
• sus-lobby-screen__section
• sus-lobby-screen__section-aside
• sus-lobby-screen__section-body
• sus-lobby-screen__section-dim
• sus-lobby-screen__section-dim--auto
• sus-lobby-screen__section-dim--on
• sus-lobby-screen__section-foot
• sus-lobby-screen__section-main
• sus-lobby-screen__solo-action-btn
• sus-lobby-screen__status
• sus-lobby-screen__status-body
• sus-lobby-screen__status-kicker
• sus-lobby-screen__status-link
• sus-lobby-screen__status-text
• sus-lobby-screen__tabs
• sus-lobby-screen__title
• sus-lobby-screen__title-text
• sus-lobby-screen__title-wrap
• sus-lobby-screen__wallet
• sus-lobby-screen--limbo
• sus-lobby-screen--title-text

Использование

Привяжите пропы chrome; заполните Tabs / ChildViewHost со стороны хоста или дочерних view. Управляйте footer через CanAct.

<template>
  <sus:SusLobbyScreenContent
    :Title="Title.Value"
    :EmptyText="Empty.Value"
    :CanAct="Ready.Value"
    :ActionLabel="Act.Value"
    :SoloActionLabel="Solo.Value"
  />
</template>

<script>
public Prop<string> Title = new("Hub");
public Prop<string> Empty = new("No data");
public Prop<bool> Ready = new(false);
public Prop<string> Act = new("Ready");
public Prop<string> Solo = new("Vs AI");
</script>

var lobby = new SusLobbyScreenContent();
lobby.Title.Value = "Multiplayer";
lobby.EmptyText.Value = "No parties";
lobby.CanAct.Value = true;
lobby.ActionLabel.Value = "Ready";
lobby.SoloActionLabel.Value = "Vs AI";
// After mount:
lobby.Tabs.Items.Value = new List<SusTabs.TabItem> {
  new() { Title = "Parties", Value = "parties" },
  new() { Title = "Friends", Value = "friends" },
};
lobby.ChildViewHost.Add(myListView);
lobby.BackBtn.OnClick += () => { /* back */ };
lobby.ActionBtn.OnClick += () => { /* ready */ };
lobby.SoloActionBtn.OnClick += () => { /* vs AI */ };

Prop / API	Роль
Title	Подпись чипа заголовка
EmptyText	Empty-alert; пустая строка → скрыт
CanAct	Включает/отключает обе кнопки footer (Disabled = !CanAct)
ActionLabel / SoloActionLabel	Подписи Ready / Vs AI
HasData	true, когда у лобби есть состав; пустой alert показывается только при HasData = false и непустом EmptyText. SetRows выставляет его сам (true для непустого списка)
TitleStyle	"chip" (по умолчанию) или "text" — см. Шапка
Crumbs	Цепочка хлебных крошек над заголовком; последний элемент = текущая страница; пусто → скрыта
SetWallet(entries) / Wallet	Полоса валют в шапке (SusWallet); скрыта, пока не получит запись
BlockReason	Почему главное действие заблокировано, показывается в конечной зоне подвала; пусто → скрыто
FooterStart / FooterEnd	Пустые хосты-ряды для вашего собственного содержимого подвала, слева и справа от действий
BackBtn / Tabs / EmptyAlert / ActionBtn / SoloActionBtn	Подключение со стороны хоста
ActionWrap	Обёртка вокруг ActionBtn с тремя декор-узлами, по умолчанию выключены
ChildViewHost	Сюда монтируется контент списка/деталей

Всё добавленное выше по умолчанию пусто или скрыто, поэтому лобби, которое это не задаёт, выглядит и измеряется ровно как раньше.

Шапка: стиль заголовка, хлебные крошки, кошелёк

Ряд шапки — кнопка «назад», знак бренда, блок заголовка, вкладки, кошелёк.

• Стиль заголовка. TitleStyle = "chip" показывает заголовок тональным чипом (sus-lobby-screen__title). "text" показывает его обычным заголовком (sus-lobby-screen__title-text). Оба узла существуют всегда, и оба следуют за Title. Единственный переключатель — корневой класс sus-lobby-screen--title-text, так что скин может перестилизовать любой из узлов без кода. Любое другое значение сводится к "chip".
• Хлебные крошки. Crumbs — List<string> в порядке пути. Он питает kit-компонент SusBreadcrumbs (sus-lobby-screen__crumbs, разделитель //), уложенный над заголовком внутри sus-lobby-screen__title-wrap. Kit помечает последний элемент sus-breadcrumbs__item--current. Пустой список скрывает цепочку.
• Кошелёк. SetWallet(entries) заполняет полосу валют (sus-lobby-screen__wallet) после вкладок и показывает её. Null или пустой список снова её скрывает. Чтобы пульсировать значение после изменения баланса, вызовите Wallet.FlashValue(code).

lobby.TitleStyle.Value = "text";
lobby.Crumbs.Value = new List<string> { "Hub", "Squads" };
lobby.SetWallet(new[]
{
    SusWallet.SusWalletEntry.Of("gold", "Gold", "12 400", "coin"),
    SusWallet.SusWalletEntry.Of("gems", "Gems", "35", "diamond"),
});
lobby.Wallet.FlashValue("gold");

SusLobbyScreen (экран роутера) зеркалит это как пропы TitleStyle, Crumbs, BlockReason и Wallet. У него также есть SetWallet(entries) и FlashWalletValue(code).

Подвал: зоны, причина блокировки, декор действия

У подвала (sc-lobby-footer) три зоны:

Зона	Класс	Содержимое
Начало	sus-lobby-screen__footer-start	Хост FooterStart (sus-lobby-screen__footer-start-host)
Центр	sus-lobby-screen__footer-center	ActionWrap (Ready) и SoloActionBtn
Конец	sus-lobby-screen__footer-end	Метка BlockReason (sus-lobby-screen__block-reason), затем хост FooterEnd (sus-lobby-screen__footer-end-host)

Начальная и конечная зоны делят свободную ширину поровну. Центральная зона сохраняет естественный размер, так что действия остаются по центру независимо от того, есть ли содержимое по краям. Добавляйте свои элементы в FooterStart / FooterEnd. Отступы этого содержимого — на вашей стороне: хосты их не добавляют.

BlockReason — обычный текст вроде "Waiting for 2 players". Он не зависит от CanAct: вы решаете, когда причину стоит показать, а пустая строка её скрывает.

lobby.CanAct.Value = false;
lobby.BlockReason.Value = "Waiting for 2 players";
lobby.FooterStart.Add(new Label("Region: EU"));

ActionWrap (sus-lobby-screen__action, position: relative) держит ActionBtn и трёх соседей-декоров, рисуемых поверх него: sus-lobby-screen__action-flash, sus-lobby-screen__action-sweep и sus-lobby-screen__action-line. Они заполняют обёртку, игнорируют picking (клики по-прежнему доходят до кнопки) и по умолчанию имеют display: none. Пакет не поставляет анимаций. Скин включает узел под своим классом:

.my-skin .sus-lobby-screen__action-line {
    display: flex;
    border-bottom-width: 2px;
    border-bottom-color: var(--sk-color-primary);
}

Хуки скина для типовых переопределений

Если ваш скин раньше пересобирал части этого экрана вручную, используйте вместо этого встроенные хуки:

Самодельный обход	Встроенный хук
Скрыть чип заголовка и добавить свою метку заголовка	TitleStyle = "text" → sus-lobby-screen__title-text
Своя колонка заголовка с рядом хлебных крошек	Crumbs → sus-lobby-screen__title-wrap, sus-lobby-screen__crumbs (sus-breadcrumbs__divider, sus-breadcrumbs__item--current)
Боковые колонки, добавленные вокруг действий подвала	sus-lobby-screen__footer-start / __footer-center / __footer-end, хосты FooterStart / FooterEnd
Лишние узлы вокруг кнопки Ready ради эффектов	sus-lobby-screen__action-flash / __action-sweep / __action-line внутри sus-lobby-screen__action
Своя метка «почему нельзя начать»	BlockReason → sus-lobby-screen__block-reason
Свой ряд валют в шапке	SetWallet → классы SusWallet (sus-wallet__item, __item-label, __item-value, __item--empty, __item-value--flash)

Заметки

• USS-модификаторы --limbo есть на root для прозрачных overlay-хабов (класс добавляется со стороны хоста).
• Tabs изначально пустые — хост должен задать Items / Model.
• HasData вместе с EmptyText управляет пустым alert; SetRows переключает его, поэтому вручную вы его задаёте редко.