playball 2.2.0 → 3.0.0

package/src/components/LineScore.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { selectLineScore, selectTeams } from '../selectors/game';
+import { useSelector } from 'react-redux';
+import { selectLineScore, selectTeams } from '../features/games';
 
 const getRuns = (inning, homeAway, isFinal) => {
-  const runs = inning.getIn([homeAway, 'runs']);
+  const runs = inning[homeAway].runs;
   if (runs !== undefined) {
     return runs;
   }
@@ -12,47 +12,41 @@ const getRuns = (inning, homeAway, isFinal) => {
 };
 
 const getTeamLine = (linescore, totalInnings, homeAway, final) => (
-  linescore.get('innings')
+  linescore.innings
     .map(inning => getRuns(inning, homeAway, final))
     .map(r => r.toString().padStart(2))
     .join(' ')
     .padEnd(totalInnings * 3) + 
   '{bold}' + 
-  linescore.getIn(['teams', homeAway, 'runs']).toString().padStart(3) + '{/bold}' +
-  linescore.getIn(['teams', homeAway, 'hits']).toString().padStart(3) + 
-  linescore.getIn(['teams', homeAway, 'errors']).toString().padStart(3)   
+  linescore.teams[homeAway].runs.toString().padStart(3) + '{/bold}' +
+  linescore.teams[homeAway].hits.toString().padStart(3) + 
+  linescore.teams[homeAway].errors.toString().padStart(3)   
 );
 
-class LineScore extends React.Component {
-  render() {
-    const { align, final, linescore, teams } = this.props;
-    const currentInning = linescore.get('currentInning');
-    if (!currentInning) {
-      return '';
-    }
-    const totalInnings = Math.max(currentInning, 9);
-    const home = teams.getIn(['home', 'abbreviation']);
-    const away = teams.getIn(['away', 'abbreviation']);
-    const teamNameLength = 3;
-    let str = ''.padEnd(teamNameLength) + Array.from(Array(totalInnings).keys()).map(i => (i + 1).toString().padStart(2)).join(' ') + '   {bold}R{/bold}  H  E\n' + 
-      away.padEnd(teamNameLength) + getTeamLine(linescore, totalInnings, 'away', final) + '\n' +
-      home.padEnd(teamNameLength) + getTeamLine(linescore, totalInnings, 'home', final);
-    return (
-      <box align={align} content={str} tags wrap={false} />
-    );
+function LineScore({ align, final }) {
+  const linescore = useSelector(selectLineScore);
+  const teams = useSelector(selectTeams);
+
+  const currentInning = linescore.currentInning;
+  if (!currentInning) {
+    return '';
   }
+
+  const totalInnings = Math.max(currentInning, 9);
+  const home = teams.home.abbreviation;
+  const away = teams.away.abbreviation;
+  const teamNameLength = 3;
+  let str = ''.padEnd(teamNameLength) + Array.from(Array(totalInnings).keys()).map(i => (i + 1).toString().padStart(2)).join(' ') + '   {bold}R{/bold}  H  E\n' + 
+    away.padEnd(teamNameLength) + getTeamLine(linescore, totalInnings, 'away', final) + '\n' +
+    home.padEnd(teamNameLength) + getTeamLine(linescore, totalInnings, 'home', final);
+  return (
+    <box align={align} content={str} tags wrap={false} />
+  );
 }
 
 LineScore.propTypes = {
-  align: PropTypes.string, 
+  align: PropTypes.oneOf(['left', 'center', 'right']), 
   final: PropTypes.bool,
-  linescore: PropTypes.object,
-  teams: PropTypes.object,
 };
 
-const mapStateToProps = state => ({
-  linescore: selectLineScore(state),
-  teams: selectTeams(state),
-});
-
-export default connect(mapStateToProps)(LineScore);
+export default LineScore;

package/src/components/LiveGame.jsx

@@ -6,12 +6,16 @@ import LineScore from './LineScore';
 import Matchup from './Matchup';
 import AtBat from './AtBat';
 import AllPlays from './AllPlays';
+import InningDisplay from './InningDisplay';
 
-export const LiveGame = () => {
+function LiveGame()  {
   return (
     <element>
       <element top={0} left={1} width='100%-1' height={3}>
-        <element width='25%'>
+        <element left={0} width={2}>
+          <InningDisplay />
+        </element>
+        <element left={5} width='25%-5'>
           <Count />
         </element>
         <element left='25%+1' width='25%'>
@@ -38,6 +42,6 @@ export const LiveGame = () => {
       </element>
     </element>
   );
-};
+}
 
 export default LiveGame;

package/src/components/LoadingSpinner.jsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { selectLoading as selectGameLoading } from '../selectors/game';
-import { selectLoading as selectScheduleLoading } from '../selectors/schedule';
+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';
 
 const frames = [
   '⠋',
@@ -17,67 +16,34 @@ const frames = [
   '⠏'
 ];
 
-class LoadingSpinner extends React.Component { 
-  constructor(props) {
-    super(props);
-    this.state = {
-      frame: 0,
-      animating: false,
-    };
-  }
+function LoadingSpinner() { 
+  const [frame, setFrame] = useState(0);
+  const [animating, setAnimating] = useState(false);
+  const timerRef = useRef(null);
+  const scheduleLoading = useSelector(selectScheduleLoading);
+  const gameLoading = useSelector(gamesLoading);
 
-  componentDidMount() {
-    this.doUpdate();
-  }
+  const increment = () => {
+    setFrame(prevFrame => (prevFrame + 1) % frames.length);
+  };
 
-  componentDidUpdate(prevProps, prevState) {
-    const { gameLoading, scheduleLoading } = this.props;
-    const { frame } = this.state;
-    if (gameLoading !== prevProps.gameLoading || 
-        scheduleLoading !== prevProps.scheduleLoading ||
-        frame !== prevState.frame) {
-      this.doUpdate();
-    }
-  }
-
-  increment() {
-    this.setState(state => ({
-      frame: (state.frame + 1) % frames.length
-    }));
-  }
-
-  doUpdate() {
-    const { gameLoading, scheduleLoading } = this.props;
-    const { animating, frame } = this.state;
+  const doUpdate = () => {
     if (!animating && (gameLoading || scheduleLoading)) {
-      this.setState({
-        animating: true,
-      });
-      this.increment();
-      this.timer = setInterval(() => this.increment(), 50);
+      setAnimating(true);
+      increment();
+      timerRef.current = setInterval(increment, 50);
     }
     if (!gameLoading && !scheduleLoading && frame === 0) {
-      this.setState({
-        animating: false,
-      });
-      clearInterval(this.timer);
+      setAnimating(false);
+      clearInterval(timerRef.current);
     }
-  }
+  };
 
-  render() {
-    const { animating, frame } = this.state;
-    return <box content={animating ? frames[frame] : ' '} />;
-  }
-}
-
-LoadingSpinner.propTypes = {
-  gameLoading: PropTypes.bool,
-  scheduleLoading: PropTypes.bool
-};
+  useEffect(() => {
+    doUpdate();
+  }, [gameLoading, scheduleLoading, frame]);
 
-const mapStateToProps = state => ({
-  gameLoading: selectGameLoading(state),
-  scheduleLoading: selectScheduleLoading(state),
-});
+  return <box content={animating ? frames[frame] : ' '} />;
+}
 
-export default connect(mapStateToProps)(LoadingSpinner);
+export default LoadingSpinner;

package/src/components/Matchup.jsx

@@ -1,54 +1,41 @@
 import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import { selectCurrentPlay, selectBoxscore, selectTeams } from '../selectors/game';
+import { useSelector } from 'react-redux';
+import { selectCurrentPlay, selectBoxscore, selectTeams } from '../features/games';
 
 const getPlayerStats = (boxscore, teams, id) => {
   const key = 'ID' + id;
-  const homePlayers = boxscore.getIn(['home', 'players']);
-  if (homePlayers.has(key)) {
+  const homePlayers = boxscore.home.players;
+  if (homePlayers[key]) {
     return {
-      team: teams.get('home').toJS(),
-      player: homePlayers.get(key).toJS(),
+      team: teams.home,
+      player: homePlayers[key],
     };
   }
   return {
-    team: teams.get('away').toJS(),
-    player: boxscore.getIn(['away', 'players', key]).toJS(),
+    team: teams.away,
+    player: boxscore.away.players[key],
   };
 };
 
-const Matchup = ({boxscore, currentPlay, teams}) => {
-  try {
-    const pitcherId = currentPlay.getIn(['matchup', 'pitcher', 'id']);
-    const batterId = currentPlay.getIn(['matchup', 'batter', 'id']);
+function Matchup() {
+  const boxscore = useSelector(selectBoxscore);
+  const currentPlay = useSelector(selectCurrentPlay);
+  const teams = useSelector(selectTeams);
+  
+  const pitcherId = currentPlay.matchup?.pitcher?.id;
+  const batterId = currentPlay.matchup?.batter?.id;
 
-    const {team: pitchTeam, player: pitcher} = getPlayerStats(boxscore, teams, pitcherId);
-    const {team: batTeam, player: batter} = getPlayerStats(boxscore, teams, batterId);
+  const {team: pitchTeam, player: pitcher} = getPlayerStats(boxscore, teams, pitcherId);
+  const {team: batTeam, player: batter} = getPlayerStats(boxscore, teams, batterId);
 
-    const display = `${pitchTeam.abbreviation} Pitching: ` + 
-      `{bold}${pitcher.person.fullName}{/bold} ${pitcher.stats.pitching.inningsPitched} IP, ${pitcher.stats.pitching.pitchesThrown} P, ${pitcher.seasonStats.pitching.era} ERA\n` +
-      `${batTeam.abbreviation} At Bat:   ` + 
-      `{bold}${batter.person.fullName}{/bold} ${batter.stats.batting.hits}-${batter.stats.batting.atBats}, ${batter.seasonStats.batting.avg} AVG, ${batter.seasonStats.batting.homeRuns} HR`;
+  const display = `${pitchTeam.abbreviation} Pitching: ` + 
+    `{bold}${pitcher.person.fullName}{/bold} ${pitcher.stats.pitching.inningsPitched} IP, ${pitcher.stats.pitching.pitchesThrown || 0} P, ${pitcher.seasonStats.pitching.era} ERA\n` +
+    `${batTeam.abbreviation} At Bat:   ` + 
+    `{bold}${batter.person.fullName}{/bold} ${batter.stats.batting.hits}-${batter.stats.batting.atBats}, ${batter.seasonStats.batting.avg} AVG, ${batter.seasonStats.batting.homeRuns} HR`;
 
-    return (
-      <box tags content={display} wrap={false} />
-    );
-  } catch(error) {
-    throw error;
-  }
-};
-
-Matchup.propTypes = {
-  boxscore: PropTypes.object,
-  currentPlay: PropTypes.object,
-  teams: PropTypes.object,
-};
-
-const mapStateToProps = state => ({
-  boxscore: selectBoxscore(state),
-  currentPlay: selectCurrentPlay(state),
-  teams: selectTeams(state),
-});
+  return (
+    <box tags content={display} wrap={false} />
+  );
+}
 
-export default connect(mapStateToProps)(Matchup);
+export default Matchup;

package/src/components/PreviewGame.jsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import moment from 'moment';
-import { selectTeams, selectVenue, selectStartTime, selectBoxscore, selectProbablePitchers } from '../selectors/game';
+import { useSelector } from 'react-redux';
+import { format } from 'date-fns';
+import { selectTeams, selectVenue, selectStartTime, selectBoxscore, selectProbablePitchers, selectGameStatus } from '../features/games';
 
 const formatPitcherName = (pitcher) => {
-  let display = pitcher.getIn(['person', 'fullName']);
-  const number = pitcher.get('jerseyNumber');
+  let display = pitcher.person.fullName;
+  const number = pitcher.jerseyNumber;
   if (number) {
     display += `, #${number}`;
   }
@@ -14,52 +13,42 @@ const formatPitcherName = (pitcher) => {
 };
 
 const formatTeam = (teams, probables, boxscore, homeAway) => {
-  const pitcherId = probables.getIn([homeAway, 'id']);
-  const pitcher = boxscore.getIn([homeAway, 'players', 'ID' + pitcherId]);
+  const pitcherId = probables[homeAway].id;
+  const pitcher = boxscore[homeAway].players['ID' + pitcherId];
   let lines = [
-    teams.getIn([homeAway, 'teamName']),
-    `(${teams.getIn([homeAway, 'record', 'wins'])}-${teams.getIn([homeAway, 'record', 'losses'])})`,
+    teams[homeAway].teamName,
+    `(${teams[homeAway].record.wins}-${teams[homeAway].record.losses})`,
   ];
   if (pitcher) {
     lines = lines.concat([
       '',
       formatPitcherName(pitcher),
-      `${pitcher.getIn(['seasonStats', 'pitching', 'wins'])}-${pitcher.getIn(['seasonStats', 'pitching', 'losses'])}`,
-      `${pitcher.getIn(['seasonStats', 'pitching', 'era'])} ERA ${pitcher.getIn(['seasonStats', 'pitching', 'strikeOuts'])} K`,
+      `${pitcher.seasonStats?.pitching?.wins}-${pitcher.seasonStats?.pitching?.losses}`,
+      `${pitcher.seasonStats?.pitching?.era} ERA ${pitcher.seasonStats?.pitching?.strikeOuts} K`,
     ]);
   }
   return lines;
 };
 
-const PreviewGame = ({boxscore, probables, startTime, teams, venue}) => {
+function PreviewGame() {
+  const boxscore = useSelector(selectBoxscore);
+  const probables = useSelector(selectProbablePitchers);
+  const startTime = useSelector(selectStartTime);
+  const status = useSelector(selectGameStatus);
+  const teams = useSelector(selectTeams);
+  const venue = useSelector(selectVenue);
   const away = formatTeam(teams, probables, boxscore, 'away');
   const home = formatTeam(teams, probables, boxscore, 'home');
-  const formattedStart = moment(startTime).format('LLL');
+  const formattedStart = status.startTimeTBD ? 'Start time TBD' : format(new Date(startTime), 'MMMM d, yyy p');
   return (
     <element>
       <element height='60%'>
         <box content={away.join('\n')} width='33%-1' top='50%' align='center' />
-        <box content={`\nvs.\n\n${formattedStart}\n${venue.get('name')}\n${venue.getIn(['location', 'city'])}, ${venue.getIn(['location', 'stateAbbrev'])}`} width='33%-1' left='33%' top='50%' align='center' />
+        <box content={`\nvs.\n\n${formattedStart}\n${venue.name}\n${venue.location.city}, ${venue.location.stateAbbrev}`} width='33%-1' left='33%' top='50%' align='center' />
         <box content={home.join('\n')} width='34%' top='50%' left='66%' align='center' />
       </element>
     </element>
   );
-};
-
-PreviewGame.propTypes = {
-  boxscore: PropTypes.object,
-  probables: PropTypes.object,
-  startTime: PropTypes.string,
-  teams: PropTypes.object,
-  venue: PropTypes.object,
-};
-
-const mapStateToProps = state => ({
-  boxscore: selectBoxscore(state),
-  probables: selectProbablePitchers(state),
-  startTime: selectStartTime(state),
-  teams: selectTeams(state),
-  venue: selectVenue(state),
-});
+}
 
-export default connect(mapStateToProps)(PreviewGame);
+export default PreviewGame;

package/src/components/Standings.jsx

@@ -0,0 +1,78 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { fetchStandings, selectData } from '../features/standings';
+
+function formatHeaderRow(record) {
+  return record.division.nameShort.padEnd(15) +
+    '    W' + 
+    '    L' + 
+    '    PCT' + 
+    '    GB' + 
+    '  WCGB' +
+    '   L10' +
+    ' STRK';
+}
+
+function formatTeamRow(record) {
+  const lastTen = record.records.splitRecords.find(o => o.type === 'lastTen');
+  return record.team.teamName.padEnd(15) + 
+    record.wins.toString().padStart(5) + 
+    record.losses.toString().padStart(5) + 
+    record.winningPercentage.padStart(7) + 
+    record.gamesBack.padStart(6) + 
+    record.wildCardGamesBack.padStart(6) + 
+    `${lastTen.wins}-${lastTen.losses}`.padStart(6) + 
+    record.streak.streakCode.padStart(5);
+}
+
+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>
+  );
+}
+Division.propTypes = {
+  record: PropTypes.object,
+  top: PropTypes.number,
+  left: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};
+
+function Standings() {
+  const dispatch = useDispatch();
+  const standings = useSelector(selectData);
+
+  useEffect(() => dispatch(fetchStandings()), []);
+
+  if (!standings) {
+    return <element />;
+  }
+
+  return (
+    <element>
+      {standings.records.filter(record => record.league.id === 103).map((record, idx) => (
+        <Division
+          top={idx * 7}
+          left={0}
+          width='50%-1'
+          key={record.division.id} 
+          record={record} 
+        />
+      ))}
+      {standings.records.filter(record => record.league.id === 104).map((record, idx) => (
+        <Division
+          top={idx * 7}
+          left='50%+1'
+          width='50%-1'
+          key={record.division.id} 
+          record={record} 
+        />
+      ))}
+    </element>
+  );
+}
+
+export default Standings;

package/src/features/games.js

@@ -0,0 +1,165 @@
+import axios from 'axios';
+import { createAsyncThunk, createSlice, createSelector } from '@reduxjs/toolkit';
+import jsonpatch from 'json-patch';
+
+const initialState = {
+  loading: false,
+  fullUpdateRequired: false,
+  error: null,
+  selectedId: null,
+  games: {},
+};
+
+export const fetchGame = createAsyncThunk(
+  'games/fetch',
+  async ({id, start}) => {
+    const diffParams = start ? `/diffPatch?startTimecode=${start}` : '';
+    const url = `https://statsapi.mlb.com/api/v1.1/game/${id}/feed/live${diffParams}`;
+    const response = await axios.get(url);
+    return response.data;
+  }
+);
+
+export const gamesSlice = createSlice({
+  name: 'games',
+  initialState,
+  reducers: { 
+    setSelectedId(state, action) {
+      state.selectedId = action.payload;
+    }
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchGame.pending, (state) => {
+      state.loading = true;
+    });
+    builder.addCase(fetchGame.fulfilled, (state, action) => {
+      const id = state.selectedId;
+      let game = state.games[id];
+      let patchError = false;
+      if (Array.isArray(action.payload)) {
+        action.payload.forEach(obj => {
+          if (patchError) {
+            return;
+          }
+          try {
+            jsonpatch.apply(game || {}, obj.diff);
+          } catch (e) {
+            patchError = true;
+            return;
+          }
+        });
+      } else {
+        game = action.payload;
+      }
+      if (patchError) {
+        state.fullUpdateRequired = true;
+      } else {
+        state.fullUpdateRequired = false;
+        state.error = null;
+        state.games[id] = game;
+      }
+      state.loading = false;
+    });
+    builder.addCase(fetchGame.rejected, (state, action) => {
+      state.fullUpdateRequired = true;
+      state.loading = false;
+      state.error = action.error;
+    });
+  }
+});
+
+export const { setSelectedId } = 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 selectGame = createSelector(
+  [gamesRoot, selectSelectedId],
+  (root, id) => root.games[id]
+);
+
+const selectLiveData = createSelector(
+  selectGame,
+  game => game.liveData
+);
+
+const selectPlays = createSelector(
+  selectLiveData,
+  data => data.plays
+);
+
+export const selectCurrentPlay = createSelector(
+  selectPlays,
+  plays => plays.currentPlay
+);
+
+export const selectAllPlays = createSelector(
+  selectPlays,
+  plays => plays.allPlays
+);
+
+export const selectBoxscore = createSelector(
+  selectLiveData,
+  data => data.boxscore?.teams
+);
+
+export const selectLineScore = createSelector(
+  selectLiveData,
+  data => data.linescore
+);
+
+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 selectTeams = createSelector(
+  selectGameData,
+  gameData => gameData.teams
+);
+
+export const selectVenue = createSelector(
+  selectGameData,
+  gameData => gameData.venue
+);
+
+export const selectStartTime = createSelector(
+  selectGameData,
+  gameData => gameData.datetime?.dateTime
+);
+
+export const selectProbablePitchers = createSelector(
+  selectGameData,
+  gameData => gameData.probablePitchers
+);
+
+export default gamesSlice.reducer;

package/src/features/keys.js

@@ -0,0 +1,38 @@
+import { createSlice } from '@reduxjs/toolkit';
+import screen from '../screen';
+
+export const keysSlice = createSlice({
+  name: 'keys',
+  initialState: [{ key: 'Q', label: 'Quit' }],
+  reducers: {
+    addKeyListener: {
+      reducer: (state, action) => {
+        if (action.payload) {
+          state.push(action.payload);
+        }
+      },
+      prepare: (key, listener, help) => {
+        screen.key(key, listener);
+        return { payload: help };
+      }
+    },
+    removeKeyListener: {
+      reducer: (state, action) => {
+        if (action.payload) {
+          const idx = state.findIndex(item => item.key === action.payload.key);
+          if (idx >= 0) {
+            state.splice(idx, 1);
+          }
+        }
+      },
+      prepare: (key, listener, help) => {
+        screen.unkey(key, listener);
+        return { payload: help };
+      }
+    }
+  }
+});
+
+export const { addKeyListener, removeKeyListener } = keysSlice.actions;
+
+export default keysSlice.reducer;