playball 3.0.0 → 3.1.0

package/.eslintrc.json

@@ -11,7 +11,7 @@
         "ecmaFeatures": {
             "jsx": true
         },
-        "ecmaVersion": 2020,
+        "ecmaVersion": 2022,
         "sourceType": "module"
     },
     "plugins": [

package/README.md

@@ -46,6 +46,68 @@ key | action
 ----|--------
 <kbd>&darr;</kbd>/<kbd>j</kbd>, <kbd>&uarr;</kbd>/<kbd>k</kbd> | scroll list of all plays
 
+### Configuration
+
+Playball can be configured using the `config` subcommand. To list the current configuration values run the subcommand with no additional arguments:
+
+```shell
+playball config
+```
+
+You should see output similar to:
+
+```
+color.ball = green
+color.favorite-star = yellow
+color.in-play-no-out = blue
+color.in-play-out = white
+color.in-play-runs-bg = white
+color.in-play-runs-fg = black
+color.on-base = yellow
+color.other-event = white
+color.out = red
+color.strike = red
+color.strike-out = red
+color.walk = green
+favorites = 
+```
+
+To get the value of a single setting pass the key as an additional argument:
+
+```shell
+playball config color.strike
+```
+
+To change a setting pass the key and value as arguments:
+
+```shell
+playball config color.strike blue
+```
+
+To revert a setting to its default value provide the key and the `--unset` flag:
+
+```shell
+playball config color.strike --unset
+```
+
+This table summarizes the available settings:
+
+key | description | default | allowed values
+----|-------------|---------|---------------
+`color.ball` | Color of dots representing balls in top row of game view | green | One of the following: `black`, `red`, `green`, `yellow`, `blue`, `magenta`, `cyan`, `white`, `grey`. Any of those colors may be prefixed by `bright-` or `light-` (for example `bright-green`). The exact color used will depend on your terminal settings. The value `default` may be used to specify the default text color for your terminal. Finally hex colors (e.g `#FFA500`) can be specified. If your terminal does not support true color, the closest supported color may be used. 
+`color.favorite-star` | Color of star indiciating favorite team in schedule and standing views | yellow | _See above_
+`color.in-play-no-out` | Color of result where ball was put in play and no out was made (single, double, etc) in list of plays in game view | blue | _See above_
+`color.in-play-out` | Color of result where ball was put in play and an out was made (flyout, fielder's choice, etc) in list of plays in game view | white | _See above_
+`color.in-play-runs-bg` | Background color for score update in list of plays in game view | white | _See above_
+`color.in-play-runs-fg` | Foreground color for score update in list of plays in game view | black | _See above_
+`color.on-base` | Color of diamonds representing runners on base in top row of game view | yellow | _See above_
+`color.other-event` | Color of other events (mound visit, injury delay, etc) in list of plays in game view | white | _See above_
+`color.out` | Color of dots representing outs in top row of game view | red | _See above_
+`color.strike` | Color of dots representing strikes in top row of game view | red | _See above_
+`color.strike-out` | Color of result where play ends on a strike (strike out) in list of plays in game view | red | _See above_
+`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`)
+
 ### Development
 ```
 git clone https://github.com/paaatrick/playball.git

package/bin/playball.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-require('..');
+import '../dist/cli.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playball",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Watch MLB games from the comfort of your terminal",
   "keywords": [
     "MLB",
@@ -14,11 +14,10 @@
     "clean": "rimraf ./dist",
     "compile": "babel src --out-dir dist",
     "lint": "eslint --ext .jsx,.js src",
-    "start": "babel-node ./src/main.js",
+    "start": "babel src --out-dir dist --watch",
     "prepublishOnly": "npm run build",
     "react-devtools": "react-devtools"
   },
-  "main": "dist/main.js",
   "bin": {
     "playball": "./bin/playball.js"
   },
@@ -37,6 +36,8 @@
     "@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",
     "json-patch": "^0.7.0",
     "prop-types": "^15.8.1",
@@ -46,6 +47,7 @@
     "react-devtools-core": "^4.24.7",
     "react-redux": "^7.2.6",
     "redux": "^4.1.2",
+    "update-notifier": "^6.0.2",
     "winston": "^3.7.2"
   },
   "devDependencies": {
@@ -61,14 +63,16 @@
     "rimraf": "^2.6.3",
     "ws": "^8.5.0"
   },
+  "type": "module",
   "babel": {
     "presets": [
       [
         "@babel/preset-env",
         {
           "targets": {
-            "node": "10"
-          }
+            "node": "14"
+          },
+          "modules": false
         }
       ],
       "@babel/preset-react"
@@ -78,7 +82,7 @@
         "module-resolver",
         {
           "alias": {
-            "react-redux": "react-redux/lib/alternate-renderers"
+            "react-redux": "react-redux/lib/alternate-renderers.js"
           }
         }
       ]

package/src/cli.js

@@ -0,0 +1,46 @@
+/* eslint no-console: 0 */
+import { Command } from 'commander';
+import updateNotifier from 'update-notifier';
+
+import * as config from './config.js';
+import main from './main.js';
+import pkg from './package.js';
+
+const program = new Command();
+const notifier = updateNotifier({
+  pkg, 
+  updateCheckInterval: 1000 * 60 * 60 * 24 * 7  // 1 week
+});
+
+program
+  .name(pkg.name)
+  .description(pkg.description)
+  .version(pkg.version)
+  .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) => {
+    if (options.unset) {
+      config.unset(key);
+      return;
+    }
+    if (!key) {
+      for (const [key, value] of Object.entries(config.getAll())) {
+        console.log(`${key} = ${value}`);
+      }
+    } else if (!value) {
+      console.log(config.get(key));
+    } else {
+      config.set(key, value);
+    }
+  });
+
+
+program.parse();

package/src/components/AllPlays.jsx

@@ -1,27 +1,28 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { selectAllPlays, selectTeams } from '../features/games';
+import { selectAllPlays, selectTeams } from '../features/games.js';
 
-import style from '../style';
+import { get } from '../config.js';
+import style from '../style/index.js';
 
 
 function getPlayResultColor(play) {
   const lastPlay = play.playEvents[play.playEvents.length - 1]?.details;
   if (!lastPlay) {
-    return 'white';
+    return get('color.other-event');
   } else if (lastPlay.isBall) {
-    return 'green';
+    return get('color.walk');
   } else if (lastPlay.isStrike) {
-    return 'red';
+    return get('color.strike-out');
   } else if (lastPlay.isInPlay && !play.about.hasOut) {
-    return 'blue';
+    return get('color.in-play-no-out');
   } else {
-    return 'white';
+    return get('color.in-play-out');
   }
 }
 
 function formatOut(out) {
-  return ` {bold}${out} out{/bold}`;
+  return ` {bold}${out} out{/}`;
 }
 
 
@@ -30,10 +31,10 @@ function AllPlays() {
   const teams = useSelector(selectTeams);
 
   const formatScoreDetail = (scoreObj) => (
-    ' {bold}{white-bg}{black-fg} ' + 
+    ` {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}` + 
-    ' {/black-fg}{/white-bg}{/bold}'
+    ' {/}'
   );
 
   let inning = '';
@@ -49,12 +50,12 @@ function AllPlays() {
       if (lines.length > 0) {
         lines.push('');
       }
-      lines.push(`{bold}[${inning.toUpperCase()}]{/bold}`);
+      lines.push(`{bold}[${inning.toUpperCase()}]{/}`);
     }
 
     if (play.about.isComplete) {
       const color = getPlayResultColor(play);
-      let line = `{${color}-fg}[${play.result.event}]{/${color}-fg} ${play.result.description}`;
+      let line = `{${color}-fg}[${play.result.event}]{/} ${play.result.description}`;
       if (play.about.hasOut) {
         const lastOut = play.playEvents[play.playEvents.length - 1].count.outs;
         if (lastOut !== play.count.outs) {
@@ -71,7 +72,7 @@ function AllPlays() {
       if (event.type === 'action') {
         let line = '';
         if (event.details.event) {
-          line += `[${event.details.event}] `;
+          line += `{${get('color.other-event')}-fg}[${event.details.event}]{/} `;
         }
         line += event.details.description;
         if (event.isScoringPlay || event.details.isScoringPlay) {

package/src/components/App.jsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
-import GameList from './GameList';
-import HelpBar from './HelpBar';
-import { setSelectedId } from '../features/games';
-import Game from './Game';
-import useKey from '../hooks/useKey';
-import Standings from './Standings';
+import GameList from './GameList.js';
+import HelpBar from './HelpBar.js';
+import { setSelectedId } 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';

package/src/components/AtBat.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { selectCurrentPlay } from '../features/games';
+import { selectCurrentPlay } from '../features/games.js';
 
 function AtBat() {
   const currentPlay = useSelector(selectCurrentPlay);

package/src/components/Bases.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-import { selectLineScore } from '../features/games';
+import { get } from '../config.js';
+import { selectLineScore } from '../features/games.js';
 
-const formatBase = (offense, base) => (base in offense) ? '{yellow-fg}◆{/yellow-fg}' : '◇';
+const formatBase = (offense, base) => (base in offense) ? `{${get('color.on-base')}-fg}◆{/}` : '◇';
 
 function Bases({align}) {
   const { offense } = useSelector(selectLineScore);

package/src/components/Count.jsx

@@ -2,16 +2,17 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import { selectLineScore } from '../features/games';
+import { get } from '../config.js';
+import { selectLineScore } from '../features/games.js';
 
 const formatCount = (count, total) => '● '.repeat(count) + '○ '.repeat(total - count);
 
 function Count({align}) {
   const linescore = useSelector(selectLineScore);
   const content = 
-    `B: {green-fg}${formatCount(linescore.balls, 4)}{/green-fg}\n` + 
-    `S: {red-fg}${formatCount(linescore.strikes, 3)}{/red-fg}\n` + 
-    `O: {red-fg}${formatCount(linescore.outs, 3)}{/red-fg}`;
+    `B: {${get('color.ball')}-fg}${formatCount(linescore.balls, 4)}{/}\n` + 
+    `S: {${get('color.strike')}-fg}${formatCount(linescore.strikes, 3)}{/}\n` + 
+    `O: {${get('color.out')}-fg}${formatCount(linescore.outs, 3)}{/}`;
   return (
     <box align={align} content={content} tags />
   );

package/src/components/FinishedGame.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { selectLineScore, selectTeams, selectDecisions, selectBoxscore, selectGameStatus } from '../features/games';
-import LineScore from './LineScore';
+import { selectLineScore, selectTeams, selectDecisions, selectBoxscore, selectGameStatus } from '../features/games.js';
+import LineScore from './LineScore.js';
 
 const getPlayer = (id, boxscore) => {
   const homePlayer = boxscore.home?.players?.['ID' + id];

package/src/components/Game.jsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { fetchGame, selectGame, selectSelectedId, selectFullUpdateRequired } from '../features/games';
+import { fetchGame, selectGame, selectSelectedId, selectFullUpdateRequired } from '../features/games.js';
 
-import PreviewGame from './PreviewGame';
-import LiveGame from './LiveGame';
-import FinishedGame from './FinishedGame';
+import PreviewGame from './PreviewGame.js';
+import LiveGame from './LiveGame.js';
+import FinishedGame from './FinishedGame.js';
 
-import log from '../logger';
+import log from '../logger.js';
 
 function Game() {
   const dispatch = useDispatch();

package/src/components/GameList.jsx

@@ -2,17 +2,20 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { add, format } from 'date-fns';
-import { fetchSchedule, selectData, selectLoading } from '../features/schedule';
-
-import Grid from './Grid';
-import useKey from '../hooks/useKey';
+import { fetchSchedule, selectData, selectLoading } from '../features/schedule.js';
+import { teamFavoriteStar } from '../utils.js';
+import Grid from './Grid.js';
+import useKey from '../hooks/useKey.js';
 
 const formatGame = game => {
   const startTime = format(new Date(game.gameDate), 'p');
   const start = (game.doubleHeader === 'Y' && game.gameNumber > 1) ? 
     'Game ' + game.gameNumber :
     startTime;
-  const teamName = (team) => `${team.team.teamName} (${team.leagueRecord.wins}-${team.leagueRecord.losses})`.padEnd(20);
+  const teamName = (team) => {
+    const star = teamFavoriteStar(team.team);
+    return star + `${team.team.teamName} (${team.leagueRecord.wins}-${team.leagueRecord.losses})`.padEnd(star ? 18 : 20);
+  };
   let content = [start, teamName(game.teams.away), teamName(game.teams.home)];
   const gameState = game.status.abstractGameCode;
   const detailedState = game.status.detailedState;

package/src/components/Grid.jsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import useKey from '../hooks/useKey';
+import useKey from '../hooks/useKey.js';
 
 function Grid({ items, itemHeight, itemMinWidth, onSelect }) {
   const containerRef = useRef();

package/src/components/HelpBar.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import LoadingSpinner from './LoadingSpinner';
+import LoadingSpinner from './LoadingSpinner.js';
 
 const HelpBar = () => {
   const keys = useSelector(state => state.keys);

package/src/components/InningDisplay.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 
-import { selectLineScore } from '../features/games';
+import { selectLineScore } from '../features/games.js';
 
 function InningDisplay() {
   const linescore = useSelector(selectLineScore);

package/src/components/LineScore.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import { selectLineScore, selectTeams } from '../features/games';
+import { selectLineScore, selectTeams } from '../features/games.js';
 
 const getRuns = (inning, homeAway, isFinal) => {
   const runs = inning[homeAway].runs;

package/src/components/LiveGame.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import Count from './Count';
-import Bases from './Bases';
-import LineScore from './LineScore';
-import Matchup from './Matchup';
-import AtBat from './AtBat';
-import AllPlays from './AllPlays';
-import InningDisplay from './InningDisplay';
+import Count from './Count.js';
+import Bases from './Bases.js';
+import LineScore from './LineScore.js';
+import Matchup from './Matchup.js';
+import AtBat from './AtBat.js';
+import AllPlays from './AllPlays.js';
+import InningDisplay from './InningDisplay.js';
 
 function LiveGame()  {
   return (

package/src/components/LoadingSpinner.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { selectLoading as selectScheduleLoading } from '../features/schedule';
-import { selectLoading as gamesLoading } from '../features/games';
+import { selectLoading as selectScheduleLoading } from '../features/schedule.js';
+import { selectLoading as gamesLoading } from '../features/games.js';
 
 const frames = [
   '⠋',

package/src/components/Matchup.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { selectCurrentPlay, selectBoxscore, selectTeams } from '../features/games';
+import { selectCurrentPlay, selectBoxscore, selectTeams } from '../features/games.js';
 
 const getPlayerStats = (boxscore, teams, id) => {
   const key = 'ID' + id;

package/src/components/PreviewGame.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { format } from 'date-fns';
-import { selectTeams, selectVenue, selectStartTime, selectBoxscore, selectProbablePitchers, selectGameStatus } from '../features/games';
+import { selectTeams, selectVenue, selectStartTime, selectBoxscore, selectProbablePitchers, selectGameStatus } from '../features/games.js';
 
 const formatPitcherName = (pitcher) => {
   let display = pitcher.person.fullName;

package/src/components/Standings.jsx

@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
-import { fetchStandings, selectData } from '../features/standings';
+import { fetchStandings, selectData } from '../features/standings.js';
+import { teamFavoriteStar } from '../utils.js';
 
 function formatHeaderRow(record) {
   return record.division.nameShort.padEnd(15) +
@@ -16,7 +17,9 @@ function formatHeaderRow(record) {
 
 function formatTeamRow(record) {
   const lastTen = record.records.splitRecords.find(o => o.type === 'lastTen');
-  return record.team.teamName.padEnd(15) + 
+  const star = teamFavoriteStar(record.team);
+  return star + 
+    record.team.teamName.padEnd(star ? 13 : 15) + 
     record.wins.toString().padStart(5) + 
     record.losses.toString().padStart(5) + 
     record.winningPercentage.padStart(7) + 
@@ -30,7 +33,7 @@ function Division({record, top, left, width}) {
   return (
     <box top={top} left={left} height={6} width={width}>
       <box top={0} left={0} height={1} fg='black' bg='white' content={formatHeaderRow(record)} wrap={false} />
-      <box top={1} left={0} height={5} content={record.teamRecords.map(formatTeamRow).join('\n')} wrap={false} />
+      <box top={1} left={0} height={5} content={record.teamRecords.map(formatTeamRow).join('\n')} wrap={false} tags />
     </box>
   );
 }