---
url: /api/kiln/classes/UiState.md
---
[Kiln API](../../index.md) / [kiln](../index.md) / UiState

# Class: UiState

The HUD as retained data: `res.mut(Ui).text('score', 'Coins 3')`, `.bar('hp', 0.5)`,
`.button('start', 'Start', { anchor: 'center', action: 'jump' })`. Elements stay until removed
(`remove(id)`, or `clear('menu.')` for every id with that prefix). Calls with unchanged values
cost nothing, so systems may set them every step. Headless the same data exists (tests read
`app.res(Ui).get('score')?.text`); in the browser it is drawn as DOM over the canvas.

## Constructors

### Constructor

```ts
new UiState(): UiState;
```

#### Returns

`UiState`

## Properties

### nodes

```ts
nodes: Record<string, UiNode> = {};
```

***

### version

```ts
version: number = 0;
```

Bumped on every change; the DOM sync skips frames where it didn't move.

***

### clicks

```ts
clicks: string[] = [];
```

Clicks waiting to become UiClick events.

## Methods

### text()

```ts
text(
   id, 
   text, 
   options?
): void;
```

Sets a text element.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `id` | `string` |
| `text` | `string` | `number` |
| `options` | [`UiOptions`](../interfaces/UiOptions.md) |

#### Returns

`void`

***

### bar()

```ts
bar(
   id, 
   value, 
   options?
): void;
```

Sets a progress bar: `value` 0..1 (clamped).

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `id` | `string` |
| `value` | `number` |
| `options` | [`BarOptions`](../interfaces/BarOptions.md) |

#### Returns

`void`

***

### button()

```ts
button(
   id, 
   label, 
   options?
): void;
```

Sets a button. Clicking it emits UiClick { id }.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `id` | `string` |
| `label` | `string` |
| `options` | [`ButtonOptions`](../interfaces/ButtonOptions.md) |

#### Returns

`void`

***

### get()

```ts
get(id): Readonly<UiNode> | undefined;
```

The element with this id, or undefined.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `id` | `string` |

#### Returns

`Readonly`<[`UiNode`](../interfaces/UiNode.md)> | `undefined`

***

### has()

```ts
has(id): boolean;
```

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `id` | `string` |

#### Returns

`boolean`

***

### show()

```ts
show(id, visible?): void;
```

Shows or hides an element without removing it.

#### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `id` | `string` | `undefined` |
| `visible` | `boolean` | `true` |

#### Returns

`void`

***

### remove()

```ts
remove(id): void;
```

Removes an element. Removing a missing id is a no-op.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `id` | `string` |

#### Returns

`void`

***

### clear()

```ts
clear(prefix?): void;
```

Removes every element whose id starts with `prefix` (all of them with no prefix).

#### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `prefix` | `string` | `''` |

#### Returns

`void`

***

### click()

```ts
click(id): void;
```

Clicks a button as a player would; UiClick is emitted in the next Input phase.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `id` | `string` |

#### Returns

`void`

***

### toJSON()

```ts
toJSON(): object;
```

#### Returns

`object`

##### nodes

```ts
nodes: Record<string, UiNode>;
```

***

### restore()

```ts
restore(json): void;
```

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `json` | { `nodes`: `Record`<`string`, [`UiNode`](../interfaces/UiNode.md)>; } |
| `json.nodes` | `Record`<`string`, [`UiNode`](../interfaces/UiNode.md)> |

#### Returns

`void`