idlecrash

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const f = await read($, feed)
    const wish = await read($, local)
    const st = await read($, status)
    const width = Math.max(30, (e.props.bodyColumns ?? 40) - 1)
    const snap = f.snap

    const title = (
      <Box>
        <Text bold>IDLECRASH</Text>
        <Text dimColor>  fake tokens only</Text>
      </Box>
    )

    if (e.surface === 'desktop') {
      // The pictures are Svg in this tree and are redrawn many times a second, so nothing that is pressed lives
      // here: a button in this tree would blink at every redraw. Each button is a Client, redrawn on change.
      const { Client, Svg } = $.ui.resolve(e)
      const view = deskView(snap, wish, st, (await $.clock.now()) + f.offset)
      const controls = controlsOf(view.controls)
      let stage: string
      if (view.scene) {
        const sceneProps: SceneProps = { ...view.scene, columns: PICTURE.width, rows: PICTURE.height / 2 }
        const { input, multiplier, serverNow } = sceneInputFor(sceneProps, 0)
        const overlay = overlayOf(view.scene, multiplier, serverNow)
        const picture = picturePaths(drawScene(input, PICTURE.width, PICTURE.height), PICTURE.width, PICTURE.height)
        stage = stageSvg({ head: view.head, picture, big: overlay.big, bigColor: overlay.color, sub: overlay.sub, watch: view.watch, message: null })
      } else {
        stage = stageSvg({ head: view.head, picture: null, big: '', bigColor: '', sub: '', watch: null, message: view.message })
      }
      // A button is a picture, the same picture lit over it while the pointer is on it (the app does that, no code of
      // ours), and a Client over both that catches the click. Nothing in an Svg can be pressed.
      const face = (b: ButtonSpec) => (
        <Box key={`w-${b.id}`} width={b.share}>
          <Svg source={buttonSvg(b, 'rest')} alt={b.label} />
          {!b.isDisabled && (
            <Box position="absolute" top={0} left={0} right={0} bottom={0} display="none" hover={{ display: 'flex' }}>
              <Svg source={buttonSvg(b, 'hot')} alt={`${b.label}, lit`} />
            </Box>
          )}
          {!b.isDisabled && (
            <Box position="absolute" top={0} left={0} right={0} bottom={0} overflow="hidden">
              <Client key={`btn-${b.id}`} module="./hit-client.tsx" props={{ press: b.press }} width="100%" height={12} />
            </Box>
          )}
        </Box>
      )
      return (
        <Box flexDirection="column" rowGap={1}>
          <Svg source={stage} alt={view.message ? `${view.message.title}. ${view.message.text}` : 'IdleCrash: the plane and the multiplier'} />
          {controls && (
            <Box flexDirection="column">
              {'button' in controls.main ? face(controls.main.button) : <Svg source={statusSvg(controls.main.text, controls.main.color)} alt={controls.main.text} />}
              <Box>
                <Box width={CAPTION.share}>
                  <Svg source={captionSvg('stake')} alt="stake" />
                </Box>
                {controls.stakes.map(face)}
              </Box>
              <Box>{controls.options.map(face)}</Box>
              <Text color={view.controls.isNoticeError ? 'error' : 'warning'}>{view.controls.notice || ' '}</Text>
            </Box>
          )}
          {view.table && <Svg source={tableSvg(view.table)} alt="The table: players and the last crashes" />}
          <Text dimColor>Fake tokens only. Nothing here is worth anything. Bets are open only while Claude is working.</Text>
        </Box>
      )
    }

    if (e.surface !== 'terminal') return <Text>IdleCrash plays in a terminal or in the desktop app.</Text>

    if (!st.isWorking && !st.isWatching && st.summary) {
      return (
        <Box flexDirection="column">
          {title}
          <Text color="warning">{st.summary}</Text>
          <Text dimColor>Betting opens again when Claude starts the next turn.</Text>
          <Text dimColor>{snap && snap.history.length > 0 ? `last crashes: ${snap.history.slice(0, 8).map(point => point.toFixed(2)).join(' ')}` : ' '}</Text>
        </Box>
      )
    }
    if (!st.isWorking && !st.isWatching) {
      return (
        <Box flexDirection="column">
          {title}
          <Text>Waiting for Claude to start working.</Text>
          <Text dimColor>You can only play while Claude is busy.</Text>
          <Text dimColor>/idlecrash off  stops it opening by itself</Text>
        </Box>
      )
    }
    if (!snap || !st.isJoined) {
      return (
        <Box flexDirection="column">
          {title}
          {st.error ? <Text color="error">{st.error}</Text> : <Text dimColor>Taking a seat…</Text>}
        </Box>
      )
    }

    // Nothing below changes between two redraws unless the table changed: the moving parts
    // (plane, multiplier, countdown) live in the picture, which animates on its own.
    const phase = snap.table.phase
    const mine = snap.you.bet
    const isLive = !!mine && mine.cash === null && phase !== 'crashed'
    const delta = st.balanceAtStart === null ? 0 : snap.you.balance - st.balanceAtStart
    const seated = snap.table.humans + snap.table.bots
    const columns = Math.min(56, Math.max(28, width))
    const rowsOfPicture = 14
    const sceneProps: SceneProps = {
      phase,
      round: snap.table.round,
      columns,
      rows: rowsOfPicture,
      growth: snap.growth,
      runStartedAt: snap.table.runStartedAt,
      crashedAt: snap.table.crashedAt,
      crashPoint: snap.table.crashPoint,
      bettingEndsAt: snap.table.bettingEndsAt,
      serverNow: (await $.clock.now()) + f.offset,
      stake: isLive && phase === 'running' ? mine!.amount : 0,
    }

    const { Client } = $.ui.resolve(e)
    const picture = (
      <Client key="scene" module="./scene-client.tsx" props={sceneProps} width={columns} height={rowsOfPicture + 1} />
    )

    const rows = snap.players.map(p => {
      const name = pad(`${p.you ? '›' : ' '}${p.bot ? '⚙' : ' '}${p.name}`, 12)
      let result = ''
      let color: string | undefined
      if (p.bet > 0) {
        if (p.cash !== null) {
          result = `${times(p.cash)} → ${fmt(p.payout)}`
          color = 'success'
        } else if (phase === 'crashed') {
          result = 'lost'
          color = 'error'
        } else {
          result = phase === 'betting' ? 'in' : '…'
        }
      }
      return (
        <Box>
          <Text bold={p.you}>{name} {padStart(p.bet > 0 ? fmt(p.bet) : '-', 5)}  </Text>
          <Text color={color} dimColor={!color}>{result}</Text>
        </Box>
      )
    })

    const room = Math.max(3, Math.floor((width - 6) / 6))

    // An open bet can be cashed out while the plane flies, whether Claude is still working or not.
    let action
    if (isLive && phase === 'running') {
      action = <Button key="cash" label="c · CASH OUT" hotkey="c" variant="primary" onPress={() => cashOut($)} />
    } else if (mine && mine.cash !== null) {
      action = <Text color="success">cashed out {times(mine.cash)}: paid {fmt(mine.payout)}</Text>