nhl-tui 0.1.2 → 0.2.0

package/src/index.tsx

@@ -1,15 +0,0 @@
-#!/usr/bin/env node
-import { render } from "ink";
-import { NhlApi } from "./api/nhl.js";
-import { App } from "./ui/App.js";
-
-if (typeof performance.measure === "function") {
-  const originalMeasure = performance.measure.bind(performance);
-  performance.measure = ((...args: Parameters<typeof performance.measure>) => {
-    const entry = originalMeasure(...args);
-    performance.clearMeasures();
-    return entry;
-  }) as typeof performance.measure;
-}
-
-render(<App client={new NhlApi()} />);

package/src/ui/App.tsx

@@ -1,151 +0,0 @@
-import { Box, Text, useApp, useInput } from "ink";
-import { useEffect, useRef } from "react";
-import { type NhlApi } from "../api/nhl.js";
-import { formatScoreboardDateLabel } from "../app/dates.js";
-import {
-  getDetailPollDelayMs,
-  getScoreboardPollDelayMs,
-  useAppPolling,
-} from "../app/polling.js";
-import {
-  selectCurrentLeaders,
-  selectCurrentStandings,
-  selectSelectedGame,
-  selectVisibleGames,
-  useAppStore,
-} from "../app/store.js";
-import { useBannerTimer } from "../app/timers.js";
-import { handleAppInput } from "../app/input.js";
-import { Banner } from "./components/Banner.js";
-import { Footer } from "./components/Footer.js";
-import { StatusLine } from "./components/StatusLine.js";
-import { GameDetailScreen } from "./screens/GameDetailScreen.js";
-import { LeadersScreen } from "./screens/LeadersScreen.js";
-import { ScoreboardScreen } from "./screens/ScoreboardScreen.js";
-import { StandingsScreen } from "./screens/StandingsScreen.js";
-
-type AppProps = {
-  client: NhlApi;
-};
-
-export function App({ client }: AppProps) {
-  const { exit } = useApp();
-  const [state, dispatch] = useAppStore();
-  const stateRef = useRef(state);
-
-  useEffect(() => {
-    stateRef.current = state;
-  }, [state]);
-
-  useAppPolling({
-    client,
-    dispatch,
-    stateRef,
-    scoreboardDate: state.scoreboardDate,
-    screenType: state.screen.type,
-    screenGameId: state.screen.type === "game" ? state.screen.gameId : undefined,
-    screenTab: state.screen.type === "game" ? state.screen.tab : undefined,
-    manualRefreshToken: state.manualRefreshToken,
-  });
-
-  useBannerTimer(state.activeBanner, () => {
-    dispatch({ type: "dismiss_banner" });
-  });
-
-  useInput((input, key) => {
-    handleAppInput(input, key, stateRef.current, dispatch, exit);
-  });
-
-  const screen = state.screen;
-  const gameScreen = screen.type === "game" ? screen : undefined;
-  const visibleGames = selectVisibleGames(state);
-  const selectedGame = selectSelectedGame(state);
-  const standings = selectCurrentStandings(state);
-  const standingsErrorMessage = state.standingsErrorByDate[state.scoreboardDate];
-  const leaders = selectCurrentLeaders(state);
-  const detail = gameScreen ? state.gameDetails[gameScreen.gameId] : undefined;
-  const detailErrorMessage = gameScreen
-    ? state.gameDetailErrors[gameScreen.gameId]
-    : undefined;
-  let detailGame =
-    detail?.game ??
-    (gameScreen
-      ? state.games.find((game) => game.id === gameScreen.gameId)
-      : undefined);
-  let pollDelayMs: number | undefined = getScoreboardPollDelayMs(
-    state.games,
-    state.scoreboardDate,
-  );
-  let statusUpdatedAt = state.scoreboardUpdatedAt;
-  let screenErrorMessage = state.scoreboardErrorMessage;
-
-  if (screen.type === "standings") {
-    pollDelayMs = undefined;
-    statusUpdatedAt = standings?.lastUpdatedAt;
-    screenErrorMessage = standingsErrorMessage;
-  }
-
-  if (screen.type === "leaders") {
-    pollDelayMs = undefined;
-    statusUpdatedAt = leaders?.lastUpdatedAt;
-    screenErrorMessage = state.leadersErrorMessage;
-  }
-
-  if (gameScreen) {
-    detailGame =
-      detail?.game ??
-      state.games.find((game) => game.id === gameScreen.gameId);
-    pollDelayMs = getDetailPollDelayMs(gameScreen.tab, detailGame);
-    statusUpdatedAt = detail?.lastUpdatedAt;
-    screenErrorMessage = detailErrorMessage;
-  }
-
-  return (
-    <Box flexDirection="column">
-      <Text bold color="cyanBright">
-        nhl-tui
-      </Text>
-      <Banner banner={state.activeBanner} />
-      <Box marginBottom={1}>
-        {screen.type === "scoreboard" ? (
-          <ScoreboardScreen
-            dateLabel={formatScoreboardDateLabel(state.scoreboardDate)}
-            games={visibleGames}
-            selectedGameId={state.selectedGameId}
-            loading={
-              state.scoreboardLoadedDate !== state.scoreboardDate &&
-              !state.scoreboardErrorMessage
-            }
-            errorMessage={state.scoreboardErrorMessage}
-          />
-        ) : screen.type === "standings" ? (
-          <StandingsScreen
-            dateLabel={formatScoreboardDateLabel(state.scoreboardDate)}
-            standings={standings}
-            loading={!standings && !standingsErrorMessage}
-            errorMessage={standingsErrorMessage}
-          />
-        ) : screen.type === "leaders" ? (
-          <LeadersScreen
-            leaders={leaders}
-            loading={!leaders && !state.leadersErrorMessage}
-            errorMessage={state.leadersErrorMessage}
-          />
-        ) : (
-          <GameDetailScreen
-            game={detailGame ?? selectedGame}
-            detail={detail}
-            tab={gameScreen?.tab ?? "summary"}
-          />
-        )}
-      </Box>
-      <StatusLine
-        updatedAt={statusUpdatedAt}
-        pollDelayMs={pollDelayMs}
-        errorMessage={screenErrorMessage}
-        hideAutoWhenDisabled={screen.type === "standings" || screen.type === "leaders"}
-      />
-      <Footer mode={screen.type} />
-    </Box>
-  );
-}

