Documentation / @debuffjp/ui / Menu

Class: Menu<A>

Defined in: menu.ts:94

A vertical list of choices for title screens, pause menus and settings. Navigates with your existing input actions, so keyboard, gamepad and touch bindings all work. Layout is measured, so rows, cursor and frame line up to the pixel with any font.

const pause = new Menu([
  { label: "resume", onSelect: () => (paused = false) },
  { label: "restart", onSelect: reset },
], { actions: { up: "up", down: "down", confirm: "jump" } });
// every step while paused: pause.update(input)
// render: pause.drawPanel(draw, game.width / 2, game.height / 2, { title: "paused" })

Type Parameters

A

A extends string = string

Constructors

Constructor

new Menu<A>(items, options?): Menu<A>

Defined in: menu.ts:105

Parameters

items

MenuItem[]

options?

MenuOptions<A> = {}

Returns

Menu<A>

Properties

focus

focus: number = 0

Defined in: menu.ts:96

---

items

items: MenuItem[]

Defined in: menu.ts:95

---

onBack

onBack: (() => void) | undefined

Defined in: menu.ts:98

---

wrap

wrap: boolean

Defined in: menu.ts:97

Accessors

focused

Get Signature

get focused(): MenuItem | undefined

Defined in: menu.ts:113

Returns

MenuItem | undefined

Methods

draw()

draw(draw, x, y, style?): void

Defined in: menu.ts:214

Draw the rows with their box's top-left at (x, y). Positions snap to whole pixels.

Parameters

draw

DrawLike

x

number

y

number

style?

MenuStyle = {}

Returns

void

---

drawPanel()

drawPanel(draw, cx, cy, style?): void

Defined in: menu.ts:267

A framed menu with an optional title, centred on (cx, cy).

Parameters

draw

DrawLike

cx

number

cy

number

style?

MenuPanelStyle = {}

Returns

void

---

inspect()

inspect(): object

Defined in: menu.ts:282

Returns

object

focus

focus: number

focused

focused: string | undefined

items

items: string[]

---

measure()

measure(draw, style?): object

Defined in: menu.ts:208

The box draw fills with this style, in logical pixels.

Parameters

draw

DrawLike

style?

MenuStyle = {}

Returns

object

h

h: number

w

w: number

---

move()

move(delta): void

Defined in: menu.ts:118

Move focus by delta, skipping disabled items.

Parameters

delta

number

Returns

void

---

select()

select(): void

Defined in: menu.ts:135

Activate the focused item.

Returns

void

---

tap()

tap(x, y): boolean

Defined in: menu.ts:162

Tap at logical (x, y), using the rows from the last draw. Selects the row; on a row with a value, the left half lowers it and the right half raises it.

Parameters

x

number

y

number

Returns

boolean

---

update()

update(input): boolean

Defined in: menu.ts:141

Read input for this step. Returns true if anything happened.

Parameters

input

InputLike<A>

Returns

boolean