cc-tamagotchi

  on('ui.render', { component: 'Pane', requestId: 'tama' }, async ($, e) => {
    const c = await context($)
    const el = $.ui.resolve(e)
    if (!c) return el.Text({ children: ['waking up…'] })
    const cols = e.props.bodyColumns
    if (e.surface === 'terminal') {
      // docked, the pane has its body's rows; inline above the prompt, about what it asked for
      const rows = e.props.placement === 'dock' ? e.props.scroll.bodyRows : (e.viewport?.rows ?? 24) >= 60 ? 26 : 20
      return paneTerminal($, el, c, cols, rows, e.props.placement === 'dock')
    }
    return paneRemote($, el, c, cols)
  })

function paneRemote($: Engine, el: any, c: Ctx, cols: number) {
  const { Box, Text, Button, Svg, Input } = el
  const { pet } = c
  const svg = deviceSvg({ input: sceneOf(c), rt: isReacting(c) ? reactionAge(c) : null, name: pet.name, shell: c.settings.shell, icons: icons(pet) })
  const words = spoken(c)
  const lines =
    c.view === 'stats'
      ? statsLines(c).map(([k, v]) => `${k}: ${v}`)
      : c.view === 'help'
        ? HELP.map(([k, v]) => `${k}: ${v}`)
        : c.view === 'history'
          ? historyLines(c)
          : c.view === 'game' && c.game
            ? [
                `Left or right? Round ${Math.min(5, c.game.round + (c.game.isOver ? 0 : 1))} of 5, won ${c.game.wins}.`,
                ...(c.game.answer ? [c.game.answer === c.game.guess ? `Yes! It looked ${c.game.answer}.` : `No, it looked ${c.game.answer}.`] : []),
              ]
            : infoLines(c).map(l => `${l.label}  ${l.value}`)
  return (
    <Box flexDirection="column" gap={1}>
      <Box flexDirection={cols >= 60 ? 'row' : 'column'} columnGap={3} alignItems="flex-start">
        <Svg key="device" source={svg} alt={`${title(pet)}: ${statusLine(pet)}`} width={220} height={250} isInteractive />
        <Box flexDirection="column">
          <Text bold>{title(pet)}</Text>
          {lines.map(line => (
            <Text wrap="wrap">{line}</Text>
          ))}
          {c.view === 'name' && Input ? (
            <Input
              key="name"
              label="Name"
              placeholder={pet.name}
              value=""
              submitLabel="rename"
              autoFocus
              onSubmit={async (value: string) => {
                if (value.trim()) await change($, p => ({ pet: rename(p, value), ok: true }))
                await setView($, 'main')
              }}
            />
          ) : null}
        </Box>
      </Box>
      <Text dimColor={!words}>{words ? `“${words}”` : statusLine(pet)}</Text>
      <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
        {actionsOf(c).map(a => (
          <Button key={`act:${a.key}`} label={a.label} hotkey={a.hotkey} onPress={() => press($, a.key)} />
        ))}
      </Box>
    </Box>
  )
}

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const c = await context($, e.props.isWorking)
    // the device is up: it says everything the band would
    if (!c || e.props.hasSurvey || c.settings.band === 'off' || (await isPaneUp($))) return next(e)
    const el: any = $.ui.resolve(e)
    const { Box, Client, Svg } = el
    const { pet } = c
    const lively = e.props.isWorking || pet.species === 'egg' || isReacting(c) || (c.speech !== null && c.now - c.speech.at < BAND_AFTER_MS)
    // auto and big: the strip while something is going on, else one line; on: the strip always
    const blocks = c.settings.band === 'big'
    // below 60 columns the strip and its side text do not fit: one line it is
    const big = e.props.bodyColumns >= 60 && e.props.maxRows >= (blocks ? 10 : 6) && (c.settings.band === 'on' || ((c.settings.band === 'auto' || blocks) && lively))
    const shell = SHELLS[c.settings.shell] ?? SHELLS.coral
    let mine: unknown
    if (!big) {
      mine = bandLine(el, c)
    } else if (e.surface === 'terminal') {
      // dots: 16 pixels in 4 rows; blocks: 16 pixels in 8 rows, each pixel a whole cell wide
      const laneCols = Math.max(16, Math.min(blocks ? 96 : 90, e.props.bodyColumns - 34))
      mine = (
        <Box flexDirection="row" columnGap={2}>
          <Client
            key={blocks ? 'lane:blocks' : 'lane'}
            module="./lcd.tsx"
            width={laneCols}
            height={blocks ? 8 : 4}
            props={{ input: sceneOf(c), mode: blocks ? 'strip' : 'lane', age: reactionAge(c) ?? 999999, ink: shell.base }}
          />
          {bandLaneSide(el, c)}
        </Box>
      )
    } else if (Svg) {
      const svg = laneSvg(sceneOf(c), isReacting(c) ? reactionAge(c) : null, shell.base, 80)
      mine = (
        <Box flexDirection="row" columnGap={2} alignItems="center">
          <Svg key="lane" source={svg} alt={statusLine(pet)} width={240} height={48} isInteractive />
          {bandLaneSide(el, c)}
        </Box>
      )
    } else {
      mine = bandLine(el, c)
    }
    return (
      <Box flexDirection="column">
        {mine}
        {await next(e)}
      </Box>
    )
  })