package/src/ui/components/Banner.tsx

@@ -1,23 +0,0 @@
-import { Box, Text } from "ink";
-import type { Banner as BannerState } from "../../domain/types.js";
-
-type BannerProps = {
-  banner?: BannerState;
-};
-
-export function Banner({ banner }: BannerProps) {
-  if (!banner) {
-    return null;
-  }
-
-  return (
-    <Box marginBottom={1}>
-      <Text backgroundColor="green" color="black" bold>
-        {" "}
-        {banner.title}
-        {banner.subtitle ? `  ${banner.subtitle}` : ""}
-        {" "}
-      </Text>
-    </Box>
-  );
-}

package/src/ui/components/Footer.tsx

@@ -1,17 +0,0 @@
-import { Text } from "ink";
-import type { AppScreen } from "../../domain/types.js";
-
-type FooterProps = {
-  mode: AppScreen["type"];
-};
-
-export function Footer({ mode }: FooterProps) {
-  const text =
-    mode === "game"
-      ? "<-/-> tabs  esc back  r refresh  q quit"
-      : mode === "standings" || mode === "leaders"
-        ? "esc back  q quit"
-        : "<-/-> day  ^/v move  enter open  s standings  l leaders  r refresh  esc/q quit";
-
-  return <Text dimColor>{text}</Text>;
-}

package/src/ui/components/GameList.tsx

