coaster-tycoon

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    await read($, tick)
    const w = await park($)
    const showing = await read($, view)
    const els = $.ui.resolve(e) as Record<string, (props: object) => unknown>
    const Box = els.Box as any
    const Text = els.Text as any
    const Button = els.Button as any
    const open = w.rides.filter(r => r.status === 'open')

    if (showing === 'leaderboard') {
      const b = await read($, board)
      const acct = await account($)
      const cols: [string, number, boolean][] = [['#', 4, true], ['Player', 16, false], ['Park', 22, false], ['Score', 7, true], ['⭐', 5, true], ['Guests', 7, true], ['Rides', 6, true], ['Updated', 10, true]]
      const row = (cells: (string | number)[], isMine: boolean, isHead = false) => (
        <Box flexDirection="row">
          {cells.map((c, i) => (
            <Box width={cols[i]![1] + 1}>
              <Text bold={isHead || isMine} dimColor={isHead} color={isMine ? '#f0d020' : undefined} wrap="truncate">
                {pad(c, cols[i]![1], cols[i]![2])}
              </Text>
            </Box>
          ))}
        </Box>
      )
      const entries = b.board?.entries.slice(0, 20) ?? []

      return (
        <Box flexDirection="column">
          <Box flexDirection="row" justifyContent="space-between">
            <Text bold>🏆 Global leaderboard{b.board ? ` · ${b.board.players} players · updated ${ago(b.board.updatedAt, Date.now())}` : ''}</Text>
            <Box flexDirection="row" gap={1}>
              <Button key="refresh" label="Refresh" onPress={() => fetchBoard($)} />
              <Button key="to-park" label="Back to park" variant="primary" onPress={() => update($, view, () => 'park')} />
            </Box>
          </Box>
          {row(cols.map(c => c[0]), false, true)}
          {entries.map(x => row(
            [x.rank, x.user, x.name, x.score.toLocaleString('en-US'), x.rating, x.guestsTotal.toLocaleString('en-US'), x.ridesOpen, ago(x.updatedAt, Date.now())],
            acct?.user === x.user && x.id === myParkId,
          ))}
          {entries.length === 0 && <Text dimColor>{b.error ? `Could not load the board: ${b.error}` : b.board ? 'No parks yet. Be the first: /park join' : 'Loading...'}</Text>}
          <Text dimColor>
            {w.isShared
              ? `You're playing as ${acct?.user ?? '?'} with ${displayName(w)}${myRank ? `, rank #${myRank}` : ', waiting for the next board update'}.`
              : 'This park is not on the board. Type /park join [name] to enter it. Only game stats and the park name are shared.'}
          </Text>
        </Box>
      )
    }

    const crews = buildingRides(w)
    const testing = w.rides.filter(r => r.status === 'testing')
    const hasNews = w.time - w.newsAt < 7 || !w.thought
    const ticker = hasNews ? `📰 ${w.news}` : `💭 ${w.thought}`
    const jobs = [
      ...testing.map(r => `🧪 Testing ${r.name}`),
      ...crews.map(r => `🚧 ${r.builtBy} crew: ${r.name} (${r.kind}) ${Math.min(r.built, r.size)}/${r.size}${w.isWorking ? '' : ', finishing up'}`),
    ]
    const job = jobs.length > 0
      ? jobs.join('  ·  ')
      : w.isWorking ? '🚧 Crews standing by for the next ride' : '🌳 Crews on break. Give Claude work to build more rides.'
    const header = (
      <Box flexDirection="row" justifyContent="space-between">
        <Text bold>{displayName(w)}</Text>
        <Text bold color="#f0d020">{money(w.money)}</Text>
        <Text>👥 {w.guests.length} in park ({w.guestsTotal} total)</Text>
        <Text>⭐ {parkRating(w)}</Text>
        <Text>🎢 {open.length} open · {w.cols * 2} plots</Text>
        <Button key="to-board" label={myRank && w.isShared ? `🏆 #${myRank}` : '🏆 Leaderboard'} onPress={() => showBoard($)} />
      </Box>
    )

    if (e.surface === 'terminal') {
      const Raster = els.Raster as any
      const cols = Math.max(24, Math.min(512, e.props.bodyColumns))
      const rows = Math.max(8, Math.min(120, e.props.scroll.bodyRows - 4))
      const px = renderFrame(w, cols, rows * 2, 4)

      return (
        <Box flexDirection="column">
          {header}
          <Raster key="park" columns={cols} rows={rows} cells={toRasterCells(px, cols, rows)} />
          <Text wrap="truncate">{job}</Text>
          <Text wrap="truncate" dimColor>{ticker}</Text>
        </Box>
      )
    }

    const Svg = els.Svg as any
    const W = 220
    const H = 150
    let svg = renderSvg(w, 6)
    if (svg.length > 130_000) svg = toSvg(renderFrame(w, W, H), W, H, 4)
    if (svg.length > 130_000) svg = toSvg(renderFrame(w, 160, 110), 160, 110, 5.5)
    const best = [...w.rides].sort((a, b) => b.excitement - a.excitement)

    return (
      <Box flexDirection="column" gap={1}>
        {header}
        <Svg source={svg} alt={`${displayName(w)}: ${open.length} rides open, ${w.guests.length} guests`} />
        <Text>{job}</Text>
        <Text dimColor>{ticker}</Text>
        {best.length > 0 && (
          <Box flexDirection="column">
            {best.map(r => (
              <Text wrap="truncate">
                <Text bold>{r.name}</Text>
                <Text dimColor> {r.tier === 'big' ? '🎢' : r.tier === 'medium' ? '🎠' : '🎡'} {r.kind} by {r.builtBy} · </Text>
                {r.status === 'open'
                  ? `E ${r.excitement.toFixed(2)} (${ratingLabel(r.excitement)}) · I ${r.intensity.toFixed(2)} · N ${r.nausea.toFixed(2)} · $${r.price} · ${r.riders} riders`
                  : r.status === 'crashed' ? '💥 crashed, awaiting repairs' : r.status === 'testing' ? '🧪 testing' : '🚧 under construction'}
              </Text>
            ))}
          </Box>
        )}
      </Box>
    )
  })