fantasyyyyy :pppp

src/assets/main.css

@@ -7,6 +7,17 @@
 body {
     font-family: 'Pathway Gothic One', sans-serif;
     overflow: hidden;
+
+    ::-webkit-scrollbar {
+        width:50px;
+        height:10px;
+        border-radius: var(--radius-lg);
+        background-color:white;
+    }
+    ::-webkit-scrollbar-thumb {
+        background-color:gray;
+        border-radius: var(--radius-lg);
+    }
 }
 
 @keyframes scroll {

src/components/FantasyStatus.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useState } from "react";
+import PlayerCell from "./fantasy/PlayerCell";
+import {
+  type NFLRosterState,
+  type NFLPlayer,
+  NFLState,
+  NFLMatchupState,
+} from "../utils/types";
+
+export default function FantasyStatus() {
+  const USER_ID = "1263620186439696384";
+  const LEAGUE_BASE_URL =
+    "https://api.sleeper.app/v1/league/1263620000418119680/rosters";
+  const NFL_STATE_URL = "https://api.sleeper.app/v1/state/nfl";
+  const MATCHUPS_URL =
+    "https://api.sleeper.app/v1/league/1263620000418119680/matchups/";
+
+  const [roster, setRoster] = useState<NFLRosterState | null>(null);
+  const [players, setPlayers] = useState<NFLPlayer[] | null>(null);
+  const [nflState, setNflState] = useState<NFLState | null>(null);
+  const [matchup, setMatchup] = useState<NFLMatchupState | null>(null);
+
+  useEffect(() => {
+    fetch(NFL_STATE_URL).then(async (res) => {
+      if (res.ok) {
+        const data = await res.json();
+        setNflState(data);
+      }
+    });
+    fetch(LEAGUE_BASE_URL).then(async (res) => {
+      if (res.ok) {
+        const data = await res.json();
+        setRoster(
+          data.filter((v: NFLRosterState) => v.owner_id === USER_ID)[0]
+        );
+      }
+    });
+  }, []);
+  useEffect(() => {
+    if (roster) {
+      const players = roster.starters.join(",");
+
+      fetch(
+        "https://api.alexav.gg/v4/football/players?players=" + players
+      ).then(async (res) => {
+        if (res.ok) {
+          const data = await res.json();
+          setPlayers(data.playerInfo);
+        }
+      });
+    }
+  }, [roster]);
+  useEffect(() => {
+    if (nflState && !matchup) {
+      fetch(MATCHUPS_URL + nflState.display_week).then(async (res) => {
+        if (res.ok) {
+          const data = await res.json();
+          setMatchup(data[1]);
+        }
+      });
+    }
+  }, [nflState]);
+
+  return (
+    <div className="border border-white border-solid rounded-lg w-full sm:w-[500px] mb-4 overflow-hidden overflow-x-scroll p-2">
+      <h1 className="text-2xl font-bold">Fantasy</h1>
+
+      <div className="space-y-2 space-x-2 overflow-x-hidden whitespace-nowrap w-fit">
+        {players?.map((v, k) => {
+          return (
+            <div className="inline-block" key={k}>
+              <PlayerCell matchupData={matchup} player={v} />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/components/Layout.tsx

@@ -1,7 +1,6 @@
 import { useState, useEffect, type ReactNode } from "react";
 import { Flashlight, FlashlightOff } from "lucide-react";
 import SplatterImage from "../assets/splatter.png";
-import Countdown from "./Countdown";
 
 export default function Layout({ children }: { children: ReactNode }) {
   const [pointerPosition, setPointerPosition] = useState({ x: 500, y: 500 });
@@ -140,7 +139,6 @@ export default function Layout({ children }: { children: ReactNode }) {
             <h1 className="text-2xl font-bold">welcome !</h1>
           </div>
         </div>
-        <Countdown />
         {children}
       </div>
 

src/components/fantasy/PlayerCell.tsx

@@ -0,0 +1,48 @@
+import type { NFLMatchupState, NFLPlayer } from "../../utils/types";
+
+export default function PlayerCell({
+  player,
+  matchupData,
+}: {
+  player: NFLPlayer | null;
+  matchupData: NFLMatchupState | null;
+}) {
+  const getScoreForPlayer = () => {
+    const rosterPosition = matchupData?.starters.findIndex(
+      (v) => v === player?.player_id
+    );
+
+    return matchupData?.starters_points[rosterPosition!] || 0;
+  };
+  const truncatedName = () => {
+    if (player) {
+      const firstName = player?.full_name.split(" ")[0];
+      const shortened =
+        firstName[0].toUpperCase() + "." + " " + player.last_name;
+
+      return shortened;
+    }
+  };
+
+  if (player && player.full_name) {
+    return (
+      <div className="flex-wrap flex space-x-2">
+        <div>
+          <h1 className="font-semibold text-1xl">{truncatedName()}</h1>
+          <p>
+            {player?.position} · {player?.team} {player?.injury_status && "·"}{" "}
+            {player?.injury_status && (
+              <span className="text-red-500 font-semibold">
+                {player?.injury_status}
+              </span>
+            )}
+          </p>
+        </div>
+        <p className="flex justify-center items-center">
+          <span className="font-semibold">{getScoreForPlayer()}</span>
+        </p>
+        <div className="inline-block min-h-[1em] w-0.5 self-stretch bg-neutral-100 dark:bg-white/30"></div>
+      </div>
+    );
+  }
+}

src/pages/App.tsx

@@ -3,10 +3,14 @@ import MusicComponent from "../components/MusicComponent";
 import TVComponent from "../components/TVComponent";
 import GameComponent from "../components/GameComponent";
 import RandomLyric from "../components/RandomLyric";
+import FantasyStatus from "../components/FantasyStatus";
+import Countdown from "../components/Countdown";
 
 export default function App() {
   return (
     <Layout>
+      <Countdown />
+      <FantasyStatus />
       <div className="border border-white border-solid rounded-lg w-full sm:w-[500px] p-2">
         <div className="grid grid-cols-1 xs:grid-cols-2">
           <div className="mx-auto">

src/utils/types.ts

@@ -12,4 +12,39 @@ type LastFMImageObject = {
   "#text": string;
 };
 
-export type { LastFMMusicObject, LastFMImageObject };
+// nfl stuff
+interface NFLState {
+  week: number;
+  season_type: "pre" | "post" | "regular";
+  display_week: number;
+}
+interface NFLRosterState {
+  league_id: string;
+  owner_id: string;
+  players: string[];
+  starters: string[];
+}
+interface NFLMatchupState {
+  points: number;
+  players: string[];
+  starters: string[];
+  starters_points: number[];
+  players_points: object;
+}
+interface NFLPlayer {
+  last_name: string;
+  injury_status: string | null;
+  position: string;
+  full_name: string;
+  team: string;
+  player_id: string;
+}
+
+export type {
+  LastFMMusicObject,
+  LastFMImageObject,
+  NFLState,
+  NFLRosterState,
+  NFLPlayer,
+  NFLMatchupState,
+};