Building interfaces

phantom.aj.uiThe screen and sound

The client's interface by name: restyle, attach, replace, dialogs.

Scripts and plugins

A script has all of it, as phantom.aj.ui, and so does a plugin, from ctx.phantom(): the SDK runs in the plugin's own frame. Each call is marked with what it needs: game:read for what the area knows and hears, which "game": "read" in the manifest grants, and game:act for doing things in it as the player, which needs "game": "act" (see Permissions).

Overview

Member	What it does	Plugins
`skin`	The look widgets are drawn in when they do not say: `phantom` to begin with.	`game:read`
`attach()`	Draws a widget inside one of the client's containers, so it moves, scales and hides with it: a button on the HUD, a section in the avatar editor.	`game:act`
`badge()`	A small pill with a count or a word.	`game:act`
`box()`	A box that lays its children out in a row, a column or a grid.	`game:act`
`button()`	A button, with an optional picture.	`game:act`
`card()`	A card with a title, a line of explanation and a control on it: the shape of a settings row.	`game:act`
`checkbox()`	A box to tick, with its label.	`game:act`
`choose()`	Asks the player to pick one of several, and resolves with its value, or null.	`game:act`
`clear()`	Takes away everything this area drew, held, opened or contributed.	`game:act`
`colors()`	A palette to pick an animal colour from: in the game skin the client's own colour table.	`game:act`
`contribute()`	Declares a row for one of the client's own lists (the Settings list, the world picker, the buddy list, the editors' grids) and puts it there every time the client builds that list, the client's own item class, art and hover included.	`game:act`
`contributions()`	The rows this plugin contributed, with how each has fared.	`game:read`
`debugLayout()`	Where everything drawn in a widget landed, measured by Flash, and whether each piece lies inside the box it should: a window's body, else the widget's own size, else `box`.	`game:read`
`dropdown()`	A dropdown of choices.	`game:act`
`explore()`	What one of the client's screens is made of, read as it stands: ask while it is open.	`game:read`
`grid()`	A grid of tiles, each a picture with words under it.	`game:act`
`hasSymbol()`	Whether the client's HUD assets can make a symbol by that name now.	`game:read`
`hide()`	Hides one of the client's pieces until the handle shows it, whatever the client does.	`game:act`
`highlight()`	Glows or pulses one of the client's pieces until the handle, to point the player at it.	`game:act`
`icon()`	One of Phantom's own line icons (`icons()` lists them).	`game:act`
`iconButton()`	A button that is one icon.	`game:act`
`icons()`	Phantom's icon names, for `icon` and `iconButton`.	`game:read`
`image()`	A picture from a URL.	`game:act`
`input()`	A text field that takes the keyboard from the game while it is focused.	`game:act`
`inspect()`	How a piece of the client's screen is built, from a root named as a feature thinks of it: the open buddy card (`'buddyCard'`), the HUD, any spot `places()` lists, the first open object of a class (`{ window: 'gui.GuiDenShop' }`), or any place.	`game:read`
`keyChip()`	A chip saying which keys work something: `ui.keyChip('Ctrl+H')`.	`game:act`
`label()`	A line or block of words.	`game:act`
`list()`	A scrolling list of rich text rows.	`game:read`
`menu()`	A menu by the mouse (or where told), resolving with the line picked, or null.	`game:act`
`menuButton()`	A button that opens a menu, and says what was picked (`onSelect`).	`game:act`
`notice()`	A small panel that says something and takes itself down after `seconds` (six by default), in the top right unless told otherwise.	`game:act`
`paletteValues()`	The animal colours of one of the client's palettes.	`game:act`
`place()`	One of the client's containers as a typed place, asking the client nothing, with a path on from it: `ui.place('hud', 'charWindow')`, `ui.place('stage').$listen('mouseMove', …)`.	`game:act`
`places()`	Every spot by name: the stage, the layers, the HUD and its parts, the editors.	`game:read`
`progress()`	A progress bar, 0 to 1.	`game:act`
`prompt()`	Asks for a line of text in a small window, and resolves with it, or null when the player cancels or it is closed (`close()` on the answer).	`game:act`
`ready()`	Waits until the client has its library art and palettes, which arrive as the player logs in.	`game:act`
`recolor()`	Recolours one of the client's pieces (`'grayscale'`, a tint, a hue) until the handle.	`game:act`
`replace()`	Hides one of the client's display objects and draws a widget in its place, until the handle puts the client's own back: its chat bar, a button, a panel in a window.	`game:act`
`restyle()`	Changes part of a skin's theme for everything drawn after it: `ui.restyle({ accent: 0x22c55e, cornerRadius: 10 })`.	`game:act`
`rule()`	Changes every object of a class the client draws, under a spot or anywhere, now and as it draws more, until the rule is called: CSS for the client's display tree, built on `phantom.flash.ui.rule`.	`game:act`
`screens()`	The screens `contribute`, `explore` and `onScreen` know.	`game:read`
`scroll()`	A box whose `body` scrolls.	`game:act`
`search()`	A search field with a magnifier in it.	`game:act`
`segmented()`	A row of choices, one picked.	`game:act`
`stageSize()`	How big the game is on this screen; both 0 before the client is up.	`game:read`
`status()`	Whether the client has what the game skin draws with yet: its library art and palettes.	`game:read`
`style()`	Restyles one of the client's text fields (font, size, colour, background, outline) until the handle puts its look back.	`game:act`
`symbol()`	One of the client's library symbols, its real art, made as the client makes it (`GETDEFINITIONBYNAME`); `symbols()` lists the useful ones.	`game:act`
`symbols()`	The client's library symbols worth drawing, each with what it holds.	`game:read`
`tabBar()`	A bar of tab heads, with counts, for a window that draws its own pages.	`game:act`
`tabs()`	A strip of tabs, each with a body of its own (`body(value)`).	`game:act`
`tag()`	A label pinned to a player (by user id), an entity, a spot or a place, following it.	`game:act`
`theme()`	The colours, font, text size and corner radius a skin draws with, to draw something of your own that matches.	`game:read`
`tipOn()`	A tooltip on one of the client's pieces, shown while the mouse is over it, until the handle: `ui.tipOn('worldMapBtn', 'Where to?')`.	`game:act`
`toggle()`	A switch, with its label.	`game:act`
`tooltip()`	A tooltip, in the game skin the client's own.	`game:act`
`window()`	A window: a box with a title bar that widgets are drawn in (`body`), dragged by its bar and closed by its corner button.	`game:act`
`onScreen()`	Hears one of those screens open (built) or close, with its spot for `attach`.	`game:read`
`onStageResize()`	Hears the game resized, with its new size, so what sits in a corner can move with it.	`game:read`

ui.popup: Animal Jam's own popups, opened by a plugin and promised: await ui.popup.yesNo('Leave?').

Member	What it does	Plugins
`closeAll()`	Shuts every popup this area opened, settling each; the game's own popups stay.	`game:act`
`message()`	A plain popup showing a line of text with only its close box (`SBMessage`), draggable, in the client's `PopupSkin` frame.	`game:act`
`ok()`	The client's OK popup (`SBOkPopup`): a line of text and one button, modal and darkening by default as the client's own are.	`game:act`
`okCancel()`	The client's OK and Cancel popup (`SBOkCancelPopup`).	`game:act`
`parchment()`	The client's parchment popup (`SBParchmentPopup`), with `buttons` `ok` (the default), `yesNo`, `continueExit` or `continue`.	`game:act`
`titled()`	The client's titled popup (`SBStandardTitlePopup`): a title bar, words and a close box.	`game:act`
`yesNo()`	The client's Yes and No popup (`SBYesNoPopup`), the one it asks most questions with.	`game:act`

Properties

`skin`

propertyplugins · game:read

TypeScript

skin: UiSkin

The look widgets are drawn in when they do not say: phantom to begin with.

Types

UiSkin

Methods

`attach`

methodplugins · game:act

TypeScript

attach(place: UiPlace, widget: OverlayNode | UiWidget, options?: ActOptions) => Promise<UiRemove>

Draws a widget inside one of the client's containers, so it moves, scales and hides with it: a button on the HUD, a section in the avatar editor. Its x and y are then the container's. The handle takes it out.

Parameters

Name	Type
`place`	`UiPlace`
`widget`	`OverlayNode \| UiWidget`
`options` optional	`ActOptions`

Returns

Promise<UiRemove>

Types

UiPlace · OverlayNode · OverlayOptions · OverlayAlign · OverlayDrag · TextSpan · OverlayBounds · Position · UiWidget · UiRemove · ActOptions

`badge`

methodplugins · game:act

TypeScript

badge(text: string, options?: UiBadgeOptions) => Promise<UiBadge>

A small pill with a count or a word.

Parameters

Name	Type
`text`	`string`
`options` optional	`UiBadgeOptions`

Returns

Promise<UiBadge>

`box`

methodplugins · game:act

TypeScript

box(options?: UiBoxOptions) => Promise<UiBox>

A box that lays its children out in a row, a column or a grid.

Parameters

Name	Type
`options` optional	`UiBoxOptions`

Returns

Promise<UiBox>

`button`

methodplugins · game:act

TypeScript

button(label: string, options?: UiButtonOptions) => Promise<UiButton>

A button, with an optional picture. onClick gives back a sync stop.

Parameters

Name	Type
`label`	`string`
`options` optional	`UiButtonOptions`

Returns

Promise<UiButton>

Types

UiButtonOptions · UiButton

`card`

methodplugins · game:act

TypeScript

card(options: UiCardOptions) => Promise<UiCard>

A card with a title, a line of explanation and a control on it: the shape of a settings row.

Parameters

Name	Type
`options`	`UiCardOptions`

Returns

Promise<UiCard>

`checkbox`

methodplugins · game:act

TypeScript

checkbox(label: string, options?: UiCheckboxOptions) => Promise<UiCheckbox>

A box to tick, with its label.

Parameters

Name	Type
`label`	`string`
`options` optional	`UiCheckboxOptions`

