code-race

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey || (e.surface !== 'terminal' && e.surface !== 'desktop')) return next(e)
    const r = await read($, race)
    const b = await read($, board)
    const now = await $.clock.now()
    const { Box, Text, Button } = $.ui.resolve(e)

    // The leaderboard, asked for with /race top, while no race runs.
    if (b && (!isCurrent(r) || phaseOf(r, now).stage === 'done')) {
      const head = (
        <Box flexDirection="row" columnGap={2} alignItems="center">
          <Text bold>Code race</Text>
          <Text dimColor>Leaderboard · each player's fastest race</Text>
          <Button key="close" label="×" plain role="dismiss" onPress={() => update($, board, () => null)} />
        </Box>
      )
      if (e.surface === 'desktop') {
        const { Svg } = $.ui.resolve(e)
        return (
          <Box flexDirection="column" rowGap={1} width="100%">
            {head}
            <Svg source={boardSvg(b)} alt="Leaderboard" height={boardHeight(b)} />
          </Box>
        )
      }
      return (
        <Box flexDirection="column" width="100%">
          {head}
          {terminalBoard(b, e.props.maxRows, Text)}
        </Box>
      )
    }

    if (!isCurrent(r)) return next(e)
    const p = phaseOf(r, now)
    const len = r.code.length
    const status = statusOf(r, p, now, e.surface === 'terminal')

    // The line, a window around where you are: what you typed dim, the next character on
    // an orange ground (an underline would hide an underscore), then what is ahead; the
    // rest opens as you go.
    const lineOf = (ahead: number) => {
      const from = Math.max(0, r.pos - BEHIND)
      const next_ = r.code[r.pos] === ' ' ? '␣' : (r.code[r.pos] ?? '')
      return (
        <Text>
          <Text dimColor>{`${from > 0 ? '…' : ''}${r.code.slice(from, r.pos)}`}</Text>
          <Text bold color="#ffffff" backgroundColor={r.wrong > 0 ? 'error' : YOU}>{next_}</Text>
          <Text>{r.code.slice(r.pos + 1, r.pos + 1 + ahead)}</Text>
          <Text dimColor>{r.pos + 1 + ahead < len ? '…' : ''}</Text>
        </Text>
      )
    }

    const isDone = p.stage === 'done'
    const isWaiting = p.stage === 'joining' && !!r.party && !!r.roomId // a friends' room, filling up
    const quit = <Button key="quit" label="Quit" onPress={() => quitRace($)} />
    const invite = `/race join ${r.party}`
    const copy = async (surface: RenderSurface) => {
      const { isCopied } = await $.ui.copy({ text: invite, surface })
      $.ui.toast(isCopied ? `Copied: ${invite}` : `Send your friends: ${invite}`)
    }
    const header = (
      <Box flexDirection="row" columnGap={2} alignItems="center">
        <Text bold>Code race</Text>
        <Text dimColor>{status}</Text>
        {isWaiting && <Button key="start" label="Start" variant="primary" onPress={() => startParty($)} />}
        {isWaiting && <Button key="copy" label="Copy invite" onPress={press => copy(press.surface)} />}
        {isDone && <Button key="again" label="Rerace" variant="primary" onPress={() => startRace($, r.party)} />}
        {isDone ? <Button key="quit" label="×" plain role="dismiss" onPress={() => quitRace($)} /> : quit}
      </Box>
    )

    // The terminal: the lanes, then one row right over the prompt: the line while the race
    // runs, the header otherwise. The band keeps its height from joining to the end.
    if (e.surface === 'terminal') {
      const ahead = Math.max(12, Math.min(AHEAD, e.props.bodyColumns - BEHIND - 14))
      return (
        <Box flexDirection="column" width="100%">
          {terminalTrack(r, p, now, e.props.bodyColumns, e.props.maxRows, Box, Text)}
          {p.stage === 'racing' ? (
            <Box flexDirection="row" columnGap={2}>
              {lineOf(ahead)}
              {quit}
            </Box>
          ) : (
            header
          )}
        </Box>
      )
    }

    // The desktop: a plain picture, not a frame: a frame reloads, and flashes, on every redraw.
    const { Svg } = $.ui.resolve(e)
    return (
      <Box flexDirection="column" rowGap={1} width="100%">
        {header}
        <Svg source={trackSvg(r, now)} alt="Race track" height={trackHeight()} />
        {p.stage === 'racing' ? <Svg source={lineSvg(r)} alt={r.code} height={LINE_H} /> : null}
      </Box>
    )
  })