playball 2.2.2 → 3.0.0

package/dist/store/index.js

@@ -3,16 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
-var _redux = require("redux");
+var _toolkit = require("@reduxjs/toolkit");
 
-var _reduxThunk = _interopRequireDefault(require("redux-thunk"));
+var _schedule = _interopRequireDefault(require("../features/schedule"));
 
-var _reducers = _interopRequireDefault(require("../reducers"));
+var _games = _interopRequireDefault(require("../features/games"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _keys = _interopRequireDefault(require("../features/keys"));
 
-var _default = (0, _redux.createStore)(_reducers["default"], (0, _redux.applyMiddleware)(_reduxThunk["default"]));
+var _standings = _interopRequireDefault(require("../features/standings"));
 
-exports["default"] = _default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = (0, _toolkit.configureStore)({
+  reducer: {
+    schedule: _schedule.default,
+    games: _games.default,
+    keys: _keys.default,
+    standings: _standings.default
+  },
+  middleware: getDefaultMiddleware => getDefaultMiddleware({
+    serializableCheck: false
+  })
+});
+
+exports.default = _default;

package/dist/style/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 var _default = {
   list: {
     selected: {
@@ -14,9 +14,9 @@ var _default = {
   scrollbar: {
     ch: ' ',
     style: {
-      fg: 'yellow',
+      fg: 'white',
       inverse: true
     }
   }
 };
-exports["default"] = _default;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playball",
-  "version": "2.2.2",
+  "version": "3.0.0",
   "description": "Watch MLB games from the comfort of your terminal",
   "keywords": [
     "MLB",
@@ -13,9 +13,10 @@
     "build": "npm run lint && npm run clean && npm run compile",
     "clean": "rimraf ./dist",
     "compile": "babel src --out-dir dist",
-    "lint": "eslint src",
+    "lint": "eslint --ext .jsx,.js src",
     "start": "babel-node ./src/main.js",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "react-devtools": "react-devtools"
   },
   "main": "dist/main.js",
   "bin": {
@@ -33,37 +34,54 @@
   "preferGlobal": true,
   "license": "MIT",
   "dependencies": {
-    "axios": "^0.19.2",
+    "@reduxjs/toolkit": "^1.8.0",
+    "axios": "^0.26.1",
     "blessed": "^0.1.81",
-    "immutable": "^3.8.2",
+    "date-fns": "^2.28.0",
     "json-patch": "^0.7.0",
-    "moment": "^2.24.0",
-    "prop-types": "^15.6.2",
-    "react": "^16.8.6",
-    "react-blessed": "^0.5.0",
-    "react-devtools-core": "^3.6.1",
-    "react-redux": "^5.0.7",
-    "redux": "^4.0.0",
-    "redux-actions": "^2.6.1",
-    "redux-thunk": "^2.3.0",
-    "reselect": "^3.0.1",
-    "winston": "^3.3.3",
-    "ws": "^6.2.1"
+    "prop-types": "^15.8.1",
+    "raf": "^3.4.1",
+    "react": "^17.0.2",
+    "react-blessed": "^0.7.2",
+    "react-devtools-core": "^4.24.7",
+    "react-redux": "^7.2.6",
+    "redux": "^4.1.2",
+    "winston": "^3.7.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.10.5",
-    "@babel/core": "^7.11.1",
-    "@babel/node": "^7.10.5",
-    "@babel/preset-env": "^7.11.0",
-    "@babel/preset-react": "^7.10.4",
-    "eslint": "^7.6.0",
-    "eslint-plugin-react": "^7.20.5",
-    "rimraf": "^2.6.3"
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.18.2",
+    "@babel/node": "^7.17.10",
+    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-react": "^7.17.12",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "eslint": "^8.12.0",
+    "eslint-plugin-react": "^7.29.4",
+    "react-devtools": "^4.24.7",
+    "rimraf": "^2.6.3",
+    "ws": "^8.5.0"
   },
   "babel": {
     "presets": [
-      "@babel/preset-env",
+      [
+        "@babel/preset-env",
+        {
+          "targets": {
+            "node": "10"
+          }
+        }
+      ],
       "@babel/preset-react"
+    ],
+    "plugins": [
+      [
+        "module-resolver",
+        {
+          "alias": {
+            "react-redux": "react-redux/lib/alternate-renderers"
+          }
+        }
+      ]
     ]
   }
 }

package/src/components/AllPlays.jsx

@@ -1,75 +1,107 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { selectAllPlays, selectTeams } from '../selectors/game';
+import { useSelector } from 'react-redux';
+import { selectAllPlays, selectTeams } from '../features/games';
 
 import style from '../style';
 
-class AllPlays extends React.Component {
-  render() {
-    const { plays, teams } = this.props;
-    let inning = '';
-    const lines = [];
-    plays && plays.reverse().forEach(play => {
-      const playInning = play.getIn(['about', 'halfInning']) + ' ' + play.getIn(['about', 'inning']);
-      if (playInning !== inning) {
-        inning = playInning;
-        lines.push(`{yellow-fg}[${inning.toUpperCase()}]{/yellow-fg}`);
+
+function getPlayResultColor(play) {
+  const lastPlay = play.playEvents[play.playEvents.length - 1]?.details;
+  if (!lastPlay) {
+    return 'white';
+  } else if (lastPlay.isBall) {
+    return 'green';
+  } else if (lastPlay.isStrike) {
+    return 'red';
+  } else if (lastPlay.isInPlay && !play.about.hasOut) {
+    return 'blue';
+  } else {
+    return 'white';
+  }
+}
+
+function formatOut(out) {
+  return ` {bold}${out} out{/bold}`;
+}
+
+
+function AllPlays() {
+  const plays = useSelector(selectAllPlays);
+  const teams = useSelector(selectTeams);
+
+  const formatScoreDetail = (scoreObj) => (
+    ' {bold}{white-bg}{black-fg} ' + 
+    `${teams.away.abbreviation} ${scoreObj.awayScore} - ` +
+    `${teams.home.abbreviation} ${scoreObj.homeScore}` + 
+    ' {/black-fg}{/white-bg}{/bold}'
+  );
+
+  let inning = '';
+  const lines = [];
+  plays && plays.slice().reverse().forEach((play, playIdx, plays) => {
+    let lastPlay;
+    if (playIdx < plays.length - 1) {
+      lastPlay = plays[playIdx + 1];
+    }
+    const playInning = play.about.halfInning + ' ' + play.about.inning;
+    if (playInning !== inning) {
+      inning = playInning;
+      if (lines.length > 0) {
+        lines.push('');
+      }
+      lines.push(`{bold}[${inning.toUpperCase()}]{/bold}`);
+    }
+
+    if (play.about.isComplete) {
+      const color = getPlayResultColor(play);
+      let line = `{${color}-fg}[${play.result.event}]{/${color}-fg} ${play.result.description}`;
+      if (play.about.hasOut) {
+        const lastOut = play.playEvents[play.playEvents.length - 1].count.outs;
+        if (lastOut !== play.count.outs) {
+          line += formatOut(play.count.outs);
+        }
+      }
+      if (play.about.isScoringPlay) {
+        line += formatScoreDetail(play.result);
       }
-      if (play.getIn(['about', 'isComplete'])) {
-        let line = `[${play.getIn(['result', 'event'])}] ${play.getIn(['result', 'description'])}`;
-        if (play.getIn(['about', 'hasOut'])) {
-          line += `{bold}${play.getIn(['count', 'outs'])} out{/bold}`;
+      lines.push(line);
+    }
+
+    play.playEvents && play.playEvents.slice().reverse().forEach((event, eventIdx, events) => {
+      if (event.type === 'action') {
+        let line = '';
+        if (event.details.event) {
+          line += `[${event.details.event}] `;
+        }
+        line += event.details.description;
+        if (event.isScoringPlay || event.details.isScoringPlay) {
+          line += formatScoreDetail(event.details);
         }
-        if (play.getIn(['about', 'isScoringPlay'])) {
-          line += '{bold}{white-bg}{black-fg} ' + 
-            `${teams.getIn(['away', 'abbreviation'])} ${play.getIn(['result', 'awayScore'])} - ` +
-            `${teams.getIn(['home', 'abbreviation'])} ${play.getIn(['result', 'homeScore'])}` + 
-            ' {/black-fg}{/white-bg}{/bold}';
+        const currentOut = event.count?.outs;
+        let prevOut = lastPlay ? lastPlay.count.outs : 0;
+        if (eventIdx < events.length - 1) {
+          prevOut = events[eventIdx + 1].count?.outs;
+        }
+        if (currentOut > prevOut) {
+          line += formatOut(currentOut);
         }
         lines.push(line);
       }
-      play.get('playEvents') && play.get('playEvents').reverse().forEach(event => {
-        if (event.get('type') === 'action') {
-          let line = '';
-          if (event.getIn(['details', 'event'])) {
-            line += `[${event.getIn(['details', 'event'])}] `;
-          }
-          line += event.getIn(['details', 'description']);
-          if (event.get('isScoringPlay')) {
-            line += '{white-bg}{black-fg}{bold}' +
-              `${teams.getIn(['away', 'abbreviation'])} ${event.getIn(['details', 'awayScore'])} - ` + 
-              `${teams.getIn(['home', 'abbreviation'])} ${event.getIn(['details', 'homeScore'])}` + 
-              '{/bold}{/black-fg}{/white-bg}';
-          }
-          lines.push(line);
-        }
-      });
     });
-    return (
-      <box
-        content={lines.join('\n')}
-        focused 
-        mouse 
-        keys 
-        vi
-        scrollable 
-        scrollbar={style.scrollbar} 
-        alwaysScroll 
-        tags
-      />
-    );
-  }
+  });
+  return (
+    <box
+      content={lines.join('\n')}
+      focused 
+      mouse 
+      keys 
+      vi
+      scrollable 
+      scrollbar={style.scrollbar} 
+      alwaysScroll 
+      tags
+    />
+  );
 }
 
-AllPlays.propTypes = {
-  plays: PropTypes.object,
-  teams: PropTypes.object,
-};
-
-const mapStateToProps = state => ({
-  plays: selectAllPlays(state),
-  teams: selectTeams(state),
-});
-
-export default connect(mapStateToProps)(AllPlays);
+export default AllPlays;

package/src/components/App.jsx

@@ -1,71 +1,43 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
 import GameList from './GameList';
-import Game from './Game';
 import HelpBar from './HelpBar';
-import fs from 'fs';
-
-import { setSelectedGame } from '../actions/game';
-import { selectGame, selectSelectedId } from '../selectors/game';
-
-import winston from 'winston';
-
-class App extends React.Component {
-  componentDidMount() {
-    const { onKeyPress, setSelectedGame } = this.props;
-    onKeyPress(['l'], () => setSelectedGame(null));
-    onKeyPress(['C-d'], () => {
-      const { selectedGame, game } = this.props;
-      fs.writeFileSync(
-        selectedGame + '_' + Date.now() + '.json',
-        JSON.stringify(game, null, 2)
-      );
-    });
-  }
-
-  componentDidCatch(error, info) {
-    winston.error(error);
-    winston.error(JSON.stringify(info, null, 2));
-  }
+import { setSelectedId } from '../features/games';
+import Game from './Game';
+import useKey from '../hooks/useKey';
+import Standings from './Standings';
+
+const SCHEDULE = 'schedule';
+const STANDINGS = 'standings';
+const GAME = 'game';
+
+function App() {
+  const [view, setView] = useState(SCHEDULE);
+  const dispatch = useDispatch();
+
+  useKey('c', () => {
+    setView(SCHEDULE);
+    dispatch(setSelectedId(null));
+  }, { key: 'C', label: 'Schedule' });
+  useKey('s', () => setView(STANDINGS), { key: 'S', label: 'Standings'});
+
+  const handleGameSelect = (game) => {
+    dispatch(setSelectedId(game.gamePk));
+    setView(GAME);
+  };
   
-  render() {
-    const { selectedGame, setSelectedGame } = this.props;
-    try {
-      return (
-        <element>
-          <element top={0} left={0} height='100%-1'>
-            {selectedGame ? 
-              <Game /> : 
-              <GameList onGameSelect={game => setSelectedGame(game.gamePk)} />
-            }
-          </element>
-          <element top='100%-1' left={0} height={1}>
-            <HelpBar />
-          </element>
-        </element>
-      );
-    } catch (error) {
-      this.props.debug(error);
-    }
-  }
+  return (
+    <element>
+      <element top={0} left={0} height='100%-1'>
+        {view === STANDINGS && <Standings />}
+        {view === SCHEDULE && <GameList onGameSelect={handleGameSelect} />}
+        {view === GAME && <Game />}
+      </element>
+      <element top='100%-1' left={0} height={1}>
+        <HelpBar />
+      </element>
+    </element>
+  );
 }
 
-App.propTypes = {
-  debug: PropTypes.func,
-  onKeyPress: PropTypes.func,
-  selectedGame: PropTypes.number,
-  setSelectedGame: PropTypes.func,
-  game: PropTypes.object,
-};
-
-const mapStateToProps = state => ({
-  selectedGame: selectSelectedId(state),
-  game: selectGame(state),
-});
-
-const mapDispatchToProps = {
-  setSelectedGame
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(App);
+export default App;

package/src/components/AtBat.jsx

@@ -1,43 +1,41 @@
 import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import { selectCurrentPlay } from '../selectors/game';
+import { useSelector } from 'react-redux';
+import { selectCurrentPlay } from '../features/games';
 
-const AtBat = ({currentPlay}) => {
-  const playEvents = currentPlay.get('playEvents');
-  const playResult = currentPlay.getIn(['about', 'isComplete']) ? 
-    currentPlay.getIn(['result', 'description']) : '';
-  const content = playEvents && playEvents.map(event => {
-    let line = '';
-    if (event.get('isPitch')) {
-      line = `[${event.getIn(['details', 'description'])}] `;
-      if (event.hasIn(['pitchData', 'startSpeed'])) {
-        line += `${event.getIn(['pitchData', 'startSpeed'])} MPH `;
+function AtBat() {
+  const currentPlay = useSelector(selectCurrentPlay);
+  const playEvents = currentPlay.playEvents;
+  const playResult = currentPlay.about.isComplete ? currentPlay.result.description : '';
+  let content = '';
+  if (playResult) {
+    content += `${playResult}\n\n`;
+  } 
+  if (playEvents && playEvents.length) {
+    content += playEvents.slice().reverse().map(event => {
+      let line = '';
+      if (event.isPitch) {
+        line = `[${event.details.description}] `;
+        if (event.pitchData?.startSpeed) {
+          line += `${event.pitchData.startSpeed} MPH `;
+        }
+        if (event.details?.type?.description) {
+          line += event.details.type.description;
+        }
+        if (!event.details?.isInPlay) {
+          line += `{|} ${event.count.balls}-${event.count.strikes}`;
+        }
+      } else {
+        if (event.details?.event) {
+          line += `[${event.details.event}] `;
+        }
+        line += event.details.description;
       }
-      line += event.getIn(['details', 'type', 'description']);
-      if (!event.getIn(['details', 'isInPlay'])) {
-        line += `{|} ${event.getIn(['count', 'balls'])}-${event.getIn(['count', 'strikes'])}`;
-      }
-    } else {
-      if (event.getIn(['details', 'event'])) {
-        line += `[${event.getIn(['details', 'event'])}] `;
-      }
-      line += event.getIn(['details', 'description']);
-    }
-    return line;
-  }).join('\n') + `\n\n${playResult}`;
+      return line;
+    }).join('\n');
+  }
   return (
     <box content={content} tags />
   );
-};
-
-AtBat.propTypes = {
-  boxscore: PropTypes.object,
-  currentPlay: PropTypes.object,
-};
-
-const mapStateToProps = state => ({
-  currentPlay: selectCurrentPlay(state),
-});
+}
 
-export default connect(mapStateToProps)(AtBat);
+export default AtBat;

package/src/components/Bases.jsx

@@ -1,27 +1,22 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-import { selectGame } from '../selectors/game';
+import { selectLineScore } from '../features/games';
 
-const formatBase = (offense, base) => offense.has(base) ? '{yellow-fg}◆{/yellow-fg}' : '◇';
+const formatBase = (offense, base) => (base in offense) ? '{yellow-fg}◆{/yellow-fg}' : '◇';
 
-const Bases = ({align, game}) => {
-  const offense = game.getIn(['liveData', 'linescore', 'offense']);
+function Bases({align}) {
+  const { offense } = useSelector(selectLineScore);
   const content = 
     `  ${formatBase(offense, 'second')}\n` + 
     `${formatBase(offense, 'third')}   ${formatBase(offense, 'first')}`;
   return (
     <box align={align} content={content} tags />
   );
-};
+}
 
 Bases.propTypes = {
-  align: PropTypes.string, 
-  game: PropTypes.object,  
+  align: PropTypes.oneOf(['left', 'center', 'right']),
 };
 
-const mapStateToProps = state => ({
-  game: selectGame(state),
-});
-
-export default connect(mapStateToProps)(Bases);
+export default Bases;

package/src/components/Count.jsx

@@ -1,29 +1,24 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import { selectGame } from '../selectors/game';
+import { selectLineScore } from '../features/games';
 
 const formatCount = (count, total) => '● '.repeat(count) + '○ '.repeat(total - count);
 
-const Count = ({align, game}) => {
-  const linescore = game.getIn(['liveData', 'linescore']);
+function Count({align}) {
+  const linescore = useSelector(selectLineScore);
   const content = 
-    `B: {green-fg}${formatCount(linescore.get('balls'), 4)}{/green-fg}\n` + 
-    `S: {red-fg}${formatCount(linescore.get('strikes'), 3)}{/red-fg}\n` + 
-    `O: {red-fg}${formatCount(linescore.get('outs'), 3)}{/red-fg}`;
+    `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}`;
   return (
     <box align={align} content={content} tags />
   );
-};
+}
 
 Count.propTypes = {
-  align: PropTypes.string, 
-  game: PropTypes.object,  
+  align: PropTypes.oneOf(['left', 'center', 'right']),
 };
 
-const mapStateToProps = state => ({
-  game: selectGame(state),
-});
-
-export default connect(mapStateToProps)(Count);
+export default Count;