dino

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const isOffered =
      e.props.isWorking &&
      !e.props.hasSurvey &&
      (e.surface === 'terminal' || e.surface === 'desktop')

    if (!isOffered || !isMiniShown(await read($, settings))) {
      return next(e)
    }

    const ui = $.ui.resolve(e)

    return (
      <ui.Client
        key={MINI}
        module="./mini.tsx"
        props={null}
        width="100%"
        height={MINI_ROWS}
      />
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    if (e.surface !== 'terminal' && e.surface !== 'desktop') {
      const { Text } = $.ui.resolve(e)

      return <Text dimColor>Dino runs in the terminal and the desktop app.</Text>
    }

    const ui = $.ui.resolve(e)
    const { Box, Input, Text } = ui
    const { typed: keys } = toInput(await read($, input))
    const { score: offered } = await read($, offer)
    const isAsked = offered > 0
    const hint = e.props.isFocused
      ? 'space/w jump · s duck · p pause · t top · esc gives the keys back to the prompt'
      : 'ctrl+x tab gives the game the keys · then space/w jump · s duck · p pause · t top'

    return (
      <Box flexDirection="column">
        <ui.Client
          key={GAME}
          module="./dino.tsx"
          props={await propsOf($)}
          width="100%"
          height={ROWS}
        />
        {/* The field is the keyboard: every key typed into it is one move, and
            drawing a value other than the last one empties it again. */}
        {/* After a lost run by somebody not on the global top, the same field
            asks for a name: it keeps the focus, and a space still runs again. */}
        <Input
          key={KEYS}
          label={isAsked ? 'name' : 'keys'}
          placeholder={
            isAsked
              ? 'a name for the global top'
              : 'space jump · s duck · p pause · t top'
          }
          submitLabel={isAsked ? 'join' : 'jump'}
          value={keys % 2 === 0 ? '' : ' '}
          autoFocus
          onInput={value => typed($, value)}
          onSubmit={value => entered($, value, latest)}
        />
        <Text dimColor>
          {isAsked
            ? `enter sends this name and your ${digits(offered)} run to the global top · space runs again · enter alone shows the top`
            : hint}
        </Text>
      </Box>
    )
  })