@@ -1,45 +0,0 @@
-import { Box, Text } from "ink";
-import type { NormalizedGame } from "../../domain/types.js";
-import { GameRow } from "./GameRow.js";
-
-type GameListProps = {
-  games: NormalizedGame[];
-  selectedGameId?: number;
-};
-
-function groupGames(games: NormalizedGame[]) {
-  return {
-    LIVE: games.filter((game) => game.section === "LIVE"),
-    UPCOMING: games.filter((game) => game.section === "UPCOMING"),
-    FINAL: games.filter((game) => game.section === "FINAL"),
-  };
-}
-
-export function GameList({ games, selectedGameId }: GameListProps) {
-  const groups = groupGames(games);
-
-  return (
-    <Box flexDirection="column">
-      {(["LIVE", "UPCOMING", "FINAL"] as const).map((section) => {
-        const sectionGames = groups[section];
-
-        if (!sectionGames.length) {
-          return null;
-        }
-
-        return (
-          <Box key={section} flexDirection="column" marginBottom={1}>
-            <Text dimColor>{section}</Text>
-            {sectionGames.map((game) => (
-              <GameRow
-                key={game.id}
-                game={game}
-                selected={game.id === selectedGameId}
-              />
-            ))}
-          </Box>
-        );
-      })}
-    </Box>
-  );
-}

package/src/ui/components/GameRow.tsx

@@ -1,60 +0,0 @@
-import { Box, Text } from "ink";
-import type { NormalizedGame } from "../../domain/types.js";
-
-type GameRowProps = {
-  game: NormalizedGame;
-  selected: boolean;
-};
-
-function pad(value: string, width: number, align: "start" | "end" = "start") {
-  if (value.length >= width) {
-    return value.slice(0, width);
-  }
-
-  return align === "end" ? value.padStart(width) : value.padEnd(width);
-}
-
-function scoreValue(score: number, upcoming: boolean) {
-  return upcoming ? "-" : String(score);
-}
-
-function statusColor(game: NormalizedGame): string | undefined {
-  if (game.phase === "live") {
-    return "greenBright";
-  }
-
-  if (game.phase === "final") {
-    return "white";
-  }
-
-  return "gray";
-}
-
-export function GameRow({ game, selected }: GameRowProps) {
-  const rowColor = selected ? "cyanBright" : undefined;
-  const upcoming = game.phase === "upcoming";
-
-  return (
-    <Box>
-      <Text color={selected ? "cyanBright" : "gray"}>{selected ? "›" : " "}</Text>
-      <Text> </Text>
-      <Text color={rowColor} bold={selected}>
-        {pad(game.away.abbrev, 3)}
-      </Text>
-      <Text> </Text>
-      <Text color={rowColor}>{pad(scoreValue(game.away.score, upcoming), 2, "end")}</Text>
-      <Text> @ </Text>
-      <Text color={rowColor} bold={selected}>
-        {pad(game.home.abbrev, 3)}
-      </Text>
-      <Text> </Text>
-      <Text color={rowColor}>{pad(scoreValue(game.home.score, upcoming), 2, "end")}</Text>
-      <Text>  </Text>
-      <Text color={statusColor(game)} bold>
-        {pad(game.statusLabel, 8)}
-      </Text>
-      <Text> </Text>
-      <Text color={rowColor}>{game.contextLabel}</Text>
-    </Box>
-  );
-}

package/src/ui/components/StatusLine.tsx

