arcade

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const shown = await read($, display)
    if (e.surface !== 'terminal' && e.surface !== 'desktop') return unsupported($, e, shown.locale)

    const state = await read($, pause)
    const record = await read($, best)

    // Docked, the region is as tall as the pane's body: a click anywhere in
    // the pane then lands in it and gives the game the keys. A percentage is
    // not enough there, the region would end below the last row drawn. Inline
    // the pane is as tall as what is drawn, so its body rows must not size it.
    const height = e.props.placement === 'dock' ? e.props.scroll.bodyRows : '100%'

    // The plugin directory reads the surface module's path off this source,
    // and its check took a line that only fetched the element from the table
    // for an element without a path. So the element is named once in this
    // file, in the tag below, with its `module` on the same line.
    const elements = $.ui.resolve(e)
    return (
      <elements.Client module="./arcade.tsx" key="arcade" width="100%" height={height} props={{ ...state, ...shown, best: record }} />
    )
  })

function unsupported($: EngineInterface, e: RenderInput<'Pane'>, locale: Locale) {
  const { Text } = $.ui.resolve(e)
  return <Text dimColor>{t(locale, 'unsupported')}</Text>
}