playball 3.0.0 → 3.1.1

package/src/components/FinishedGame.jsx

@@ -1,76 +0,0 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import { selectLineScore, selectTeams, selectDecisions, selectBoxscore, selectGameStatus } from '../features/games';
-import LineScore from './LineScore';
-
-const getPlayer = (id, boxscore) => {
-  const homePlayer = boxscore.home?.players?.['ID' + id];
-  if (homePlayer !== undefined) {
-    return homePlayer;
-  }
-  return boxscore.away?.players['ID' + id];
-};
-
-const formatDecisions = (decisions, boxscore) => {
-  if (!decisions) {
-    return '';
-  }
-  const content = [];
-  const winner = decisions.winner;
-  if (winner) {
-    const pitcher = getPlayer(winner.id, boxscore);
-    content.push(`Win:  ${pitcher.person.fullName} (${pitcher.seasonStats?.pitching?.wins}-${pitcher.seasonStats?.pitching?.losses})`);
-  }
-  const loser = decisions.loser;
-  if (loser) {
-    const pitcher = getPlayer(loser.id, boxscore);
-    content.push(`Loss: ${pitcher.person.fullName} (${pitcher.seasonStats?.pitching?.wins}-${pitcher.seasonStats?.pitching?.losses})`);
-  }
-  const save = decisions.save;
-  if (save) {
-    const pitcher = getPlayer(save.id, boxscore);
-    content.push(`Save: ${pitcher.person.fullName} (${pitcher.seasonStats?.pitching.saves})`);
-  }
-  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 boxscore = useSelector(selectBoxscore);
-  const decisions = useSelector(selectDecisions);
-  const linescore = useSelector(selectLineScore);
-  const status = useSelector(selectGameStatus);
-  const teams = useSelector(selectTeams);
-
-  const awayTeam = `${teams.away.teamName}\n(${teams.away.record.wins}-${teams.away.record.losses})`;
-  const homeTeam = `${teams.home.teamName}\n(${teams.home.record.wins}-${teams.home.record.losses})`;
-  return (
-    <element>
-      <element height='60%'>
-        <box content={awayTeam} width='33%-1' top='50%' align='center' />
-        <box content={formatScore(status, linescore)} width='33%-1' left='33%' top='50%' align='center' />
-        <box content={homeTeam} width='34%' top='50%' left='66%' align='center' />
-      </element>
-      <element top='60%+1' height={3}>
-        <LineScore align='center' final />
-      </element>
-      <element top='60%+5' left='50%-20'>
-        <box content={formatDecisions(decisions, boxscore)} />
-      </element>
-    </element>
-  );
-}
-
-export default FinishedGame;

package/src/components/Game.jsx

@@ -1,60 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-
-import { fetchGame, selectGame, selectSelectedId, selectFullUpdateRequired } from '../features/games';
-
-import PreviewGame from './PreviewGame';
-import LiveGame from './LiveGame';
-import FinishedGame from './FinishedGame';
-
-import log from '../logger';
-
-function Game() {
-  const dispatch = useDispatch();
-  const game = useSelector(selectGame);
-  const fullUpdateRequired = useSelector(selectFullUpdateRequired);
-  const id = useSelector(selectSelectedId);
-  const timerRef = useRef(null);
-  const timestampRef = useRef();
-  timestampRef.current = fullUpdateRequired ? null : game?.metaData?.timeStamp;
-
-  const updateGameData = () => {
-    dispatch(fetchGame({id, start: timestampRef.current}))
-      .unwrap()
-      .then((result) => {
-        const wait = ((result && result.metaData?.wait) || 10) * 1000;
-        timerRef.current = setTimeout(updateGameData, wait);
-      })
-      .catch(err => log.error('UPDATE_GAME_DATA:\n' + JSON.stringify(err) + '\n' + err.stack));
-  };
-
-  useEffect(() => {
-    updateGameData();
-    return () => {
-      clearTimeout(timerRef.current);
-    };
-  }, [id]);
-
-  if (!game) { 
-    return <element />;
-  }
-
-  let Wrapped = null;
-  switch (game.gameData?.status?.abstractGameCode) {
-  case 'P':
-    Wrapped = PreviewGame;
-    break;
-  case 'L':
-    Wrapped = LiveGame;
-    break;
-  case 'F':
-    Wrapped = FinishedGame;
-    break;
-  }
-
-  return (
-    <element><Wrapped /></element>
-  );
-}
-
-export default Game;

package/src/components/GameList.jsx