Returns

Promise<UiCheckbox>

`choose`

methodplugins · game:act

TypeScript

choose(text: string, choices: readonly (string | UiChoice)[], options?: UiChooseOptions) => UiPopupAnswer<string | null>

Asks the player to pick one of several, and resolves with its value, or null.

Parameters

Name	Type
`text`	`string`
`choices`	`readonly (string \| UiChoice)[]`
`options` optional	`UiChooseOptions`

Returns

UiPopupAnswer<string \| null>

`clear`

methodplugins · game:act

TypeScript

clear() => Promise<void>

Takes away everything this area drew, held, opened or contributed.

Returns

Promise<void>

`colors`

methodplugins · game:act

TypeScript

colors(options?: UiColorsOptions) => Promise<UiColors>

A palette to pick an animal colour from: in the game skin the client's own colour table.

Parameters

Name	Type
`options` optional	`UiColorsOptions`

Returns

Promise<UiColors>

`contribute`

methodplugins · game:act

TypeScript

contribute(screen: UiScreenName, row: UiScreenRow, listener?: ((event: UiRowEvent) => void) | undefined) => Promise<UiContribution>

Declares a row for one of the client's own lists (the Settings list, the world picker, the buddy list, the editors' grids) and puts it there every time the client builds that list, the client's own item class, art and hover included. The contribution is a handle that takes the row out; set changes it. REFUSED for a row the list cannot draw.

Parameters

Name	Type
`screen`	`UiScreenName`
`row`	`UiScreenRow`
`listener` optional	`((event: UiRowEvent) => void) \| undefined`

Returns

Promise<UiContribution>

Types

UiScreenName · UiScreenRow · UiRowControl · UiRowPicture · UiRowDrawnIcon · UiRowEvent · UiContribution · UiListName

Example

TypeScript

const row = await phantom.aj.ui.contribute(
  'settings',
  { name: 'nameTags', label: 'Name tags', control: { kind: 'toggle', on: false } },
  (press) => console.log('name tags are now', press.on)
);

Run in Phantom

`contributions`

methodplugins · game:read

TypeScript

contributions(screen?: UiScreenName | undefined) => UiContributionState[]

The rows this plugin contributed, with how each has fared.

Parameters

Name	Type
`screen` optional	`UiScreenName \| undefined`

Returns

UiContributionState[]

Types

UiContributionState · UiScreenName

`debugLayout`

methodplugins · game:read

TypeScript

debugLayout(target: OverlayNode | UiWidget, options?: { box?: UiBox | undefined; log?: boolean | undefined; }) => Promise<UiLayoutReport>

Where everything drawn in a widget landed, measured by Flash, and whether each piece lies inside the box it should: a window's body, else the widget's own size, else box. Logs a table, and resolves with the report, for pasting from the Developer console when a layout looks wrong.

Parameters

Name	Type
`target`	`OverlayNode \| UiWidget`
`options` optional	`{ box?: UiBox \| undefined; log?: boolean \| undefined; }`

Returns

Promise<UiLayoutReport>

Types

OverlayNode · UiWidget

Example

TypeScript

const notes = await phantom.aj.ui.window({ skin: 'game', title: 'Room notes' });
await phantom.aj.ui.label('Who is here', { parent: notes.body, x: 8, y: 8 });
await notes.fit();
const report = await phantom.aj.ui.debugLayout(notes);
console.log(report.ok, JSON.stringify(report));

Run in Phantom

`dropdown`

methodplugins · game:act

TypeScript

dropdown(options: UiDropdownOptions) => Promise<UiDropdown>

A dropdown of choices.

Parameters

Name	Type
`options`	`UiDropdownOptions`

Returns

Promise<UiDropdown>

`explore`

methodplugins · game:read

TypeScript

explore(screen: UiScreenName) => Promise<UiScreenReport>

What one of the client's screens is made of, read as it stands: ask while it is open.

Parameters

Name	Type
`screen`	`UiScreenName`

Returns

Promise<UiScreenReport>

Types

UiScreenReport · UiListReport · UiScreenName

`grid`

methodplugins · game:act

TypeScript

grid(options: UiGridOptions) => Promise<UiGrid>

A grid of tiles, each a picture with words under it.

Parameters

Name	Type
`options`	`UiGridOptions`

Returns

Promise<UiGrid>

`hasSymbol`

methodplugins · game:read

TypeScript

hasSymbol(name: string) => Promise<boolean>

Whether the client's HUD assets can make a symbol by that name now.

Parameters

Name	Type
`name`	`string`

Returns

Promise<boolean>

`hide`

methodplugins · game:act

TypeScript

hide(place: UiPlace, options?: ActOptions) => Promise<UiRemove>

Hides one of the client's pieces until the handle shows it, whatever the client does.

Parameters

Name	Type
`place`	`UiPlace`
`options` optional	`ActOptions`

Returns

Promise<UiRemove>

Types

ActOptions · UiPlace · UiRemove

`highlight`

methodplugins · game:act

TypeScript

highlight(place: UiPlace, highlight?: HighlightOptions, options?: ActOptions) => Promise<UiRemove>

Glows or pulses one of the client's pieces until the handle, to point the player at it.

Parameters

Name	Type
`place`	`UiPlace`
`highlight` optional	`HighlightOptions`
`options` optional	`ActOptions`

Returns

Promise<UiRemove>

Types

HighlightOptions · ActOptions · UiPlace · UiRemove

`icon`

methodplugins · game:act

TypeScript

icon(name: "chat" | "warning" | "filter" | "sparkle" | "camera" | "focus" | "close" | "info" | "magnifier" | "globe" | "check" | "chevronDown" | "chevronUp" | "chevronLeft" | "chevronRight" | "ring" | "dot" | "plus" | "minus" | "bars" | "gear" | "square" | "arrowUp" | "arrowDown" | "zoomIn" | "keyboard" | "eye" | "eyeOff" | "clock" | "tag" | "gauge" | "shirt", options?: UiIconOptions) => Promise<UiIcon>

One of Phantom's own line icons (icons() lists them).

Parameters

Name	Type
`name`	`"chat" \| "warning" \| "filter" \| "sparkle" \| "camera" \| "focus" \| "close" \| "info" \| "magnifier" \| "globe" \| "check" \| "chevronDown" \| "chevronUp" \| "chevronLeft" \| "chevronRight" \| "ring" \| "dot" \| "plus" \| "minus" \| "bars" \| "gear" \| "square" \| "arrowUp" \| "arrowDown" \| "zoomIn" \| "keyboard" \| "eye" \| "eyeOff" \| "clock" \| "tag" \| "gauge" \| "shirt"`
`options` optional	`UiIconOptions`

Returns

Promise<UiIcon>

`iconButton`

methodplugins · game:act

TypeScript

iconButton(name: "chat" | "warning" | "filter" | "sparkle" | "camera" | "focus" | "close" | "info" | "magnifier" | "globe" | "check" | "chevronDown" | "chevronUp" | "chevronLeft" | "chevronRight" | "ring" | "dot" | "plus" | "minus" | "bars" | "gear" | "square" | "arrowUp" | "arrowDown" | "zoomIn" | "keyboard" | "eye" | "eyeOff" | "clock" | "tag" | "gauge" | "shirt", options?: UiIconButtonOptions) => Promise<UiIconButton>

A button that is one icon.

Parameters

Name	Type
`name`	`"chat" \| "warning" \| "filter" \| "sparkle" \| "camera" \| "focus" \| "close" \| "info" \| "magnifier" \| "globe" \| "check" \| "chevronDown" \| "chevronUp" \| "chevronLeft" \| "chevronRight" \| "ring" \| "dot" \| "plus" \| "minus" \| "bars" \| "gear" \| "square" \| "arrowUp" \| "arrowDown" \| "zoomIn" \| "keyboard" \| "eye" \| "eyeOff" \| "clock" \| "tag" \| "gauge" \| "shirt"`
`options` optional	`UiIconButtonOptions`

Returns

Promise<UiIconButton>

`icons`

methodplugins · game:read

TypeScript

icons() => ("chat" | "warning" | "filter" | "sparkle" | "camera" | "focus" | "close" | "info" | "magnifier" | "globe" | "check" | "chevronDown" | "chevronUp" | "chevronLeft" | "chevronRight" | "ring" | "dot" | "plus" | "minus" | "bars" | "gear" | "square" | "arrowUp" | "arrowDown" | "zoomIn" | "keyboard" | "eye" | "eyeOff" | "clock" | "tag" | "gauge" | "shirt")[]

Phantom's icon names, for icon and iconButton.

Returns

`image`

methodplugins · game:act

TypeScript

image(source: string, options?: UiImageOptions) => Promise<UiImage>

A picture from a URL. One that will not load says so to onFailed rather than rejecting.

Parameters

Name	Type
`source`	`string`
`options` optional	`UiImageOptions`

Returns

Promise<UiImage>

`input`

methodplugins · game:act

TypeScript

input(options?: UiInputOptions) => Promise<UiInput>

A text field that takes the keyboard from the game while it is focused.

Parameters

Name	Type
`options` optional	`UiInputOptions`

Returns

Promise<UiInput>

Types

UiInputOptions

`inspect`

methodplugins · game:read

TypeScript

inspect(target: UiInspectTarget, options?: InspectOptions) => Promise<Inspection>

How a piece of the client's screen is built, from a root named as a feature thinks of it: the open buddy card ('buddyCard'), the HUD, any spot places() lists, the first open object of a class ({ window: 'gui.GuiDenShop' }), or any place. It is phantom.flash.inspect (one message per level; names, classes, frames and labels, text, bounds, what a timeline placed), and it reads only. NOT_READY when the root is not open, saying which.

Parameters

Name	Type
`target`	`UiInspectTarget`
`options` optional	`InspectOptions`

Returns

Promise<Inspection>

Example

TypeScript

const card = await phantom.aj.ui.inspect('buddyCard', { depth: 4, bounds: true });
console.log(card.outline());
const ear = card.find((node) => node.name === 'gameTabBtn');

