update fantasy

src/assets/main.css

@@ -9,8 +9,8 @@ body {
     background-color: black;
 
     ::-webkit-scrollbar {
-        width:50px;
-        height:5px;
+        width:80px;
+        height:10px;
         border-radius: var(--radius-lg);
         background-color:white;
     }

src/components/FantasyStatus.tsx

@@ -45,8 +45,18 @@ export default function FantasyStatus() {
           <h1 className="font-semibold text-2xl mb-2">fantasy</h1>
         </a>
 
-        {personalRoster && <TeamRow roster={personalRoster} />}
-        {opposingRoster && <TeamRow roster={opposingRoster} />}
+        {personalRoster && opposingRoster && (
+          <>
+            <TeamRow
+              isWinning={personalRoster.points > opposingRoster.points}
+              roster={personalRoster}
+            />
+            <TeamRow
+              isWinning={opposingRoster.points > personalRoster.points}
+              roster={opposingRoster}
+            />
+          </>
+        )}
       </div>
     </div>
   );

src/components/fantasy/PlayerCell.tsx

@@ -1,17 +1,26 @@
 import type { NFLPlayer } from "../../utils/types";
+import { useMemo } from "react";
 
 export default function PlayerCell({ player }: { player: NFLPlayer | null }) {
+  const injuryStatus = useMemo(() => {
+    if (player && player.injury_status) {
+      if (player.injury_status.toLowerCase() === "ir") {
+        return player.injury_status;
+      } else {
+        return `${player.injury_status[0]}.`;
+      }
+    }
+  }, [player?.injury_status]);
+
   if (player && player.full_name) {
     return (
       <div className="flex-wrap flex space-x-2">
         <div>
           <h1 className="font-semibold text-1xl">{player.abv_name}</h1>
           <p>
-            {player?.position} · {player?.team} {player?.injury_status && "·"}{" "}
+            {player?.position} · {player?.team} {injuryStatus && "·"}{" "}
             {player?.injury_status && (
-              <span className="text-red-500 font-semibold">
-                {player?.injury_status}
-              </span>
+              <span className="text-red-500 font-semibold">{injuryStatus}</span>
             )}
           </p>
         </div>

src/components/fantasy/TeamRow.tsx

@@ -1,7 +1,13 @@
 import type { NFLMatchupState } from "../../utils/types";
 import PlayerCell from "./PlayerCell";
 
-export function TeamRow({ roster }: { roster: NFLMatchupState }) {
+export function TeamRow({
+  roster,
+  isWinning = false,
+}: {
+  roster: NFLMatchupState;
+  isWinning?: boolean;
+}) {
   return (
     <div>
       <div className="flex flex-wrap mb-2">
@@ -11,8 +17,10 @@ export function TeamRow({ roster }: { roster: NFLMatchupState }) {
           src={roster?.owner.metadata.avatar}
         />
         <h1 className="flex justify-center items-center mx-2 font-semibold">
-          {roster?.owner.metadata.team_name} | {roster?.points}
-          pt
+          {roster?.owner.metadata.team_name} |
+          <span className={`${isWinning && "text-green-500"} pl-1`}>
+            {roster?.points}pt
+          </span>
         </h1>
       </div>