@@ -1,83 +0,0 @@
-import { Box, Text } from "ink";
-import { useEffect, useState } from "react";
-
-type StatusLineProps = {
-  updatedAt?: number;
-  pollDelayMs?: number;
-  errorMessage?: string;
-  hideAutoWhenDisabled?: boolean;
-};
-
-const MIN_STALE_MS = 10_000;
-const STALE_MULTIPLIER = 2;
-
-export function StatusLine({
-  updatedAt,
-  pollDelayMs,
-  errorMessage,
-  hideAutoWhenDisabled = false,
-}: StatusLineProps) {
-  const [now, setNow] = useState(() => Date.now());
-  const staleAfterMs =
-    pollDelayMs === undefined
-      ? undefined
-      : Math.max(MIN_STALE_MS, pollDelayMs * STALE_MULTIPLIER);
-
-  useEffect(() => {
-    setNow(Date.now());
-
-    if (!updatedAt || staleAfterMs === undefined) {
-      return undefined;
-    }
-
-    let timeout: NodeJS.Timeout | undefined;
-    let interval: NodeJS.Timeout | undefined;
-
-    const startStaleTicker = () => {
-      setNow(Date.now());
-      interval = setInterval(() => {
-        setNow(Date.now());
-      }, 1000);
-    };
-
-    const ageMs = Date.now() - updatedAt;
-    if (ageMs >= staleAfterMs) {
-      startStaleTicker();
-    } else {
-      timeout = setTimeout(startStaleTicker, staleAfterMs - ageMs);
-    }
-
-    return () => {
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-
-      if (interval) {
-        clearInterval(interval);
-      }
-    };
-  }, [updatedAt, staleAfterMs]);
-
-  const ageMs = updatedAt ? now - updatedAt : 0;
-  const isStale =
-    Boolean(updatedAt) && staleAfterMs !== undefined && ageMs >= staleAfterMs;
-  const showAuto = !(hideAutoWhenDisabled && pollDelayMs === undefined);
-
-  if (!showAuto && !errorMessage) {
-    return null;
-  }
-
-  return (
-    <Box>
-      {showAuto && (
-        <Text dimColor>
-          {pollDelayMs === undefined
-            ? "auto off"
-            : `auto ${Math.round(pollDelayMs / 1000)}s`}
-        </Text>
-      )}
-      {isStale && <Text color="yellow">{`  |  stale ${Math.floor(ageMs / 1000)}s`}</Text>}
-      {errorMessage && <Text color="redBright">{`  |  error ${errorMessage}`}</Text>}
-    </Box>
-  );
-}

package/src/ui/screens/GameDetailScreen.tsx

