Hooks

Hooks are imported from 'ts2' and called from a component:

src/once.ts2

import { createRef, useDerived, useServerState, useServerStateOnce, useSkill, useState } from 'ts2';

Reading game state

Game state.

• useServerState — reads a game variable or a skill.
• useSkill — reads a skill’s current level, boosts included.
• useSkillBase — reads a skill’s base level.
• useInventory — reads a container.
• param, paramText, paramSprite — read a parameter off an item, an NPC or an object.
• predictServerState — overwrites the client’s copy of a game variable.

Following a value differently

Watching and reacting, Read once and derived.

• useWatch — runs a handler when a value moves, and redraws nothing.
• useRerenderOn — redraws the component when the client announces an occasion.
• useOnResize — redraws the component when resizing the game window changes a box’s size.
• useServerStateOnce — reads a value as the component builds, and never again.
• useDerived — follows the result of one call over server state.
• Engine — the ten occasions the client announces.

Interface state

Interface state.

• useState — reads a cell and returns its setter.
• sessionState — declares a cell shared until logout.
• persistedState — declares a cell saved on the player’s device.

Components

Referencing components with refs.

• useRef — a handle to one component of this render.
• createRef — a name for one component in the project; the name of an interface or a slot.
• useUniverse — the box this component draws into.
• resumePauseButton — answers a paused dialogue with which component was pressed.

Timers

Timers.

• useInterval — runs a body repeatedly, on a global clock.
• useDelay — runs a body once, after a wait.
• stopTimer — takes the timer off a component.

Lifecycle

• onMounted — runs a body at the end of the first render.
• onUpdated — runs a body at the end of every render but the first.

Outside components

• defineEngineHooks — the project’s one declaration of what the client runs by name.
• intArray — a fixed-size array for one function’s run; and Ints, Strings.

Where hooks may be called

Anywhere in the code that produces a component’s markup — including inside an if, inside a while, and inside plain functions the component calls, however deep.

Three hooks are the exceptions: sessionState and persistedState are declarations and go at the top of a file; defineEngineHooks goes at the top of a file and runs outside every component; useUniverse goes inside one.

What a reference cannot do is arrive as a prop. Name the reference at the call and pass the result down:

src/skills.ts2

  const attack = useSkill(Skills.ATTACK);

src/skills.ts2

      <SkillTile icon={SkillIcons.get(Skills.STRENGTH)} level={strength} base={baseStrength} x={1} y={1 + TILE_H} />