nba-scores-mod

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    // 只有終端機和桌面版有這條區域。手機、VS Code、claude -p 都沒有
    if (e.surface !== 'terminal' && e.surface !== 'desktop') return next(e)
    // 問卷佔用同一塊位置時讓位，不要疊在一起
    if (e.props.hasSurvey) return next(e)

    const setCollapsed = (value: boolean) => {
      collapsed = value
      void $.store.set(COLLAPSED_KEY, value)
      $.ui.invalidate('ui.render')
    }

    // ---- 桌面版：橫排小卡 ----
    if (e.surface === 'desktop') {
      const { Box, Button, Select, Svg, Text } = $.ui.resolve(e)
      const nowMs = await $.clock.now()
      // 別的 mod（例如用量帶）畫的東西一律放在自己上面。兩個 mod 誰包誰是看安裝
      // 順序，不這樣固定的話，裝的順序不同上下就會顛倒。
      const below = await next(e)
      // 有畫圖騰的球隊：圖騰＋隊色的徽章。其他球隊維持原本的紅徽章
      const totem = totemFor(config.team)
      const badge = (
        <Box flexDirection="row" alignItems="center" gap={1}>
          {totem ? <Svg source={totem.svg} alt={totem.alt} width={TOTEM_SIZE} height={TOTEM_SIZE} /> : null}
          <Box backgroundColor={totem?.badgeBg ?? BADGE_BG} paddingX={1}>
            <Text bold color={totem?.badgeFg ?? BADGE_FG}>
              NBA
            </Text>
          </Box>
        </Box>
      )
      const rule = (
        // truncate 會在尾巴加「…」、wrap 會折成兩行。所以包一層不准縮的框：
        // 字維持一整行、撐出去的部分由外框裁掉
        <Box flexDirection="row" width="100%" overflow="hidden">
          <Box flexShrink={0}>
            <Text dimColor>{RULE}</Text>
          </Box>
        </Box>
      )

      if (!slate) {
        return (
          <Box flexDirection="column">
            {below}
            <Text dimColor>{lastError ? t.fetchFailed(lastError) : t.loading}</Text>
          </Box>
        )
      }

      // 收起來時只留「有沒有比賽正在打」這一件事，其他都不講
      const live = slateMode(slate) === 'live'
      const all = sortLiveFirst(slate.games, config.team)

      if (collapsed) {
        return (
          <Box flexDirection="column">
            {below}
            {rule}
            <Box flexDirection="row" alignItems="center" gap={1}>
              {badge}
              {live ? <Text color={ACCENT}>● LIVE</Text> : null}
              <Box key="nba-scores-mod:expand-area">
                <Button
                  key="nba-scores-mod:expand"
                  plain
                  label={t.expand}
                  hover={{ color: ACCENT }}
                  onPress={() => setCollapsed(false)}
                />
              </Box>
            </Box>
          </Box>
        )
      }

      // 場次變少時（隔天換一批）原本翻到的位置可能已經不存在
      const start = Math.min(offset, Math.max(0, all.length - 1))
      const visible = all.slice(start)
      const hidden = all.filter(g => isMasked(g, spoilerFree(), revealed)).length
      const age = Math.floor((nowMs - slate.fetchedAt) / 60_000)

      const chip = (g: Game) => {
        const mine = involves(g, config.team)
        const masked = isMasked(g, spoilerFree(), revealed)
        const started = g.state !== 'pre'
        // 打完的比賽：贏的那邊亮、輸的那邊暗，一眼看得出誰贏。遮住時不能洩漏
        const decided = g.state === 'post' && !masked && g.away.score !== g.home.score
        const side = (which: Which) => {
          const team = g[which]
          const other = which === 'away' ? g.home : g.away
          const lost = decided && team.score < other.score
          const flash = flashOf(g.id, which, nowMs)
          return (
            <Box flexDirection="row" alignItems="center" gap={1}>
              {mine ? <Text color={teamColor(team)}>▍</Text> : null}
              <Text bold={mine} dimColor={lost}>
                {team.abbr}
              </Text>
              {!started ? null : masked ? (
                <Svg source={MASK_SVG} alt={t.maskedAlt} width={22} height={12} />
              ) : (
                // 剛得分的前幾秒顯示「舊比分 +N」，之後才換成新比分。直接寫「新比分 +N」
                // 會被讀成還要再加 N 分（100 +2 看起來像 102）。
                <Text bold={!lost} dimColor={lost} color={flash && !flash.strong ? FLASH_COLOR : undefined}>
                  {String(flash?.strong ? team.score - flash.delta : team.score)}
                </Text>
              )}
              {flash?.strong && !masked ? <Text color={FLASH_COLOR}>+{String(flash.delta)}</Text> : null}
            </Box>
          )
        }
        return (
          <Box
            key={g.id}
            flexDirection="row"
            alignItems="center"
            gap={1}
            paddingX={1}
            flexShrink={0}
            borderStyle="round"
            borderDimColor={!mine && g.id !== openId}
          >
            {g.state === 'in' ? <Text color={ACCENT}>●</Text> : null}
            {side('away')}
            <Text dimColor>{started ? '–' : '@'}</Text>
            {side('home')}
            {g.state === 'in' ? (
              <Text color={ACCENT}>{chipDetail(g, showingNext)}</Text>
            ) : g.state === 'pre' ? (
              <Text color={UPCOMING}>{chipDetail(g, showingNext)}</Text>
            ) : (
              <Text dimColor>{chipDetail(g, showingNext)}</Text>
            )}
            {started && !masked ? (
              <Button
                key={`nba-scores-mod:open:${g.id}`}
                plain
                label={g.id === openId ? '▴' : '▾'}
                onPress={() => {
                  openId = g.id === openId ? undefined : g.id
                  $.ui.invalidate('ui.render')
                  if (openId !== undefined && (boxState.id !== openId || boxState.error !== undefined)) {
                    const picked = openId
                    void refreshBox($, boxState, picked, () => openId === picked, backoff)
                  }
                }}
              />
            ) : null}
            {masked ? (
              <Button
                key={`nba-scores-mod:reveal:${g.id}`}
                plain
                label={t.reveal}
                onPress={() => {
                  revealed.add(g.id)
                  $.ui.invalidate('ui.render')
                }}
              />
            ) : null}

const renderDetail = (
  ui: { Box: any; Text: any },
  g: Game,
  boxState: BoxState,
  opts: { wide: boolean; gapTop: number; t: Strings },
) => {
  const { Box, Text } = ui
  const count = Math.max(g.away.periods.length, g.home.periods.length)
  const awayLost = g.state === 'post' && g.away.score < g.home.score
  const homeLost = g.state === 'post' && g.home.score < g.away.score
  const column = (id: string, title: string, away: string, home: string, strong: boolean) => (
    <Box key={id} flexDirection="column" alignItems="flex-end" marginRight={2}>
      <Text dimColor>{title}</Text>
      <Text bold={strong && !awayLost} dimColor={awayLost}>
        {away}
      </Text>
      <Text bold={strong && !homeLost} dimColor={homeLost}>
        {home}
      </Text>
    </Box>
  )
  // 右邊：兩隊各自得分前幾名。資料屬於別場（剛換場、還在抓）就先說讀取中
  const mineBox = boxState.id === g.id
  const teamBlock = (abbr: string) => {
    const team = boxState.teams?.find(t => t.abbr === abbr)
    if (!team) return null
    const stat = (id: string, title: string, pick: (p: TeamBox['players'][number]) => number) => (
      <Box key={id} flexDirection="column" alignItems="flex-end" marginRight={2} flexShrink={0}>
        <Text dimColor>{title}</Text>
        {team.players.map((p, i) => (
          <Text key={`${id}${i}`}>{String(pick(p))}</Text>
        ))}
      </Box>
    )
    return (
      // 每一欄都不准縮：空間不夠時寧可右邊被裁掉，也不能讓名字折行害數字對不上
      <Box key={abbr} flexDirection="row" marginLeft={3} flexShrink={0}>
        <Box key={`names:${abbr}`} flexDirection="column" marginRight={2} flexShrink={0}>
          <Text bold>{abbr}</Text>
          {team.players.map((p, i) => (
            <Text key={`n${i}`} dimColor>
              {shortName(p.name)}
            </Text>
          ))}
        </Box>
        {stat('pts', opts.t.pts, p => p.pts)}
        {stat('reb', opts.t.reb, p => p.reb)}
        {stat('ast', opts.t.ast, p => p.ast)}
      </Box>
    )
  }
  return (
    <Box flexDirection={opts.wide ? 'row' : 'column'} marginTop={opts.gapTop}>
      <Box flexDirection="row">
        <Box flexDirection="column" marginRight={2}>
          <Text dimColor> </Text>
          <Text bold={!awayLost} dimColor={awayLost}>
            {g.away.abbr}
          </Text>
          <Text bold={!homeLost} dimColor={homeLost}>
            {g.home.abbr}
          </Text>
        </Box>
        {Array.from({ length: count }, (_, i) =>
          column(
            `p${i}`,
            i < 4 ? `Q${i + 1}` : `OT${i - 3}`,
            String(g.away.periods[i] ?? '-'),
            String(g.home.periods[i] ?? '-'),
            false,
          ),
        )}
        {column('total', opts.t.total, String(g.away.score), String(g.home.score), true)}
      </Box>
      <Box flexDirection="row">
        {!mineBox ? (
          <Box marginLeft={3}>
            <Text dimColor>{opts.t.boxLoading}</Text>
          </Box>
        ) : boxState.error !== undefined ? (
          <Box marginLeft={3}>
            <Text color="#d97706">{opts.t.boxFailed(boxState.error)}</Text>
          </Box>
        ) : (
          [teamBlock(g.away.abbr), teamBlock(g.home.abbr)]
        )}
      </Box>
    </Box>
  )
}