clean up sports tab

src/assets/main.css

@@ -6,7 +6,7 @@ body {
 
   ::-webkit-scrollbar {
     width: 5px;
-    height: 10px;
+    height: 5px;
     border-radius: var(--radius-lg);
     background-color: white;
   }

src/components/FantasyStatus.tsx

@@ -18,25 +18,18 @@ export default function FantasyStatus() {
       )) as NFLAPIData;
 
       // rosters
-      const ownMatchup = data.matchups[1] as NFLMatchupState;
+      const ownMatchup = data.team2 as NFLMatchupState;
-      const oppMatchup = data.matchups[0] as NFLMatchupState;
+      const oppMatchup = data.team1 as NFLMatchupState;
 
-      setPersonalRoster({
+      setPersonalRoster(ownMatchup);
-        ...ownMatchup,
+      setOpposingRoster(oppMatchup);
-        owner: data.users[1],
-      });
-      setOpposingRoster({
-        ...oppMatchup,
-        owner: data.users[0],
-      });
     }
 
     fetchData();
   }, []);
 
   return (
-    <div className="p-2">
+    <div className="mt-2 space-y-4">
-      <div className="mb-4 space-y-4">
       {personalRoster && opposingRoster && (
         <>
           <TeamRow
@@ -50,6 +43,5 @@ export default function FantasyStatus() {
         </>
       )}
     </div>
-    </div>
   );
 }

src/components/fantasy/PlayerCell.tsx