Run in Phantom

`keyChip`

methodplugins · game:act

TypeScript

keyChip(keys: string, options?: UiOptions) => Promise<UiKeyChip>

A chip saying which keys work something: ui.keyChip('Ctrl+H').

Parameters

Name	Type
`keys`	`string`
`options` optional	`UiOptions`

Returns

Promise<UiKeyChip>

Types

UiOptions

`label`

methodplugins · game:act

TypeScript

label(text: string, options?: UiLabelOptions) => Promise<UiLabel>

A line or block of words.

Parameters

Name	Type
`text`	`string`
`options` optional	`UiLabelOptions`

Returns

Promise<UiLabel>

Types

UiLabelOptions · UiLabel

`list`

methodplugins · game:read

TypeScript

list(options?: UiListOptions) => Promise<UiList>

A scrolling list of rich text rows.

Parameters

Name	Type
`options` optional	`UiListOptions`

Returns

Promise<UiList>

`menu`

methodplugins · game:act

TypeScript

menu(items: readonly UiMenuItem[], options?: UiMenuOptions) => UiPopupAnswer<string | null>

A menu by the mouse (or where told), resolving with the line picked, or null.

Parameters

Name	Type
`items`	`readonly UiMenuItem[]`
`options` optional	`UiMenuOptions`

Returns

UiPopupAnswer<string \| null>

`menuButton`

methodplugins · game:act

TypeScript

menuButton(label: string, items: UiMenuItems, options?: UiMenuButtonOptions) => Promise<UiMenuButton>

A button that opens a menu, and says what was picked (onSelect).

Parameters

Name	Type
`label`	`string`
`items`	`UiMenuItems`
`options` optional	`UiMenuButtonOptions`

Returns

Promise<UiMenuButton>

`notice`

methodplugins · game:act

TypeScript

notice(text: string, options?: UiNoticeOptions) => Promise<UiNotice>

A small panel that says something and takes itself down after seconds (six by default), in the top right unless told otherwise. The widget takes it down early.

Parameters

Name	Type
`text`	`string`
`options` optional	`UiNoticeOptions`

Returns

Promise<UiNotice>

`paletteValues`

methodplugins · game:act

TypeScript

paletteValues(which?: UiPalette, options?: ActOptions) => Promise<number[]>

The animal colours of one of the client's palettes.

Parameters

Name	Type
`which` optional	`UiPalette`
`options` optional	`ActOptions`

Returns

Promise<number[]>

Types

ActOptions

`place`

methodplugins · game:act

TypeScript

place(spot: UiSpot, ...path: string[]) => FlashPlace<unknown>

One of the client's containers as a typed place, asking the client nothing, with a path on from it: ui.place('hud', 'charWindow'), ui.place('stage').$listen('mouseMove', …). A screen not open yet may be named; whatever uses the place finds it when it is there.

Parameters

Name	Type
`spot`	`UiSpot`
`path`	`string[]`

Returns

FlashPlace<unknown>

Types

FlashPlace · FlashRead · FlashWrite · HoldOptions · HookTest · FlashArgumentLike · FlashValue · FlashArgument · FlashData · AnyFlash · FlashMethod · TypedFlash · FlashConstructor · UiSpot

`places`

methodplugins · game:read

TypeScript

places() => UiSpot[]

Every spot by name: the stage, the layers, the HUD and its parts, the editors.

Returns

UiSpot[]

Types

UiSpot

`progress`

methodplugins · game:act

TypeScript

progress(options?: UiProgressOptions) => Promise<UiProgress>

A progress bar, 0 to 1.

Parameters

Name	Type
`options` optional	`UiProgressOptions`

Returns

Promise<UiProgress>

`prompt`

methodplugins · game:act

TypeScript

prompt(text: string, options?: UiPromptOptions) => UiPopupAnswer<string | null>

Asks for a line of text in a small window, and resolves with it, or null when the player cancels or it is closed (close() on the answer).

Parameters

Name	Type
`text`	`string`
`options` optional	`UiPromptOptions`

Returns

UiPopupAnswer<string \| null>

`ready`

methodplugins · game:act

TypeScript

ready(options?: ActOptions) => Promise<UiReadiness>

Waits until the client has its library art and palettes, which arrive as the player logs in. TIMEOUT, naming what is missing, after timeoutMs (two minutes by default).

Parameters

Name	Type
`options` optional	`ActOptions`

Returns

Promise<UiReadiness>

Types

ActOptions · UiReadiness

`recolor`

methodplugins · game:act

TypeScript

recolor(place: UiPlace, recolor: RecolorOptions, options?: ActOptions) => Promise<UiRemove>

Recolours one of the client's pieces ('grayscale', a tint, a hue) until the handle.

Parameters

Name	Type
`place`	`UiPlace`
`recolor`	`RecolorOptions`
`options` optional	`ActOptions`

Returns

Promise<UiRemove>

Types

RecolorOptions · ActOptions · UiPlace · UiRemove

`replace`

methodplugins · game:act

TypeScript

replace(place: UiPlace, widget: OverlayNode | UiWidget, options?: ActOptions) => Promise<UiRemove>

Hides one of the client's display objects and draws a widget in its place, until the handle puts the client's own back: its chat bar, a button, a panel in a window.

Parameters

Name	Type
`place`	`UiPlace`
`widget`	`OverlayNode \| UiWidget`
`options` optional	`ActOptions`

Returns

Promise<UiRemove>

Types

ActOptions · UiPlace · OverlayNode · UiWidget · UiRemove

`restyle`

methodplugins · game:act

TypeScript

restyle(changes: Partial<Omit<UiTheme, "skin">> | null, skin?: UiSkin | undefined) => void

Changes part of a skin's theme for everything drawn after it: ui.restyle({ accent: 0x22c55e, cornerRadius: 10 }). A field a theme has not got, or a bad colour, throws here; null puts the skin back.

Parameters

Name	Type
`changes`	`Partial<Omit<UiTheme, "skin">> \| null`
`skin` optional	`UiSkin \| undefined`

Types

UiSkin · UiTheme

`rule`

methodplugins · game:act

TypeScript

rule(target: UiRuleTarget, apply: (element: UiElement<unknown>) => unknown, options?: UiRuleOptions<unknown>) => Promise<UiRule>

Changes every object of a class the client draws, under a spot or anywhere, now and as it draws more, until the rule is called: CSS for the client's display tree, built on phantom.flash.ui.rule. Every change made through the element is undone by itself.

Parameters

Name	Type
`target`	`UiRuleTarget`
`apply`	`(element: UiElement<unknown>) => unknown`
`options` optional	`UiRuleOptions<unknown>`

Returns

Promise<UiRule>

Types

UiRuleTarget · UiElement · UiNodeSource · UiAttachOptions · UiRuleOptions · UiRule

Example

TypeScript

const plain = await phantom.aj.ui.rule({ ofClass: 'flash.text.TextField', in: 'hud' }, (el) =>
  el.style({ font: 'Verdana', color: 0xf5f5f5 })
);

Run in Phantom

`screens`

methodplugins · game:read

TypeScript

screens() => UiScreenName[]

The screens contribute, explore and onScreen know.

Returns

UiScreenName[]

Types

UiScreenName

`scroll`

methodplugins · game:act

TypeScript

scroll(options?: UiScrollOptions) => Promise<UiScroll>

A box whose body scrolls.

Parameters

Name	Type
`options` optional	`UiScrollOptions`

Returns

Promise<UiScroll>

`search`

methodplugins · game:act

TypeScript

search(options?: UiSearchOptions) => Promise<UiSearch>

A search field with a magnifier in it.

Parameters

Name	Type
`options` optional	`UiSearchOptions`

Returns

Promise<UiSearch>

`segmented`

methodplugins · game:act

TypeScript

segmented(options: UiSegmentedOptions) => Promise<UiSegmented>

A row of choices, one picked.

Parameters

Name	Type
`options`	`UiSegmentedOptions`

Returns

Promise<UiSegmented>

`stageSize`

methodplugins · game:read

TypeScript

stageSize() => Promise<UiStageSize>

How big the game is on this screen; both 0 before the client is up.

Returns

Promise<UiStageSize>

Types

UiStageSize

`status`

methodplugins · game:read

TypeScript

status() => Promise<UiReadiness>

Whether the client has what the game skin draws with yet: its library art and palettes.

Returns

Promise<UiReadiness>

Types

UiReadiness

`style`

methodplugins · game:act

TypeScript

style(place: UiPlace, style: TextStyle, options?: ActOptions) => Promise<UiRemove>

Restyles one of the client's text fields (font, size, colour, background, outline) until the handle puts its look back. Every text field under a spot at once is rule.

Parameters

Name	Type
`place`	`UiPlace`
`style`	`TextStyle`
`options` optional	`ActOptions`

Returns

Promise<UiRemove>

Types

TextStyle · ActOptions · UiPlace · UiRemove

`symbol`

methodplugins · game:act

TypeScript

symbol(name: string, options?: UiSymbolOptions) => Promise<UiSymbol>

One of the client's library symbols, its real art, made as the client makes it (GETDEFINITIONBYNAME); symbols() lists the useful ones. Waits for the art; NOT_READY when the client cannot make it.

Parameters

Name	Type
`name`	`string`
`options` optional	`UiSymbolOptions`

Returns

Promise<UiSymbol>

`symbols`

methodplugins · game:read

TypeScript

symbols() => ["closeBtn" | "PopupSkin" | "PopupContent" | "OkPopupSkin" | "OkPopupContent" | "YesNoPopupSkin" | "YesNoPopupContent" | "okCancelPopupContent" | "ConfirmSkin" | "Tooltip" | "HelpTxtBubble" | "scrollbar2" | "BuddyListPopup" | "BuddyListContent" | "BD_AvatarEditorSkin" | "BD_AvatarEditorContent" | "DenEditorAsset" | "MySettings" | "MainHud" | "FreeNameBar" | "memberNameBar" | "AnimsTitleBanner" | "ChatBalloonAsset" | "Cursor" | "QuestPickupIcon" | "MinigameLobbySkin" | "MinigameLobbyContent" | "BroadcastPopupSkin" | "BroadcastPopupContent" | "DenLockPopupSkin" | "DenLockPopupContent" | "ReportRulesPopupSkin" | "ReportRulesPopupContent", string][]

