playball 3.2.0 → 3.3.0

package/README.md

@@ -25,18 +25,27 @@ $ playball
 ```
 
 ### Docker
-```
-$ docker build -t playball .
-$ docker run -it --rm --name playball playball:latest
-```
-
-#### Build options
-
-Update the language encoding of by adding `--build-args`
-
-```
-$ docker build --build-arg LANG=en_US.UTF-8 -t playball .
-```
+Don't have Node.js installed? You can run via Docker instead.
+```
+$ docker run -it --rm paaatrick0/playball
+```
+
+> [!TIP]
+> When running via Docker, times will be shown by default in Eastern Time. To change this, set the `TZ` environment variable to your desired timezone. 
+> 
+> For Central Time use:
+> ```
+> $ docker run -it --rm -e TZ=America/Chicago paaatrick0/playball
+> ```
+> For Mountain Time use:
+> ```
+> $ docker run -it --rm -e TZ=America/Denver paaatrick0/playball
+> ```
+> For Pacific Time use:
+> ```
+> $ docker run -it --rm -e TZ=America/Los_Angeles paaatrick0/playball
+> ```
+> For other timezones see the list of [TZ database time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
 
 ### Keys
 #### Global
@@ -122,6 +131,7 @@ key | description | default | allowed values
 `color.walk` | Color of result where play ends on a ball (walk, hit by pitch) in list of plays in game view | green | _See above_
 `favorites` | Teams to highlight in schedule and standings views | | Any one of the following: `ATL`, `AZ`, `BAL`, `BOS`, `CHC`, `CIN`, `CLE`, `COL`, `CWS`, `DET`, `HOU`, `KC`, `LAA`, `LAD`, `MIA`, `MIL`, `MIN`, `NYM`, `NYY`, `OAK`, `PHI`, `PIT`, `SD`, `SEA`, `SF`, `STL`, `TB`, `TEX`, `TOR`, `WSH`. Or a comma-separated list of multiple (e.g. `SEA,MIL`).<br/><br />Note: in some terminals the list must be quoted: `playball config favorites "SEA,MIL"`
 `title` | If enabled, the terminal title will be set to the score of the current game | `false` | `false`, `true`
+`live-delay` | Number of seconds to delay the live game stream. Useful when watching with delayed broadcast streams. | `0` (no delay) | Any positive number
 
 ### Development
 ```

package/dist/cli.js

@@ -10,7 +10,7 @@ const notifier = updateNotifier({
   updateCheckInterval: 1000 * 60 * 60 * 24 * 7 // 1 week
 });
 