@@ -1,166 +0,0 @@
-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';
-
-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);
-  let content = [start, teamName(game.teams.away), teamName(game.teams.home)];
-  const gameState = game.status.abstractGameCode;
-  const detailedState = game.status.detailedState;
-  switch (gameState) {
-  case 'P':
-    break;
-  case 'L':
-    if (detailedState === 'Warmup') {
-      content[0] = detailedState;
-    } else {
-      content[0] = game.linescore.inningState + ' ' + game.linescore.currentInningOrdinal;
-      if (detailedState !== 'In Progress') {
-        content[0] += ' | ' + detailedState;
-      }
-    }
-    if (game.linescore) {
-      content[0] = content[0].padEnd(20) + ' R  H  E';
-      content[1] += game.linescore.teams.away.runs.toString().padStart(2) + 
-          game.linescore.teams.away.hits.toString().padStart(3) + 
-          game.linescore.teams.away.errors.toString().padStart(3);
-      content[2] += game.linescore.teams.home.runs.toString().padStart(2) + 
-          game.linescore.teams.home.hits.toString().padStart(3) + 
-          game.linescore.teams.home.errors.toString().padStart(3);
-    }
-    break;
-  case 'F':
-    content[0] = detailedState;
-    if (game.status.reason) {
-      content[0] += ' | ' + game.status.reason;
-    }
-    if (game.linescore) {
-      if (game.linescore.currentInning !== game.scheduledInnings) {
-        content[0] += '/' + game.linescore.currentInning;
-      }
-      content[0] = content[0].padEnd(20) + ' R  H  E';
-      content[1] += game.linescore.teams.away.runs.toString().padStart(2) + 
-        game.linescore.teams.away.hits.toString().padStart(3) + 
-        game.linescore.teams.away.errors.toString().padStart(3);
-      content[2] += game.linescore.teams.home.runs.toString().padStart(2) + 
-        game.linescore.teams.home.hits.toString().padStart(3) + 
-        game.linescore.teams.home.errors.toString().padStart(3);
-      if (game.teams.away.isWinner) {
-        content[1] = `{bold}${content[1]}{/bold}`;
-      }
-      if (game.teams.home.isWinner) {
-        content[2] = `{bold}${content[2]}{/bold}`;
-      }
-    }
-    break;
-  }
-  return content.map(s => ' ' + s).join('\n');
-};
-
-const GAME_STATE_ORDER = {
-  L: 0,
-  P: 1,
-  F: 2,
-};
-function compareGameState(a, b) {
-  return GAME_STATE_ORDER[a.status.abstractGameCode] - GAME_STATE_ORDER[b.status.abstractGameCode];
-}
-
-function compareGameInnings(a, b) {
-  const inningCompare = b.linescore.currentInning - a.linescore.currentInning;
-  if (inningCompare !== 0) {
-    return inningCompare;
-  }
-  if (a.isTopInning && !b.isTopInning) {
-    return -1;
-  }
-  if (b.isTopInning && !a.isTopInning) {
-    return 1;
-  }
-  return 0;
-}
-
-function compareGames(a, b) {
-  const stateCompare = compareGameState(a, b);
-  if (stateCompare !== 0) {
-    return stateCompare;
-  }
-
-  if (a.status.abstractGameCode === 'L') {
-    const inningCompare = compareGameInnings(a, b);
-    if (inningCompare !== 0) {
-      return inningCompare;
-    }
-  }
-
-  return 0;
-}
-
-function GameList({ onGameSelect }) {
-  const dispatch = useDispatch();
-  const schedule = useSelector(selectData);
-  const loading = useSelector(selectLoading);
-  const timerRef = useRef(null);
-  const [date, setDate] = useState(new Date());
-  let games = [];
-  if (schedule && schedule.dates.length > 0) {
-    games = schedule.dates[0].games.slice().sort(compareGames);
-  }
-
-  useEffect(() => {
-    dispatch(fetchSchedule(date));
-    timerRef.current = setInterval(() => dispatch(fetchSchedule(date)), 30000);
-    return () => clearInterval(timerRef.current);
-  }, [date]);
-
-  useKey('p', useCallback(() => setDate(prev => add(prev, { days: -1 })), []), { key: 'P', label: 'Prev Day' });
-  useKey('n', useCallback(() => setDate(prev => add(prev, { days: 1 })), []), { key: 'N', label: 'Next Day' });
-  useKey('t', useCallback(() => setDate(new Date()), []), { key: 'T', label: 'Today' });
-
-  const handleGameSelect = (idx) => {
-    const selected = games[idx];
-    onGameSelect(selected);
-  };
-
-  const messageStyle = {
-    left: 0,
-    top: 0,
-    height: '100%',
-    width: '100%',
-    align: 'center',
-    valign: 'middle',
-  };
-
-  return (
-    <element>
-      <box top={0} left={0} width='100%' height={1} align='center' valign='middle' style={{ bg: 'white', fg: 'black' }} content={format(date, 'PPPP')}></box>
-      <element top={2} left={0} width='100%' height='100%-2'>
-        {(!schedule && loading) && <box {...messageStyle} content='Loading...' />}
-        {(schedule && games.length === 0) && <box {...messageStyle} content='No games today' />}
-        {(schedule && games.length > 0) && (
-          <Grid 
-            items={games.map(formatGame)}
-            itemHeight={5}
-            itemMinWidth={34}
-            onSelect={handleGameSelect}
-          />
-        )}
-      </element>
-    </element>
-  );
-}
-
-GameList.propTypes = {
-  onGameSelect: PropTypes.func,
-};
-
-export default GameList;