The client's library symbols worth drawing, each with what it holds.

Returns

`tabBar`

methodplugins · game:act

TypeScript

tabBar(options: UiTabBarOptions) => Promise<UiTabBar>

A bar of tab heads, with counts, for a window that draws its own pages.

Parameters

Name	Type
`options`	`UiTabBarOptions`

Returns

Promise<UiTabBar>

`tabs`

methodplugins · game:act

TypeScript

tabs(options: UiTabsOptions) => Promise<UiTabs>

A strip of tabs, each with a body of its own (body(value)).

Parameters

Name	Type
`options`	`UiTabsOptions`

Returns

Promise<UiTabs>

`tag`

methodplugins · game:act

TypeScript

tag(target: UiTagTarget, text: string, options?: UiTagOptions) => Promise<UiTag>

A label pinned to a player (by user id), an entity, a spot or a place, following it.

Parameters

Name	Type
`target`	`UiTagTarget`
`text`	`string`
`options` optional	`UiTagOptions`

Returns

Promise<UiTag>

`theme`

methodplugins · game:read

TypeScript

theme(skin?: UiSkin | undefined) => Promise<UiTheme>

The colours, font, text size and corner radius a skin draws with, to draw something of your own that matches. The game skin's font is the client's own (gui.Fonts), _sans before it has one.

Parameters

Name	Type
`skin` optional	`UiSkin \| undefined`

Returns

Promise<UiTheme>

Types

UiTheme · UiSkin

`tipOn`

methodplugins · game:act

TypeScript

tipOn(place: UiPlace, text: string | (() => string | Promise<string>), options?: UiTipOptions) => Promise<UiRemove>

A tooltip on one of the client's pieces, shown while the mouse is over it, until the handle: ui.tipOn('worldMapBtn', 'Where to?'). The words may be worked out each time it shows.

Parameters

Name	Type
`place`	`UiPlace`
`text`	`string \| (() => string \| Promise<string>)`
`options` optional	`UiTipOptions`

Returns

Promise<UiRemove>

Types

UiPlace · UiRemove

`toggle`

methodplugins · game:act

TypeScript

toggle(label: string, options?: UiToggleOptions) => Promise<UiToggle>

A switch, with its label.

Parameters

Name	Type
`label`	`string`
`options` optional	`UiToggleOptions`

Returns

Promise<UiToggle>

`tooltip`

methodplugins · game:act

TypeScript

tooltip(options?: UiTooltipOptions) => Promise<UiTooltip>

A tooltip, in the game skin the client's own.

Parameters

Name	Type
`options` optional	`UiTooltipOptions`

Returns

Promise<UiTooltip>

`window`

methodplugins · game:act

TypeScript

window(options?: UiWindowOptions) => Promise<UiWindow>

A window: a box with a title bar that widgets are drawn in (body), dragged by its bar and closed by its corner button. In the game skin it is the client's own popup (SBStandardPopup, native), or its frame art drawn in an overlay panel with native: false or a parent, laid out by the art's content box; past the art's timeoutMs it is drawn unframed (framed false). fit() sizes it to what was drawn in its body.

Parameters

Name	Type
`options` optional	`UiWindowOptions`

Returns

Promise<UiWindow>

Types

UiWindowOptions · UiOptions · UiChromeOptions · UiWindow · UiFitOptions

Events

`onScreen`

eventplugins · game:read

TypeScript

onScreen(name: UiScreenName, listener: (event: UiScreenEvent) => void) => () => void

Hears one of those screens open (built) or close, with its spot for attach. The client's windows by name are phantom.aj.screens.onOpen/onClose.

Parameters

Name	Type
`name`	`UiScreenName`
`listener`	`(event: UiScreenEvent) => void`

Returns

() => void. Call it to stop listening.

Types

UiScreenEvent · UiScreenName

`onStageResize`

eventplugins · game:read

TypeScript

onStageResize(listener: (size: UiStageSize) => void) => () => void

Hears the game resized, with its new size, so what sits in a corner can move with it.

Parameters

Name	Type
`listener`	`(size: UiStageSize) => void`

Returns

() => void. Call it to stop listening.

Types

UiStageSize

`ui.popup`

Animal Jam's own popups, opened by a plugin and promised: await ui.popup.yesNo('Leave?'). Reading and answering the popups the game opens itself is phantom.aj.popups.

`closeAll`

methodplugins · game:act

TypeScript

closeAll() => Promise<void>

Shuts every popup this area opened, settling each; the game's own popups stay.

Returns

Promise<void>

`message`

methodplugins · game:act

TypeScript

message(text: string, options?: UiPopupOptions) => UiPopupAnswer<void>

A plain popup showing a line of text with only its close box (SBMessage), draggable, in the client's PopupSkin frame. Resolves when it closes.

Parameters

Name	Type
`text`	`string`
`options` optional	`UiPopupOptions`

Returns

UiPopupAnswer<void>

Example

TypeScript

const note = phantom.aj.ui.popup.message('Phantom is watching this room.');
await phantom.flash.frames(96);
await note.close();

Run in Phantom

`ok`

methodplugins · game:act

TypeScript

ok(text: string, options?: UiPopupOptions) => UiPopupAnswer<void>

The client's OK popup (SBOkPopup): a line of text and one button, modal and darkening by default as the client's own are. Resolves when OK or its close box is pressed.

Parameters

Name	Type
`text`	`string`
`options` optional	`UiPopupOptions`

Returns

UiPopupAnswer<void>

`okCancel`

methodplugins · game:act

TypeScript

okCancel(text: string, options?: UiPopupOptions) => UiPopupAnswer<boolean | null>

The client's OK and Cancel popup (SBOkCancelPopup). Resolves true for OK, false for Cancel, null when shut another way.

Parameters

Name	Type
`text`	`string`
`options` optional	`UiPopupOptions`

Returns

UiPopupAnswer<boolean \| null>

`parchment`

methodplugins · game:act

TypeScript

parchment(text: string, options?: UiParchmentPopupOptions) => UiPopupAnswer<boolean | null>

The client's parchment popup (SBParchmentPopup), with buttons ok (the default), yesNo, continueExit or continue. Resolves true for the button that carries on (OK, Yes, Continue), false for the other, null when shut another way.

Parameters

Name	Type
`text`	`string`
`options` optional	`UiParchmentPopupOptions`

Returns

UiPopupAnswer<boolean \| null>

`titled`

methodplugins · game:act

TypeScript

titled(text: string, options?: UiTitledPopupOptions) => UiPopupAnswer<void>

The client's titled popup (SBStandardTitlePopup): a title bar, words and a close box. Its frame is loaded from the client's art (mediaId, 370 by default), so it shows a moment later.

Parameters

Name	Type
`text`	`string`
`options` optional	`UiTitledPopupOptions`

Returns

UiPopupAnswer<void>

Example

TypeScript

await phantom.aj.ui.popup.titled('Everything here is being watched.', { title: 'Phantom' });

Run in Phantom

`yesNo`

methodplugins · game:act

TypeScript

yesNo(text: string, options?: UiPopupOptions) => UiPopupAnswer<boolean | null>

The client's Yes and No popup (SBYesNoPopup), the one it asks most questions with. Resolves true for Yes, false for No, null when shut another way.

Parameters

Name	Type
`text`	`string`
`options` optional	`UiPopupOptions`

Returns

UiPopupAnswer<boolean \| null>

Types

The types the calls above take and give, with every field. Import any of them in a plugin from @phantomclient/plugin/sdk, or use them as they are in a script.

`UiSkin`

Which look a widget is drawn in.

game is Animal Jam's own: the client's library symbols, its font and its colours, so what is drawn belongs on the screen it sits on. phantom is Phantom's: dark greys, thin lines and light text, so what is drawn is plainly not the game's.

TypeScript

type UiSkin = 'game' | 'phantom'

`UiTheme`

The colours, font and shape a skin draws with; phantom.ui.theme gives the one in use.

Field	Type
`skin`	`UiSkin`	Which skin it describes.
`ink`	`number`	The darkest colour: panels in Phantom's skin, words in the game's.
`surface`	`number`	A card, a field or a pill standing on `ink`: one step off the background, no more.
`raised`	`number`	A header or a footer band, and what a row goes to under the mouse: a step above `surface`.
`selected`	`number`	The tint behind something that is on, which reads with the accent rather than instead of it.
`line`	`number`	Borders, dividers and the edge of a box.
`light`	`number`	The lightest colour: words in Phantom's skin, panels in the game's.
`muted`	`number`	Words that matter less: a hint, a count, a disabled label.
`accent`	`number`	What a chosen tab, a pressed button or a filled bar is marked with.
`onAccent`	`number`	Words and marks drawn on the accent: dark in Phantom's skin, since the accent is near white.
`danger`	`number`	A warning or a refusal. The game's is the red its own text uses (`Fonts.defaultFontRedFormat`).
`font`	`string`	The font widgets write in: the client's own in the game skin, `_sans` in Phantom's.
`size`	`number`	How big the words are, in pixels.
`cornerRadius`	`number`	How round a box's corners are, in pixels.

`UiReadiness`

What the game skin needs of the client, and whether the client has it yet: ui.status() and ui.ready() give it.

Field	Type
`art`	`boolean`	The client's library art (its HUD assets): the popup frame a window is drawn in, its tooltip, its popups and every symbol. Loaded as the player logs in.
`palettes`	`boolean`	The animal colour palettes (`PaletteHelper.gamePalette`) that `colors` draws from.

`ActOptions`

How long something that acts may take, and what may end it first.

Field	Type
`timeoutMs` optional	`number \| undefined`	10 seconds by default.
`signal` optional	`AbortSignal \| undefined`

