flappy

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const shown = await read($, board)
    if (!showsSuggestion(shown, e.props)) {
      return next(e)
    }
    const { Box, Button, Text } = $.ui.resolve(e)

    return (
      <Box gap={2}>
        <Text dimColor>Still thinking. Fancy a round of Flappy Code?</Text>
        <Button key="play" hotkey="1" plain label="Play" onPress={() => void openGame($)} />
        <Button key="later" hotkey="2" plain dimColor label="Not now" onPress={() => void withdrawSuggestion($)} />
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const shown = await read($, board)
    const onJump = (): void => void jump($)
    notePaneDraw(e.surface, paneSizeOf(e.props, e.viewport))
    if (e.surface === 'terminal') {
      const { Box, Client, Input, Text } = $.ui.resolve(e)
      const rows = Math.min(MAX_ROWS, gameRowsFor(e.props.placement, e.props.scroll.bodyRows, e.viewport?.rows))
      if (rows < MIN_ROWS) {
        return <Text>Flappy Code needs a taller terminal, or one at least 110 columns wide.</Text>
      }

      return (
        <Box flexDirection="column">
          <Client key="game" module="./game.tsx" props={{ jumps, best: shown.best }} width={e.props.bodyColumns} height={rows} />
          {jumpField(Input, shown.draws, TERMINAL_WORDS, onJump)}
        </Box>
      )
    }
    await read($, frame)
    const readyHint = e.surface === 'mobile' ? BUTTON_READY_HINT : FIELD_READY_HINT
    const source = await watchedPicture($, e.props.bodyColumns, shown.best, readyHint)
    noteFrame(e.surface, { columns: picture.size.columns, rows: picture.size.height / 2 })
    if (e.surface === 'mobile') {
      const { Box, Button, Svg } = $.ui.resolve(e)

      return (
        <Box flexDirection="column">
          <Svg source={source} alt={pictureAlt(picture.game)} />
          <Button key="jump" variant="primary" label="Jump" onPress={onJump} />
        </Box>
      )
    }
    const { Box, Input, Svg, Text } = $.ui.resolve(e)

    return (
      <Box flexDirection="column">
        <Svg source={source} alt={pictureAlt(picture.game)} />
        <Text dimColor>{FIELD_EXPLAINER}</Text>
        {jumpField(Input, shown.draws, PICTURE_WORDS, onJump)}
      </Box>
    )
  })

const jumpField = (
  Input: Elements['terminal']['Input'],
  draws: number,
  words: { hint: string; submit: string },
  onJump: () => void,
): RenderElement => (
  <Input
    key={FIELD}
    autoFocus
    placeholder={words.hint}
    value={draws % 2 === 0 ? '' : ' '}
    submitLabel={words.submit}
    onInput={onJump}
    onSubmit={onJump}
  />
)