kit
The cabinet's material language - one place decides what a plate, a socket, a lit edge, a scanline and a menu row are.
emberline.ui.kit
The cabinet's material language - one place decides what a plate, a socket, a lit edge, a scanline and a menu row are.
- Type roles:
K.titleK.headingK.subheadK.tinyK.banner, all memoised by text + options so a per-frame re-render does not re-rasterise. - Prose:
K.bodyandK.para(text, width, style)- a wrapping label needs a definite width on its CONTAINER, which is whatK.paraprovides. - Surfaces:
K.plateK.socketK.canvasK.absK.glassK.vignetteK.scrim. - Motion:
K.enterK.popK.blinkK.breatheK.slideIn. - Parts:
K.keycapK.menuRowK.statBar.
Interface
What this asset declares: the schema it conforms to, what it exposes, and the rendered structured payload.
conforms to
zero/source-extract/v2emberline.ui.kit — the cabinet's material language. One place decides what a plate, a bevel, a socket, a lit edge and a scanline are, so the HUD and the nine screens are the same object seen from different angles instead of nine separately-invented looks. Also holds the glyph memo: an SVG string is expensive to rasterise and cheap to reuse, so a piece of display type that does not change (a screen heading, a fighter's name) is built once and handed back by identity.
optKey(text: string, o: any) → string
| arg | type | description |
|---|---|---|
| text | string | |
| o | any |
type(text: string, opts: any, extra: { [string]: any }?) → any
A display-type node, memoised. `extra` merges into the node's style and is NOT part of the cache key, so pass only cheap per-frame style there (opacity, transform, margin) — never a different size.
| arg | type | description |
|---|---|---|
| text | string | |
| opts | any | |
| extra | { [string]: any }? |
measure(text: string, opts: any) → void
| arg | type | description |
|---|---|---|
| text | string | |
| opts | any |
title(text: string, extra: { [string]: any }?) → any
Named type roles, so a screen picks a level in the hierarchy rather than a pixel size. Every heading in the game comes from one of these.
| arg | type | description |
|---|---|---|
| text | string | |
| extra | { [string]: any }? |
heading(text: string, extra: { [string]: any }?) → any
| arg | type | description |
|---|---|---|
| text | string | |
| extra | { [string]: any }? |
subhead(text: string, extra: { [string]: any }?) → any
| arg | type | description |
|---|---|---|
| text | string | |
| extra | { [string]: any }? |
tiny(text: string, color: string?, extra: { [string]: any }?) → any
| arg | type | description |
|---|---|---|
| text | string | |
| color | string? | |
| extra | { [string]: any }? |
banner(text: string, extra: { [string]: any }?) → any
| arg | type | description |
|---|---|---|
| text | string | |
| extra | { [string]: any }? |
body(text: string, style: { [string]: any }?) → any
| arg | type | description |
|---|---|---|
| text | string | |
| style | { [string]: any }? |
para(text: string, width: number, style: { [string]: any }?) → any
A wrapping paragraph. A `label` with `wrap` needs a definite width on its CONTAINER — inside a `alignItems = "center"` column the label hugs its content and collapses to one glyph per line, so every paragraph in the game goes through here and gets its own sized box.
| arg | type | description |
|---|---|---|
| text | string | |
| width | number | |
| style | { [string]: any }? |
mono(text: string, style: { [string]: any }?) → any
| arg | type | description |
|---|---|---|
| text | string | |
| style | { [string]: any }? |
plate(children: { any }, style: { [string]: any }?) → any
The pressed metal plate every panel in the game is made of: a lightness step above what is behind it, a lit top edge, a dark under-edge, and a hard ink outline. On a near-black cabinet the step and the lit edge do the work; the drop shadow only supports them.
| arg | type | description |
|---|---|---|
| children | { any } | |
| style | { [string]: any }? |
socket(children: { any }, style: { [string]: any }?) → any
The recess a gauge sits in: darker than everything, with the light coming from inside the frame rather than off it.
| arg | type | description |
|---|---|---|
| children | { any } | |
| style | { [string]: any }? |
abs(left: number, top: number, extra: { [string]: any }?) → void
Absolute placement, the way the HUD composes: everything sits at a known point on the 1280x720 canvas rather than flowing.
| arg | type | description |
|---|---|---|
| left | number | |
| top | number | |
| extra | { [string]: any }? |
canvas(children: { any }, extra: { [string]: any }?) → any
A full-canvas transparent root that absolute children pin against.
| arg | type | description |
|---|---|---|
| children | { any } | |
| extra | { [string]: any }? |
glass(opacity: number?) → any
| arg | type | description |
|---|---|---|
| opacity | number? |
vignette(strength: number?) → any
| arg | type | description |
|---|---|---|
| strength | number? |
scrim(alpha: number, gradient: string?) → any
A dim wash so type sits legibly over art.
| arg | type | description |
|---|---|---|
| alpha | number | |
| gradient | string? |
enter(fromY: number, dur: number, delay: number?) → any
| arg | type | description |
|---|---|---|
| fromY | number | |
| dur | number | |
| delay | number? |
pop(dur: number, delay: number?) → any
| arg | type | description |
|---|---|---|
| dur | number | |
| delay | number? |
blink(dur: number?) → any
| arg | type | description |
|---|---|---|
| dur | number? |
breathe(from: string, to: string, dur: number?) → any
| arg | type | description |
|---|---|---|
| from | string | |
| to | string | |
| dur | number? |
slideIn(fromX: number, dur: number, delay: number?) → any
| arg | type | description |
|---|---|---|
| fromX | number | |
| dur | number | |
| delay | number? |
keycap(letter: string, size: number?) → any
A keycap, for the how-to card: a beveled cap with the letter set in display type so it matches the rest of the cabinet.
| arg | type | description |
|---|---|---|
| letter | string | |
| size | number? |
menuRow(text: string, selected: boolean, callbackId: string?, width: number?) → any
One line of a vertical menu. Selected rows carry the ember bar, the lit edge and a slight scale; the rest sit back.
| arg | type | description |
|---|---|---|
| text | string | |
| selected | boolean | |
| callbackId | string? | |
| width | number? |
statBar(label: string, value: number, tone: { string }?, width: number?) → any
A labelled stat bar for the select screen.
| arg | type | description |
|---|---|---|
| label | string | |
| value | number | |
| tone | { string }? | |
| width | number? |
Sub-parts
Everything contained inside this part. Assets are composite children (clickable cards). Files are leaf payloads. Expand any row to view its source.
Problems
Everything affecting this asset right now: its own problems, anything wrong inside it, and problems on its direct dependencies.
agent_score is exposed.+ quality × 0.35
+ performance × 0.25
± compat factor
Usability ratings
Did the part work as advertised when consumers tried to drop it in. Separate from upvotes: those are taste; this is "did it function".
Scoped to this part · feeds back into the world's score.