`UiStageSize`

How big the game is on this screen, as stageSize and onStageResize give it.

Field	Type
`width`	`number`
`height`	`number`

`UiSpot`

One of the client's own containers, by a name rather than by a path through the client.

stage: all of Flash, above the game and Phantom's overlay alike.
gui: the layer the client draws its windows and popups in (GuiManager.guiLayer).
hud: the main HUD (GuiManager.mainHud).
room: the layer the room's avatars are drawn in, whose coordinates are the room's.
avatarEditor, denEditor: those screens' own clips, while they are open.
any other name is a part of the HUD, by the name gui.GuiHud gives it (chatBar, money).

TypeScript

type UiSpot = | 'stage'
  | 'gui'
  | 'hud'
  | 'room'
  | 'avatarEditor'
  | 'denEditor'
  | 'buddyCard'
  | 'chatBar'
  | 'chatHist'
  | 'money'
  | 'zoneName'
  | (string & {})

`FlashPlace`

The operations every place has, whatever its type.

Field	Type
`$get`	`() => Promise<FlashRead<T>>`	Reads the value here: plain data as it is, an object as a typed place held by handle.
`$set`	`(value: FlashWrite<T>) => Promise<void>`	Writes the value here, once. The client may put its own back a frame later: a member it sets every frame, or on every redraw, or an object it builds again for the next room. For a change that has to stay, use `$keep`.
`$keep`	`(value: FlashWrite<T>, options?: HoldOptions \| undefined) => Promise<() => Promise<void>>`	Writes the value here and keeps it here, until the function it gives back is called, which puts back what was there. It is `$set` for a change that has to last. The game writes it itself, every frame, so a value the client puts back is overwritten before Flash draws it. The place is followed rather than pinned: nothing is lost when the object is not there yet (it is written as soon as it is) or when the client builds it again (the new one is written too). It is `phantom.flash.hold` on this place, and takes the same options. `ts const hud = phantom.flash.use('gui.GuiManager').mainHud; const faded = await hud.alpha.$keep(0.5);`
`$call`	`(...args: FlashArgumentLike[]) => Promise<FlashData>`	Calls what is here, whatever the declarations say is at this place. A place is callable in its own right (`avatars.createAvatar(id, x, y, name)`), which is how to write a call the declarations describe: the arguments and the answer are both checked. This is the same call for the places they cannot describe, and it saves casting one to reach it: - a class whose instance side declares nothing, because every member of it is static (`gui.EmoticonUtility`), so `$as` and a hook's `self` give a place with no members; - an object the client typed as `Object` or `*`, or one reached with `$at`; - a member holding a function, such as a callback the client keeps in a field. It answers `FlashData`, since there is no declared return to read it as. `ts const emotes = phantom.flash.use('gui.EmoticonUtility'); console.log(await emotes.stringForId(3)); console.log(await emotes.$at('stringForId').$call(3));`
`$listen`	`(event: string, listener: (event: FlashData, keep: <Kept>(value: Kept) => Kept) => void, options?: { read?: readonly (readonly string[])[] \| undefined; capture?: boolean \| undefined; } \| undefined) => Promise<() => Promise<void>>`	Listens for an event on the object here. Resolves with what stops listening. Without `read`, the event is its readable members, objects among them as typed places held by handle, and every one of them is released once the listener returns, except those passed to `keep` before then (release those with `$release` when done). `read` names the paths to read as the event is dispatched instead: the event is then `{ className, type, read }` with the values in that order, and nothing is held. A listener that ignores the event passes `read: []`. `capture` listens on the way down. Both are `FlashBridge.listen`'s options. `ts await stage.$listen('mouseMove', (event) => console.log((event as { read: number[] }).read), { read: [['stageX'], ['stageY']], });`
`$describe`	`() => Promise<FlashValue>`	The public members of what is here, as Flash's `describeType` lists them.
`$at`	`(...path: string[]) => AnyFlash`	Further along, by names the types do not know: untyped from here on.
`$as`	`{ <Name extends keyof ClientInstances & string>(name: Name): TypedFlash<ClientInstances[Name]>; (name: string): AnyFlash; }`	The same place, read as the client's `name` from here on. Nothing is sent and nothing is checked in the game: it says what the object here is, so the editor completes and checks its members again after a step the declarations could not follow (`$at`, a hook's capture, anything the client typed as `Object` or `*`). Naming the wrong class is not caught here; the read or call that follows is what fails. `ts const grid = phantom.flash .use('gui.AvatarEditor') .$at('_colorTableColor1') .$as('gui.ColorTable'); console.log(await grid._numCols.$get(), 'by', await grid._numRows.$get());`
`$release`	`() => Promise<void>`	Releases the object this place is held by, when it is one; nothing otherwise.
`$reference`	`FlashReference`	The untyped reference underneath.

`FlashRead`

What reading a place of type T resolves with.

TypeScript

type FlashRead<T> = unknown extends T
  ? FlashData
  : T extends Primitive
    ? T
    : T extends readonly (infer Item)[]
      ? FlashRead<Item>[]
      : T extends (...args: never[]) => unknown
        ? TypedFlash<unknown>
        : TypedFlash<T>

`FlashWrite`

What may be given where Flash expects T.

TypeScript

type FlashWrite<T> = unknown extends T
  ? FlashArgumentLike
  : T extends Primitive
    ? T
    : T extends readonly (infer Item)[]
      ? FlashWrite<Item>[]
      : T extends (...args: never[]) => unknown
        ? ((...args: FlashData[]) => void) | FlashCallback
        : TypedFlash<T> | FlashHandle | FlashArgumentLike

`HoldOptions`

How a hold behaves.

Field	Type
`everyFrames` optional	`number \| undefined`	Write on every nth frame. Every frame by default, which is what a value the client resets needs.
`when` optional	`"enter" \| "exit" \| undefined`	Which half of the frame to write in. `'enter'` by default, before the frame is read. Use `'exit'` for a member the game writes every frame of its own, such as a thing it pins to the pointer. Two objects' enter-frame listeners have no order between them, so an ordinary hold on one of those stands only on the frames the loader happens to run second, and the value flickers or never takes at all. Exit-frame work runs after every enter-frame listener, so what is held is what is drawn and what the next frame reads.
`while` optional	`HookWhen \| undefined`	Only while this holds, in the same rules as a hook's `when`, read between calls.
`once` optional	`boolean \| undefined`	Write once, on the first frame the condition holds, then stop.
`restore` optional	`boolean \| undefined`	Put back what was there before the first write when the hold ends. On by default.
`onFailed` optional	`((error: string) => void) \| undefined`	Called if the game turns the hold off because a write failed.

`HookTest`

A condition. Made by phantom.flash.rules.

Field	Type
`__@TEST@169973`	`RawTest`

`FlashArgumentLike`

Anything the bridge carries, typed places included.

TypeScript

type FlashArgumentLike = FlashArgument | TypedFlash<unknown> | FlashArgumentLike[] | { [key: string]: FlashArgumentLike }

`FlashValue`

A value on the TypeScript side: plain data, undefined, or a handle to an object in Flash.

TypeScript

type FlashValue = | null
  | undefined
  | boolean
  | number
  | string
  | FlashValue[]
  | { [key: string]: FlashValue }
  | FlashHandle

`FlashArgument`

What may be passed to Flash: a value, a function Flash may call, or an object to make there.

TypeScript

type FlashArgument = | FlashValue
  | FlashArgument[]
  | { [key: string]: FlashArgument }
  | ((...args: FlashValue[]) => void)
  | FlashNew

`FlashData`

Plain data read from Flash, with objects that live there as typed places.

TypeScript

type FlashData = | null
  | undefined
  | boolean
  | number
  | string
  | FlashData[]
  | { [key: string]: FlashData }
  | TypedFlash<unknown>

`AnyFlash`

A place whose class the declarations do not describe: phantom.flash.use('a.Class') for a class the client has no declaration for, $at, $as with a name, or anything read back from one.

Every member is another place of the same kind, and every place can be called, which is what reflection allows and what a place does at run time. Nothing is checked, because there is nothing to check it against: a name the game does not have fails when it is used, not here. then is left out, so awaiting a place is still the mistake it always was.

TypeScript

type AnyFlash = FlashPlace<unknown> &
  FlashMethod<unknown[], unknown> & {
    readonly [member: string]: AnyFlash;
  } & { then?: undefined }

`FlashMethod`

A method of the client, called with checked arguments.

TypeScript

type FlashMethod<Args extends readonly unknown[], Result> = (
  ...args: { [Index in keyof Args]: FlashWrite<Args[Index]> }
) => Promise<FlashRead<Result>>

`TypedFlash`

A place in Flash whose declared type is T.

TypeScript

type TypedFlash<T> = FlashPlace<T> &
  FlashConstructor<T> &
  (unknown extends T
    ? unknown
    : {
        readonly [Key in keyof T as Key extends `$${string}` ? never : Key]: T[Key] extends (
          ...args: infer Args
        ) => infer Result
          ? FlashMethod<Args, Result>
          : TypedFlash<T[Key]>;
      })

`FlashConstructor`

A class's constructor, from its declared $new.

TypeScript

type FlashConstructor<T> = T extends { $new(...args: infer Args): infer Instance }
  ? { $new: FlashMethod<Args, Instance> }
  : unknown

`UiPlace`

Where something of the client's is: a spot by name, or a place worked out some other way.

TypeScript

type UiPlace = UiSpot | FlashPlaceLike

`OverlayNode`

A drawn node. Calling it removes it, with everything drawn in it.

TypeScript

