@gameable/screens

Interfaces

Bound

A bound screen: its root and its slots by name.

Properties

missing

readonly missing: string[];

The slot names asked for that the page does not have.

root

readonly root: HTMLElement;

The screen's root element.

Methods

has()

has(name): boolean;

Whether the page has this slot.

Parameters

Parameter	Type	Description
name	string	The slot's name.

Returns

boolean

True when the slot is in the markup.

slot()

slot(name): HTMLElement;

The slot by name: the page's element, or a detached stand-in when the page has no such slot (so a write never throws).

Parameters

Parameter	Type	Description
name	string	The slot's name.

Returns

HTMLElement

The element.

template()

template(name): HTMLTemplateElement | null;

A template by slot name, for rows the kit clones.

Parameters

Parameter	Type	Description
name	string	The template's slot name.

Returns

HTMLTemplateElement | null

The template, or null when the page gave none.

---

Figure

What the cache holds: anything that can be let go.

Methods

dispose()

dispose(): void;

Let the figure go (its memory, its place in the scene).

Returns

void

---

Figures

The figure cache.

Type Parameters

Type Parameter
V extends Figure

Properties

limit

readonly limit: number;

How many are kept at most.

loaded

readonly loaded: string[];

The figures in memory now.

loading

readonly loading: string[];

The figures loading now.

Methods

failed()

failed(key): boolean;

Whether a figure failed to load.

Parameters

Parameter	Type	Description
key	string	The figure's key.

Returns

boolean

True after a failed load.

get()

get(key): V | null;

The figure, if it is in.

Parameters

Parameter	Type	Description
key	string	The figure's key.

Returns

V | null

The figure, or null.

load()

load(key): Promise<V | null>;

A figure, loading it if it is not in or on its way.

Parameters

Parameter	Type	Description
key	string	The figure's key.

Returns

Promise<V | null>

The figure, or null when it did not load.

makeRoom()

makeRoom(fits): void;

Room for a figure about to load: figures not needed now let go, the least recently used first, until fits says there is room, or none is left to let go.

Parameters

Parameter	Type	Description
fits	() => boolean	Whether there is room now.

Returns

void

need()

need(keys): void;

The figures a screen needs now: each loads at once if it is not in (a failed one tries again), none of them is let go while needed, and they are the most recently used.

Parameters

Parameter	Type	Description
keys	readonly string[]	The figures' keys.

Returns

void

progress()

progress(keys): object;

How much of these figures is in (by bytes where known) and whether every one is in.

Parameters

Parameter	Type	Description
keys	readonly string[]	The figures' keys.

Returns

object

The share 0..1 and whether all are in.

allIn

allIn: boolean;

frac

frac: number;

settled()

settled(key): boolean;

In, or failed: nothing more is coming for it.

Parameters

Parameter	Type	Description
key	string	The figure's key.

Returns

boolean

True when the load is over, either way.

---

FigureView

A figure in a slot: whatever draws a picked fighter there.

Methods

dispose()

dispose(): void;

Take the figure off the page.

Returns

void

setPlaying()

setPlaying(on): void;

The screen hidden: nothing plays; shown again, the idle from the start.

Parameters

Parameter	Type
on	boolean

Returns

void

show()

show(id, picked?): void;

This fighter, standing.

Parameters

Parameter	Type	Description
id	string	The fighter.
picked?	boolean	The fighter was just picked: its pick move first, once.

Returns

void

---

HudModel

What the HUD shows.

Properties

advantage?

optional advantage?: string;

Training: the frame advantage line.

banner?

optional banner?: 
  | {
  big: string;
  sub?: string;
}
  | null;

The big words, or none.

clock?

optional clock?: string;

The clock's words ('' hides it).

help?

optional help?: string;

The help line.

p1

p1: HudSide;

Player 1's side (left).

p2

p2: HudSide;

Player 2's side (right).

track?

optional track?: string;

Training: the string under way, as markup the game owns (<b> for a key).

---

HudScreen

The HUD.

Properties

element

readonly element: HTMLElement;

The HUD's root.

shown

readonly shown: boolean;

Whether the HUD is up.

Methods

callout()

callout(side, text): void;

A word beside a side for a moment (COUNTER, CLEAN HIT, a string's name). A side the HUD does not have (a rumble's third fighter) is ignored.

Parameters

Parameter	Type	Description
side	0 | 1	0 or 1.
text	string	The word.

Returns

void

note()

note(text): void;

A note at the top for a moment (CONTROLLER 1 CONNECTED).

Parameters

Parameter	Type	Description
text	string	The words.

Returns

void

set()

set(model): void;

Draw the model (every frame; only what changed touches the page).

Parameters

Parameter	Type	Description
model	HudModel	What to show.

Returns

void

show()

show(on): void;

Shown or hidden; shown starts clean (no hit count or callout left from the last fight).

Parameters

Parameter	Type	Description
on	boolean	Shown.

Returns

void

update()

update(now): void;

Time passes: combos and callouts fade, the note goes. Once a frame.

Parameters

Parameter	Type	Description
now	number	Milliseconds.

Returns

void

---

HudSide

One side of the HUD.

Properties

combo?

optional combo?: number;

The hits of the combo under way; under 2 is none.

health

health: number;

Health left, 0..1.

history?

optional history?: string;

Training: the input history, newest first, one line each.

name

name: string;

The fighter's name.

pips?

optional pips?: number;

Rounds to win (pips drawn). 0 in training.

won?

optional won?: number;

Rounds won (pips lit).

---

HudTimes

How long things stay (ms).

Properties

callout

callout: number;

A callout stays this long. Default 1000.

combo

combo: number;

A combo's count stays this long after its last hit. Default 1170 (70 frames at 60).

note

note: number;

A controller's note stays this long. Default 3500.

---

HudWords

The HUD's words.

Properties

hits

hits: (n) => string;

The hit count.

Parameters

Parameter	Type
n	number

Returns

string

---

KeyCap

One cap of a key sequence.

Properties

note?

optional note?: boolean;

Drawn as a note beside the keys, not as a cap.

text

text: string;

The cap's words (a key, 'in the air', '+').

---

Keys

The keys.

Methods

clear()

clear(): void;

Forget every press waiting to be taken (a screen changed).

Returns

void

clearTapped()

clearTapped(codes): void;

The game has read these keys this frame: their taps are spent.

Parameters

Parameter	Type	Description
codes	Iterable<string>	The codes read.

Returns

void

dispose()

dispose(): void;

Stop listening.

Returns

void

held()

held(code): boolean;

Down now.

Parameters

Parameter	Type	Description
code	string	A KeyboardEvent.code.

Returns

boolean

True while held.

take()

take(code): boolean;

A press (not a repeat) not yet taken: for menus and switches. Taking it spends it.

Parameters

Parameter	Type	Description
code	string	A KeyboardEvent.code.

Returns

boolean

True once per press.

tapped()

tapped(code): boolean;

Down now, or pressed since the last clearTapped of it (a tap shorter than a frame counts).

Parameters

Parameter	Type	Description
code	string	A KeyboardEvent.code.

Returns

boolean

True when held or tapped.

---

LoadingMode

A mode the loading screen offers (single player, multiplayer, watch, training).

Properties

