Merge pull request #31 from danielvanc/dev

Dev
danielvanc · Jan 24, 2025 · f4b3999 · f4b3999
2 parents 3354748 + 28967fb
commit f4b3999
Show file tree

Hide file tree

Showing 12 changed files with 3,218 additions and 3,855 deletions.
diff --git a/README.md b/README.md
@@ -7,8 +7,8 @@ An NBA Stats app built with [React 19](https://react.dev/), [React Router v7](ht
 - [x] See latest team scores from today (or yesterday or most recent whichever is most relevant) on homepage)
 - [x] Switch between your favourite teams and have your favourite team preferences saved for next time you visit (not currently persisted accross devices)
 - [ ] Switch between teams to view scores and stats relevant to that team
-- [ ] View teams standings
-- [ ] View upcoming games
+- [x] View teams standings
+- [x] View upcoming games
 - [ ] View top stats for each individual game
 - [ ] View latest (top) news accross all teams
 - [ ] View latest (top) news relevant to that team

diff --git a/app/components/latestGames.tsx b/app/components/latestGames.tsx
@@ -1,4 +1,4 @@
-import { getGamesHeading, type TodaysGames } from "~/utils/games";
+import { getCDNLogo, getGamesHeading, type TodaysGames } from "~/utils/games";
 import GameDateInfo from "./gameDateInfo";
 
 export default function LatestGames({ data }: { data: TodaysGames }) {
@@ -21,7 +21,7 @@ export default function LatestGames({ data }: { data: TodaysGames }) {
                 </span>
                 <span className="mr-3 sm:ml-3 sm:mr-0 absolute sm:relative left-10 sm:left-auto top-1/2 transform sm:transform-none -translate-y-1/2">
                   <img
-                    src={`https://cdn.nba.com/logos/nba/${game.awayTeam.teamId}/global/L/logo.svg`}
+                    src={getCDNLogo(game.awayTeam.teamId)}
                     alt=""
                     className="w-10 h-10 inline-block mr-2"
                   />
@@ -33,7 +33,7 @@ export default function LatestGames({ data }: { data: TodaysGames }) {
               <div className="sm:w-2/5 text-left flex items-center [&>svg]:min-w-[45px] [&>svg]:min-h-[45px]">
                 <span className="absolute sm:relative right-10 sm:right-auto transform -translate-y-1/2 sm:transform-none">
                   <img
-                    src={`https://cdn.nba.com/logos/nba/${game.homeTeam.teamId}/global/L/logo.svg`}
+                    src={getCDNLogo(game.homeTeam.teamId)}
                     alt=""
                     className="w-10 h-10 inline-block mr-2"
                   />

diff --git a/app/components/standings-list.tsx b/app/components/standings-list.tsx
@@ -1,4 +1,4 @@
-import { TeamTableRow } from "../utils/games";
+import { getCDNLogo, TeamTableRow } from "../utils/games";
 export default function StandingsList({
   data,
   heading,
@@ -24,7 +24,7 @@ export default function StandingsList({
           >
             <span className="flex items-center space-x-1">
               <img
-                src={`https://cdn.nba.com/logos/nba/${team.teamId}/global/L/logo.svg`}
+                src={getCDNLogo(team.teamId)}
                 alt=""
                 className="w-7 h-7 inline-block mr-2"
               />

diff --git a/app/components/upcomingGames.tsx b/app/components/upcomingGames.tsx
@@ -0,0 +1,55 @@
+import { getCDNLogo, type UpcomingGamesType } from "~/utils/games";
+import { format } from "date-fns";
+
+export default function UpcomingGames({ data }: { data: UpcomingGamesType[] }) {
+  return (
+    <section>
+      <h2 className="section-heading">Upcoming Games</h2>
+      <ul className="bg-gray-100 bg-opacity-10 backdrop-filter backdrop-blur-lg shadow rounded-lg text-white border-faded border-[1px]">
+        {data.map((game, index) => (
+          <li
+            key={`upcoming-${game.gameId}-${index}`}
+            className="border-faded border-b-[1px] relative text-sm"
+          >
+            <div className="flex flex-col sm:flex-row items-center p-2 md:p-2">
+              <div className="sm:w-2/5 sm:text-right flex flex-row-reverse sm:flex-row items-center justify-end [&>svg]:min-w-[45px] [&>svg]:min-h-[45px]">
+                <span className="sm:max-w-32 xl:max-w-none xl:whitespace-nowrap">
+                  {game.awayTeam.teamCity} {game.awayTeam.teamName}
+                </span>
+                <span className="mr-3 sm:ml-3 sm:mr-0 absolute sm:relative left-10 sm:left-auto top-1/2 transform sm:transform-none -translate-y-1/2">
+                  <img
+                    src={getCDNLogo(game.awayTeam.teamId)}
+                    alt=""
+                    className="w-10 h-10 inline-block mr-2"
+                  />
+                </span>
+              </div>
+              <div className="mx-3 sm:w-1/5 text-center">
+                <div className="w-full text-sm">
+                  <span className="opacity-30">
+                    {format(game.gameDateTimeEst, "HH:mm")}
+                  </span>
+                  <span className="block">
+                    {format(game.gameDateTimeEst, "dd / MM")} (ET)
+                  </span>
+                </div>
+              </div>
+              <div className="sm:w-2/5 text-left flex items-center [&>svg]:min-w-[45px] [&>svg]:min-h-[45px]">
+                <span className="absolute sm:relative right-10 sm:right-auto transform -translate-y-1/2 sm:transform-none">
+                  <img
+                    src={getCDNLogo(game.homeTeam.teamId)}
+                    alt=""
+                    className="w-10 h-10 inline-block mr-2"
+                  />
+                </span>
+                <span className="ml-3 sm:max-w-32 xl:max-w-none xl:whitespace-nowrap">
+                  {game.homeTeam.teamCity} {game.homeTeam.teamName}
+                </span>
+              </div>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
diff --git a/app/config/api.ts b/app/config/api.ts
@@ -0,0 +1,7 @@
+export const endpoints = {
+  latestGames:
+    "https://cdn.nba.com/static/json/liveData/scoreboard/todaysScoreboard_00.json",
+  latestStandings: "https://stats.nba.com/stats/leaguestandingsv3",
+  upcomingGames:
+    "https://cdn.nba.com/static/json/staticData/scheduleLeagueV2_1.json",
+};
diff --git a/app/mocks/handlers.ts b/app/mocks/handlers.ts
@@ -1,11 +1,11 @@
-import { leagueSchedule } from "./leagueSchedule";
+import { upcomingGames } from "./upcomingGames";
 import { leagueStandings } from "./leagueStandings";
 import { miscHandlers } from "./miscHandlers";
 import { scoresTodayAllTeams } from "./scoresToday";
 
 export const handlers = [
   ...miscHandlers,
   ...scoresTodayAllTeams,
-  ...leagueSchedule,
   ...leagueStandings,
+  ...upcomingGames,
 ];