package/src/components/Grid.jsx

@@ -1,91 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import useKey from '../hooks/useKey';
-
-function Grid({ items, itemHeight, itemMinWidth, onSelect }) {
-  const containerRef = useRef();
-  const [size, setSize] = useState([0, 0]);
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const updateSize = () => setSize([containerRef.current?.width, containerRef.current?.height]);
-  useEffect(updateSize, []);
-
-  const pos = [];
-  let row = 0;
-  let col = 0;
-  const numCols = Math.floor(size[0] / itemMinWidth);
-  const colWidth = Math.floor(size[0] / numCols);
-  for (let i = 0; i < items.length; i++) {
-    pos.push({
-      top: row,
-      left: col,
-      width: colWidth,
-      height: itemHeight,
-    });
-    col += colWidth;
-    if (col > size[0] - colWidth) {
-      col = 0;
-      row += itemHeight;
-    }
-  }
-
-  useEffect(() => {
-    const curr = pos[selectedIndex].top;
-    const total = pos[pos.length - 1].top;
-    const perc = Math.round(curr / total * 100);
-    containerRef.current.setScrollPerc(perc);
-  }, [pos, selectedIndex]);
-
-  useKey(['right', 'l'], useCallback(() => setSelectedIndex(prev => Math.min(prev + 1, items.length - 1)), [items.length]));
-  useKey(['left', 'h'], useCallback(() => setSelectedIndex(prev => Math.max(prev - 1, 0)), []));
-  useKey(['down', 'j'], useCallback(() => {
-    setSelectedIndex(prev => {
-      const next = prev + numCols;
-      if (next < items.length) {
-        return next;
-      } else {
-        return prev;
-      }
-    });
-  }, [numCols, items.length]));
-  useKey(['up', 'k'], useCallback(() => {
-    setSelectedIndex(prev => {
-      const next = prev - numCols;
-      if (next >= 0) {
-        return next;
-      } else {
-        return prev;
-      }
-    });
-  }, [numCols]));
-  useKey('enter', () => onSelect(selectedIndex));
-
-  return (
-    <box 
-      ref={containerRef} 
-      onResize={updateSize} 
-      width='100%' 
-      height='100%'
-      scrollable={true}
-    >
-      {pos.map((p, idx) => (
-        <box 
-          {...p} 
-          border={{type: selectedIndex === idx ? 'line' : 'bg'}}
-          key={items[idx]}
-          tags
-          content={items[idx]}
-          wrap={false}
-        />
-      ))}
-    </box>
-  );
-}
-
-Grid.propTypes = {
-  items: PropTypes.arrayOf(PropTypes.string),
-  itemHeight: PropTypes.number,
-  itemMinWidth: PropTypes.number,
-  onSelect: PropTypes.func,
-};
-
-export default Grid;

package/src/components/HelpBar.jsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import LoadingSpinner from './LoadingSpinner';
-
-const HelpBar = () => {
-  const keys = useSelector(state => state.keys);
-  const content = keys.map(({ key, label }) => `{inverse}${key}{/inverse}:${label}`).join('  ');
-  return (
-    <element>
-      <LoadingSpinner />
-      <box left={3} 
-        content={content} 
-        tags 
-      />
-    </element>
-  );
-};
-
-export default HelpBar;

package/src/components/InningDisplay.jsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-
-import { selectLineScore } from '../features/games';
-
-function InningDisplay() {
-  const linescore = useSelector(selectLineScore);
-  const content = [
-    linescore.isTopInning ? '▲' : '',
-    linescore.currentInning,
-    linescore.isTopInning ? '' : '▼'
-  ].join('\n');
-
-  return (
-    <box content={content} align='right' />
-  );
-}
-
-export default InningDisplay;

