Team logos working

website/src/components/TVNetworkLogo.tsx

@@ -17,7 +17,7 @@ import usaLogo from '../images/tvLogos/usa.png';
 import {TVNetwork} from '../models';
 
 function getTvNetworkLogo(network: TVNetwork) {
-  switch (network.toLowerCase()) {
+  switch (network.toUpperCase()) {
     case TVNetwork.ABC:
       return abcLogo;
     case TVNetwork.ACCN:

website/src/components/TeamLogo.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import defaultLogo from '../images/defaultTeamLogo.png';
+import {Team} from '../models';
+
+const teamLogos = import.meta.glob('../images/teamLogos/*.png', {eager: true});
+
+export const TeamLogo: React.FC<{
+  readonly team: Team;
+  readonly className: string;
+}> = ({team, className}) => {
+  // TODO: Is there a less hacky way to do this? I don't want to have to import / load all images.
+  const logoModule = teamLogos[`../images/teamLogos/${team.abbreviation}.png`] as {default: string};
+  const logo = logoModule ? logoModule.default : defaultLogo;
+
+  return <img className={className} src={logo} alt={`${team.name} logo`} />;
+};

website/src/components/explorables/Victory.jsx

@@ -9,7 +9,7 @@ import {
   VictoryVoronoiContainer,
 } from 'victory';
 
-import schedule from '../../resources/schedule';
+import schedule from '../../resources/schedule.json';
 
 import './Victory.css';
 

website/src/components/explorables/WinPercentage.jsx

@@ -12,7 +12,7 @@ import ohioStateSchedule from '../../resources/explorables/winPercentage/ohioSta
 // import oldDominionSchedule from '../../resources/explorables/winPercentage/oldDominion.json';
 // import texasSchedule from '../../resources/explorables/winPercentage/texas.json';
 // import uscSchedule from '../../resources/explorables/winPercentage/usc.json';
-import schedule from '../../resources/schedule';
+import schedule from '../../resources/schedule.json';
 import {LineChart} from '../charts/LineChart';
 import {Note} from './Note';
 import {Paragraph} from './Paragraph';

website/src/components/explorables/WinPercentage_old.js

@@ -2,7 +2,7 @@ import * as d3 from 'd3';
 import _ from 'lodash';
 import React, {Component} from 'react';
 
-import schedule from '../../resources/schedule';
+import schedule from '../../resources/schedule.json';
 import {LineChart} from '../charts/LineChart';
 // import {Tooltip} from '../charts/Tooltip';
 

website/src/components/explorables/YardPoints.jsx

@@ -4,7 +4,7 @@ import React, {Component} from 'react';
 import {findDOMNode} from 'react-dom';
 import TweetEmbed from 'react-tweet-embed';
 
-import schedule from '../../resources/schedule';
+import schedule from '../../resources/schedule.json';
 import {Tooltip} from '../charts/Tooltip';
 import {Note} from './Note';
 import {Paragraph} from './Paragraph';

website/src/components/gameSummary/CompletedGameSummary/TotalScore/index.jsx

@@ -15,7 +15,7 @@ import {
   TotalScoreWrapper,
 } from './index.styles';
 
-const Team = ({team, ranking, record, homeOrAway}) => {
+const TeamInfo = ({team, ranking, record, homeOrAway}) => {
   return (
     <TeamWrapper className={homeOrAway}>
       <TeamImage team={team} className={homeOrAway} />
@@ -31,7 +31,7 @@ const Team = ({team, ranking, record, homeOrAway}) => {
   );
 };
 
-Team.propTypes = {
+TeamInfo.propTypes = {
   team: PropTypes.object.isRequired,
   ranking: PropTypes.number,
   homeOrAway: PropTypes.string.isRequired,
@@ -97,11 +97,21 @@ export const TotalScore = ({game, homeTeam, awayTeam}) => {
           </TotalScoreWrapper>
         ) : (
           <TotalScoreWrapper>
-            <Team team={awayTeam} ranking={awayApRanking} record={awayRecord} homeOrAway="away" />
+            <TeamInfo
+              team={awayTeam}
+              ranking={awayApRanking}
+              record={awayRecord}
+              homeOrAway="away"
+            />
             <Score>
               {game.score.away} - {game.score.home}
             </Score>
-            <Team team={homeTeam} ranking={homeApRanking} record={homeRecord} homeOrAway="home" />
+            <TeamInfo
+              team={homeTeam}
+              ranking={homeApRanking}
+              record={homeRecord}
+              homeOrAway="home"
+            />
           </TotalScoreWrapper>
         )
       }

website/src/components/gameSummary/FutureGameSummary/index.jsx

@@ -21,7 +21,7 @@ import {
   TeamWrapper,
 } from './index.styles';
 
-const Team = ({team, ranking, record, homeOrAway}) => {
+const TeamInfo = ({team, ranking, record, homeOrAway}) => {
   return (
     <TeamWrapper className={homeOrAway}>
       <TeamImage team={team} className={homeOrAway} />
@@ -37,7 +37,7 @@ const Team = ({team, ranking, record, homeOrAway}) => {
   );
 };
 
-Team.propTypes = {
+TeamInfo.propTypes = {
   team: PropTypes.object.isRequired,
   ranking: PropTypes.number,
   homeOrAway: PropTypes.string.isRequired,
@@ -102,9 +102,19 @@ export const FutureGameSummary = ({game, homeTeam, awayTeam}) => {
             </TeamsWrapper>
           ) : (
             <TeamsWrapper>
-              <Team team={awayTeam} ranking={awayApRanking} record={awayRecord} homeOrAway="away" />
+              <TeamInfo
+                team={awayTeam}
+                ranking={awayApRanking}
+                record={awayRecord}
+                homeOrAway="away"
+              />
               <AtOrVersus>{atOrVs}</AtOrVersus>
-              <Team team={homeTeam} ranking={homeApRanking} record={homeRecord} homeOrAway="home" />
+              <TeamInfo
+                team={homeTeam}
+                ranking={homeApRanking}
+                record={homeRecord}
+                homeOrAway="home"
+              />
             </TeamsWrapper>
           )
         }

website/src/components/gameSummary/GameSummary.jsx

@@ -2,8 +2,8 @@ import clone from 'lodash/clone';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import schedule from '../../resources/schedule';
-import teams from '../../resources/teams';
+import schedule from '../../resources/schedule.json';
+import teams from '../../resources/teams.json';
 import {CompletedGameSummary} from './CompletedGameSummary';
 import {FutureGameSummary} from './FutureGameSummary';
 

website/src/lib/constants.js

@@ -1,4 +1,4 @@
-import theme from '../resources/theme';
+import theme from '../resources/theme.json';
 
 export const LATEST_YEAR = 2037;
 export const CURRENT_SEASON = 2022;

website/src/lib/matchupHistory.js

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 
-import schedule from '../resources/schedule';
+import schedule from '../resources/schedule.json';
 import {CURRENT_SEASON} from './constants';
 
 /**