fix: use logos from api response

instead of trying to construct logos based on a pre-defined url (which
doesn't always work), this now uses the logo url that comes back as part
of api responses.

app/api/gamecenter/types.ts

@@ -84,7 +84,7 @@ export type GamecenterBoxscoreLiveGame = GamecenterBaseResponse & {
 };
 
 export type GamecenterLandingFinishedGame = GamecenterBaseResponse & {
-  readonly gameState: "OFF";
+  readonly gameState: "OFF" | "FINAL";
   readonly homeTeam: GamecenterLandingFinishedTeam;
   readonly awayTeam: GamecenterLandingFinishedTeam;
   readonly summary: GamecenterLandingSummary;

app/api/standings/types.ts

@@ -17,6 +17,10 @@ export type Standings = {
   readonly teamName: {
     readonly default: string;
   };
+  readonly teamCommonName: {
+    readonly default: string;
+  };
+  readonly teamLogo: string;
   readonly wins: number;
   readonly ties: number;
   readonly points: number;

app/components/GameCardContents/FinalGameCardContents/index.tsx

@@ -11,7 +11,7 @@ export const FinalGameCardContents = ({ game }: FinalGameCardContentsProps) => {
   return (
     <>
       <TeamInfo
-        teamAbbrev={game.homeTeam.abbreviation}
+        logoUrl={game.homeTeam.logo}
         teamName={game.homeTeam.name}
         isGoaliePulled={false}
         isOnPowerPlay={false}
@@ -28,7 +28,7 @@ export const FinalGameCardContents = ({ game }: FinalGameCardContentsProps) => {
         <TeamScore score={game.gameStats.awayTeam.score} />
       </div>
       <TeamInfo
-        teamAbbrev={game.awayTeam.abbreviation}
+        logoUrl={game.awayTeam.logo}
         teamName={game.awayTeam.name}
         isGoaliePulled={false}
         isOnPowerPlay={false}

app/components/GameCardContents/LiveGameCardContents/index.tsx

@@ -11,7 +11,7 @@ export const LiveGameCardContents = ({ game }: LiveGameCardContentsProps) => {
   return (
     <>
       <TeamInfo
-        teamAbbrev={game.homeTeam.abbreviation}
+        logoUrl={game.homeTeam.logo}
         teamName={game.homeTeam.name}
         isGoaliePulled={game.gameSituation.homeTeam === "en"}
         isOnPowerPlay={game.gameSituation.homeTeam === "pp"}
@@ -30,7 +30,7 @@ export const LiveGameCardContents = ({ game }: LiveGameCardContentsProps) => {
         <TeamScore score={game.gameStats.awayTeam.score} />
       </div>
       <TeamInfo
-        teamAbbrev={game.awayTeam.abbreviation}
+        logoUrl={game.awayTeam.logo}
         teamName={game.awayTeam.name}
         isGoaliePulled={game.gameSituation.awayTeam === "en"}
         isOnPowerPlay={game.gameSituation.awayTeam === "pp"}

app/components/GameCardContents/ScheduledGameCardContents/index.tsx

@@ -12,7 +12,7 @@ export const ScheduledGameCardContents = ({
   return (
     <>
       <TeamInfo
-        teamAbbrev={game.homeTeam.abbreviation}
+        logoUrl={game.homeTeam.logo}
         teamName={game.homeTeam.name}
         isGoaliePulled={false}
         isOnPowerPlay={false}
@@ -24,7 +24,7 @@ export const ScheduledGameCardContents = ({
         </p>
       </div>
       <TeamInfo
-        teamAbbrev={game.awayTeam.abbreviation}
+        logoUrl={game.awayTeam.logo}
         teamName={game.awayTeam.name}
         isGoaliePulled={false}
         isOnPowerPlay={false}

app/components/ScoringDetail/index.tsx

@@ -49,6 +49,7 @@ export const ScoringDetail = ({
     primaryAssist,
     secondaryAssist,
     teamAbbrev,
+    teamLogoUrl,
     goalType,
     highlightClip,
   } = scoringPlay;
@@ -70,7 +71,7 @@ export const ScoringDetail = ({
               <span className="flex flex-row items-center">
                 <TeamLogo
                   size="sm"
-                  teamAbbreviation={teamAbbrev}
+                  logoUrl={teamLogoUrl}
                   teamName={teamAbbrev}
                 />
                 <AssistInfo

app/components/Standings/StandingsSection/index.tsx

@@ -54,7 +54,7 @@ export const StandingsSection = ({
               <Cell className="w-1/4">
                 <div className="flex items-center justify-center gap-2">
                   <TeamLogo
-                    teamAbbreviation={s.teamAbbrev}
+                    logoUrl={s.teamLogoUrl}
                     teamName={s.teamName}
                     size="sm"
                   />

app/components/Table/TeamNameTableCell/index.tsx

@@ -14,7 +14,7 @@ export const TeamNameTableCell = ({
   return (
     <TableCell>
       <div className="flex">
-        <TeamLogo teamAbbreviation={team.abbreviation} teamName={team.name} />
+        <TeamLogo logoUrl={team.logo} teamName={team.name} />
         <div className="items-center px-2 text-left text-sm">
           {team.name}
           <p className="text-xs">{shotsOnGoal} SOG</p>

app/components/TeamInfo/index.tsx

@@ -4,20 +4,20 @@ import { TeamName } from "../TeamName";
 export type TeamInfoProps = {
   readonly isGoaliePulled: boolean;
   readonly isOnPowerPlay: boolean;
-  readonly teamAbbrev: string;
+  readonly logoUrl: string;
   readonly teamName: string;
   readonly teamRecord: string;
 };
 
 export const TeamInfo = ({
   isGoaliePulled,
   isOnPowerPlay,
-  teamAbbrev,
+  logoUrl,
   teamName,
   teamRecord,
 }: TeamInfoProps) => (
   <div className="flex w-1/3 flex-col items-center text-center">
-    <TeamLogo teamAbbreviation={teamAbbrev} teamName={teamName} size="lg" />
+    <TeamLogo logoUrl={logoUrl} teamName={teamName} size="lg" />
     <TeamName
       isGoaliePulled={isGoaliePulled}
       isOnPowerPlay={isOnPowerPlay}

app/components/TeamInfo/test.tsx

@@ -5,7 +5,7 @@ describe("TeamInfo", () => {
   beforeEach(() => {
     render(
       <TeamInfo
-        teamAbbrev="VAN"
+        logoUrl="logoUrl"
         teamName="Canucks"
         teamRecord="35-28-10"
         isGoaliePulled={false}

app/components/TeamLogo/index.tsx

@@ -1,7 +1,7 @@
 import type { Sizes } from "../sizes";
 
 export type TeamLogoProps = {
-  readonly teamAbbreviation: string;
+  readonly logoUrl: string;
   readonly teamName: string;
   readonly size?: Sizes;
 };
@@ -21,11 +21,7 @@ const heightVariants: SizeMap = {
   sm: "32px",
 };
 
-export const TeamLogo = ({
-  teamAbbreviation,
-  teamName,
-  size = "sm",
-}: TeamLogoProps) => {
+export const TeamLogo = ({ logoUrl, teamName, size = "sm" }: TeamLogoProps) => {
   const sizeVariants: SizeMap = {
     lg: "h-16 w-16",
     md: "h-12 w-12",
@@ -35,7 +31,7 @@ export const TeamLogo = ({
   return (
     <img
       alt={`${teamName} logo`}
-      src={`https://assets.nhle.com/logos/nhl/svg/${teamAbbreviation}_light.svg`}
+      src={logoUrl}
       className={`${sizeVariants[size]}`}
       width={widthVariants[size]}
       height={heightVariants[size]}

app/components/TeamLogo/test.tsx

@@ -4,7 +4,7 @@ import { TeamLogo } from "./index";
 describe("TeamLogo", () => {
   describe("when there is a logo for the team", () => {
     beforeEach(() => {
-      render(<TeamLogo teamAbbreviation="VAN" teamName="Canucks" />);
+      render(<TeamLogo logoUrl="logoUrl" teamName="Canucks" />);
     });
 
     it("renders the team logo", () => {

app/components/types.ts

@@ -19,6 +19,7 @@ export type ScoringPlay = {
     readonly headshot: string;
   };
   readonly teamAbbrev: string;
+  readonly teamLogoUrl: string;
   readonly highlightClip?: number;
   readonly awayScore: number;
   readonly homeScore: number;
@@ -92,6 +93,7 @@ export type Team = {
   readonly id: number;
   readonly name: string;
   readonly record: string;
+  readonly logo: string;
 };
 
 export type TeamRecords = Record<string, string>;
@@ -163,6 +165,7 @@ export type TeamAbbreviation =
 export type StandingsRecord = {
   readonly teamAbbrev: string;
   readonly teamName: string;
+  readonly teamLogoUrl: string;
   readonly gamesPlayed: number;
   readonly wins: number;
   readonly regulationWins: number;

app/data/mocks.ts

@@ -25,13 +25,15 @@ export const createScoringPlay = (
     period: 1,
     timeInPeriod: "10:00",
     goalType: "ev",
+    teamLogoUrl: "teamLogoUrl",
     ...overrides,
   };
 };
 
 export const createTeam = (overrides?: Partial<Team>): Team => {
   return {
     abbreviation: "VAN",
+    logo: "https://picsum.photos/200",
     id: 23,
     name: "Canucks",
     record: "0-0",

app/data/normalization.ts

@@ -37,6 +37,7 @@ const normalizeTeam: NormalizeTeam = (team, record) => {
     id: team.id,
     name: team.name.default,
     record,
+    logo: team.logo,
   };
 };
 

app/data/normalization/gameDetails/index.ts

@@ -33,6 +33,7 @@ const normalizeBaseTeam = (team: GamecenterBaseTeam): Team => {
     id: team.id,
     name: team.name.default,
     record: "",
+    logo: team.logo,
   };
 };
 
@@ -129,10 +130,16 @@ const normalizeAssist = (
   };
 };
 
-const normalizeGoal = (
-  g: GamecenterLandingSummaryScoringGoal,
-  period: number
-): ScoringPlay => {
+type NormalizeGoalOptions = {
+  readonly goal: GamecenterLandingSummaryScoringGoal;
+  readonly period: number;
+  readonly scoringTeam: GamecenterBaseTeam;
+};
+const normalizeGoal = ({
+  goal: g,
+  period,
+  scoringTeam,
+}: NormalizeGoalOptions): ScoringPlay => {
   const goalType = g.goalModifier === "empty-net" ? "en" : g.strength;
   return {
     awayScore: g.awayScore,
@@ -147,8 +154,9 @@ const normalizeGoal = (
     highlightClip: g.highlightClip,
     homeScore: g.homeScore,
     leadingTeamAbbrev: g.leadingTeamAbbrev?.default,
-    teamAbbrev: g.teamAbbrev.default,
     period,
+    teamAbbrev: g.teamAbbrev.default,
+    teamLogoUrl: scoringTeam.logo,
     goalType,
     timeInPeriod: g.timeInPeriod,
     primaryAssist: normalizeAssist(g.assists[0]),
@@ -165,7 +173,14 @@ const normalizeScoringPlays = (
 
   return response.summary.scoring.reduce<ScoringPlays>((accum, scoring) => {
     accum[scoring.period] = scoring.goals.map((g) =>
-      normalizeGoal(g, scoring.period)
+      normalizeGoal({
+        goal: g,
+        period: scoring.period,
+        scoringTeam:
+          g.teamAbbrev.default === response.awayTeam.abbrev
+            ? response.awayTeam
+            : response.homeTeam,
+      })
     );
     return accum;
   }, {});

app/data/normalization/standings/index.ts

@@ -7,6 +7,7 @@ import type { Standings, StandingsRecord } from "~/components/types";
 const normalizeStanding = (s: ApiStandings): StandingsRecord => {
   return {
     teamAbbrev: s.teamAbbrev.default,
+    teamLogoUrl: s.teamLogo,
     gamesPlayed: s.gamesPlayed,
     losses: s.losses,
     otLosses: s.otLosses,

stories/TeamInfo.stories.tsx

@@ -14,7 +14,7 @@ export const Default: Story = {
   args: {
     isGoaliePulled: false,
     isOnPowerPlay: false,
-    teamAbbrev: "VAN",
+    logoUrl: "https://assets.nhle.com/logos/nhl/svg/VAN_light.svg",
     teamName: "Canucks",
   },
 };
@@ -23,7 +23,7 @@ export const PowerPlay: Story = {
   args: {
     isGoaliePulled: false,
     isOnPowerPlay: true,
-    teamAbbrev: "VAN",
+    logoUrl: "https://assets.nhle.com/logos/nhl/svg/VAN_light.svg",
     teamName: "Canucks",
   },
 };
@@ -32,7 +32,7 @@ export const EmptyNet: Story = {
   args: {
     isGoaliePulled: true,
     isOnPowerPlay: false,
-    teamAbbrev: "VAN",
+    logoUrl: "https://assets.nhle.com/logos/nhl/svg/VAN_light.svg",
     teamName: "Canucks",
   },
 };

stories/TeamLogo.stories.tsx

@@ -4,45 +4,6 @@ import { TeamLogo } from "~/components/TeamLogo";
 
 const meta: Meta<typeof TeamLogo> = {
   component: TeamLogo,
-  argTypes: {
-    teamAbbreviation: {
-      options: [
-        "ANA",
-        "ARI",
-        "BOS",
-        "BUF",
-        "CAR",
-        "CBJ",
-        "CGY",
-        "CHI",
-        "COL",
-        "DAL",
-        "DET",
-        "EDM",
-        "FLA",
-        "LAK",
-        "MIN",
-        "MTL",
-        "NJD",
-        "NSH",
-        "NYI",
-        "NYR",
-        "OTT",
-        "PHI",
-        "PIT",
-        "SEA",
-        "SJS",
-        "STL",
-        "TBL",
-        "TOR",
-        "VAN",
-        "VGK",
-        "WPG",
-        "WSH",
-      ],
-      control: { type: "select" },
-    },
-  },
 };
 
 export default meta;
@@ -51,7 +12,7 @@ type Story = StoryObj<typeof TeamLogo>;
 
 export const Default: Story = {
   args: {
-    teamAbbreviation: "VAN",
     teamName: "Canucks",
+    logoUrl: "https://assets.nhle.com/logos/nhl/svg/VAN_light.svg",
   },
 };