package/src/components/LineScore.jsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
-import { selectLineScore, selectTeams } from '../features/games';
-
-const getRuns = (inning, homeAway, isFinal) => {
-  const runs = inning[homeAway].runs;
-  if (runs !== undefined) {
-    return runs;
-  }
-  return isFinal ? 'X' : '';
-};
-
-const getTeamLine = (linescore, totalInnings, homeAway, final) => (
-  linescore.innings
-    .map(inning => getRuns(inning, homeAway, final))
-    .map(r => r.toString().padStart(2))
-    .join(' ')
-    .padEnd(totalInnings * 3) + 
-  '{bold}' + 
-  linescore.teams[homeAway].runs.toString().padStart(3) + '{/bold}' +
-  linescore.teams[homeAway].hits.toString().padStart(3) + 
-  linescore.teams[homeAway].errors.toString().padStart(3)   
-);
-
-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.oneOf(['left', 'center', 'right']), 
-  final: PropTypes.bool,
-};
-
-export default LineScore;

package/src/components/LiveGame.jsx

@@ -1,47 +0,0 @@
-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';
-
-function LiveGame()  {
-  return (
-    <element>
-      <element top={0} left={1} width='100%-1' height={3}>
-        <element left={0} width={2}>
-          <InningDisplay />
-        </element>
-        <element left={5} width='25%-5'>
-          <Count />
-        </element>
-        <element left='25%+1' width='25%'>
-          <Bases />
-        </element>
-        <element left='50%+2' width='50%-2'>
-          <LineScore />
-        </element>
-      </element>
-      <line orientation='horizontal' type='line' top={3} width='100%' />
-      <element top={4} left={1}>
-        <element width='50%-1'>
-          <element top={0} height={2}>
-            <Matchup />
-          </element>
-          <element top={3}>
-            <AtBat />
-          </element>
-        </element>
-        <line orientation='vertical' type='line' left='50%' />
-        <element left='50%+2' width='50%-2'>
-          <AllPlays />
-        </element>
-      </element>
-    </element>
-  );
-}
-
-export default LiveGame;

package/src/components/LoadingSpinner.jsx

@@ -1,49 +0,0 @@
-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 = [
-  '⠋',
-  '⠙',
-  '⠹',
-  '⠸',
-  '⠼',
-  '⠴',
-  '⠦',
-  '⠧',
-  '⠇',
-  '⠏'
-];
-
-function LoadingSpinner() { 
-  const [frame, setFrame] = useState(0);
-  const [animating, setAnimating] = useState(false);
-  const timerRef = useRef(null);
-  const scheduleLoading = useSelector(selectScheduleLoading);
-  const gameLoading = useSelector(gamesLoading);
-
-  const increment = () => {
-    setFrame(prevFrame => (prevFrame + 1) % frames.length);
-  };
-
-  const doUpdate = () => {
-    if (!animating && (gameLoading || scheduleLoading)) {
-      setAnimating(true);
-      increment();
-      timerRef.current = setInterval(increment, 50);
-    }
-    if (!gameLoading && !scheduleLoading && frame === 0) {
-      setAnimating(false);
-      clearInterval(timerRef.current);
-    }
-  };
-
-  useEffect(() => {
-    doUpdate();
-  }, [gameLoading, scheduleLoading, frame]);
-
-  return <box content={animating ? frames[frame] : ' '} />;
-}
-
-export default LoadingSpinner;

package/src/components/Matchup.jsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import { selectCurrentPlay, selectBoxscore, selectTeams } from '../features/games';
-
-const getPlayerStats = (boxscore, teams, id) => {
-  const key = 'ID' + id;
-  const homePlayers = boxscore.home.players;
-  if (homePlayers[key]) {
-    return {
-      team: teams.home,
-      player: homePlayers[key],
-    };
-  }
-  return {
-    team: teams.away,
-    player: boxscore.away.players[key],
-  };
-};
-
-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 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} />
-  );
-}
-
-export default Matchup;

package/src/components/PreviewGame.jsx

@@ -1,54 +0,0 @@
-import React from 'react';
-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.person.fullName;
-  const number = pitcher.jerseyNumber;
-  if (number) {
-    display += `, #${number}`;
-  }
-  return display;
-};
-
-const formatTeam = (teams, probables, boxscore, homeAway) => {
-  const pitcherId = probables[homeAway].id;
-  const pitcher = boxscore[homeAway].players['ID' + pitcherId];
-  let lines = [
-    teams[homeAway].teamName,
-    `(${teams[homeAway].record.wins}-${teams[homeAway].record.losses})`,
-  ];
-  if (pitcher) {
-    lines = lines.concat([
-      '',
-      formatPitcherName(pitcher),
-      `${pitcher.seasonStats?.pitching?.wins}-${pitcher.seasonStats?.pitching?.losses}`,
-      `${pitcher.seasonStats?.pitching?.era} ERA ${pitcher.seasonStats?.pitching?.strikeOuts} K`,
-    ]);
-  }
-  return lines;
-};
-
-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 = 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.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>
-  );
-}
-
-export default PreviewGame;