id

id: string;

What the game is told when it is chosen.

label

label: string;

The words on the button.

small?

optional small?: boolean;

Drawn smaller, under a rule (a mode for the few).

---

LoadingModel

What the loading screen shows.

Properties

frac

frac: number;

How much is in, 0..1.

ready

ready: boolean;

The game's own things are in: the modes are there to press.

subtitle?

optional subtitle?: string;

A line under the title.

text

text: string;

The words under the ring.

title?

optional title?: string;

The game's title, where the markup has a slot for it.

---

LoadingScreen

The loading screen.

Properties

element

readonly element: HTMLElement;

The screen's root.

marked

readonly marked: number;

The marked mode's place.

modeIds

readonly modeIds: string[];

The modes' ids, in order.

ready

readonly ready: boolean;

Whether the modes are there to press.

shown

readonly shown: boolean;

Whether the screen is up.

Methods

choose()

choose(i?): void;

Choose the marked mode, or one by place. Nothing until ready.

Parameters

Parameter	Type	Description
i?	number	The place; the marked one when left out.

Returns

void

hide()

hide(now?): void;

Away: a fade, or gone at once.

Parameters

Parameter	Type	Description
now?	boolean	Gone at once.

Returns

void

hideModes()

hideModes(): void;

The page opened straight into a fight: the screen without its modes.

Returns

void

mark()

mark(i): void;

Mark a mode (the keys, a pad, the mouse over it).

Parameters

Parameter	Type	Description
i	number	Its place; wraps.

Returns

void

modes()

modes(modes): void;

