sessionState

sessionState declares a cell several components can share. It lasts until the player logs out.

sessionState(initial: Int): StateRef<Int>
sessionState(initial: String): StateRef<String>

Reference

sessionState(initial)

Call it at the top level of a file, never inside a component. Read it with useState.

src/quantity.ts2

const sharedAmount = sessionState(0);

src/quantity.ts2

const SharedToolbar = ({ x, y }: { x: Int; y: Int }): Component => {
  const [amount, setAmount] = useState(sharedAmount);

Parameters

• initial: An Int or a String. The value before anything sets it.

Returns

A declaration to pass to useState. It is not the value — you cannot read it directly.

Caveats

• Declare it at the top level. Inside a component it is refused (TS2E124).
• Export it if components in other files need it.
• It lasts until logout and is never saved. For something that should survive a restart, use persistedState.
• It needs no key — rename the variable freely.
• A string cell is one of these. A private useState('') is refused; sessionState('') is where a string lives.

refused/session-state.ts2

const Refused = (): Component => {
  const openTab = sessionState(0);                                   // belongs at the top of the file

Usage

Sharing a selection across a panel

src/shop.ts2

const openTab = sessionState(0);

src/shop.ts2

  const [tab, setTab] = useState(openTab);

src/shop.ts2

  const [tab] = useState(openTab);

Holding a string

src/menu.ts2

const lastChoice = sessionState('');

src/menu.ts2

          <text x={48} y={22} w={{ fill: 52 }} h={14} font={Fonts.SMALL} shadow
                text={chosen.length === 0 ? 'No option chosen yet' : `Chose ${chosen}`}
                color={Colors.DIM} />

Handing a value from one component to another

src/entry.ts2

const withdrawAmount = sessionState(0);

src/entry.ts2

export const Committed = (): Component => {
  const [amount] = useState(withdrawAmount);

The prompt writes it on Enter; the line below reads it; neither is the other’s parent.

Troubleshooting

My components do not see the same value

Check they are reading the same declaration. Two sessionState(0) calls are two different values, however similar they look — import one from a shared file rather than declaring one in each.

The value resets when the player logs out

Use persistedState if it should survive.