cricket-commentary

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const settings = { ...DEFAULT_SETTINGS, ...((await read($, settingsAtom)) ?? {}) }
    if (e.props.hasSurvey || settings.isHidden) return next(e)

    const innings = await read($, inningsAtom)
    const moment = await read($, momentAtom)
    const celebration = await read($, celebrationAtom)
    const ui = $.ui.resolve(e)
    const { Box, Text } = ui
    const width = Math.max(20, e.props.bodyColumns)

    if (settings.isPaused) {
      return (
        <Box>
          <Text backgroundColor={GOLD} color="#000000" bold>
            {' CPL '}
          </Text>
          <Text color="#9fb3d1" wrap="truncate-end">
            {innings === null
              ? '  ⏸ play suspended · /cpl start to resume'
              : `  ⏸ play suspended at ${scoreText(innings)} (${oversText(innings.balls)}) · /cpl start to resume`}
          </Text>
        </Box>
      )
    }

    if (innings === null) {
      return (
        <Box>
          <Text backgroundColor={GOLD} color="#000000" bold>
            {' CPL '}
          </Text>
          <Text color="#9fb3d1" wrap="truncate-end">
            {'  Claude Premier League · send a task to start the innings · /cpl demo for a preview'}
          </Text>
        </Box>
      )
    }

    let bigScreen = null
    const rows = screenRowsFor(e.props.maxRows)
    if (celebration !== null && e.surface === 'terminal' && rows > 0 && width >= 30) {
      const { Raster } = $.ui.resolve(e)
      const columns = Math.min(width, 120)
      const elapsed = Math.max(0, (await $.clock.now()) - celebrationStartedAt)
      screen = { requestId: e.requestId, columns, rows, seq: celebration.seq }
      bigScreen = <Raster key="big-screen" columns={columns} rows={rows} cells={frame(celebration.kind, elapsed, columns, celebration.seq, rows)} />
    } else {
      screen = null
    }
    const call = moment === null ? '' : moment.line.replace(new RegExp(`^${moment.headline.replace(/[^A-Z]/g, '')}!?\\s*`, 'i'), '')

    const batters = Object.values(innings.batters)
      .filter(one => one.runs > 0 || one.balls > 2)
      .sort((a, b) => b.runs - a.runs)
      .slice(0, 3)
    const lastWicket = innings.fallOfWickets[innings.fallOfWickets.length - 1]
    const isWide = width >= 90

    return (
      <Box flexDirection="column">
        {bigScreen}
        <Box>
          <Text backgroundColor={GOLD} color="#000000" bold>
            {' CPL '}
          </Text>
          <Text backgroundColor={NAVY} color="#ffffff" bold>
            {'  CLAUDE '}
          </Text>
          <Text backgroundColor={NAVY} color={GOLD} bold>
            {`${scoreText(innings)} `}
          </Text>
          <Text backgroundColor={NAVY} color="#cfd8e3">
            {` ${oversText(innings.balls)} ov `}
          </Text>
          {isWide && (
            <Text backgroundColor={NAVY} color="#8aa0c2">
              {` CRR ${runRate(innings.runs, innings.balls)} `}
            </Text>
          )}
          <Text backgroundColor={NAVY} color="#8aa0c2">
            {'  THIS OVER '}
          </Text>
          {innings.thisOver.length === 0 && (
            <Text backgroundColor={NAVY} color="#5c6f91">
              {' - '}
            </Text>
          )}
          {innings.thisOver.map(one => (
            <Text backgroundColor={CHIP[one.kind].bg} color={CHIP[one.kind].fg} bold>
              {` ${CHIP[one.kind].label(one)} `}
            </Text>
          ))}
          <Text backgroundColor={NAVY}>{' '}</Text>
          {innings.isLive ? (
            <Text backgroundColor="#b71c1c" color="#ffffff" bold>
              {e.props.isWorking ? ' ● LIVE ' : ' LIVE '}
            </Text>
          ) : (
            <Text backgroundColor="#37474f" color="#ffffff" bold>
              {' STUMPS '}
            </Text>
          )}
        </Box>
        {bigScreen === null && (batters.length > 0 || lastWicket !== undefined) && (
          <Box>
            {batters.map((one, i) => (
              <Text color={i === 0 ? '#ffffff' : '#b0bec5'} bold={i === 0}>
                {`${i === 0 ? ' ' : '  ·  '}${one.name.toUpperCase()} ${one.runs}${one.out ? '' : '*'} (${one.balls})`}
              </Text>
            ))}
            {innings.extras > 0 && <Text color="#78909c">{`  ·  extras ${innings.extras}`}</Text>}
            {lastWicket !== undefined && isWide && (
              <Text color="#ef9a9a" wrap="truncate-end">
                {`  ·  last wkt ${lastWicket.score}-${lastWicket.wicket}: ${lastWicket.how}`}
              </Text>
            )}
          </Box>
        )}
        {moment !== null && (
          <Box>
            <Text color={GOLD} bold>
              {` 🎙  ${moment.headline} `}
            </Text>
            <Text color="#e3f2fd" italic wrap="truncate-end">
              {call}
            </Text>
          </Box>
        )}
      </Box>
    )
  })