The modes, when the markup has none of its own (a page's own [data-mode] buttons are found and kept).

Parameters

Parameter	Type	Description
modes	readonly LoadingMode[]	The modes, in order.

Returns

void

set()

set(model): void;

Draw the bar and the words; ready shows the modes.

Parameters

Parameter	Type	Description
model	LoadingModel	What to show.

Returns

void

show()

show(): void;

Shown, and whether it is.

Returns

void

---

PadNavigator

The slice of navigator the pads read.

Properties

getGamepads?

optional getGamepads?: () => (Gamepad | null)[];

The browser's controllers.

Returns

(Gamepad | null)[]

---

PadNoteWords

The words a controller leaves when it connects or goes.

Properties

connected

connected: (n) => string;

Connected, by its number (1 the first).

Parameters

Parameter	Type
n	number

Returns

string

disconnected

disconnected: string;

Gone.

---

PadRead

One controller, read for a fight.

Properties

ax

ax: number;

The left stick's raw axes, -1..1, +y pushed down.

ay

ay: number;

east

east: boolean;

Circle or B.

l1

l1: boolean;

L1 or LB.

l2

l2: boolean;

L2 or LT, pressed.

north

north: boolean;

Triangle or Y.

r1

r1: boolean;

R1 or RB.

r2

r2: boolean;

R2 or RT, pressed.

select

select: boolean;

Share, Select or Back.

south

south: boolean;

Cross or A.

start

start: boolean;

Options or Start.

west

west: boolean;

Square or X.

x

x: -1 | 0 | 1;

The stick or the cross: -1 left, 0, +1 right.

y

y: -1 | 0 | 1;

The stick or the cross: +1 up, 0, -1 down.

---

Pads

The controllers.

Methods

list()

list(): Gamepad[];

The connected controllers, in the order they were connected.

Returns

Gamepad[]

read()

read(who): PadRead | null;

Read a player's controller.

Parameters

Parameter	Type	Description
who	number	The player's place (0 the first controller connected).

Returns

PadRead | null

The read, or null when that player has no controller.

steps()

steps(): object[];

Every controller's pushes since the last look, as menu steps.

Returns

object[]

The steps, each with its controller's place.

---

PauseModel

The move list.

Properties

groups

groups: object[];

The groups, in order.

name

name: string;

rows

rows: PauseRow[];

sub?

optional sub?: string;

A line under it ('3 of 12 found · F to fight on').

title

title: string;

The title (the fighter's name).

---

PauseRow

One move.

Properties

ends?

optional ends?: string;

What it ends with, or the hint when locked.

keys

keys: KeyCap[][];

Its keys, step by step; each step one or more caps.

locked?

optional locked?: boolean;

Not found yet: the keys shown are the first step only, then '› …'.

name

name: string;

The move's name ('? ? ?' when locked).

---

PauseScreen

The pause screen.

Properties

element

readonly element: HTMLElement;

The screen's root.

shown

readonly shown: boolean;

Whether the list is up.

Methods

hide()

hide(): void;

Hidden.

Returns

void

show()

show(model): void;

The move list, shown.

Parameters

Parameter	Type	Description
model	PauseModel	The list.

Returns

void

---

Pictures

A fighter's pictures for one place and facing.

Properties

idle?

optional idle?: string;

The idle, looping with no seam.

pick?

optional pick?: string;

The pick move, played once, ending on the idle's first frame.

still

still: string;

The whole figure standing (the idle's first frame).

---

RosterEntry

One fighter on the roster.

Properties

id

id: string;

The fighter's id.

name

name: string;

The fighter's name, as shown.

tile?

optional tile?: string;

The tile's picture (head and shoulders).

---

Screens

The screen kit.

Properties

fighting

readonly fighting: boolean;

Whether the fight is on.

hud

readonly hud: HudScreen;

The HUD.

keys

readonly keys: Keys;

The keys.

loading

readonly loading: LoadingScreen;

The loading screen.

made

readonly made: ScreenName[];

Which screens use the kit's default markup.

missing

readonly missing: Record<ScreenName, string[]>;

The slots asked for that the page's markup does not have, by screen.

pads

readonly pads: Pads;

The controllers.

pause

readonly pause: PauseScreen;

The pause screen.

root

readonly root: HTMLElement;

Where the screens live.

select

readonly select: SelectScreen;

The select screen.

shown

readonly shown: FullScreen;

The full screen up now.

touch

readonly touch: TouchControls;

The touch controls.

versus

readonly versus: VersusScreen;

The versus screen.

Methods

dispose()

dispose(): void;

Stop the loop and the listeners; the kit's default markup off the page.

Returns

void

fight()

fight(on): void;

The fight on: the HUD, and on a touch screen the controls.

Parameters

Parameter	Type	Description
on	boolean	On or off.

Returns

void

show()

show(name): void;

One full screen up, the others away.

Parameters

Parameter	Type	Description
name	FullScreen	The screen, or none.

Returns

void

update()

update(now?): void;

One frame: the controllers' steps, the keys, the fades, the stick's ring. The kit's own loop calls it.

Parameters

Parameter	Type	Description
now?	number	Milliseconds.

Returns

void

---

ScreensEvents

What the screens tell the game.

Properties

back?

optional back?: (from) => void;

BACK, from the select screen (to the modes) or the versus screen (out of the fight).

Parameters

Parameter	Type	Description
from	"select" | "versus"	The screen.

Returns

void

fight?

optional fight?: () => void;

FIGHT (the button, Enter, a controller's ok).

Returns

void

menu?

optional menu?: () => void;

The menu asked for in a fight (Escape, a controller's Options, the touch screen's MENU).

Returns

void

mode?

optional mode?: (id) => void;

A mode was chosen on the loading screen.

Parameters

Parameter	Type	Description
id	string	The mode.

Returns

void

pick?

optional pick?: (id, side, how) => void;

A tile was picked on the select screen.

Parameters

Parameter	Type	Description
id	string	The fighter.
side	0 | 1 | undefined	0 or 1 for a step of that side's keys or controller; undefined for a click or a tap.
how	PickHow	A click or a step.

Returns

void

tab?

optional tab?: (tab) => void;

A tab on the select screen.

Parameters

Parameter	Type	Description
tab	"1v1" | "rumble"	The tab.

Returns

void

---

ScreensKeys

The keys the kit reads on its screens (KeyboardEvent.codes).

Properties

back

back: string[];

BACK.

fight

fight: string[];

FIGHT.

menu

menu: string[];

The menu in a fight.

modeDown

modeDown: string[];

The marked mode down.

modeOk

modeOk: string[];

Choose the marked mode.

modeUp

modeUp: string[];

The marked mode up.

p1

p1: SelectKeyMap;

Player 1 across the grid.

p2

p2: SelectKeyMap;

The other side across the grid.

---

ScreensModel

The screens block of a guest's HUD model. Every field is optional: only what changed need be sent.

Properties

callout?

optional callout?: object;

A callout beside a side; a new seq each time.

seq

seq: number;

side

side: 0 | 1;

text

text: string;

fight?

optional fight?: boolean;

The fight on (the HUD and the touch controls).

hud?

optional hud?: HudModel;

The HUD.

loading?

optional loading?: LoadingModel;

The loading screen.

modes?

optional modes?: LoadingMode[];

The loading screen's modes (sent once).

note?

optional note?: object;

A note at the top; a new seq each time.

seq

seq: number;

text

text: string;

pause?

optional pause?: PauseModel | null;

The pause screen's move list; null hides it.

roster?

optional roster?: RosterEntry[];

The roster (sent once; the tiles are made again when it changes).

select?

optional select?: SelectModel;

The select screen.

show?

optional show?: FullScreen;

The full screen to show.

versus?

optional versus?: 
  | {
  allIn?: boolean;
  failed?: string;
  frac?: number;
  others: string[];
  p1: string;
}
  | null;

The versus screen; null hides it.

---

ScreensOptions

What the kit needs.

Properties

columns?

optional columns?: number;

Tiles to a row. Default 6.

figure?

optional figure?: FigureOf;

A game's own figure in the slots (its turntable), instead of pictures.

keys?

optional keys?: Partial<ScreensKeys>;

The keys.

loop?

optional loop?: boolean;

Run the kit's own frame loop. Default true where requestAnimationFrame exists.

modes?

optional modes?: readonly LoadingMode[];

The loading screen's modes, when the markup has none of its own.

name?

optional name?: (id) => string | undefined;

A fighter's name by id, for one not on the roster (another form of a tile's fighter); the roster's names otherwise.

Parameters

Parameter	Type
id	string

Returns

string | undefined

navigator?

optional navigator?: PadNavigator;

Where the controllers are read from.

on?

optional on?: ScreensEvents;

What the screens tell the game.

pictures?

optional pictures?: PicturesOf;

Where the fighters' pictures are.

root?

optional root?: HTMLElement;

Where the screens live (the page's markup is looked for under it). Default the document's body.

roster?

optional roster?: readonly RosterEntry[];

The roster, in the tiles' order.

stage?

optional stage?: object;

A fixed stage scaled into the window, centred: every data-slot="stage" is fitted.

height

height: number;

width

width: number;

tape?

optional tape?: (id) => Tape | null;

A fighter's tale of the tape.

Parameters

Parameter	Type
id	string

Returns

Tape | null

theme?

optional theme?: ScreensTheme;

The default markup's look.

times?

optional times?: Partial<HudTimes>;

How long the HUD's combos, callouts and notes stay.

touch?

optional touch?: object;

The touch controls' buttons and timings.

buttons?

optional buttons?: readonly TouchButton[];

holdMs?

optional holdMs?: number;

reach?

optional reach?: number;

tapMs?

optional tapMs?: number;

window?

optional window?: Window;

The window.

words?

optional words?: object;

The words.

hud?

optional hud?: Partial<HudWords>;

padNote?

optional padNote?: false | PadNoteWords;

versus?

optional versus?: Partial<VersusWords>;

---

ScreensTheme

The theme of the kit's default markup. Every value is a CSS value.

Properties

accent?

optional accent?: string;

The accent: the picked tile, the health, the marked mode, the fight button.

border?

optional border?: string;

Hairlines and borders.

canvas?

optional canvas?: string;

The page behind a screen.

display?

optional display?: string;

The face of the big words (titles, names, the clock).

font?

optional font?: string;

The face of everything else.

muted?

optional muted?: string;

Second words: prompts, labels, hints.

onAccent?

optional onAccent?: string;

Words on the accent.

second?

optional second?: string;

The other side's colour: player 2's tag, a low bar, a callout.

surface?

optional surface?: string;

Cards, panels, bars' tracks.

text?

optional text?: string;

Words.

---

SelectEvents

What the select screen tells the game.

Extended by

• SelectOptions

Properties

onBack

onBack: () => void;

BACK.

Returns

void

onFight

onFight: () => void;

FIGHT.

Returns

void

onPick

onPick: (id, side, how) => void;

A tile was picked: by a click or a tap (no side: the game says whose), or by a step of a side's keys or controller.

Parameters

Parameter	Type	Description
id	string	The fighter.
side	0 | 1 | undefined	0 or 1 for a step; undefined for a click.
how	PickHow	A click or a step.

Returns

void

onTab

onTab: (tab) => void;

A tab.

Parameters

Parameter	Type	Description
tab	"1v1" | "rumble"	The tab.

Returns

void

---

SelectKeyMap

One side's keys on the select screen.

Properties

down

down: string[];

Down.

left

left: string[];

Left.

right

right: string[];

Right.

up

up: string[];

Up.

---

SelectModel

What the select screen shows.

Properties

pair

pair: readonly [string, string];

Player 1's fighter and the opponent's.

picked?

optional picked?: 0 | 1;

That side was just picked: its figure makes the pick move.

picking?

optional picking?: string;

The prompt (PICK PLAYER 1, PICK THE OPPONENT, 4 FIGHTERS IN THE RUMBLE).

pvp?

optional pvp?: boolean;

The other side is a person (the pvp class on its tile).

rumble?

optional rumble?: readonly string[];

A rumble's fighters (player 1's first).

rumbleOn?

optional rumbleOn?: boolean;

The RUMBLE tab is offered.

tab?

optional tab?: "1v1" | "rumble";

Which tab. Default '1v1'.

tags?

optional tags?: SelectTags;

The tags.

tape?

optional tape?: boolean;

Draw the tale of the tape. Default: on the 1v1 tab.

---

SelectOptions

What the select screen needs.

Extends

• SelectEvents

Properties

columns?

optional columns?: number;

Tiles to a row (the keys step across it). Default 6.

figure?

optional figure?: FigureOf;

A game's own figure in the slots, instead of pictures.

name?

optional name?: (id) => string | undefined;

A fighter's name by id, for one not on the roster (another form of a tile's fighter); the roster's names otherwise.

Parameters

Parameter	Type
id	string

Returns

string | undefined

onBack

onBack: () => void;

BACK.

Returns

void

Inherited from

SelectEvents.onBack

onFight

onFight: () => void;

FIGHT.

Returns

void

Inherited from

SelectEvents.onFight

onPick

onPick: (id, side, how) => void;

A tile was picked: by a click or a tap (no side: the game says whose), or by a step of a side's keys or controller.

Parameters

Parameter	Type	Description
id	string	The fighter.
side	0 | 1 | undefined	0 or 1 for a step; undefined for a click.
how	PickHow	A click or a step.

Returns

void

Inherited from

SelectEvents.onPick

onTab

onTab: (tab) => void;

A tab.

Parameters

Parameter	Type	Description
tab	"1v1" | "rumble"	The tab.

Returns

void

Inherited from

SelectEvents.onTab

pictures?

optional pictures?: PicturesOf;

Where the fighters' pictures are.

roster

roster: readonly RosterEntry[];

The roster, in the tiles' order.

tape?

optional tape?: (id) => Tape | null;

A fighter's tale of the tape.

Parameters

Parameter	Type
id	string

Returns

Tape | null

---

SelectScreen

The select screen.

Properties

element

readonly element: HTMLElement;

The screen's root.

ids

readonly ids: string[];

The tiles' ids, in order.

model

readonly model: SelectModel | null;

The last model drawn.

shown

readonly shown: boolean;

Whether the screen is up.

Methods

hide()

hide(): void;

Hidden.

Returns

void

set()

set(model): void;

Draw the state.

Parameters

Parameter	Type	Description
model	SelectModel	What to show.

Returns

void

setRoster()

setRoster(roster): void;

A new roster: the tiles made again.

Parameters

Parameter	Type	Description
roster	readonly RosterEntry[]	The roster.

Returns

void

show()

show(): void;

Shown.

Returns

void

step()

step(
   side, 
   dx, 
   dy
): string | null;

A side's pick moved across the grid: dx along a row (on into the next), dy up or down a column (round).

Parameters

Parameter	Type	Description
side	0 | 1	0 or 1.
dx	number	1, 0 or 1.
dy	number	1, 0 or 1.

Returns

string | null

The fighter stepped to (also sent as a pick), or null with no tiles.

---

SelectTags

The tags on the tiles.

Properties

other?

optional other?: string;

The other side's tag one on one. Default 'CPU'.

p1?

optional p1?: string;

Player 1's tag. Default 'P1'.

rumble?

optional rumble?: string;

A fighter in a rumble. Default 'CPU'.

---

Tape

A fighter's tale of the tape.

Properties

bars

bars: object[];

The ratings as bars.

max?

optional max?: number;

name

name: string;

value

value: number;

line

line: string;

The line above the bars (height, reach, weight).

---

TouchButton

A named button under the right thumb.

Properties

hold?

optional hold?: string;

Held past the hold time, this modifier is pressed with it; a tap is the quick press alone.

id

id: string;

What the game reads (held('P')).

label

label: string;

The words on it.

---

TouchControls

The touch controls.

Properties

coarse

readonly coarse: boolean;

The last thing used was a finger (the controls show in a fight).

element

readonly element: HTMLElement;

The controls' root.

state

readonly state: TouchState;

The stick and the buttons, as the game reads them.

Methods

bind()

bind(buttons): void;

The buttons (the page's own [data-button] buttons are used when it has them).

Parameters

Parameter	Type	Description
buttons	readonly TouchButton[]	The buttons, in the order they are drawn.

Returns

void

dispose()

dispose(): void;

Stop listening and take the controls off the page.

Returns

void

held()

held(id): boolean;

A button or modifier held.

Parameters

Parameter	Type	Description
id	string	Its id.

Returns

boolean

True while held.

setFight()

setFight(on): void;

The fight on (the controls shown on a touch screen) or off (the menus; everything released).

Parameters

Parameter	Type	Description
on	boolean	The fight is on.

Returns

void

update()

update(): void;

Once a frame: the overlay follows the thumb, the turn-sideways ask follows the screen.

Returns

void

---

TouchOptions

What the controls need.

Properties

buttons?

optional buttons?: readonly TouchButton[];

The buttons.

holdMs?

optional holdMs?: number;

A press held this long (ms) is the hold. Default 150.

onMenu?

optional onMenu?: () => void;

The menu button's press.

Returns

void

phoneBelow?

optional phoneBelow?: number;

A screen narrower than this (its shorter side, CSS pixels) is a phone, asked to turn. Default 600.

reach?

optional reach?: number;

The stick's reach from its centre to the rim, CSS pixels. Default 56.

tapMs?

optional tapMs?: number;

A tap's press, as long as a controller's quickest (ms). Default 50.

threshold?

optional threshold?: number;

The stick pushed past this share of its reach is a direction. Default a third.

turn?

optional turn?: HTMLElement;

Where the turn-sideways ask goes, when not the turn slot (a page's own, outside the screens).

window?

optional window?: Window;

The window (for the pointer kind, the keys and the size).

---

TouchState

What the controls say this frame.

Properties

down

readonly down: Set<string>;

The buttons and modifiers held.

x

x: -1 | 0 | 1;

The stick: -1 left, 0, +1 right.

y

y: -1 | 0 | 1;

The stick: +1 up, 0, -1 down.

---

VersusOptions

What the versus screen needs.

Properties

figure?

optional figure?: FigureOf;

A game's own figure in the slots, instead of pictures.

name

name: (id) => string;

A fighter's name, by id.

Parameters

Parameter	Type
id	string

Returns

string

now?

optional now?: () => number;

The clock (performance.now() by default).

Returns

number

onBack

onBack: () => void;

Back, out of the fight that did not load.

Returns

void

pictures?

optional pictures?: PicturesOf;

Where the fighters' pictures are.

twoLines?

optional twoLines?: boolean;

A name over two lines, the last word on the second ("JAKE PAUL" -> JAKE / PAUL). Default true.

words?

optional words?: Partial<VersusWords>;

The words.

---

VersusScreen

The versus screen.

Properties

element

readonly element: HTMLElement;

The screen's root.

shown

readonly shown: boolean;

Whether the screen is up.

shownAt

readonly shownAt: number;

When it was shown (ms, performance.now()), for the 1.5 s rule.

Methods

hide()

hide(now?): void;

Away, fading into the fight.

Parameters

Parameter	Type	Description
now?	boolean	Gone at once.

Returns

void

progress()

progress(
   frac, 
   allIn, 
   failed
): void;

How much is in, everything in, or a fighter that did not load (with the way back).

Parameters

Parameter	Type	Description
frac	number	0..1.
allIn	boolean	Everything the fight needs is in.
failed	string	The name of a fighter that did not load, or ''.

Returns

void

show()

show(p1, others): void;

Player 1's fighter against the rest (one, or a rumble's).

Parameters

Parameter	Type	Description
p1	string	Player 1's fighter.
others	readonly string[]	The rest, the first of them big on the right.

Returns

void

---

VersusWords

The words the versus screen says.

Properties

failed

failed: (name) => string;

A fighter did not load, by name.

Parameters

Parameter	Type
name	string

Returns

string

loading

loading: (pct) => string;

While the fighters load, with the percentage in.

Parameters

Parameter	Type
pct	number

Returns

string

ready

ready: string;

Everything is in.

Type Aliases

Facing

type Facing = "left" | "right";

Which way a standing fighter faces, and where.

---

FigureOf

type FigureOf = (slot, side, place) => FigureView;

A game's own way to draw a picked fighter in a figure slot (its turntable, its render).

Parameters

Parameter	Type
slot	HTMLElement
side	0 | 1
place	Place

Returns

FigureView

Example

import type { FigureOf } from 'gameable/screens';

const figure: FigureOf = (slot) => ({
  show: (id) => (slot.textContent = id),
  setPlaying: () => undefined,
  dispose: () => (slot.textContent = ''),
});
console.log(typeof figure); // 'function'

---

FullScreen

type FullScreen = "loading" | "select" | "versus" | "none";

The full screens, one up at a time.

---

FullTheme

type FullTheme = Required<ScreensTheme>;

The theme with every value filled from the Gameable tokens.

---

LoadFigure

type LoadFigure<V> = (key, onProgress) => Promise<V>;

How a figure is loaded, by its key, with its bytes reported as they come.

Type Parameters

Type Parameter
V extends Figure

Parameters

Parameter	Type
key	string
onProgress	(done, all) => void

Returns

Promise<V>

Example

import type { LoadFigure } from 'gameable/screens';

const load: LoadFigure<{ dispose(): void }> = async (key, onProgress) => {
  onProgress(1, 1);
  return { dispose: () => console.log('let go', key) };
};
console.log(typeof load); // 'function'

---

PadStep

type PadStep = "up" | "down" | "left" | "right" | "ok" | "back" | "L" | "R" | "menu";

A menu step from a controller, once per push.

---

PickHow

type PickHow = "click" | "step";

How a pick was made.

---

PicturesOf

type PicturesOf = (id, facing, place) => Pictures | null;

Where a fighter's pictures are, by facing and place; null for a fighter with none.

Parameters

Parameter	Type
id	string
facing	Facing
place	Place

Returns

Pictures | null

Example

import type { PicturesOf } from 'gameable/screens';

const pictures: PicturesOf = (id, facing) => ({ still: `fighters/${id}/still-${facing}.jpg` });
console.log(pictures('jake', 'right', 'select')?.still); // 'fighters/jake/still-right.jpg'

---

Place

type Place = "select" | "versus";

Where a figure stands.

---

ScreenName

type ScreenName = "loading" | "select" | "versus" | "fight" | "touch" | "pause";

The screens the kit knows.

Variables

DEFAULT_CSS

const DEFAULT_CSS: "\n.gs-screen{position:fixed;inset:0;z-index:40;font-family:var(--gs-font);color:var(--gs-text);background:var(--gs-canvas);\n  user-select:none;-webkit-user-select:none;overflow:hidden}\n.gs-screen.gone{opacity:0;pointer-events:none;transition:opacity .5s ease}\n.gs-screen button{font:700 16px var(--gs-font);color:var(--gs-text);background:var(--gs-surface);border:1px solid var(--gs-border);\n  border-radius:999px;padding:12px 22px;cursor:pointer;letter-spacing:.02em}\n.gs-screen button.on,.gs-screen button.primary{background:var(--gs-accent);color:var(--gs-on-accent);border-color:var(--gs-accent)}\n.gs-title{font:800 clamp(22px,4vw,44px)/1 var(--gs-display);letter-spacing:-.03em;text-transform:uppercase}\n.gs-caps{font:700 11px var(--gs-font);letter-spacing:.14em;text-transform:uppercase;color:var(--gs-muted)}\n/* loading */\n.gs-loading{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:8vh 8vw;gap:2vh}\n.gs-loading .gs-modes{display:flex;flex-direction:column;gap:8px;margin-top:2vh}\n.gs-loading .gs-modes button{text-align:left;min-width:240px}\n.gs-loading.loading .gs-modes{display:none}\n.gs-loading:not(.loading) .gs-load{display:none}\n.gs-bar{width:min(320px,60vw);height:4px;background:var(--gs-border);border-radius:2px;overflow:hidden}\n.gs-fill{height:100%;width:0;background:var(--gs-accent);transition:width .25s ease-out}\n.gs-spin{width:16px;height:16px;border:2px solid var(--gs-border);border-top-color:var(--gs-accent);border-radius:50%;\n  animation:gs-spin .8s linear infinite;display:inline-block;vertical-align:-3px;margin-right:8px}\n@keyframes gs-spin{to{transform:rotate(360deg)}}\n/* select */\n.gs-select{display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:3vh 3vw;gap:2vh;box-sizing:border-box}\n.gs-select .gs-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2vw}\n.gs-select .gs-name{font:800 clamp(18px,3vw,34px)/1 var(--gs-display);text-transform:uppercase;letter-spacing:-.02em}\n.gs-select .gs-name.r{text-align:right}\n.gs-select .gs-middle{display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,2fr) minmax(140px,1fr);gap:2vw;min-height:0}\n.gs-select .gs-centre{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px}\n.gs-figure{position:relative;min-height:120px;background:var(--gs-surface);border-radius:16px;overflow:hidden}\n.gs-figure>img,.gs-figure>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom}\n.gs-figure>video{opacity:0}.gs-figure>video.on{opacity:1}\n.gs-figure .gs-spin{position:absolute;left:50%;top:50%;margin:-8px 0 0 -8px;display:none}.gs-figure .gs-spin.on{display:block}\n.gs-tiles{display:grid;gap:8px;align-content:start;justify-content:center}\n.gs-screen .gs-tile{position:relative;padding:0;border-radius:12px;overflow:hidden;background:var(--gs-surface);border:0;aspect-ratio:1}\n.gs-tile img{display:block;width:100%;height:100%;object-fit:cover}\n.gs-tile.p1{outline:3px solid var(--gs-accent)}.gs-tile.p2{outline:3px solid var(--gs-second)}.gs-tile.p1.p2{outline-color:var(--gs-text)}\n.gs-tag{position:absolute;left:6px;top:6px;font:800 10px var(--gs-font);padding:2px 6px;border-radius:999px;background:var(--gs-accent);color:var(--gs-on-accent)}\n.gs-tag:empty{display:none}.gs-tag.p2,.gs-tag.cpu{background:var(--gs-second)}\n.gs-tname{position:absolute;left:0;right:0;bottom:0;padding:4px;font:700 10px var(--gs-font);text-transform:uppercase;background:rgba(0,0,0,.55);text-align:center}\n.gs-tape{display:grid;grid-template-columns:1fr 1fr;gap:2vw;font-size:13px;color:var(--gs-muted)}\n.gs-tcol.r{text-align:right}\n.gs-tbar{display:grid;grid-template-columns:90px 1fr 30px;gap:8px;align-items:center;font-size:11px;text-transform:uppercase}\n.gs-tcol.r .gs-tbar{grid-template-columns:30px 1fr 90px}\n.gs-track{height:4px;background:var(--gs-border);border-radius:2px;overflow:hidden}.gs-track i{display:block;height:100%;background:var(--gs-accent)}\n.gs-select .gs-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px}\n.gs-tabs{display:flex;gap:8px;align-items:center}\n/* versus */\n.gs-versus{display:grid;grid-template-rows:1fr auto;padding:3vh 3vw;gap:2vh}\n.gs-versus .gs-pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2vw;min-height:0}\n.gs-versus .gs-vs{font:800 clamp(40px,10vw,120px)/1 var(--gs-display);color:var(--gs-accent)}\n.gs-versus .gs-side{display:grid;grid-template-rows:1fr auto;min-height:0;gap:1vh}\n.gs-versus .gs-name{font:800 clamp(18px,3vw,34px)/1.05 var(--gs-display);text-transform:uppercase;letter-spacing:-.02em}\n.gs-versus .gs-more{color:var(--gs-muted);font-size:13px}\n.gs-versus .gs-load{display:flex;align-items:center;gap:12px;justify-content:center}\n/* hud */\n.gs-fight{pointer-events:none;background:none}\n.gs-bars{position:absolute;left:3vw;right:3vw;top:2.5vh;display:grid;grid-template-columns:1fr auto 1fr;gap:2vw;align-items:start}\n.gs-side .gs-hname{font:800 clamp(12px,1.6vw,18px) var(--gs-display);text-transform:uppercase;margin-bottom:4px}\n.gs-side.r{text-align:right}\n.gs-health{position:relative;height:14px;background:rgba(0,0,0,.5);border:1px solid var(--gs-border);border-radius:3px;overflow:hidden}\n.gs-health .gs-lag,.gs-health .gs-hfill{position:absolute;top:0;bottom:0;left:0}\n.gs-side.r .gs-health .gs-lag,.gs-side.r .gs-health .gs-hfill{left:auto;right:0}\n.gs-health .gs-lag{background:var(--gs-second);transition:width .6s ease .3s}.gs-health .gs-hfill{background:var(--gs-accent)}\n.gs-pips{display:flex;gap:6px;margin-top:6px}.gs-side.r .gs-pips{justify-content:flex-end}\n.gs-pip{width:12px;height:12px;border-radius:50%;border:1px solid var(--gs-border);background:rgba(0,0,0,.4)}.gs-pip.on{background:var(--gs-accent)}\n.gs-clock{font:800 clamp(24px,4vw,48px)/1 var(--gs-display);min-width:2ch;text-align:center}\n.gs-banner{position:absolute;left:0;right:0;top:36%;text-align:center;opacity:0;transition:opacity .2s}\n.gs-banner .gs-big{font:800 clamp(36px,8vw,96px)/1 var(--gs-display);text-transform:uppercase;letter-spacing:-.03em}\n.gs-banner .gs-sub{font:700 clamp(12px,1.6vw,20px) var(--gs-font);color:var(--gs-muted);margin-top:8px}\n.gs-combo{position:absolute;top:14vh;font:800 clamp(18px,3vw,36px)/1 var(--gs-display);text-transform:uppercase}\n.gs-combo.l{left:3vw}.gs-combo.r{right:3vw;text-align:right}\n.gs-combo small{display:block;font:700 12px var(--gs-font);color:var(--gs-second);margin-top:4px}\n.gs-help{position:absolute;left:0;right:0;bottom:2vh;text-align:center;font-size:12px;color:var(--gs-muted)}\n.gs-hist{position:absolute;top:22vh;font:600 11px/1.5 var(--gs-font);color:var(--gs-muted);white-space:pre}.gs-hist.l{left:3vw}.gs-hist.r{right:3vw;text-align:right}\n.gs-adv,.gs-track-line{position:absolute;left:0;right:0;text-align:center;font-size:12px;color:var(--gs-muted)}.gs-adv{bottom:6vh}.gs-track-line{bottom:9vh}\n.gs-pad-note{position:absolute;left:50%;top:8vh;transform:translateX(-50%);padding:6px 14px;border-radius:999px;background:var(--gs-surface);\n  border:1px solid var(--gs-border);font:700 12px var(--gs-font);opacity:0;transition:opacity .3s}.gs-pad-note.on{opacity:1}\n/* touch */\n.gs-touch{position:fixed;inset:0;z-index:45;display:none;pointer-events:none}.gs-touch.on{display:block}\n.gs-touch .gs-stick{position:absolute;left:0;top:0;bottom:0;width:50%;pointer-events:auto;touch-action:none}\n.gs-touch .gs-buttons{position:absolute;right:3vw;bottom:4vh;display:grid;grid-template-columns:repeat(3,64px);gap:10px;pointer-events:auto}\n.gs-touch .gs-btn{width:64px;height:64px;border-radius:50%;padding:0;font:800 11px var(--gs-font);background:rgba(28,29,34,.6);\n  border:1px solid var(--gs-border);color:var(--gs-text);backdrop-filter:blur(10px);touch-action:none}\n.gs-touch .gs-btn.on{background:var(--gs-accent);color:var(--gs-on-accent)}\n.gs-touch .gs-menu{position:absolute;left:50%;top:11vh;transform:translateX(-50%);pointer-events:auto;padding:8px 16px;font-size:12px}\n.gs-turn{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;flex-direction:column;gap:12px;\n  background:var(--gs-canvas);color:var(--gs-text);font:800 20px var(--gs-display);text-transform:uppercase}.gs-turn.on{display:flex}\n/* pause */\n.gs-pause{display:grid;place-items:center;background:rgba(20,21,25,.85)}\n.gs-pause .gs-list{max-height:80vh;overflow:auto;min-width:min(640px,90vw);padding:24px;background:var(--gs-surface);border:1px solid var(--gs-border);border-radius:16px}\n.gs-pause .gs-group{margin:16px 0 6px;font:700 11px var(--gs-font);letter-spacing:.14em;color:var(--gs-muted);text-transform:uppercase}\n.gs-pause .gs-row{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;padding:6px 0;border-top:1px solid var(--gs-border);font-size:13px}\n.gs-pause .gs-row.locked{color:var(--gs-muted)}\n.gs-pause .gs-keys b{display:inline-block;min-width:22px;padding:1px 6px;margin:0 1px;border:1px solid var(--gs-border);border-radius:6px;font:700 11px var(--gs-font);text-align:center}\n.gs-pause .gs-keys i{color:var(--gs-muted);font-style:normal;margin:0 2px}\n.gs-pause .gs-ends{text-align:right;color:var(--gs-muted)}\n";

The default markup's CSS. Class names start with gs- (gameable screens).

---

FIGURE_LIMIT

const FIGURE_LIMIT: 4 = 4;

Figures kept in memory at most, unless a screen needs more at once (a rumble of eight).

---

HUD_TIMES

const HUD_TIMES: HudTimes;

The default times.

---

HUD_WORDS

const HUD_WORDS: HudWords;

The default words.

---

PACKAGE

const PACKAGE: "@gameable/screens";

Package identity marker for gameable/screens.

Example

import { PACKAGE } from 'gameable/screens';

console.log(PACKAGE); // '@gameable/screens'

---

SCREENS_KEYS

const SCREENS_KEYS: ScreensKeys;

The default keys: player 1 on W A S D, the other on the arrows, Enter fights, Escape backs out.

---

VERSUS_MIN_MS

const VERSUS_MIN_MS: 1500 = 1500;

The versus screen shows at least this long (ms), and until every figure in the fight is in.

---

VERSUS_WORDS

const VERSUS_WORDS: VersusWords;

The default words.

Functions

applyTheme()

function applyTheme(element, theme): void;

Write a theme's tokens onto an element as custom properties.

Parameters

Parameter	Type	Description
element	HTMLElement	The element (the kit's screens inherit from it).
theme	FullTheme	The theme.

Returns

void

---

bindSlots()

function bindSlots(root): Bound;

Bind the slots under a root.

Parameters

Parameter	Type	Description
root	HTMLElement	The screen's root element.

Returns

Bound

The bound screen.

Example

import { bindSlots } from 'gameable/screens';

const root = document.createElement('div');
root.innerHTML = '<div data-slot="text"></div>';
const bound = bindSlots(root);
bound.slot('text').textContent = 'LOADING';
console.log(bound.has('text'), bound.has('bar')); // true false

---

cloneSlots()

function cloneSlots(template): Bound;

Clone a template's content and bind the clone's slots.

Parameters

Parameter	Type	Description
template	HTMLTemplateElement	The template.

Returns

Bound

The clone's first element and its bound slots.

Example

import { cloneSlots } from 'gameable/screens';

const t = document.createElement('template');
t.innerHTML = '<button><span data-slot="tile-name"></span></button>';
const row = cloneSlots(t);
row.slot('tile-name').textContent = 'JAKE PAUL';
console.log(row.root.tagName); // BUTTON

---

createFigures()

function createFigures<V>(loadFn, limit?): Figures<V>;

Make the figure cache.

Type Parameters

Type Parameter
V extends Figure

Parameters

Parameter	Type	Default value	Description
loadFn	LoadFigure<V>	undefined	How a figure is loaded.
limit	number	FIGURE_LIMIT	Figures kept in memory at most.

Returns

Figures<V>

The cache.

Example

import { createFigures } from 'gameable/screens';

const figures = createFigures(async (key) => ({ key, dispose: () => undefined }));
figures.need(['jake', 'logan']);
console.log(figures.loading); // ['jake', 'logan']

---

createHud()

function createHud(bound, options?): HudScreen;

The HUD on a bound root.

Parameters

Parameter	Type	Description
bound	Bound	The HUD's slots.
options	{ note?: HTMLElement; now?: () => number; times?: Partial<HudTimes>; words?: Partial<HudWords>; }	The words and the times.
options.note?	HTMLElement	Where the controller's note goes, when not the pad-note slot (a page's own, outside the screens).
options.now?	() => number	The clock (performance.now() by default).
options.times?	Partial<HudTimes>	How long things stay.
options.words?	Partial<HudWords>	The words.

Returns

HudScreen

The HUD.

Example

import { bindSlots, createHud } from 'gameable/screens';

const root = document.createElement('div');
root.innerHTML = '<div data-slot="p1-health"></div><div data-slot="clock"></div>';
const hud = createHud(bindSlots(root));
hud.set({ p1: { name: 'JAKE PAUL', health: 0.5 }, p2: { name: 'LOGAN PAUL', health: 1 }, clock: '57' });
console.log(root.querySelector<HTMLElement>('[data-slot="p1-health"]')?.style.width); // '50.0%'

---

createKeys()

function createKeys(target): Keys;

Listen to the keyboard.

Parameters

Parameter	Type	Description
target	Document | Window	Where to listen (the window).

Returns

Keys

The keys.

Example

import { createKeys } from 'gameable/screens';

const keys = createKeys(window);
window.dispatchEvent(new KeyboardEvent('keydown', { code: 'KeyJ' }));
console.log(keys.held('KeyJ'), keys.take('KeyJ'), keys.take('KeyJ')); // true true false
keys.dispose();

---

createLoadingScreen()

function createLoadingScreen(bound, onMode): LoadingScreen;

The loading screen on a bound root.

Parameters

Parameter	Type	Description
bound	Bound	The screen's slots.
onMode	(id) => void	What a chosen mode does.

Returns

LoadingScreen

The screen.

Example

import { bindSlots, createLoadingScreen } from 'gameable/screens';

const root = document.createElement('div');
root.innerHTML = '<div data-slot="bar"></div><div data-slot="text"></div><div data-slot="modes"></div>';
const loading = createLoadingScreen(bindSlots(root), (id) => console.log('mode', id));
loading.modes([{ id: 'cpu', label: 'SINGLE PLAYER' }]);
loading.set({ frac: 1, text: 'THE GAME IS READY', ready: true });
loading.choose(); // mode cpu

---

createPads()

function createPads(nav): Pads;

The controllers.

Parameters

Parameter	Type	Description
nav	PadNavigator	Where the controllers are read from (the navigator).

Returns

Pads

The pads.

Example

import { createPads } from 'gameable/screens';

const pads = createPads({ getGamepads: () => [] });
console.log(pads.list().length, pads.read(0), pads.steps()); // 0 null []

---

createPauseScreen()

function createPauseScreen(bound): PauseScreen;

The pause screen on a bound root.

Parameters

Parameter	Type	Description
bound	Bound	The screen's slots: pause-title, pause-sub, pause-list and the templates pause-group, pause-row.

Returns

PauseScreen

The screen.

Example

import { bindSlots, createPauseScreen } from 'gameable/screens';

const root = document.createElement('div');
root.innerHTML = '<div data-slot="pause-title"></div><div data-slot="pause-list"></div>';
const pause = createPauseScreen(bindSlots(root));
pause.show({ title: 'JAKE PAUL · STRINGS', groups: [{ name: 'BOXING', rows: [{ name: 'One-two', keys: [[{ text: 'J' }], [{ text: 'J' }]] }] }] });
console.log(pause.shown, root.textContent?.includes('One-two')); // true true

---

createPictureFigure()

function createPictureFigure(
   slot, 
   pictures, 
   facing, 
   place
): FigureView;

A fighter's pictures in a slot.

Parameters

Parameter	Type	Description
slot	HTMLElement	The slot (a box the figure fills).
pictures	PicturesOf	Where the pictures are.
facing	Facing	Which way the fighter faces.
place	Place	Where the figure stands.

Returns

FigureView

The figure.

Example

import { createPictureFigure } from 'gameable/screens';

const slot = document.createElement('div');
const figure = createPictureFigure(slot, (id) => ({ still: `${id}.jpg` }), 'right', 'select');
figure.show('jake');
console.log(slot.querySelector('img')?.getAttribute('src')); // 'jake.jpg'

---

createScreens()

function createScreens(options?): Screens;

Make the screen kit.

Parameters

Parameter	Type	Description
options	ScreensOptions	What it needs.

Returns

Screens

The kit.

Example

import { createScreens } from 'gameable/screens';

const screens = createScreens({
  roster: [{ id: 'jake', name: 'JAKE PAUL' }, { id: 'logan', name: 'LOGAN PAUL' }],
  modes: [{ id: 'cpu', label: 'SINGLE PLAYER' }],
  on: { mode: (id) => console.log('mode', id), pick: (id) => console.log('pick', id) },
});
screens.loading.set({ frac: 1, text: 'THE GAME IS READY', ready: true });
screens.show('select');
screens.select.set({ pair: ['jake', 'logan'], picking: 'PICK PLAYER 1' });
console.log(screens.shown, screens.made.length); // 'select' 6
screens.dispose();

---

createSelectScreen()

function createSelectScreen(bound, options): SelectScreen;

The select screen on a bound root.

Parameters

Parameter	Type	Description
bound	Bound	The screen's slots.
options	SelectOptions	The roster, the pictures, the events.

Returns

SelectScreen

The screen.

Example

import { bindSlots, createSelectScreen } from 'gameable/screens';

const root = document.createElement('div');
root.innerHTML = '<div data-slot="tiles"></div><div data-slot="picking"></div>';
const select = createSelectScreen(bindSlots(root), {
  roster: [{ id: 'jake', name: 'JAKE PAUL' }, { id: 'logan', name: 'LOGAN PAUL' }],
  onPick: (id) => console.log('pick', id),
  onFight: () => undefined,
  onBack: () => undefined,
  onTab: () => undefined,
});
select.set({ pair: ['jake', 'logan'], picking: 'PICK PLAYER 1' });
console.log(select.ids.length, select.step(0, 1, 0)); // 2 pick logan \n 'logan'

---

createTouchControls()

function createTouchControls(bound, options?): TouchControls;

The touch controls on a bound root.

Parameters

Parameter	Type	Description
bound	Bound	The controls' slots: stick, buttons, menu, turn.
options	TouchOptions	What they need.

Returns

TouchControls

The controls.

Example

import { bindSlots, createTouchControls } from 'gameable/screens';

const root = document.createElement('div');
root.innerHTML = '<div data-slot="stick"></div><div data-slot="buttons"></div>';
document.body.append(root);
const touch = createTouchControls(bindSlots(root), { buttons: [{ id: 'P', label: 'PUNCH', hold: 'power' }] });
console.log(touch.held('P'), touch.state.x); // false 0
touch.dispose();

---

createVersusScreen()

function createVersusScreen(bound, options): VersusScreen;

The versus screen on a bound root.

Parameters

Parameter	Type	Description
bound	Bound	The screen's slots.
options	VersusOptions	What it needs.

Returns

VersusScreen

The screen.

Example

import { bindSlots, createVersusScreen } from 'gameable/screens';

const root = document.createElement('div');
root.innerHTML = '<div data-slot="p1-name"></div><div data-slot="p2-name"></div><div data-slot="text"></div>';
const versus = createVersusScreen(bindSlots(root), { name: (id) => id.toUpperCase(), onBack: () => undefined });
versus.show('jake', ['logan']);
versus.progress(0.5, false, '');
console.log(root.querySelector('[data-slot="text"]')?.textContent); // 'LOADING THE FIGHTERS 50%'

---

ensureDefaultCss()

function ensureDefaultCss(doc): void;

Put the default CSS on a document once.

Parameters

Parameter	Type	Description
doc	Document	The document.

Returns

void

---

figureKeys()

function figureKeys(real): string[];

A figure's key in a fight: its fighter's, and #1, #2... for a second and third of the same one.

Parameters

Parameter	Type	Description
real	readonly string[]	The fighters in the fight (a placeholder already resolved to the fighter it copies).

Returns

string[]

One key per place.

Example

import { figureKeys } from 'gameable/screens';

console.log(figureKeys(['jake', 'jake', 'logan'])); // ['jake', 'jake#1', 'logan']

---

findOrMakeScreen()

function findOrMakeScreen(root, name): object;

Find a screen's root under a page root, or make the kit's default one.

Parameters

Parameter	Type	Description
root	HTMLElement	The page's root (the screens are looked for under it).
name	ScreenName	The screen.

Returns

object

The screen's root, and whether it is the kit's default.

element

element: HTMLElement;

made

made: boolean;

Example

import { findOrMakeScreen } from 'gameable/screens';

const { element, made } = findOrMakeScreen(document.body, 'loading');
console.log(element.dataset.screen, made); // 'loading' true

---

keyCapsHtml()

function keyCapsHtml(keys, locked?): string;

A key sequence as markup: <b> a cap, <i> a note, <i>›</i> between steps.

Parameters

Parameter	Type	Default value	Description
keys	KeyCap[][]	undefined	The steps.
locked	boolean	false	A locked row: the steps given, then '› …'.

Returns

string

The markup.

Example

import { keyCapsHtml } from 'gameable/screens';

console.log(keyCapsHtml([[{ text: 'J' }], [{ text: 'K' }]])); // '<b>J</b><i>›</i><b>K</b>'

---

resolveScreensTheme()

function resolveScreensTheme(theme?): FullTheme;

Fill a theme from the Gameable tokens.

Parameters

Parameter	Type	Description
theme	ScreensTheme	The game's theme, if any.

Returns

FullTheme

Every token with a value.

Example

import { resolveScreensTheme } from 'gameable/screens';

console.log(resolveScreensTheme({ accent: '#73ebc5' }).accent); // '#73ebc5'
console.log(resolveScreensTheme().text); // '#f2f2f4'

---

screensEvents()

function screensEvents(tell): ScreensEvents;

The kit's events as status lines for a guest, on the page's conversation channel.

Parameters

Parameter	Type	Description
tell	(line) => void	Where a line goes (adapter.events.push({ tag: 'conversation-event', val: { entity: 0, kind: 'status', text } })).

Returns

ScreensEvents

Events for createScreens({ on }).

Example

import { screensEvents } from 'gameable/screens';

const on = screensEvents((line) => console.log(line));
on.pick?.('jake', 0, 'step'); // screens:pick:jake:0:step
on.fight?.(); // screens:fight

---

screensHud()

function screensHud(screens): HudRenderer;

The kit as the adapter's HUD renderer.

Parameters

Parameter	Type	Description
screens	Screens	The kit.

Returns

HudRenderer

A renderer for createEngineAdapter({ hud }).

Example

import { createScreens, screensHud } from 'gameable/screens';

const screens = createScreens({ roster: [{ id: 'jake', name: 'JAKE PAUL' }, { id: 'logan', name: 'LOGAN PAUL' }] });
const hud = screensHud(screens);
hud.set(JSON.stringify({ screens: { show: 'select', select: { pair: ['jake', 'logan'], picking: 'PICK PLAYER 1' } } }));
console.log(screens.shown); // 'select'
screens.dispose();

---

versusDone()

function versusDone(
   shownMs, 
   keys, 
   figures, 
   restIn
): boolean;

The versus screen is done (the fight may start): it has shown at least VERSUS_MIN_MS, everything else the fight needs is in, and every figure of the fight is in. A fight never starts with a fighter not in.

Parameters

Parameter	Type	Description
shownMs	number	How long the versus screen has shown.
keys	readonly string[]	The fight's figures.
figures	Pick<Figures<Figure>, "get">	The cache.
restIn	boolean	Everything else the fight needs is in (the moves, the hall).

Returns

boolean

True when the fight may start.

Example

import { createFigures, versusDone } from 'gameable/screens';

const figures = createFigures(async () => ({ dispose: () => undefined }));
console.log(versusDone(2000, ['jake'], figures, true)); // false (jake is not in yet)