feat: add bg colors to player avatars

smoak · Nov 11, 2023 · 06ffcd9 · 06ffcd9 · vercel · Nov 11, 2023
1 parent 80703e4
commit 06ffcd9
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 11 deletions.
diff --git a/app/api/gamecenter/types.ts b/app/api/gamecenter/types.ts
@@ -54,7 +54,7 @@ export type GamecenterBoxscoreFinishedGame = GamecenterBaseResponse & {
   readonly homeTeam: GamecenterBoxscoreFinishedTeam;
   readonly period: number;
   readonly periodDescriptor: PeriodDescriptor;
-  readonly gameState: "OFF";
+  readonly gameState: "OFF" | "FINAL";
 };
 
 export type GamecenterBoxscoreFutureGame = GamecenterBaseResponse & {
@@ -166,4 +166,4 @@ export const isFutureGamecenterResponse = (
 export const isFinishedGamecenterResponse = (
   response: GamecenterBaseResponse
 ): response is GamecenterBoxscoreFinishedGame | GamecenterLandingFinishedGame =>
-  response.gameState === "OFF";
+  response.gameState === "OFF" || response.gameState === "FINAL";
diff --git a/app/components/PlayerAvatar/index.tsx b/app/components/PlayerAvatar/index.tsx
@@ -1,18 +1,60 @@
+import type { TeamAbbreviation } from "../types";
+
 type PlayerAvatarProps = {
+  readonly teamAbbrev: TeamAbbreviation;
   readonly playerHeadshot: string;
   readonly playerName: string;
 };
 
+type TeamAbbreviationBackgroundMap = {
+  [key in TeamAbbreviation]: string;
+};
+
 export const PlayerAvatar = ({
   playerHeadshot,
   playerName,
+  teamAbbrev,
 }: PlayerAvatarProps): JSX.Element => {
+  const backgroundVariants: TeamAbbreviationBackgroundMap = {
+    ANA: "bg-nhl-ana",
+    ARI: "bg-nhl-ari",
+    BOS: "bg-nhl-bos",
+    BUF: "bg-nhl-buf",
+    CAR: "bg-nhl-car",
+    CBJ: "bg-nhl-cbj",
+    CGY: "bg-nhl-cgy",
+    CHI: "bg-nhl-chi",
+    COL: "bg-nhl-col",
+    DAL: "bg-nhl-dal",
+    DET: "bg-nhl-det",
+    EDM: "bg-nhl-edm",
+    FLA: "bg-nhl-fla",
+    LAK: "bg-nhl-lak",
+    MIN: "bg-nhl-min",
+    MTL: "bg-nhl-mtl",
+    NJD: "bg-nhl-njd",
+    NSH: "bg-nhl-nsh",
+    NYI: "bg-nhl-nyi",
+    NYR: "bg-nhl-nyr",
+    OTT: "bg-nhl-ott",
+    PHI: "bg-nhl-phi",
+    PIT: "bg-nhl-pit",
+    SEA: "bg-nhl-sea",
+    SJS: "bg-nhl-sjs",
+    STL: "bg-nhl-stl",
+    TBL: "bg-nhl-tbl",
+    TOR: "bg-nhl-tor",
+    VAN: "bg-nhl-van",
+    VGK: "bg-nhl-vgk",
+    WPG: "bg-nhl-wpg",
+    WSH: "bg-nhl-wsh",
+  };
+
   return (
     <img
-      className="inline-block h-14 w-14 rounded-full border"
+      className={`inline-block h-14 w-14 rounded-full border ${backgroundVariants[teamAbbrev]}`}
       alt={playerName}
       src={playerHeadshot}
-      role="presentation"
     />
   );
 };
diff --git a/app/components/ScoringDetail/index.tsx b/app/components/ScoringDetail/index.tsx
@@ -1,5 +1,6 @@
 import { PlayerAvatar } from "../PlayerAvatar";
-import type { ScoringPlay } from "../types";
+import { TeamLogo } from "../TeamLogo";
+import type { ScoringPlay, TeamAbbreviation } from "../types";
 
 type ScoringDetailProps = {
   readonly scoringPlay: ScoringPlay;
@@ -44,6 +45,7 @@ export const ScoringDetail = ({
     timeInPeriod,
     primaryAssist,
     secondaryAssist,
+    teamAbbrev,
   } = scoringPlay;
 
   return (
@@ -53,15 +55,23 @@ export const ScoringDetail = ({
           <PlayerAvatar
             playerName={goalScorer.name}
             playerHeadshot={goalScorer.headshot}
+            teamAbbrev={teamAbbrev as TeamAbbreviation}
           />
           <div className="flex flex-col whitespace-nowrap pl-3">
             <span className="font-bold">
               {goalScorer.name} ({goalScorer.seasonGoals})
             </span>
-            <AssistInfo
-              primaryAssist={primaryAssist}
-              secondaryAssist={secondaryAssist}
-            />
+            <span className="flex flex-row items-center">
+              <TeamLogo
+                size="sm"
+                teamAbbreviation={teamAbbrev}
+                teamName={teamAbbrev}
+              />
+              <AssistInfo
+                primaryAssist={primaryAssist}
+                secondaryAssist={secondaryAssist}
+              />
+            </span>
           </div>
         </div>
         <div className="flex gap-6">

diff --git a/app/components/styles.ts b/app/components/styles.ts
@@ -9,7 +9,7 @@ export const teamIdToColors: Record<number, string> = {
   8: "#A71930",
   9: "#191919",
   10: "#002868",
-  12: "#CC0000",
+  12: "#CC0000", // CAR
   13: "#CF102D",
   // TBL:
   14: "#ECECEC",
@@ -20,7 +20,7 @@ export const teamIdToColors: Record<number, string> = {
   19: "#003087",
   20: "#CE1126",
   21: "#75263D",
-  22: "#00205B",
+  22: "#00205B", // TOR
   23: "#003D7D",
   24: "#111111",
   25: "#006847",

diff --git a/app/components/types.ts b/app/components/types.ts
@@ -120,3 +120,37 @@ export type GameDetails = {
   readonly scoringPlays: ScoringPlays;
   readonly periodSummaries: PeriodSummary[];
 };
+
+export type TeamAbbreviation =
+  | "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";
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -3,8 +3,40 @@ module.exports = {
   theme: {
     extend: {
       colors: {
+        "nhl-ana": "#000000",
+        "nhl-ari": "#6F263D",
         "nhl-black": "#231E1F",
+        "nhl-bos": "#000000",
         "nhl-silver": "#CED1D3",
+        "nhl-buf": "#003087",
+        "nhl-car": "#C8102E",
+        "nhl-cbj": "#041E42",
+        "nhl-cgy": "#C8102E",
+        "nhl-chi": "#CE1126",
+        "nhl-col": "#8A2432",
+        "nhl-dal": "#00823E",
+        "nhl-det": "#C8102E",
+        "nhl-edm": "#00205B",
+        "nhl-fla": "#C8102E",
+        "nhl-lak": "#000000",
+        "nhl-min": "#0E4431",
+        "nhl-mtl": "#A6192E",
+        "nhl-njd": "#CC0000",
+        "nhl-nsh": "#FFB81C",
+        "nhl-nyi": "#00468B",
+        "nhl-nyr": "#154B94",
+        "nhl-ott": "#000000",
+        "nhl-phi": "#D24303",
+        "nhl-pit": "#000000",
+        "nhl-sea": "#001425",
+        "nhl-sjs": "#006272",
+        "nhl-stl": "#003087",
+        "nhl-tbl": "#00205B",
+        "nhl-tor": "#00205B",
+        "nhl-van": "#00205B",
+        "nhl-vgk": "#333F48",
+        "nhl-wpg": "#041E42",
+        "nhl-wsh": "#C8102E",
         "nhl-gray": {
           50: "#ECECEC",
           100: "#E3E4E6",