pairs

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    if (e.requestId !== PANE) return next(e)
    const g = await read($, game)
    const { Box, Text, Button } = $.ui.resolve(e)
    if (!g.seed) return Text({ children: ['No game loaded. /pairs new starts one.'] })
    const columns = e.props.bodyColumns || 60
    const wide = columns >= 50
    const showHelp = help ?? (wide && g.turns === 0 && !g.up.length)
    const desktop = e.surface === 'desktop'
    const found = pairsFound(g)

    const status = g.done ? { text: 'All eight pairs in ' + g.turns + ' turns' + (g.stats.bestTurns === g.turns ? ', your best. ' : '. ') + 'Press r for a new deal.', color: 'success', bold: true }
      : g.up.length === 2 ? { text: 'Not a pair. They turn back in a moment.', color: 'warning' }
      : g.up.length === 1 ? { text: 'Now find its twin.', color: 'suggestion' }
      : g.turns === 0 ? { text: 'Press a card\'s letter to turn it over.', color: 'suggestion' }
      : { text: found + ' of 8 pairs found. Turn a card.', color: 'suggestion' }

    const header = Box({ flexDirection: 'column', children: [
      Box({ flexDirection: 'row', columnGap: 2, flexWrap: 'wrap', children: [
        Text({ bold: true, children: ['PAIRS'] }),
        Text({ children: ['turns ', Text({ bold: true, children: [String(g.turns)] })] }),
        Text({ children: ['found ' + found + '/8'] }),
        Text({ dimColor: true, children: ['best ' + (g.stats.bestTurns || '—') + ' · game ' + g.stats.games] }),
      ] }),
      Text({ color: status.color, bold: status.bold, wrap: 'wrap', children: [status.text] }),
    ] })

    // Every card is a fixed-width Box so the grid lines up on any surface. A
    // face-down card shows its key (the desktop draws the key as a badge, so the
    // label is blank there); a card that is up shows its face on yellow, a found
    // pair its face on green.
    const card = (i: number) => {
      const isUp = g.up.includes(i)
      const shown = g.matched[i] || isUp
      const backgroundColor = g.matched[i] ? 'success' : isUp ? 'warning' : undefined
      const label = shown ? FACES[g.faces[i]] : desktop ? ' ' : KEYS[i]
      return Box({ width: 5, justifyContent: 'center', backgroundColor, children: [
        Button({ key: 'card-' + i, label, hotkey: shown ? undefined : KEYS[i], dimColor: !shown, onPress: async () => {
          let error: string | undefined
          let outcome: string | undefined
          const after = await change($, (cur) => {
            const r = turn(cur, i)
            error = r.error
            outcome = r.outcome
            return r.game
          })
          if (error) {
            $.ui.toast(error)
            return
          }
          // A stale timer is harmless: hideMiss only acts on a mismatched pair.
          if (outcome === 'miss') scheduleHide($)
          if (after.done) $.ui.toast('All pairs found in ' + after.turns + ' turns!', { timeoutMs: 5000 })
        } }),
      ] })
    }
    const grid = Box({ flexDirection: 'column', children: Array.from({ length: SIZE }, (_, r) => Box({ flexDirection: 'row', columnGap: 1, children: Array.from({ length: SIZE }, (_, c) => card(r * SIZE + c)) })) })

    const howTo = Box({ flexDirection: 'column', borderStyle: 'round', borderColor: 'suggestion', paddingX: 1, children: [
      Text({ bold: true, children: ['How to play'] }),
      Text({ wrap: 'wrap', children: ['1. Sixteen cards lie face down, eight matching pairs. Press a card\'s letter, a to p, or click it, to turn it over.'] }),
      Text({ wrap: 'wrap', children: ['2. Turn a second card. A pair stays up; two different cards turn back after a moment. Remember where they were.'] }),
      Text({ wrap: 'wrap', children: ['3. Find all eight pairs in as few turns as you can. Your fewest is kept.'] }),
      Text({ dimColor: true, wrap: 'wrap', children: ['Keys need the pane focused: click it if nothing happens. t hides this.'] }),
    ] })

    const footer = Box({ flexDirection: 'row', columnGap: 3, flexWrap: 'wrap', children: [
      Button({ key: 'new', label: 'New deal', hotkey: 'r', plain: true, onPress: () => startNew($) }),
      Button({ key: 'help', label: showHelp ? 'Hide help' : 'How to play', hotkey: 't', plain: true, dimColor: true, onPress: () => {
        help = !showHelp
        $.ui.invalidate('ui.render')
      } }),
      Text({ dimColor: true, children: ['Esc closes'] }),
    ] })

    return Box({ flexDirection: 'column', rowGap: 1, children: showHelp ? [header, grid, howTo, footer] : [header, grid, footer] })
  })