@@ -1,199 +0,0 @@
-import { Box, Text } from "ink";
-import type {
-  BoxScore,
-  DetailTab,
-  GameSummary,
-  NormalizedGame,
-  NormalizedGameDetail,
-  PlayByPlay,
-  TeamBoxScore,
-} from "../../domain/types.js";
-
-type GameDetailScreenProps = {
-  game?: NormalizedGame;
-  detail?: NormalizedGameDetail;
-  tab: DetailTab;
-};
-
-function truncate(value: string, width: number): string {
-  if (value.length <= width) {
-    return value.padEnd(width);
-  }
-
-  return `${value.slice(0, Math.max(0, width - 1))}…`;
-}
-
-function renderSummary(summary: GameSummary | undefined) {
-  if (!summary) {
-    return <Text dimColor>Loading summary...</Text>;
-  }
-
-  return (
-    <Box flexDirection="column">
-      <Text bold>Scoring</Text>
-      {summary.scoring.length ? (
-        summary.scoring.map((period) => (
-          <Box key={`scoring-${period.periodLabel}`} flexDirection="column">
-            <Text dimColor>{period.periodLabel || "Game"}</Text>
-            {period.goals.length ? (
-              period.goals.map((goal) => (
-                <Text key={goal.eventId}>
-                  {goal.timeInPeriod.padStart(5)}  {goal.team.padEnd(3)}  {truncate(goal.scorer, 18)}{" "}
-                  {goal.strength.padEnd(3)}  {goal.scoreAfter.padEnd(5)}
-                  {goal.assists.length ? `  A: ${goal.assists.join(", ")}` : ""}
-                </Text>
-              ))
-            ) : (
-              <Text dimColor>No goals</Text>
-            )}
-          </Box>
-        ))
-      ) : (
-        <Text dimColor>No scoring data yet.</Text>
-      )}
-      <Box marginTop={1} flexDirection="column">
-        <Text bold>Penalties</Text>
-        {summary.penalties.length ? (
-          summary.penalties.map((period) => (
-            <Box key={`penalties-${period.periodLabel}`} flexDirection="column">
-              <Text dimColor>{period.periodLabel || "Game"}</Text>
-              {period.penalties.length ? (
-                period.penalties.map((penalty, index) => (
-                  <Text key={`${penalty.player}-${index}`}>
-                    {penalty.timeInPeriod.padStart(5)}  {penalty.team.padEnd(3)}  {truncate(
-                      penalty.player,
-                      22,
-                    )}  {truncate(penalty.kind, 18)}  {`${penalty.duration}m`.padStart(3)}
-                  </Text>
-                ))
-              ) : (
-                <Text dimColor>No penalties</Text>
-              )}
-            </Box>
-          ))
-        ) : (
-          <Text dimColor>No penalty summary available.</Text>
-        )}
-      </Box>
-      <Box marginTop={1} flexDirection="column">
-        <Text bold>Three Stars</Text>
-        {summary.threeStars.length ? (
-          summary.threeStars.map((star) => (
-            <Text key={`${star.star}-${star.player}`}>
-              {String(star.star).padStart(2)}  {star.team.padEnd(3)}  {truncate(star.player, 20)}{" "}
-              {star.position.padEnd(2)}  {star.statLine}
-            </Text>
-          ))
-        ) : (
-          <Text dimColor>Three stars not posted yet.</Text>
-        )}
-      </Box>
-    </Box>
-  );
-}
-
-function renderPlayByPlay(pbp: PlayByPlay | undefined) {
-  if (!pbp) {
-    return <Text dimColor>Loading play-by-play...</Text>;
-  }
-
-  const plays = pbp.plays.slice(-20).reverse();
-
-  return (
-    <Box flexDirection="column">
-      <Text bold>Latest Plays</Text>
-      {plays.length ? (
-        plays.map((play) => (
-          <Text key={play.id}>
-            {play.periodLabel.padEnd(4)} {play.timeInPeriod.padStart(5)}  {(play.team ?? "---").padEnd(3)}{" "}
-            {truncate(play.title, 12)}  {truncate(play.detail ?? "", 32)}
-            {play.score ? `  ${play.score}` : ""}
-          </Text>
-        ))
-      ) : (
-        <Text dimColor>No plays yet.</Text>
-      )}
-    </Box>
-  );
-}
-
-function renderTeamBox(team: TeamBoxScore) {
-  return (
-    <Box flexDirection="column" flexGrow={1} paddingRight={1}>
-      <Text bold>
-        {team.team.abbrev}  {team.team.score}
-      </Text>
-      <Text dimColor>#  Player           P  G A P +/- S H TOI</Text>
-      {team.skaters.slice(0, 10).map((player) => (
-        <Text key={player.playerId}>
-          {String(player.sweaterNumber ?? "").padStart(2)}  {truncate(player.name, 15)} {player.position.padEnd(2)}{" "}
-          {String(player.goals).padStart(1)} {String(player.assists).padStart(1)}{" "}
-          {String(player.points).padStart(1)} {String(player.plusMinus ?? 0).padStart(3)}{" "}
-          {String(player.shots).padStart(1)} {String(player.hits).padStart(1)} {player.toi}
-        </Text>
-      ))}
-      <Box marginTop={1} flexDirection="column">
-        <Text dimColor>Goalies</Text>
-        {team.goalies.length ? (
-          team.goalies.map((goalie) => (
-            <Text key={goalie.playerId}>
-              {String(goalie.sweaterNumber ?? "").padStart(2)}  {truncate(goalie.name, 15)}  SV{" "}
-              {String(goalie.saves).padStart(2)}/{String(goalie.shotsAgainst).padEnd(2)}  SV%{" "}
-              {goalie.savePct.toFixed(3)}  TOI {goalie.toi}
-            </Text>
-          ))
-        ) : (
-          <Text dimColor>No goalie stats.</Text>
-        )}
-      </Box>
-    </Box>
-  );
-}
-
-function renderBoxScore(box: BoxScore | undefined) {
-  if (!box) {
-    return <Text dimColor>Loading box score...</Text>;
-  }
-
-  return (
-    <Box flexDirection="row">
-      {renderTeamBox(box.away)}
-      {renderTeamBox(box.home)}
-    </Box>
-  );
-}
-
-export function GameDetailScreen({
-  game,
-  detail,
-  tab,
-}: GameDetailScreenProps) {
-  const snapshot = detail?.game ?? game;
-
-  if (!snapshot) {
-    return <Text dimColor>Loading game...</Text>;
-  }
-
-  return (
-    <Box flexDirection="column">
-      <Text bold>
-        {snapshot.away.abbrev} {snapshot.away.score} @ {snapshot.home.abbrev} {snapshot.home.score}
-      </Text>
-      <Text dimColor>
-        {snapshot.statusLabel}  |  {snapshot.contextLabel}  |  {snapshot.venue || "NHL arena"}
-      </Text>
-      <Box marginTop={1} marginBottom={1}>
-        <Text color={tab === "summary" ? "cyanBright" : undefined}>
-          [1] Summary
-        </Text>
-        <Text>  </Text>
-        <Text color={tab === "pbp" ? "cyanBright" : undefined}>[2] Play-by-play</Text>
-        <Text>  </Text>
-        <Text color={tab === "box" ? "cyanBright" : undefined}>[3] Box score</Text>
-      </Box>
-      {tab === "summary" && renderSummary(detail?.summary)}
-      {tab === "pbp" && renderPlayByPlay(detail?.pbp)}
-      {tab === "box" && renderBoxScore(detail?.box)}
-    </Box>
-  );
-}

