live-scores

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey || !(await read($, pitch))) return next(e)
    const b = await read($, board)
    const scene = featured(b.matches, await read($, celebrations), await read($, pitchTurn))
    if (!scene) return next(e)
    const els = $.ui.resolve(e) as Record<string, ((props: object) => unknown) | undefined>
    const Box = els.Box as any
    const rest = await next(e)
    if (e.surface === 'terminal' && els.Raster) {
      await read($, pitchTick)
      terminalPitchAt = Date.now()
      const Raster = els.Raster as any
      const columns = Math.max(20, Math.min(512, e.props.bodyColumns))

      return (
        <Box flexDirection="column">
          <Raster key="pitch" columns={columns} rows={PITCH_ROWS} cells={toBase64(pitchCells(scene, columns, Date.now()))} />
          {rest}
        </Box>
      )
    }
    if (!els.Svg) return rest
    const Svg = els.Svg as any

    return (
      <Box flexDirection="column">
        <Svg source={pitchSvg(scene, drawWidth(e.props.bodyColumns))} alt={`Claude mascots playing ${scoreLine(scene.match)}`} />
        {rest}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const b = await read($, board)
    const cels = await read($, celebrations)
    const which = await read($, filter)
    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 now = Date.now()
    const today = sorted(shown(b.matches, now))
    const live = today.filter(m => m.state === 'in')
    const list = which === 'live' ? live : today
    const celOf = (id: string) => cels.find(c => c.matchId === id)
    const groups: { key: string; matches: Match[] }[] = []
    for (const m of list) {
      const key = m.isDemo ? 'demo' : m.league
      const g = groups.find(x => x.key === key)
      if (g) g.matches.push(m)
      else groups.push({ key, matches: [m] })
    }
    const next = sorted(b.matches.filter(m => m.state === 'pre' && m.start > now)).sort((a, z) => a.start - z.start)[0]
    const updated = b.fetchedAt ? `updated ${kickoff(b.fetchedAt)}` : 'loading…'

    const toolbar = (
      <Box flexDirection="row" justifyContent="space-between" alignItems="center">
        <Box flexDirection="row" gap={1}>
          <Button key="all" label={`All (${today.length})`} variant={which === 'all' ? 'primary' : undefined} onPress={() => update($, filter, () => 'all' as Filter)} />
          <Button key="live" label={`🔴 Live (${live.length})`} variant={which === 'live' ? 'primary' : undefined} onPress={() => update($, filter, () => 'live' as Filter)} />
        </Box>
        <Box flexDirection="row" gap={1} alignItems="center">
          <Text dimColor>{updated}</Text>
          <Button key="refresh" label="↻" onPress={() => refresh($, true)} />
        </Box>
      </Box>
    )
    const empty = list.length === 0 && (
      <Text dimColor>
        {b.error
          ? b.error
          : !b.fetchedAt
            ? 'Fetching scores…'
            : which === 'live'
              ? 'Nothing live right now.'
              : 'No matches today.'}
        {next && b.fetchedAt ? `  Next up: ${next.home.name} vs ${next.away.name}, ${dayLabel(next.start)} ${kickoff(next.start)} (${leagueOf(next.league).name})` : ''}
      </Text>
    )
    const leagueTitle = (key: string) => key === 'demo' ? { ...leagueOf('eng.1'), region: 'Demo', name: 'Friendly kickabout' } : leagueOf(key)

    if (e.surface === 'terminal') {
      const t = await read($, tick)
      const width = Math.max(30, Math.min(80, e.props.bodyColumns))
      const row = (m: Match) => {
        const cel = celOf(m.id)
        const status = m.state === 'pre' ? (m.status === 'Postp.' ? 'Postp' : kickoff(m.start)) : m.status
        const line = (s: 'home' | 'away') => {
          const team = m[s]
          const other = m[s === 'home' ? 'away' : 'home']
          const isLoser = m.state === 'post' && (team.score ?? 0) < (other.score ?? 0)
          const isHit = cel && cel.side === s
          const flash = isHit && t % 4 < 2
          const bg = flash ? (cel!.kind === 'goal' ? team.color : cel!.kind === 'red' ? C.live : C.var) : undefined

          return (
            <Box flexDirection="row" justifyContent="space-between" backgroundColor={bg}>
              <Text bold={team.isWinner} dimColor={isLoser} wrap="truncate">
                {team.name}{team.reds > 0 ? <Text color={C.live}> {'▮'.repeat(team.reds)}</Text> : ''}
              </Text>
              <Text bold color={isHit && cel!.kind === 'goal' ? C.goal : m.state === 'in' ? C.live : undefined} dimColor={isLoser}>
                {m.state === 'pre' || m.status === 'Postp.' ? '' : String(team.score ?? 0)}
              </Text>
            </Box>
          )
        }
        let banner: unknown = null
        if (cel) {
          const lane = Math.max(10, width - 24)
          const pos = t % lane
          if (cel.kind === 'goal') {
            const word = goalWord(cel.id)
            banner = (
              <Text wrap="truncate">
                {' '.repeat(pos)}⚽{' '.repeat(Math.max(0, lane - pos))}
                {[...word].map((ch, i) => <Text bold color={RAINBOW[(i + t) % RAINBOW.length]}>{ch}</Text>)}
                <Text dimColor> {cel.player} {cel.minute}</Text>
              </Text>
            )
          } else if (cel.kind === 'red') {
            banner = <Text bold color={C.live}>{t % 6 < 3 ? '🟥 RED CARD' : '   RED CARD'} <Text dimColor>{cel.player} {cel.minute}</Text></Text>
          } else {
            banner = <Text bold color={C.var}>{' '.repeat(t % 3)}📺 VAR · NO GOAL</Text>
          }
        }

        return (
          <Box flexDirection="column">
            <Box flexDirection="row">
              <Box width={7}>
                <Text color={m.state === 'in' ? C.live : undefined} dimColor={m.state !== 'in'} bold={m.state === 'in'}>
                  {status}
                </Text>
              </Box>
              <Box flexDirection="column" flexGrow={1}>
                {line('home')}
                {line('away')}
              </Box>
            </Box>
            {banner}
          </Box>
        )
      }

      return (
        <Box flexDirection="column" width={width}>
          {toolbar}
          {empty}
          {groups.map(g => {
            const l = leagueTitle(g.key)
            const n = g.matches.filter(m => m.state === 'in').length

            return (
              <Box flexDirection="column" marginTop={1}>
                <Text>
                  {l.flag} <Text dimColor>{l.region}</Text> <Text bold>{l.name}</Text>
                  {n > 0 ? <Text color={C.live} bold> ● {n} live</Text> : ''}
                </Text>
                {g.matches.map(row)}
              </Box>
            )
          })}
        </Box>
      )
    }

    const Svg = els.Svg as any
    const width = drawWidth(e.props.bodyColumns)

    return (
      <Box flexDirection="column" gap={1}>
        {toolbar}
        {empty}
        {groups.map(g => {
          const l = leagueTitle(g.key)
          const n = g.matches.filter(m => m.state === 'in').length

          return (
            <Box flexDirection="column">
              <Svg source={leagueSvg(l, n, width)} alt={`${l.region} · ${l.name}`} />
              {g.matches.map((m, i) => (
                <Svg
                  source={matchSvg(m, celOf(m.id), { width, isLast: i === g.matches.length - 1 })}
                  alt={`${m.status || kickoff(m.start)} ${scoreLine(m)}`}
                />
              ))}
            </Box>
          )
        })}
      </Box>
    )
  })