type OverlayNode = (() => Promise<void>) & {
  readonly node: number;
  readonly type: OverlaySpec['type'];
  /** Changes some of its fields; `null` resets one. */
  update(changes: OverlayOptions): Promise<void>;
  show(): Promise<void>;
  hide(): Promise<void>;
  remove(): Promise<void>;
  /**
   * Where it is now and how big it is, children and all, in the coordinates its own `x` and `y` are
   * in. For placing the next thing beside it without knowing how wide its text came out.
   */
  bounds(): Promise<OverlayBounds>;
  /**
   * Hears a mouse event on it. While it listens, the mouse does not reach the game through it, apart
   * from `hover`, which watches the mouse go by rather than taking it.
   */
  on(
    event: 'click' | 'down' | 'up' | 'over' | 'out' | 'hover',
    listener: (position: Position) => void
  ): () => Promise<void>;
  /** Hears the wheel turned over it, with how far, in lines: up is positive. */
  on(
    event: 'wheel',
    listener: (turn: { x: number; y: number; delta: number }) => void
  ): () => Promise<void>;
  /** Hears where a dragged node (`drag`) was let go, in its parent's coordinates. */
  on(event: 'move', listener: (position: Position) => void): () => Promise<void>;
  /** Hears a click on a span of its rich text with a link, with the link's value. */
  on(event: 'link', listener: (value: string) => void): () => Promise<void>;
  /** Hears that its image did not load. */
  onFailed(listener: (message: string) => void): () => void;
  /**
 …

`OverlayOptions`

A node, as scripts describe it. Colours may be numbers; the anchor may be any place.

Field	Type
`parent` optional	`OverlayNode \| null \| undefined`	The group or panel it is drawn in.
`host` optional	`OverlayPlaceOptions \| null \| undefined`	A container of the client's it is drawn in (see `FlashOverlay.attach`).
`replaces` optional	`OverlayPlaceOptions \| null \| undefined`	A display object of the client's it stands in for (see `FlashOverlay.replace`).
`layer` optional	`OverlayLayer \| null \| undefined`	Where a node drawn in the overlay itself (no `parent`, `host` or `replaces`) goes: above everything, `top`, by default; or `room`, inside the game's room just under its chat balloons. A mark over an animal belongs in the room: it stays over the animals and the scenery in front of them, but never covers what anybody says, the HUD, a popup or the World Map. It is placed and sized just as it would be on top, so an `anchor` is followed the same way. A node in a group goes where its group does, so give the group the layer. Where the game has no room to draw in, and with a loader from before `roomLayer` (`overlay.can('roomLayer')`), it is drawn on top. `ts const view = phantom.flash.use('avatar.AvatarManager').playerAvatarWorldView; const star = await phantom.flash.overlay.text('★', { layer: 'room', anchor: { place: view, y: -90 }, centered: true, });`
`x` optional	`number \| undefined`
`y` optional	`number \| undefined`
`anchor` optional	`OverlayAnchorOptions \| null \| undefined`
`align` optional	`OverlayAlign \| null \| undefined`	Where it sits in the box it is drawn in: the stage, the group or panel it is in, or the client object it replaces. `x` and `y` are then an offset from that point. Not with `anchor`.
`drag` optional	`boolean \| OverlayDrag \| null \| undefined`	Moved by the player with the mouse: true, or the rules it moves by. `on('move')` hears it.
`visible` optional	`boolean \| undefined`
`alpha` optional	`number \| undefined`
`rotation` optional	`number \| undefined`
`scale` optional	`number \| undefined`
`centered` optional	`boolean \| undefined`
`fill` optional	`OverlayColor \| null \| undefined`
`stroke` optional	`number \| { color: number; alpha?: number \| undefined; width?: number \| undefined; } \| null \| undefined`
`width` optional	`number \| undefined`
`height` optional	`number \| undefined`
`cornerRadius` optional	`number \| undefined`
`radius` optional	`number \| undefined`
`toX` optional	`number \| undefined`
`toY` optional	`number \| undefined`
`text` optional	`string \| undefined`
`rich` optional	`string \| TextSpan[] \| null \| undefined`	Rich text: spans, or markup (`parseMarkup`), in place of `text`.
`font` optional	`Partial<OverlayFont> \| undefined`
`background` optional	`OverlayColor \| null \| undefined`
`padding` optional	`number \| undefined`
`outline` optional	`number \| null \| undefined`
`wrapWidth` optional	`number \| undefined`	`text`: wrap at this width, over as many lines as it takes; one line, however long, when left out.
`url` optional	`string \| undefined`
`hand` optional	`boolean \| undefined`

`OverlayAlign`

Where a node sits in the box it is drawn in: the stage for a node of the overlay's own, the content of the group or panel it is in, or the client object it replaces. The node's x and y are then an offset from that point, and the loader puts it there again whenever the box changes size, so a node in the middle stays in the middle when the window is resized.

Field	Type
`x` optional	`"left" \| "right" \| "center" \| undefined`	`left` by default: the node's left edge, its middle, or its right edge.
`y` optional	`"top" \| "middle" \| "bottom" \| undefined`	`top` by default.

`OverlayDrag`

A node the player moves with the mouse. Flash follows the mouse itself, so nothing crosses the bridge while the drag runs: the node posts move with where it ended up, in its parent's coordinates, and live posts one for each step of the drag as well.

Field	Type
`axis` optional	`OverlayDragAxis \| undefined`	`both` by default.
`left` optional	`number \| undefined`	Kept inside these, in its parent's coordinates; each may be left out.
`top` optional	`number \| undefined`
`right` optional	`number \| undefined`
`bottom` optional	`number \| undefined`
`step` optional	`number \| undefined`	Moved in steps of this many pixels, so a slider can hold whole values.
`live` optional	`boolean \| undefined`	Post `move` for every step of the drag, not only where it ended.

`TextSpan`

One run of rich text. Its text is set as text, never read as HTML, and its look is applied as a text format over its range; link makes the run clickable, posting a link event with the value.

Field	Type
`text`	`string`
`color` optional	`number \| undefined`
`bold` optional	`boolean \| undefined`
`italic` optional	`boolean \| undefined`
`underline` optional	`boolean \| undefined`
`size` optional	`number \| undefined`
`font` optional	`string \| undefined`
`link` optional	`string \| undefined`

`OverlayBounds`

Where a node is, and how big, as Flash has it now.

Field	Type
`x`	`number`	Its box in the coordinates of whatever it is drawn in, children and all.
`y`	`number`
`width`	`number`
`height`	`number`
`shown`	`boolean`	Whether it is on the stage and visible, with every parent visible too.

`Position`

Field	Type
`x`	`number`
`y`	`number`

`UiWidget`

What every widget has: where it is drawn, and how to take it away. Call it to remove it.

TypeScript

type UiWidget = (() => Promise<void>) & {
  /** The skin it was drawn in. */
  readonly skin: UiSkin;
  /**
   * The overlay node it is drawn in, for anything `phantom.flash.overlay` can do to a node:
   * anchoring it to an avatar, moving it into one of the client's containers, changing its colours.
   */
  readonly node: OverlayNode;
  /** Moves it, in the coordinates of whatever it is drawn in. */
  move(x: number, y: number): Promise<void>;
  show(): Promise<void>;
  hide(): Promise<void>;
  remove(): Promise<void>;
}

Run in Phantom

`UiRemove`

What takes something off the screen again. Calling it twice does nothing.

TypeScript

type UiRemove = () => Promise<void>

`TextStyle`

A text field's look as style sets it. Every field may be left out, and is then left as the client has it; background and border take a colour, or false to turn them off.

Field	Type
`font` optional	`string \| undefined`
`size` optional	`number \| undefined`
`color` optional	`number \| undefined`
`bold` optional	`boolean \| undefined`
`italic` optional	`boolean \| undefined`
`underline` optional	`boolean \| undefined`
`align` optional	`"left" \| "right" \| "center" \| "justify" \| undefined`
`leading` optional	`number \| undefined`
`letterSpacing` optional	`number \| undefined`
`background` optional	`number \| false \| undefined`
`border` optional	`number \| false \| undefined`
`outline` optional	`number \| null \| undefined`	A glow of this colour around the letters, to read over anything.

`RecolorOptions`

A colour change: a named look, a ColorMatrixFilter's twenty numbers, adjustments, a tint, or a ColorTransform's multipliers and offsets.

TypeScript

type RecolorOptions = | 'grayscale'
  | 'sepia'
  | 'invert'
  | 'night'
  | { matrix: number[] }
  | {
      /** -1 (black) to 1 (white); 0 leaves it. */
      brightness?: number;
      /** -1 to 1; 0 leaves it. */
      contrast?: number;
      /** 0 is grey, 1 leaves it, above 1 is more colourful. */
      saturation?: number;
      /** Degrees around the colour wheel. */
      hue?: number;
    }
  | { tint: number; amount?: number }
  | { transform: Partial<ColorTransformEffect> }

`HighlightOptions`

Highlights and colour changes, as scripts describe them, made into the loader's HighlightEffect.

TypeScript

const off = await phantom.flash.highlight(view, { color: 0x8b5cf6, strength: 2, pulse: true });
const normal = await phantom.flash.recolor({ saturation: 0 });

Run in Phantom

Field	Type
`color` optional	`number \| undefined`	The glow's colour. A glow is drawn unless `glow` is false or another effect is asked for alone.
`strength` optional	`number \| undefined`	How strong the glow is: 2 by default.
`blur` optional	`number \| undefined`	How far the glow spreads, in pixels: 8 by default.
`alpha` optional	`number \| undefined`
`inner` optional	`boolean \| undefined`	Glow inside the object's edges rather than around them.
`knockout` optional	`boolean \| undefined`	Only the glow, without the object.
`glow` optional	`boolean \| undefined`
`pulse` optional	`boolean \| { frames?: number \| undefined; from?: number \| undefined; to?: number \| undefined; } \| undefined`	Fade in and out: `true` for a gentle pulse (from 60% to full strength and back every two and a half seconds), or how: `frames` for one cycle at the game's 24 a second, `from` and `to` as fractions of the glow.
`recolor` optional	`RecolorOptions \| undefined`	A colour change on the object, as `recolor` takes it.
`hide` optional	`boolean \| undefined`	Hide the object while highlighted.

`UiRuleTarget`