package/src/ui/screens/LeadersScreen.tsx

@@ -1,92 +0,0 @@
-import { Box, Text, useStdout } from "ink";
-import type { LeaderEntry, LeaderTable, NormalizedLeaders } from "../../domain/types.js";
-
-type LeadersScreenProps = {
-  leaders?: NormalizedLeaders;
-  loading: boolean;
-  errorMessage?: string;
-};
-
-const GRID_MIN_WIDTH = 120;
-
-function ordinal(value: number): string {
-  const mod100 = value % 100;
-
-  if (mod100 >= 11 && mod100 <= 13) {
-    return `${value}th`;
-  }
-
-  switch (value % 10) {
-    case 1:
-      return `${value}st`;
-    case 2:
-      return `${value}nd`;
-    case 3:
-      return `${value}rd`;
-    default:
-      return `${value}th`;
-  }
-}
-
-function truncate(value: string, width: number): string {
-  if (value.length <= width) {
-    return value.padEnd(width);
-  }
-
-  return `${value.slice(0, Math.max(0, width - 1))}…`;
-}
-
-function renderLeaderRow(entry: LeaderEntry) {
-  return (
-    <Text key={`${entry.playerId}-${entry.rank}`}>
-      {ordinal(entry.rank).padStart(4)}  {entry.teamAbbrev.padEnd(3)}  {truncate(entry.player, 18)}  {entry.displayValue.padStart(5)}
-    </Text>
-  );
-}
-
-function renderTable(table: LeaderTable) {
-  return (
-    <Box key={table.key} flexDirection="column" flexGrow={1} paddingRight={2} marginBottom={1}>
-      <Text bold>{table.title}</Text>
-      <Text dimColor>{` RK   TM  PLAYER              ${table.valueLabel}`}</Text>
-      {table.entries.length ? (
-        table.entries.map(renderLeaderRow)
-      ) : (
-        <Text dimColor>No data</Text>
-      )}
-    </Box>
-  );
-}
-
-export function LeadersScreen({
-  leaders,
-  loading,
-  errorMessage,
-}: LeadersScreenProps) {
-  const { stdout } = useStdout();
-  const shouldUseGrid = (stdout.columns ?? 0) >= GRID_MIN_WIDTH;
-
-  return (
-    <Box flexDirection="column">
-      <Box marginBottom={1}>
-        <Text dimColor>Leaders</Text>
-      </Box>
-      {loading ? (
-        <Text dimColor>Loading leaders...</Text>
-      ) : leaders ? (
-        <Box flexDirection="column">
-          <Box flexDirection={shouldUseGrid ? "row" : "column"} marginBottom={1}>
-            {leaders.skaterTables.map(renderTable)}
-          </Box>
-          <Box flexDirection={shouldUseGrid ? "row" : "column"}>
-            {leaders.goalieTables.map(renderTable)}
-          </Box>
-        </Box>
-      ) : errorMessage ? (
-        <Text color="redBright">Unable to load leaders: {errorMessage}</Text>
-      ) : (
-        <Text dimColor>No leader data available.</Text>
-      )}
-    </Box>
-  );
-}