subway-surfer

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Button, Text } = $.ui.resolve(e)
    const now = await read($, view)
    const columns = clamp(e.props.bodyColumns, 16, 512)
    const key = (name: string) => () => send($, `/key?k=${name}`)
    const quit = async () => {
      await stop($)
      await $.ui.close({ id: PANE })
    }
    // v: full color, then ascii, then the terminal's characters, then full color.
    const cycle = async () => {
      const mode = MODES[(MODES.indexOf((await read($, view)).mode) + 1) % MODES.length] ?? 'full'
      refused = 0
      await update($, view, was => ({ ...was, mode, message: '' }))
      await send($, `/look?l=${mode === 'full' ? 'full' : 'ascii'}`)
    }

    let picture
    let size = ''
    if (e.surface === 'terminal') {
      const rows = clamp(e.props.scroll.bodyRows - CHROME_ROWS, 4, 256)
      if (now.mode !== 'cells') {
        // One image over the cells: small glyphs, or the game's own pixels.
        const { Image } = $.ui.resolve(e)
        const cols = Math.min(255, columns)
        const tall = Math.min(255, rows)
        wanted = { format: 'image', cols, rows: tall, detail: DETAIL }
        const current = shown && shown.cols === cols && shown.rows === tall && shown.detail === DETAIL ? shown : undefined
        if (current) size = `${current.source.width}×${current.source.height} px`
        picture = (
          <Image key={PICTURE} source={current ? current.source : BLACK} columns={cols} rows={tall}
            alt="The game, as a picture of glyphs (this terminal shows none: press x for cells)" />
        )
      } else {
        const { Raster } = $.ui.resolve(e)
        wanted = { format: 'cells', cols: columns, rows, detail: DETAIL }
        size = `${columns}×${rows} cells`
        const cells = frame && frame.cols === columns && frame.rows === rows ? frame.cells : blank(columns, rows)
        picture = <Raster key={SCREEN} columns={columns} rows={rows} cells={cells} />
      }
    } else {
      // No Raster off the terminal: the same cells arrive as one SVG, redrawn.
      const { Svg } = $.ui.resolve(e)
      const cols = Math.min(64, columns)
      wanted = { format: 'svg', cols, rows: Math.round(cols * 0.75), detail: DETAIL }
      picture = svg ? (
        <Svg source={svg} alt="The game, drawn as glyphs" width={Math.round(Math.min(cols * 9, columns * 7.2))} />
      ) : (
        <Text dimColor>Waiting for the first frame.</Text>
      )
    }

    const line =
      now.phase === 'playing'
        ? `${now.source} · ${now.fps} fps${size ? ` · ${size}` : ''}${now.message ? ` · ${now.message}` : ''}`
        : now.phase === 'idle'
          ? '/surf plays the game, /surf <file or URL> a video.'
          : `${now.message || 'Starting'}${now.phase === 'error' ? '' : '…'}`
    const hint = now.phase === 'playing' && !e.props.isFocused ? ' · click the pane or ctrl+x tab for its keys' : ''

    return (
      <Box flexDirection="column">
        {picture}
        <Text wrap="truncate" dimColor={now.phase !== 'error'} color={now.phase === 'error' ? 'red' : undefined}>
          {line}
          {hint}
        </Text>
        <Box gap={2}>
          <Button key="left" hotkey="a" plain onPress={key('left')}>left</Button>
          <Button key="right" hotkey="d" plain onPress={key('right')}>right</Button>
          <Button key="up" hotkey="w" plain onPress={key('up')}>jump</Button>
          <Button key="down" hotkey="s" plain onPress={key('down')}>roll</Button>
        </Box>
        <Box gap={2}>
          {/* Space starts the game and every new round. */}
          <Button key="start" hotkey="e" plain onPress={key('space')}>start</Button>
          {e.surface === 'terminal' && (
            <Button key="view" hotkey="v" plain onPress={cycle}>{`${MODE_NAMES[now.mode]} view`}</Button>
          )}
          <Button key="quit" hotkey="q" plain onPress={quit}>quit</Button>
        </Box>
      </Box>
    )
  })