Which of the client's objects a rule applies to: a class, and the spot to look under.

TypeScript

type UiRuleTarget = | string
  | {
      /** The class, by qualified name (`flash.text.TextField`). Subclasses match too. */
      ofClass: string;
      /** Only under this spot or place (`hud`, `gui`): the whole game when left out. */
      in?: UiPlace;
      /** `displayList` (the default) finds what is drawn; `holder` reads a list at `in`. */
      mode?: TrackMode;
    }

Run in Phantom

`UiElement`

One of the game's objects a rule matched. place is the object itself, typed as its class, for reading, writing and calling. Every change made through the element's own methods is undone by itself when the rule stops or the object goes, so a rule never has to clean up after itself.

Field	Type
`place`	`TypedFlash<T>`
`hide`	`(...path: string[]) => Promise<void>`	Hides the object, or one of its members by path: `el.hide()`, `el.hide('_pet')`. A member that is not there (no pet today) is left alone.
`highlight`	`(options?: HighlightOptions \| undefined) => Promise<void>`	A glow, a pulse or a colour change on the object.
`recolor`	`(options: RecolorOptions) => Promise<void>`	A colour change on the object: `'grayscale'`, a tint, a matrix.
`style`	`(style: TextStyle) => Promise<void>`	A text field's font, size, colour, outline.
`keep`	`(member: string, value: unknown) => Promise<void>`	Keeps one of the object's members at a value, written in the game every frame so the client cannot put its own back: `el.keep('alpha', 0.5)`, `el.keep('scaleX', 2)`.
`attach`	`(node: UiNodeSource<T>, options?: UiAttachOptions \| undefined) => Promise<OverlayNode>`	Draws a node of yours inside the object, or inside one of its members, so it moves, scales and hides with it: a tag on every avatar, a badge on every button. Give a function to make a fresh node for each object. Resolves with the node, to update later; it is removed with the rule. `ts await phantom.flash.ui.rule('avatar.AvatarWorldView', (el) => el.attach(async (view) => phantom.flash.overlay.text(await view.userName.$get(), { y: -90 })) );`
`replace`	`(node: UiNodeSource<T>, options?: UiAttachOptions \| undefined) => Promise<OverlayNode>`	Hides the object, or one of its members, and draws a node of yours in its place, at its position. Put back when the rule stops or the object goes.
`undoWith`	`(undo: () => unknown) => void`	Anything else of your own to undo with the rule: a hook, an overlay node.

`UiNodeSource`

A node for one object: drawn already, or made for it (a rule draws one per object it meets).

TypeScript

type UiNodeSource<T> = OverlayNode | ((place: TypedFlash<T>) => OverlayNode | Promise<OverlayNode>)

`UiAttachOptions`

Where inside the object a node goes: a member path from it, dotted ('_nameBar').

Field	Type
`in` optional	`string \| undefined`

`UiRuleOptions`

Field	Type
`unless` optional	`((place: TypedFlash<T>) => boolean \| Promise<boolean>) \| undefined`	Leaves an object alone while this holds: a buddy, the player themselves. Asked again for every object on `rule.refresh()`, so a rule can follow what changes outside the game.
`everyFrames` optional	`number \| undefined`	How often the game looks for new objects, in frames (24 a second): 6 by default.
`onError` optional	`((error: unknown) => void) \| undefined`	Hears an object the rule could not be applied to. Logged to the console by default.

`UiRule`

A running rule: call it to stop, which undoes it everywhere.

TypeScript

type UiRule = (() => Promise<void>) & {
  /** Asks `unless` again for every object, applying or undoing the rule where the answer changed. */
  refresh(): Promise<void>;
  /** How many objects the rule is applied to now. */
  readonly count: number;
}

`UiScreenName`

One of the client's screens, by a name of its own.

TypeScript

type UiScreenName = | 'avatarEditor'
  | 'denEditor'
  | 'settings'
  | 'buddyList'
  | 'petCreator'
  | 'achievements'
  | 'bulletinBoard'
  | 'playerSearch'
  | 'recycle'
  | 'trade'
  | 'petInventory'
  | 'reportPlayer'
  | 'serverSelector'

`UiScreenRow`

A row a plugin contributes to one of the client's own lists.

Field	Type
`name`	`string`	A name of the plugin's own, which the press listener hears back and `contributions` lists it under. Two rows with the same name on the same list is a mistake, and refused.
`label`	`string`	The words down the left of the row, written into the client's own label field. A grid tile has no label field of its own, so for a tile this is the name the client knows the tile by (`ItemWindowOriginal.itemName`) and `tooltip` is what is drawn.
`control`	`UiRowControl`	What the player works.
`list` optional	`UiListName \| undefined`	Which list, for a screen with more than one. The screen's only list by default.
`tooltip` optional	`string \| undefined`	Words shown while the mouse rests on the row, drawn in the game's own tooltip. The client's settings rows carry no tooltip of their own (`ItemWindowToggle` is built with tooltips off), so this is Phantom's, in the game skin.

`UiRowControl`

What the player works on a contributed row: Animal Jam's own On/Off switch, its own labelled button, its own words, or one of its own grid tiles.

The first three are three of the five row types gui/MySettings.as declares (TOGGLE_TYPE_TOGGLE_BTN, TOGGLE_TYPE_JOIN, TOGGLE_TYPE_TEXT). The other two are not offered: TOGGLE_TYPE_SCRUB drags the game's volume straight into SBAudio and TOGGLE_TYPE_CURSOR writes the player's cursor into the client's shared object, so neither can be repurposed without stopping the client's own handler mid-drag.

tile is the other shape the client draws a list in: one square of an item grid (gui/itemWindows/ItemWindowOriginal.as), which is what the clothes grid and the den strip are made of. A tile shows a picture rather than a control, so its label is the name the client knows it by rather than words on it, and tooltip is what the player reads.

Which list draws which is in LISTS, and explore reports it.

TypeScript

type UiRowControl = | {
      kind: 'toggle';
      /** Whether the switch starts on. Off when it does not say. */
      on?: boolean;
      /**
       * The picture beside it: one of Animal Jam's with an On and an Off state, the plugin's own,
       * or one of Phantom's drawn icons.
       */
      icon?: UiRowToggleIcon | UiRowPicture | UiRowDrawnIcon;
    }
  | {
      kind: 'button';
      /** The words on the button. */
      button: string;
      icon?: UiRowIcon;
    }
  | {
      kind: 'label';
      icon?: UiRowIcon;
    }
  | {
      kind: 'tile';
      /** The picture on it. A tile has no stock pictures, so this is the plugin's own. */
      icon?: UiRowPicture;
    }

`UiRowPicture`

A picture of the plugin's own, in place of one of Animal Jam's.

It is drawn inside the client's own icon box, at the size the art gives that box, so what is on screen is still the client's row: its frame, its switch, its hover and its press. Nothing else about the row changes.

A picture of the plugin's own does not animate with a switch, because the client's animation is frames inside its own clip and a loaded picture has none. The switch still moves; the picture beside it stays put.

Field	Type
`image`	`string`	Where it loads from: an address the game can read, or `data:image/png;base64,...`.
`alt` optional	`string \| undefined`	What it shows in words, drawn in its place if it never loads, so a hole reads as something.

`UiRowDrawnIcon`

One of Phantom's own icons (phantom.aj.ui.icons()), drawn as lines in the box the stock picture would have filled: icon: { draw: 'keyboard' }. It needs no file and no address, scales to the box the art gives, and is drawn in the game skin's ink unless color says otherwise.

Like a picture of the plugin's own, it does not animate with a switch; the switch still moves.

Field	Type
`draw`	`"chat" \| "warning" \| "filter" \| "sparkle" \| "camera" \| "focus" \| "close" \| "info" \| "magnifier" \| "globe" \| "check" \| "chevronDown" \| "chevronUp" \| "chevronLeft" \| "chevronRight" \| "ring" \| "dot" \| "plus" \| "minus" \| "bars" \| "gear" \| "square" \| "arrowUp" \| "arrowDown" \| "zoomIn" \| "keyboard" \| "eye" \| "eyeOff" \| "clock" \| "tag" \| "gauge" \| "shirt"`	Which of Phantom's icons, by the name `phantom.aj.ui.icons()` lists it under.
`color` optional	`number \| undefined`	What it is drawn in, as `0xRRGGBB`: the game skin's ink when left out.

`UiRowEvent`

A press on a contributed row.

Field	Type
`name`	`string`	The row's own name, as it was contributed.
`screen`	`UiScreenName`
`on`	`boolean \| null`	For a switch, what it reads after the press; null for any other row.
`row`	`FlashPlace<unknown>`	The row itself, typed loosely, for reading or changing anything else about it.

`UiContribution`

A contribution in place. Call it to take the row away: it goes from the screen that is up and is not put back the next time the screen is built.

TypeScript

type UiContribution = UiRemove & {
  readonly screen: UiScreenName;
  readonly list: UiListName;
  readonly name: string;
  /** How many times the row has been put into a freshly built list. */
  readonly applied: number;
  /** How many of those tries failed. */
  readonly failures: number;
  /** What went wrong the last time, or null. */
  lastError(): string | null;
  /** The row in the screen that is up, or null while the screen is shut. */
  row(): TypedFlash<unknown> | null;
  /**
   * Changes what the row shows (a switch's position, a button's words, the label, the picture),
   * kept for the next build. The kind of control cannot change: the client built the row as it is.
   */
  set(control: Partial<UiRowControl> & { label?: string }): Promise<void>;
}

`UiListName`

One of the client's own generated lists, by a name of its own.

A list is named <screen>.<what it holds>, because a screen may generate more than one and a row then has to say which it is for. The array behind every one of them is built again from scratch each time the client fills it, which is why a row is contributed rather than inserted: Phantom puts it back each time.

LISTS below says what a new one needs, and the report in apps/docs/src/plugins/contributions.md says which of the client's other lists are within reach and which are not.

TypeScript