@@ -16,7 +16,7 @@ export default function PlayerCell({ player }: { player: NFLPlayer | null }) {
     return (
       <div className="flex-wrap flex space-x-2">
         <div>
-          <h1 className="font-semibold text-1xl">{player.abv_name}</h1>
+          <h1 className="font-semibold text-1xl">{player.full_name}</h1>
           <p>
             {player?.position} · {player?.team} {injuryStatus && "·"}{" "}
             {player?.injury_status && (

src/components/modules/ScoreModule.tsx

@@ -1,6 +1,64 @@
 import { useEffect, useState } from "react";
 import { BillsScore, SabresScore } from "../../utils/types";
 
+interface TeamRowProps {
+  functionClick?: () => void;
+  width?: number;
+  venue: string;
+  date: string;
+  homeTeam: {
+    name: string;
+    abbreviation: string;
+    score: number;
+    logo: string;
+  };
+  awayTeam: {
+    name: string;
+    abbreviation: string;
+    score: number;
+    logo: string;
+  };
+}
+function TeamRow({
+  homeTeam,
+  awayTeam,
+  width = 50,
+  venue,
+  date,
+  functionClick,
+}: TeamRowProps) {
+  return (
+    <div className="flex flex-row justify-between">
+      <div className="flex flex-row py-2 space-x-2">
+        <img width={width} className="object-cover h-20" src={homeTeam.logo} />
+        <img
+          onClick={() => {
+            if (
+              (awayTeam.abbreviation === "BUF" ||
+                homeTeam.abbreviation === "BUF") &&
+              functionClick
+            ) {
+              functionClick();
+            }
+          }}
+          width={width}
+          className="object-cover h-20"
+          src={awayTeam.logo}
+        />
+      </div>
+      <div className="p-2 text-2xl flex items-end flex-col justify-center">
+        <p>
+          {homeTeam.abbreviation} {homeTeam.score} - {awayTeam.abbreviation}{" "}
+          {awayTeam.score}
+        </p>
+        <p className="text-sm">
+          {venue} - {new Date(date || Date.now()).toLocaleDateString()}
+        </p>
+      </div>
+    </div>
+  );
+}
+
 export default function ScoreModule() {
   const [billsScore, setBillsScore] = useState<BillsScore | null>(null);
   const [sabresScore, setSabresScore] = useState<SabresScore | null>(null);
@@ -31,38 +89,25 @@ export default function ScoreModule() {
   }, []);
 
   return (
-    <div className="rounded-lg w-full mb-2">
+    <div className="rounded-lg w-full">
-      <div className="flex flex-row justify-between">
+      {sabresScore?.homeTeam && sabresScore.awayTeam && (
-        <div className="flex flex-row py-2">
+        <TeamRow
-          <img
+          homeTeam={sabresScore.homeTeam}
-            onClick={() => {
+          awayTeam={sabresScore.awayTeam}
-              if (sabresScore?.homeTeam.abbreviation === "BUF")
+          date={sabresScore.date}
-                setWarpath(true);
+          venue={sabresScore.venue}
-            }}
+          functionClick={() => setWarpath(true)}
-            width="80"
-            className="shrink-0"
-            src={sabresScore?.homeTeam.logo}
         />
-          <img
+      )}
-            onClick={() => {
+      {billsScore?.homeTeam && billsScore.awayTeam && (
-              if (sabresScore?.awayTeam.abbreviation === "BUF")
+        <TeamRow
-                setWarpath(true);
+          homeTeam={billsScore.homeTeam}
-            }}
+          awayTeam={billsScore.awayTeam}
-            width="80"
+          width={50}
-            className="shrink-0"
+          date={billsScore.gameDay}
-            src={sabresScore?.awayTeam.logo}
+          venue={billsScore.venue}
         />
-        </div>
+      )}
-        <div className="p-2 text-2xl flex items-end flex-col">
-          <p>
-            {sabresScore?.homeTeam.abbreviation} {sabresScore?.homeTeam.score} -{" "}
-            {sabresScore?.awayTeam.abbreviation} {sabresScore?.awayTeam.score}
-          </p>
-          <p className="text-sm">
-            {sabresScore?.venue} -{" "}
-            {new Date(sabresScore?.date || Date.now()).toLocaleDateString()}
-          </p>
-        </div>
 
       {warpath && (
         <audio
@@ -76,59 +121,5 @@ export default function ScoreModule() {
         />
       )}
     </div>
-      <div className="flex flex-row justify-between">
-        <div className="flex flex-row space-x-6 px-4 items-center">
-          <img
-            width="80"
-            className="w-full h-[50px]"
-            src={billsScore?.homeTeam.logo}
-          />
-          <img
-            width="80"
-            className="w-full h-[50px]"
-            src={billsScore?.awayTeam.logo}
-          />
-        </div>
-        <div className="p-2 text-2xl flex items-end flex-col">
-          <p>
-            {billsScore?.homeTeam.abbreviation} {billsScore?.homeTeam.score} -{" "}
-            {billsScore?.awayTeam.abbreviation} {billsScore?.awayTeam.score}
-          </p>
-          <p className="text-sm">
-            {billsScore?.venue} -{" "}
-            {new Date(billsScore?.gameDay || Date.now()).toLocaleDateString()}
-          </p>
-        </div>
-      </div>
-      {/* <div className="flex justify-between">
-        <div>
-          <img
-            onClick={() => {
-              if (type === "sabres") {
-                setWarpath(true);
-              }
-            }}
-            width="100"
-            className="p-4"
-            src={IMAGES[type]}
-          />
-        </div>
-        <div className="flex justify-center items-center px-6">
-          <div>
-            <h1 className="text-2xl">
-              {type === "bills"
-                ? billsScore?.name
-                : `${sabresScore?.awayTeam.abbrev || "BUF"} @ ${sabresScore?.homeTeam.abbrev || "BUF"}`}
-            </h1>
-            <p className="float-right text-[20px]">
-              {type === "bills"
-                ? billsScore?.score
-                : `${sabresScore && sabresScore?.sabresScore > sabresScore?.oppScore ? "W" : "L"} ${sabresScore?.sabresScore || 0}-${sabresScore?.oppScore || 0}`}
-            </p>
-          </div>
-        </div>
-      </div>
-       */}
-    </div>
   );
 }

src/pages/App.tsx

@@ -6,9 +6,10 @@ import Home from "./Home";
 import ScoreModule from "../components/modules/ScoreModule";
 import PicturesPage from "./Pictures";
 import FantasyStatus from "../components/FantasyStatus";
+import Sports from "./Sports";
 
 export default function App() {
-  const [tab, setTab] = useState<"home" | "scores" | "fantasy" | "pictures">(
+  const [tab, setTab] = useState<"home" | "scores" | "sports" | "pictures">(
     "home",
   );
 
@@ -37,26 +38,22 @@ export default function App() {
           <Button active={tab === "home"} onClick={() => setTab("home")}>
             home
           </Button>
-          <Button active={tab === "scores"} onClick={() => setTab("scores")}>
-            scores
-          </Button>
           <Button
             active={tab === "pictures"}
             onClick={() => setTab("pictures")}
           >
             pictures
           </Button>
-          <Button active={tab === "fantasy"} onClick={() => setTab("fantasy")}>
+          <Button active={tab === "sports"} onClick={() => setTab("sports")}>
-            fantasy
+            sports
           </Button>
         </div>
 
         <hr className="border-black border-1" />
 
         {tab === "home" && <Home />}
-        {tab === "scores" && <ScoreModule />}
         {tab === "pictures" && <PicturesPage />}
-        {tab === "fantasy" && <FantasyStatus />}
+        {tab === "sports" && <Sports />}
       </div>
     </Layout>
   );

src/pages/Sports.tsx

@@ -0,0 +1,19 @@
+import FantasyStatus from "../components/FantasyStatus";
+import ScoreModule from "../components/modules/ScoreModule";
+
+export default function Sports() {
+  return (
+    <div>
+      <div className="p-2">
+        <ScoreModule />
+      </div>
+
+      <hr className="border-black border-1" />
+
+      <div className="p-2">
+        <h1 className="text-2xl font-semibold">fantasy</h1>
+        <FantasyStatus />
+      </div>
+    </div>
+  );
+}

src/utils/types.ts

@@ -12,13 +12,15 @@ type LastFMImageObject = {
 // nfl stuff
 interface NFLAPIData {
   nflState: NFLState;
-  matchups: NFLMatchupState[];
+  team1: NFLMatchupState;
+  team2: NFLMatchupState;
   users: SleeperUser[];
 }
 interface NFLMatchupState {
   points: number;
   owner: SleeperUser;
   starters: NFLPlayer[];
+  players: NFLPlayer[];
   starters_points: number[];
   players_points: object;
 }
@@ -65,7 +67,7 @@ type SabresScore = {
 };
 type NFLTeam = {
   abbreviation: string;
-  score: string;
+  score: number;
   name: string;
   nickname: string;
   logo: string;