UI

trigscript/ui builds a player's text area out of pieces: a panel with a title, a meter, a menu chosen with the keyboard, a dialog typed out a character at a time. It is written in lines of JSX, so a script that uses it is a .tsx file.

import { Meter, Panel, MenuList, DialogBox, choose, say, clock } from "trigscript/ui";

const ITEMS = ["Marine (50)", "Medic (75)", "Leave"];

program(async () => {
  const shop = { selected: 0, open: false };
  const talk = { speaker: "", text: "", open: false };
  ui.lines(P1, () => (
    <>
      <Panel title={`Defence ${clock(memory.game.frame)}`}>
        <Meter label="Marines" value={countUnits(P1, units.TerranMarine)} max={20} />
      </Panel>
      {shop.open && <MenuList items={ITEMS} selected={shop.selected} />}
      <DialogBox box={talk} />
    </>
  ));
  await say(P1, talk, "Raynor", "Hold the bridge until dawn. Press B to buy.");
  while (true) {
    if (keyPressed(P1, "B")) {
      const pick = await choose(P1, ITEMS.length, shop);
      if (pick == 0 && minerals(P1) >= 50) {
        setResources(P1, "subtract", 50, "ore");
        createUnit(P1, units.TerranMarine, 1, locations.Base);
      }
      if (pick == 1 && minerals(P1) >= 75) {
        setResources(P1, "subtract", 75, "ore");
        createUnit(P1, units.TerranMedic, 1, locations.Base);
      }
    }
    await nextFrame();
  }
});

Give a player one ui.lines and put every piece in it, as the example does. The pieces show records of yours (shop, talk), and choose and say change those records, so the view follows. A view is drawn again only when something it reads changes, and once a second as it was, so a menu, a dialog and a meter cost nothing while nothing changes.

choose moves the selection with W and S (or Up and Down) and picks with Space. It does not use Enter, which opens the chat in a game of several players. The text area has eleven lines. A colour code takes no width, and after grey on a line every later colour code is ignored, so put grey last.