type UiListName = | 'settings.rows'
  | 'serverSelector.worlds'
  | 'buddyList.buddies'
  | 'avatarEditor.items'
  | 'denEditor.items'

`UiContributionState`

How one contribution has fared, as contributions lists it.

Field	Type
`name`	`string`
`screen`	`UiScreenName`
`list`	`UiListName`
`applied`	`number`
`failures`	`number`
`error`	`string \| null`

`UiScreenReport`

What one of the client's screens is made of, in the terms a contribution is written in.

Field	Type
`name`	`UiScreenName`
`open`	`boolean`	Whether it is up now.
`spot`	`UiScreenSpot \| null`	The spot its own display object is at, for `ui.attach` and `ui.replace`; null where none.
`lists`	`UiListReport[]`	Its generated lists, each one a row can be contributed to.
`children`	`string[]`	The named children of its own display object; empty with none, or while it is shut.

`UiListReport`

One generated list, as explore reports it.

Field	Type
`name`	`UiListName`	The list's name, for `contribute`.
`itemClass`	`string`	The client class that draws one of its rows (`gui.itemWindows.ItemWindowToggle`).
`builder`	`"WindowGenerator" \| "WindowAndScrollbarGenerator"`	Which of the client's two list builders it is.
`rows`	`number \| null`	How many rows are in it now, or null while the screen is shut.
`fields`	`string[]`	The fields the client's own first row carries; empty while the screen is shut.
`controls`	`("tile" \| "button" \| "toggle" \| "label")[]`	The controls a row on this list may have.
`picture`	`boolean`	Whether a row on this list can carry a picture of the plugin's own.

`UiScreenEvent`

One of the client's screens opening (once it has built itself) or closing.

Field	Type
`name`	`UiScreenName`
`open`	`boolean`
`spot`	`UiScreenSpot \| null`

`UiWindowOptions`

TypeScript

type UiWindowOptions = UiOptions &
  UiChromeOptions & {
    title?: string;
    /** Dragged by its title bar: true by default. */
    draggable?: boolean;
    /** Sized from its bottom right corner (Phantom's skin only). */
    resizable?: boolean;
    /** A close button in its corner: true by default. */
    closable?: boolean;
    /**
     * At least this wide inside, for what is to be drawn in it: a window narrower than that, by its
     * art or its `width`, is made wider. It is also never narrower than its title.
     */
    minBodyWidth?: number;
    /**
     * In the game skin, the client's own popup (`SBStandardPopup`) rather than its art drawn in an
     * overlay panel: true by default. A window with a `parent` is never native.
     */
    native?: boolean;
    /** A native window darkens the game behind it, as the client's own popups do: false by default. */
    darken?: boolean;
    /** A native window takes the mouse from the client's other popups while open: false by default. */
    modal?: boolean;
    /**
     * How long the game skin waits for the client's popup art before drawing in its colours
     * instead: two minutes by default, long enough for the player to log in.
     */
    timeoutMs?: number;
  }

`UiOptions`

Where and how a widget is drawn. Every widget takes these, and a skin of its own.

Field	Type
`skin` optional	`UiSkin \| undefined`	Which look: the default (`phantom.aj.ui.skin`) when left out.
`parent` optional	`OverlayNode \| UiWidget \| null \| undefined`	The window, scroll box or group it is drawn in.
`x` optional	`number \| undefined`
`y` optional	`number \| undefined`
`width` optional	`number \| undefined`
`height` optional	`number \| undefined`
`visible` optional	`boolean \| undefined`	Drawn from the start hidden.

`UiChromeOptions`

What a window may be asked for beyond its title.

Field	Type
`subtitle` optional	`string \| undefined`	A muted line under the title: how many of something are on, what account this is.
`header` optional	`boolean \| undefined`	A band across the top of the body for a search field, a filter or a close.
`headerHeight` optional	`number \| undefined`	How tall that band is: a control's height and a bit, measured in the skin's font, by default.
`footer` optional	`boolean \| undefined`	A band across the bottom of the body for a segmented control and a few hints.
`footerHeight` optional	`number \| undefined`	How tall that band is: a control's height and a bit, measured in the skin's font, by default.

`UiWindow`

A window: a box with a title bar, dragged by it, with a body to draw in.

TypeScript

type UiWindow = UiWidget & {
  /**
   * The node other widgets are drawn in, from its top left corner, below the title (and below the
   * subtitle and header, when there are any). In Phantom's skin and the drawn frame what is drawn in
   * it is clipped to it; in a native window it is not, so `fit` it to what it holds.
   */
  readonly body: OverlayNode;
  /** The size it is now, frame and all. `fit` and `resize` change it. */
  readonly width: number;
  readonly height: number;
  /** How much room the body has, which is what to lay widgets out by. */
  readonly bodyWidth: number;
  readonly bodyHeight: number;
  /**
   * Whether it is drawn in the client's own popup frame. Always false in Phantom's skin; false in
   * the game's only when the client's art did not arrive in time, in which case it is drawn in the
   * game skin's colours instead and says so on the console.
   */
  readonly framed: boolean;
  /**
   * Whether it is the client's own popup (`SBStandardPopup`), with the client's dragging,
   * darkening and close box: the game skin's window unless `native: false`, a `parent` or the
   * client's refusal said otherwise.
   */
  readonly native: boolean;
  /** The client's popup a native window is, for anything else the client can do with one; else null. */
  readonly popup: FlashHandle | null;
  /**
   * Where a native window's body is in the client's own clip that its contents are drawn in, for
   * putting one of the client's display objects in the body (`host.a…

`UiFitOptions`

How fit sizes a window to its contents.

Field	Type
`padding` optional	`number \| undefined`	The room left below the lowest thing in the body: 8 pixels by default.
`minHeight` optional	`number \| undefined`	The body is never shorter than this.
`maxHeight` optional	`number \| undefined`	Nor taller than this; what is below it is then out of the window.

`UiButtonOptions`

TypeScript

type UiButtonOptions = UiOptions & {
  /** Faded, no hand cursor, and its clicks go nowhere. */
  disabled?: boolean;
  /** Drawn in the skin's accent rather than its plain button colours. */
  primary?: boolean;
  /** A picture on the button: an address the game can load, or a `data:` URL. */
  image?: string;
  /** The picture fills the button in place of the words, which stay its name. */
  imageOnly?: boolean;
}

`UiButton`

TypeScript

type UiButton = UiWidget & {
  /** The words it is named by, whether or not they are drawn on it (`imageOnly`). */
  label(): string;
  setLabel(label: string): Promise<void>;
  setDisabled(disabled: boolean): Promise<void>;
  /** Draws another picture on it, or takes the one it has off (`null`), which brings the words back. */
  setImage(image: string | null): Promise<void>;
  onClick(listener: () => void): () => void;
}

`UiLabelOptions`

TypeScript

type UiLabelOptions = UiOptions & {
  /** Bigger and bold, for a heading. */
  heading?: boolean;
  /** Drawn in the skin's `muted`, for a hint. */
  muted?: boolean;
  /** Centred on its position. */
  centered?: boolean;
  /** A box behind the words, in the skin's panel colour. */
  background?: boolean;
  /**
   * Wraps the words at this width, in pixels, over as many lines as they take; one line however
   * long when left out. `measure` says how tall they will come out first.
   */
  wrapWidth?: number;
}

`UiLabel`

TypeScript

type UiLabel = UiWidget & { setText(text: string): Promise<void> }

`UiInputOptions`

TypeScript

type UiInputOptions = UiOptions & {
  value?: string;
  placeholder?: string;
  /** At most this many characters; 0 for no limit. */
  maxLength?: number;
  /** Several lines: Enter starts a new one, and Ctrl+Enter submits. */
  multiline?: boolean;
  disabled?: boolean;
}

Building interfaces ​

Overview ​

Properties ​

skin ​

Methods ​

attach ​

badge ​

box ​

button ​

card ​

checkbox ​

choose ​

clear ​

colors ​

contribute ​

contributions ​

debugLayout ​

dropdown ​

explore ​

grid ​

hasSymbol ​

hide ​

highlight ​

icon ​

iconButton ​

icons ​

image ​

input ​

inspect ​

keyChip ​

label ​

list ​

menu ​

menuButton ​

notice ​

paletteValues ​

place ​

places ​

progress ​

prompt ​

ready ​

recolor ​

replace ​

restyle ​

rule ​

screens ​

scroll ​

search ​

segmented ​

stageSize ​

status ​

style ​

symbol ​

symbols ​

tabBar ​

tabs ​

tag ​

theme ​

tipOn ​

toggle ​

tooltip ​

window ​

Events ​

onScreen ​

onStageResize ​

ui.popup ​

closeAll ​

message ​

ok ​

okCancel ​

parchment ​

titled ​

yesNo ​

Types ​

UiSkin ​

UiTheme ​

UiReadiness ​

ActOptions ​

UiStageSize ​

UiSpot ​

Building interfaces

Overview

Properties

`skin`

Methods

`attach`

`badge`

`box`

`button`

`card`

`checkbox`

`choose`

`clear`

`colors`

`contribute`

`contributions`

`debugLayout`

`dropdown`

`explore`

`grid`

`hasSymbol`

`hide`

`highlight`

`icon`

`iconButton`

`icons`

`image`

`input`

`inspect`

`keyChip`

`label`

`list`

`menu`

`menuButton`

`notice`

`paletteValues`

`place`

`places`

`progress`

`prompt`

`ready`

`recolor`

`replace`

`restyle`

`rule`

`screens`

`scroll`

`search`

`segmented`

`stageSize`

`status`

`style`

`symbol`

`symbols`

`tabBar`

`tabs`

`tag`

`theme`

`tipOn`

`toggle`

`tooltip`

`window`

Events

`onScreen`

`onStageResize`

`ui.popup`

`closeAll`

`message`

`ok`

`okCancel`

`parchment`

`titled`

`yesNo`

Types

`UiSkin`

`UiTheme`

`UiReadiness`

`ActOptions`

`UiStageSize`

`UiSpot`