-program.name(pkg.name).description(pkg.description).version(pkg.version).action(main).hook('postAction', () => notifier.notify({
+program.name(pkg.name).description(pkg.description).version(pkg.version).option('--replay <gameId>', 'Replay a game by game ID').action(main).hook('postAction', () => notifier.notify({
   isGlobal: true
 }));
 program.command('config').description('Set or get configration values').argument('[key]').argument('[value]').option('--unset', 'Unset configuration value').action((key, value, options) => {

package/dist/components/AllPlays.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useSelector } from "react-redux/lib/alternate-renderers.js";
+import PropTypes from 'prop-types';
 import { selectAllPlays, selectTeams } from "../features/games.js";
 import { get } from "../config.js";
 import style from "../style/index.js";
@@ -19,28 +20,46 @@ function getPlayResultColor(play) {
   }
 }
 function formatOut(out) {
-  return ` {bold}${out} out{/}`;
+  return ` {bold}${out} out${out > 1 ? 's' : ''}{/}`;
 }
-function AllPlays() {
+function AllPlays({
+  reverse,
+  scoringOnly
+}) {
   const plays = useSelector(selectAllPlays);
   const teams = useSelector(selectTeams);
   const formatScoreDetail = scoreObj => ` {bold}{${get('color.in-play-runs-bg')}-bg}{${get('color.in-play-runs-fg')}-fg} ` + `${teams.away.abbreviation} ${scoreObj.awayScore} - ` + `${teams.home.abbreviation} ${scoreObj.homeScore}` + ' {/}';
-  let inning = '';
-  const lines = [];
-  plays && plays.slice().reverse().forEach((play, playIdx, plays) => {
-    let lastPlay;
-    if (playIdx < plays.length - 1) {
-      lastPlay = plays[playIdx + 1];
-    }
+  const playsByInning = {};
+  plays === null || plays === void 0 ? void 0 : plays.forEach(play => {
+    var _play$playEvents2;
     const playInning = play.about.halfInning + ' ' + play.about.inning;
-    if (playInning !== inning) {
-      inning = playInning;
-      if (lines.length > 0) {
-        lines.push('');
+    (_play$playEvents2 = play.playEvents) === null || _play$playEvents2 === void 0 ? void 0 : _play$playEvents2.forEach(event => {
+      if (event.type === 'action') {
+        if (scoringOnly && !event.details.isScoringPlay) {
+          return;
+        }
+        if (event.details.eventType === 'batter_timeout' || event.details.eventType === 'mound_visit') {
+          return;
+        }
+        let line = '';
+        if (event.details.event) {
+          line += `{${get('color.other-event')}-fg}[${event.details.event}]{/} `;
+        }
+        line += event.details.description;
+        if (event.details.isOut) {
+          var _event$count;
+          line += formatOut((_event$count = event.count) === null || _event$count === void 0 ? void 0 : _event$count.outs);
+        }
+        if (event.isScoringPlay || event.details.isScoringPlay) {
+          line += formatScoreDetail(event.details);
+        }
+        if (!(playInning in playsByInning)) {
+          playsByInning[playInning] = [];
+        }
+        playsByInning[playInning].push(line);
       }
-      lines.push(`{bold}[${inning.toUpperCase()}]{/}`);
-    }
-    if (play.about.isComplete) {
+    });
+    if (play.about.isComplete && (!scoringOnly || play.about.isScoringPlay)) {
       const color = getPlayResultColor(play);
       let line = `{${color}-fg}[${play.result.event}]{/} ${play.result.description}`;
       if (play.about.hasOut) {
@@ -52,32 +71,35 @@ function AllPlays() {
       if (play.about.isScoringPlay) {
         line += formatScoreDetail(play.result);
       }
-      lines.push(line);
-    }
-    play.playEvents && play.playEvents.slice().reverse().forEach((event, eventIdx, events) => {
-      if (event.type === 'action') {
-        var _event$count;
-        let line = '';
-        if (event.details.event) {
-          line += `{${get('color.other-event')}-fg}[${event.details.event}]{/} `;
-        }
-        line += event.details.description;
-        if (event.isScoringPlay || event.details.isScoringPlay) {
-          line += formatScoreDetail(event.details);
-        }
-        const currentOut = (_event$count = event.count) === null || _event$count === void 0 ? void 0 : _event$count.outs;
-        let prevOut = lastPlay ? lastPlay.count.outs : 0;
-        if (eventIdx < events.length - 1) {
-          var _events$count;
-          prevOut = (_events$count = events[eventIdx + 1].count) === null || _events$count === void 0 ? void 0 : _events$count.outs;
-        }
-        if (currentOut > prevOut) {
-          line += formatOut(currentOut);
-        }
-        lines.push(line);
+      if (!(playInning in playsByInning)) {
+        playsByInning[playInning] = [];
       }
-    });
+      playsByInning[playInning].push(line);
+    }
   });
+  const lines = [];
+  const inningKeys = Object.keys(playsByInning);
+  if (reverse) {
+    inningKeys.reverse();
+  }
+  inningKeys.forEach(inning => {
+    if (lines.length > 0) {
+      lines.push('');
+    }
+    lines.push(`{bold}[${inning.toUpperCase()}]{/}`);
+    if (reverse) {
+      lines.push(...playsByInning[inning].slice().reverse());
+    } else {
+      lines.push(...playsByInning[inning]);
+    }
+  });
+  if (lines.length === 0) {
+    if (scoringOnly) {
+      lines.push('No scoring plays yet');
+    } else {
+      lines.push('No plays yet');
+    }
+  }
   return /*#__PURE__*/React.createElement("box", {
     content: lines.join('\n'),
     focused: true,
@@ -90,4 +112,8 @@ function AllPlays() {
     tags: true
   });
 }
+AllPlays.propTypes = {
+  reverse: PropTypes.bool,
+  scoringOnly: PropTypes.bool
+};
 export default AllPlays;

package/dist/components/App.js

@@ -1,20 +1,23 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch } from "react-redux/lib/alternate-renderers.js";
+import PropTypes from 'prop-types';
 import GameList from "./GameList.js";
 import HelpBar from "./HelpBar.js";
-import { setSelectedId } from "../features/games.js";
+import { setReplayGame, setLiveGame } from "../features/games.js";
 import Game from "./Game.js";
 import useKey from "../hooks/useKey.js";
 import Standings from "./Standings.js";
 const SCHEDULE = 'schedule';
 const STANDINGS = 'standings';
 const GAME = 'game';
-function App() {
+function App({
+  replayId
+}) {
   const [view, setView] = useState(SCHEDULE);
   const dispatch = useDispatch();
   useKey('c', () => {
     setView(SCHEDULE);
-    dispatch(setSelectedId(null));
+    dispatch(setLiveGame(null));
   }, {
     key: 'C',
     label: 'Schedule'
@@ -24,9 +27,14 @@ function App() {
     label: 'Standings'
   });
   const handleGameSelect = game => {
-    dispatch(setSelectedId(game.gamePk));
+    dispatch(setLiveGame(game.gamePk));
     setView(GAME);
   };
+  useEffect(() => {
+    if (replayId) {
+      dispatch(setReplayGame(replayId)).unwrap().then(() => setView(GAME)).catch(() => setView(SCHEDULE));
+    }
+  }, [replayId]);
   return /*#__PURE__*/React.createElement("element", null, /*#__PURE__*/React.createElement("element", {
     top: 0,
     left: 0,
@@ -39,4 +47,7 @@ function App() {
     height: 1
   }, /*#__PURE__*/React.createElement(HelpBar, null)));
 }
+App.propTypes = {
+  replayId: PropTypes.string
+};
 export default App;

package/dist/components/BoxScore.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { useSelector } from "react-redux/lib/alternate-renderers.js";
+import { selectBoxscore, selectPlayers } from "../features/games.js";
+import Table from "./Table.js";
+function getBatterRows(boxscoreTeam, players) {
+  const batters = Object.values(boxscoreTeam.players).filter(player => player.battingOrder !== undefined).sort((a, b) => parseInt(a.battingOrder) - parseInt(b.battingOrder));
+  const batterNames = batters.map(batter => {
+    var _batter$allPositions, _batter$gameStatus;
+    const name = players[`ID${batter.person.id}`].boxscoreName;
+    const positions = (_batter$allPositions = batter.allPositions) === null || _batter$allPositions === void 0 ? void 0 : _batter$allPositions.map(pos => pos.abbreviation).join('-');
+    const prefix = (_batter$gameStatus = batter.gameStatus) !== null && _batter$gameStatus !== void 0 && _batter$gameStatus.isSubstitute ? ' ' : '';
+    return `${prefix}${name} (${positions})`;
+  });
+  return [...batters.map((batter, idx) => [batterNames[idx], batter.stats.batting.atBats.toString(), batter.stats.batting.runs.toString(), batter.stats.batting.hits.toString(), batter.stats.batting.rbi.toString(), batter.stats.batting.baseOnBalls.toString(), batter.stats.batting.strikeOuts.toString(), batter.seasonStats.batting.avg, batter.seasonStats.batting.ops]), ['Totals', boxscoreTeam.teamStats.batting.atBats.toString(), boxscoreTeam.teamStats.batting.runs.toString(), boxscoreTeam.teamStats.batting.hits.toString(), boxscoreTeam.teamStats.batting.rbi.toString(), boxscoreTeam.teamStats.batting.baseOnBalls.toString(), boxscoreTeam.teamStats.batting.strikeOuts.toString(), '', '']];
+}
+function getPitcherRows(boxscoreTeam, players) {
+  const pitchers = boxscoreTeam.pitchers.map(pitcherId => boxscoreTeam.players['ID' + pitcherId]);
+  const pitcherNames = pitchers.map(pitcher => {
+    const name = players[`ID${pitcher.person.id}`].boxscoreName;
+    const note = pitcher.stats.pitching.note ? ` ${pitcher.stats.pitching.note}` : '';
+    return `${name}${note}`;
+  });
+  return [...pitchers.map((pitcher, idx) => [pitcherNames[idx], pitcher.stats.pitching.inningsPitched, pitcher.stats.pitching.hits.toString(), pitcher.stats.pitching.runs.toString(), pitcher.stats.pitching.earnedRuns.toString(), pitcher.stats.pitching.baseOnBalls.toString(), pitcher.stats.pitching.strikeOuts.toString(), pitcher.stats.pitching.homeRuns.toString(), pitcher.seasonStats.pitching.era]), ['Totals', boxscoreTeam.teamStats.pitching.inningsPitched, boxscoreTeam.teamStats.pitching.hits.toString(), boxscoreTeam.teamStats.pitching.runs.toString(), boxscoreTeam.teamStats.pitching.earnedRuns.toString(), boxscoreTeam.teamStats.pitching.baseOnBalls.toString(), boxscoreTeam.teamStats.pitching.strikeOuts.toString(), boxscoreTeam.teamStats.pitching.homeRuns.toString(), '']];
+}
+function BoxScore({
+  ...props
+}) {
+  const boxscore = useSelector(selectBoxscore);
+  const players = useSelector(selectPlayers);
+  const batterHeader = ['Batters', 'AB', 'R', 'H', 'RBI', 'BB', 'K', 'AVG', 'OPS'];
+  const batterWidths = ['auto', 4, 4, 4, 4, 4, 4, 6, 6];
+  const awayBatterRows = getBatterRows(boxscore.away, players);
+  const homeBatterRows = getBatterRows(boxscore.home, players);
+  const pitcherHeader = ['Pitchers', 'IP', 'H', 'R', 'ER', 'BB', 'K', 'HR', 'ERA'];
+  const pitcherWidths = ['auto', 5, 4, 4, 4, 4, 4, 4, 6];
+  const pitcherStart = Math.max(awayBatterRows.length, homeBatterRows.length) + 2;
+  const awayPitcherRows = getPitcherRows(boxscore.away, players);
+  const homePitcherRows = getPitcherRows(boxscore.home, players);
+  return /*#__PURE__*/React.createElement("element", props, /*#__PURE__*/React.createElement(Table, {
+    top: 0,
+    left: 0,
+    width: "50%-1",
+    headers: batterHeader,
+    widths: batterWidths,
+    rows: awayBatterRows
+  }), /*#__PURE__*/React.createElement(Table, {
+    top: 0,
+    left: "50%+1",
+    width: "50%-1",
+    headers: batterHeader,
+    widths: batterWidths,
+    rows: homeBatterRows
+  }), /*#__PURE__*/React.createElement(Table, {
+    top: pitcherStart,
+    left: 0,
+    width: "50%-1",
+    headers: pitcherHeader,
+    widths: pitcherWidths,
+    rows: awayPitcherRows
+  }), /*#__PURE__*/React.createElement(Table, {
+    top: pitcherStart,
+    left: "50%+1",
+    width: "50%-1",
+    headers: pitcherHeader,
+    widths: pitcherWidths,
+    rows: homePitcherRows
+  }));
+}
+export default BoxScore;

package/dist/components/FinishedGame.js

@@ -1,9 +1,16 @@
-import React, { useEffect } from 'react';
-import { useSelector } from "react-redux/lib/alternate-renderers.js";
+import React, { useEffect, useMemo } from 'react';
+import { useDispatch, useSelector } from "react-redux/lib/alternate-renderers.js";
+import figlet from 'figlet';
 import LineScore from "./LineScore.js";
 import { get } from "../config.js";
-import { selectLineScore, selectTeams, selectDecisions, selectBoxscore, selectGameStatus } from "../features/games.js";
+import { selectBoxscore, selectDecisions, selectGameStatus, selectLineScore, selectSelectedId, selectTeams, setReplayGame } from "../features/games.js";
 import { resetTitle, setTitle } from "../screen.js";
+import useKey from "../hooks/useKey.js";
+import BoxScore from "./BoxScore.js";
+import AllPlays from "./AllPlays.js";
+const BOX_SCORE = 'BOX_SCORE';
+const ALL_PLAYS = 'ALL_PLAYS';
+const SCORING_PLAYS = 'SCORING_PLAYS';
 const getPlayer = (id, boxscore) => {
   var _boxscore$home, _boxscore$away;
   const homePlayer = (_boxscore$home = boxscore.home) === null || _boxscore$home === void 0 || (_boxscore$home = _boxscore$home.players) === null || _boxscore$home === void 0 ? void 0 : _boxscore$home['ID' + id];
@@ -37,24 +44,31 @@ const formatDecisions = (decisions, boxscore) => {
   }
   return content.join('\n');
 };
-const formatScore = (status, linescore) => {
-  let display = '';
-  if (status.detailedState === 'Postponed') {
-    display = status.detailedState;
-    if (status.reason) {
-      display += '\n' + status.reason;
-    }
-  } else {
-    display = `\n${linescore.teams.away.runs} - ${linescore.teams.home.runs}`;
-  }
-  return display;
-};
 function FinishedGame() {
+  const dispatch = useDispatch();
+  const id = useSelector(selectSelectedId);
   const boxscore = useSelector(selectBoxscore);
   const decisions = useSelector(selectDecisions);
   const linescore = useSelector(selectLineScore);
   const status = useSelector(selectGameStatus);
   const teams = useSelector(selectTeams);
+  const [view, setView] = React.useState(BOX_SCORE);
+  useKey('r', () => dispatch(setReplayGame(id)), {
+    key: 'R',
+    label: 'Replay'
+  });
+  useKey('b', () => setView(BOX_SCORE), {
+    key: 'B',
+    label: 'Box Score'
+  });
+  useKey('a', () => setView(ALL_PLAYS), {
+    key: 'A',
+    label: 'All Plays'
+  });
+  useKey('p', () => setView(SCORING_PLAYS), {
+    key: 'P',
+    label: 'Scoring Plays'
+  });
   useEffect(() => {
     if (get('title')) {
       const homeRuns = linescore.teams['home'].runs;
@@ -67,38 +81,61 @@ function FinishedGame() {
       };
     }
   }, [get, linescore, resetTitle, setTitle, teams]);
+  const bigTextOptions = {
+    font: 'Small Block'
+  };
   const awayTeam = `${teams.away.teamName}\n(${teams.away.record.wins}-${teams.away.record.losses})`;
+  const awayRuns = useMemo(() => figlet.textSync(linescore.teams.away.runs, bigTextOptions), [linescore.teams.away.runs]);
   const homeTeam = `${teams.home.teamName}\n(${teams.home.record.wins}-${teams.home.record.losses})`;
-  return /*#__PURE__*/React.createElement("element", null, /*#__PURE__*/React.createElement("element", {
-    height: "60%"
+  const homeRuns = useMemo(() => figlet.textSync(linescore.teams.home.runs, bigTextOptions), [linescore.teams.home.runs]);
+  return /*#__PURE__*/React.createElement("element", null, status.detailedState === 'Postponed' ? /*#__PURE__*/React.createElement("element", null, /*#__PURE__*/React.createElement("box", {
+    top: 1
+  }, "status.detailedState"), /*#__PURE__*/React.createElement("box", {
+    top: 2
+  }, status.reason)) : /*#__PURE__*/React.createElement("element", {
+    top: 1
   }, /*#__PURE__*/React.createElement("box", {
+    top: 1,
+    left: 0,
+    width: "25%",
     content: awayTeam,
-    width: "33%-1",
-    top: "50%",
+    align: "right"
+  }), /*#__PURE__*/React.createElement("box", {
+    top: 0,
+    left: "25%",
+    width: "25%",
+    content: awayRuns,
     align: "center"
   }), /*#__PURE__*/React.createElement("box", {
-    content: formatScore(status, linescore),
-    width: "33%-1",
-    left: "33%",
-    top: "50%",
+    top: 0,
+    left: "50%",
+    width: "25%",
+    content: homeRuns,
     align: "center"
   }), /*#__PURE__*/React.createElement("box", {
+    top: 1,
+    left: "75%",
+    width: "25%",
     content: homeTeam,
-    width: "34%",
-    top: "50%",
-    left: "66%",
-    align: "center"
-  })), /*#__PURE__*/React.createElement("element", {
-    top: "60%+1",
-    height: 3
+    align: "left"
+  }), /*#__PURE__*/React.createElement("element", {
+    top: 5,
+    left: 0,
+    width: "50%-2"
   }, /*#__PURE__*/React.createElement(LineScore, {
-    align: "center",
+    align: "right",
     final: true
   })), /*#__PURE__*/React.createElement("element", {
-    top: "60%+5",
-    left: "50%-20"
+    top: 5,
+    left: "50%+2",
+    width: "50%-2",
+    align: "right"
   }, /*#__PURE__*/React.createElement("box", {
     content: formatDecisions(decisions, boxscore)
-  })));
+  })), /*#__PURE__*/React.createElement("element", {
+    top: 9
+  }, view === BOX_SCORE && /*#__PURE__*/React.createElement(BoxScore, null), view === ALL_PLAYS && /*#__PURE__*/React.createElement(AllPlays, null), view === SCORING_PLAYS && /*#__PURE__*/React.createElement(AllPlays, {
+    scoringOnly: true
+  }))));
 }
 export default FinishedGame;

package/dist/components/Game.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from "react-redux/lib/alternate-renderers.js";
-import { fetchGame, selectGame, selectSelectedId, selectFullUpdateRequired } from "../features/games.js";
+import { fetchGame, selectGame, selectSelectedId, selectFullUpdateRequired, selectDelay } from "../features/games.js";
 import PreviewGame from "./PreviewGame.js";
 import LiveGame from "./LiveGame.js";
 import FinishedGame from "./FinishedGame.js";
@@ -11,13 +11,15 @@ function Game() {
   const game = useSelector(selectGame);
   const fullUpdateRequired = useSelector(selectFullUpdateRequired);
   const id = useSelector(selectSelectedId);
+  const delay = useSelector(selectDelay);
   const timerRef = useRef(null);
   const timestampRef = useRef();
   timestampRef.current = fullUpdateRequired ? null : game === null || game === void 0 || (_game$metaData = game.metaData) === null || _game$metaData === void 0 ? void 0 : _game$metaData.timeStamp;
   const updateGameData = () => {
     dispatch(fetchGame({
       id,
-      start: timestampRef.current
+      start: timestampRef.current,
+      delay
     })).unwrap().then(result => {
       var _result$metaData;
       const wait = (result && ((_result$metaData = result.metaData) === null || _result$metaData === void 0 ? void 0 : _result$metaData.wait) || 10) * 1000;
@@ -29,7 +31,7 @@ function Game() {
     return () => {
       clearTimeout(timerRef.current);
     };
-  }, [id]);
+  }, [id, delay]);
   if (!game) {
     return /*#__PURE__*/React.createElement("element", null);
   }

package/dist/components/LiveGame.js

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { useSelector } from "react-redux/lib/alternate-renderers.js";
 import Count from "./Count.js";
 import Bases from "./Bases.js";
+import BoxScore from "./BoxScore.js";
 import LineScore from "./LineScore.js";
 import Matchup from "./Matchup.js";
 import AtBat from "./AtBat.js";
@@ -10,10 +11,27 @@ import InningDisplay from "./InningDisplay.js";
 import { get } from "../config.js";
 import { selectGameStatus, selectLineScore, selectTeams } from "../features/games.js";
 import { resetTitle, setTitle } from "../screen.js";
+import useKey from "../hooks/useKey.js";
+const GAME_STATUS = 'GAME_STATUS';
+const BOX_SCORE = 'BOX_SCORE';
+const SCORING_PLAYS = 'SCORING_PLAYS';
 function LiveGame() {
   const gameStatus = useSelector(selectGameStatus);
   const linescore = useSelector(selectLineScore);
   const teams = useSelector(selectTeams);
+  const [view, setView] = React.useState(GAME_STATUS);
+  useKey('g', () => setView(GAME_STATUS), {
+    key: 'G',
+    label: 'Game Status'
+  });
+  useKey('b', () => setView(BOX_SCORE), {
+    key: 'B',
+    label: 'Box Score'
+  });
+  useKey('p', () => setView(SCORING_PLAYS), {
+    key: 'P',
+    label: 'Scoring Plays'
+  });
   useEffect(() => {
     if (get('title')) {
       const homeRuns = linescore.teams['home'].runs;
@@ -62,7 +80,7 @@ function LiveGame() {
     type: "line",
     top: 3,
     width: "100%"
-  }), /*#__PURE__*/React.createElement("element", {
+  }), view === GAME_STATUS && /*#__PURE__*/React.createElement("element", {
     top: 4,
     left: 1
   }, /*#__PURE__*/React.createElement("element", {
@@ -79,6 +97,16 @@ function LiveGame() {
   }), /*#__PURE__*/React.createElement("element", {
     left: "50%+2",
     width: "50%-2"
-  }, /*#__PURE__*/React.createElement(AllPlays, null))));
+  }, /*#__PURE__*/React.createElement(AllPlays, {
+    reverse: true
+  }))), view === BOX_SCORE && /*#__PURE__*/React.createElement("element", {
+    top: 4,
+    left: 1
+  }, /*#__PURE__*/React.createElement(BoxScore, null)), view === SCORING_PLAYS && /*#__PURE__*/React.createElement("element", {
+    top: 4,
+    left: 1
+  }, /*#__PURE__*/React.createElement(AllPlays, {
+    scoringOnly: true
+  })));
 }
 export default LiveGame;

package/dist/components/PreviewGame.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useSelector } from "react-redux/lib/alternate-renderers.js";
-import { format } from 'date-fns';
+import { format, isSameDay } from 'date-fns';
 import { get } from "../config.js";
 import { selectTeams, selectVenue, selectStartTime, selectBoxscore, selectProbablePitchers, selectGameStatus } from "../features/games.js";
 import { resetTitle, setTitle } from "../screen.js";
@@ -42,10 +42,9 @@ function PreviewGame() {
 
       // Only show the date if it's not today.
       const startDate = new Date(startTime);
-      const today = format(new Date(), 'yyyy-DDD');
-      const gameDay = format(startDate, 'yyyy-DDD');
+      const today = new Date();
       let start = format(startDate, 'p');
-      if (today !== gameDay) {
+      if (!isSameDay(startDate, today)) {
         start = `${format(startDate, 'MMMM d, yyy')} ${start}`;
       }
       setTitle(`${away} - ${home} @ ${start}`);

package/dist/components/Table.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+function formatRow(row, widths) {
+  return row.map((cell, idx) => idx === 0 ? cell.padEnd(widths[idx]) : cell.padStart(widths[idx])).join('');
+}
+function Table({
+  headers,
+  widths,
+  rows,
+  ...rest
+}) {
+  const resolvedWidths = widths.map((width, idx) => {
+    if (width !== 'auto') {
+      return width;
+    }
+    return Math.max((headers[idx] || '').length, ...rows.map(row => (row[idx] || '').length));
+  });
+  const headerRow = formatRow(headers, resolvedWidths);
+  const contentRows = rows.map(row => formatRow(row, resolvedWidths));
+  return /*#__PURE__*/React.createElement("element", rest, /*#__PURE__*/React.createElement("box", {
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: 1,
+    fg: "black",
+    bg: "white",
+    wrap: false,
+    content: headerRow
+  }), /*#__PURE__*/React.createElement("box", {
+    top: 1,
+    left: 0,
+    width: "100%",
+    height: rows.length,
+    wrap: false,
+    content: contentRows.join('\n')
+  }));
+}
+Table.propTypes = {
+  headers: PropTypes.arrayOf(PropTypes.string),
+  widths: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])])),
+  rows: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
+  top: PropTypes.number
+};
+export default Table;

package/dist/config.js

@@ -79,6 +79,11 @@ const schema = {
   'title': {
     type: 'boolean',
     default: false
+  },
+  'live-delay': {
+    type: 'number',
+    default: 0,
+    minimum: 0
   }
 };
 const config = new Conf({
@@ -92,11 +97,13 @@ function serialize(value) {
   return value;
 }
 function deserialize(key, value) {
-  var _schema$key, _schema$key2;
+  var _schema$key, _schema$key2, _schema$key3;
   if (value && ((_schema$key = schema[key]) === null || _schema$key === void 0 ? void 0 : _schema$key.type) === 'array') {
     return value.split(/\s*,\s*/);
   } else if (((_schema$key2 = schema[key]) === null || _schema$key2 === void 0 ? void 0 : _schema$key2.type) === 'boolean') {
     return value === 'true';
+  } else if (((_schema$key3 = schema[key]) === null || _schema$key3 === void 0 ? void 0 : _schema$key3.type) === 'number') {
+    return parseInt(value);
   }
   return value;
 }

package/dist/features/games.js

@@ -6,19 +6,42 @@ const {
   createSelector
 } = reduxjsToolkit;
 import jsonpatch from 'json-patch';
+import { UTCDate } from '@date-fns/utc';
+import { addSeconds, differenceInSeconds, format } from 'date-fns';
+import logger from "../logger.js";
+import { get } from "../config.js";
 const initialState = {
   loading: false,
   fullUpdateRequired: false,
   error: null,
   selectedId: null,
+  delay: 0,
   games: {}
 };
+function makeDiffParams(start, end) {
+  const endParam = start ? '&endTimecode=' : '?timecode=';
+  const startParam = start ? `/diffPatch?startTimecode=${start}` : '';
+  if (end) {
+    return `${startParam}${endParam}${end}`;
+  } else {
+    return startParam;
+  }
+}
 export const fetchGame = createAsyncThunk('games/fetch', async ({
   id,
-  start
+  start,
+  delay
 }) => {
-  const diffParams = start ? `/diffPatch?startTimecode=${start}` : '';
+  const end = delay > 0 ? format(addSeconds(new UTCDate(Date.now()), -delay), 'yyyyMMdd_HHmmss') : null;
+  const diffParams = makeDiffParams(start, end);
   const url = `https://statsapi.mlb.com/api/v1.1/game/${id}/feed/live${diffParams}`;
+  logger.info(`GET ${url}`);
+  const response = await axios.get(url);
+  return response.data;
+});
+export const setReplayGame = createAsyncThunk('games/setReplay', async id => {
+  const url = `https://statsapi.mlb.com/api/v1.1/game/${id}/feed/live?fields=gamePk,gameData,datetime,gameInfo,dateTime,firstPitch`;
+  logger.info(`GET ${url}`);
   const response = await axios.get(url);
   return response.data;
 });
@@ -26,11 +49,28 @@ export const gamesSlice = createSlice({
   name: 'games',
   initialState,
   reducers: {
-    setSelectedId(state, action) {
+    setLiveGame(state, action) {
       state.selectedId = action.payload;
+      state.delay = get('live-delay') || 0;
     }
   },
   extraReducers: builder => {
+    builder.addCase(setReplayGame.pending, state => {
+      state.loading = true;
+    });
+    builder.addCase(setReplayGame.fulfilled, (state, action) => {
+      state.loading = false;
+      state.error = null;
+      state.selectedId = action.payload.gamePk;
+      state.fullUpdateRequired = true;
+      const start = action.payload.gameData.gameInfo.firstPitch || action.payload.gameData.datetime.dateTime;
+      state.delay = differenceInSeconds(new Date(), start);
+    });
+    builder.addCase(setReplayGame.rejected, (state, action) => {
+      state.loading = false;
+      state.fullUpdateRequired = true;
+      state.error = action.error;
+    });
     builder.addCase(fetchGame.pending, state => {
       state.loading = true;
     });
@@ -70,13 +110,14 @@ export const gamesSlice = createSlice({
   }
 });
 export const {
-  setSelectedId
+  setLiveGame
 } = gamesSlice.actions;
 const gamesRoot = state => state.games;
 export const selectLoading = createSelector(gamesRoot, root => root.loading);
 export const selectError = createSelector(gamesRoot, root => root.error);
 export const selectFullUpdateRequired = createSelector(gamesRoot, root => root.fullUpdateRequired);
 export const selectSelectedId = createSelector(gamesRoot, root => root.selectedId);
+export const selectDelay = createSelector(gamesRoot, root => root.delay);
 export const selectGame = createSelector([gamesRoot, selectSelectedId], (root, id) => root.games[id]);
 const selectLiveData = createSelector(selectGame, game => game.liveData);
 const selectPlays = createSelector(selectLiveData, data => data.plays);
@@ -90,6 +131,7 @@ export const selectLineScore = createSelector(selectLiveData, data => data.lines
 export const selectDecisions = createSelector(selectLiveData, data => data.decisions);
 const selectGameData = createSelector(selectGame, game => game.gameData);
 export const selectGameStatus = createSelector(selectGameData, game => game.status);
+export const selectPlayers = createSelector(selectGameData, gameData => gameData.players);
 export const selectTeams = createSelector(selectGameData, gameData => gameData.teams);
 export const selectVenue = createSelector(selectGameData, gameData => gameData.venue);
 export const selectStartTime = createSelector(selectGameData, gameData => {

package/dist/main.js

@@ -5,7 +5,7 @@ import screen from "./screen.js";
 import store from "./store/index.js";
 import log from "./logger.js";
 import App from "./components/App.js";
-export default async function startInterface() {
+export default async function startInterface(options) {
   raf.polyfill();
   process.on('uncaughtException', function (error) {
     log.error('UNCAUGHT EXCEPTION\n' + JSON.stringify(error) + '\n' + error.stack);
@@ -16,5 +16,7 @@ export default async function startInterface() {
   const reactBlessed = await import('react-blessed');
   reactBlessed.render( /*#__PURE__*/React.createElement(Provider, {
     store: store
-  }, /*#__PURE__*/React.createElement(App, null)), screen());
+  }, /*#__PURE__*/React.createElement(App, {
+    replayId: options.replay
+  })), screen());
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playball",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Watch MLB games from the comfort of your terminal",
   "keywords": [
     "MLB",
@@ -16,7 +16,8 @@
     "lint": "eslint --ext .jsx,.js src",
     "start": "babel src --out-dir dist --watch",
     "prepublishOnly": "npm run build",
-    "react-devtools": "react-devtools"
+    "react-devtools": "react-devtools",
+    "test": "echo \"No tests yet\""
   },
   "bin": {
     "playball": "./bin/playball.js"
@@ -37,12 +38,14 @@
   "preferGlobal": true,
   "license": "MIT",
   "dependencies": {
+    "@date-fns/utc": "^2.1.1",
     "@reduxjs/toolkit": "^1.8.0",
     "axios": "^0.26.1",
     "blessed": "^0.1.81",
     "commander": "^11.0.0",
     "conf": "^11.0.1",
-    "date-fns": "^2.28.0",
+    "date-fns": "^4.1.0",
+    "figlet": "^1.10.0",
     "json-patch": "^0.7.0",
     "prop-types": "^15.8.1",
     "raf": "^3.4.1",