fix fantasy/reorganize site

src/assets/main.css

@@ -1,17 +1,17 @@
 @import "tailwindcss";
 
 body {
-    font-family: 'Pathway Gothic One', sans-serif;
-    background-color: black;
+  font-family: "Pathway Gothic One", sans-serif;
+  background-color: black;
 
-    ::-webkit-scrollbar {
-        width:80px;
-        height:10px;
-        border-radius: var(--radius-lg);
-        background-color:white;
-    }
-    ::-webkit-scrollbar-thumb {
-        background-color:gray;
-        border-radius: var(--radius-lg);
-    }
-}
+  ::-webkit-scrollbar {
+    width: 5px;
+    height: 10px;
+    border-radius: var(--radius-lg);
+    background-color: white;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: gray;
+    border-radius: var(--radius-lg);
+  }
+}

src/components/FantasyStatus.tsx

@@ -13,7 +13,7 @@ export default function FantasyStatus() {
   // fetch roster information
   useEffect(() => {
     async function fetchData() {
-      const data = (await fetch("https://api.alexav.gg/v4/football").then(
+      const data = (await fetch("https://api.alexav.gg/v4/sports/fantasy").then(
         (res) => res.json(),
       )) as NFLAPIData;
 

src/components/modules/PictureCarousel.tsx

@@ -19,20 +19,19 @@ export default function PictureCarousel({
   onClick: (url: string) => void;
 }) {
   return (
-    <div className="rounded-lg p-2">
-      <div className="whitespace-nowrap overflow-x-auto">
-        <div className="my-2 space-x-2">
-          {images.map((v, k) => {
-            return (
-              <img
-                key={k}
-                onClick={() => onClick(v)}
-                src={v}
-                className="inline w-[200px] max-h-[100px] object-cover"
-              />
-            );
-          })}
-        </div>
+    <div className="rounded-lg">
+      <div className="my-2 space-x-2 space-y-2">
+        {images.map((v, k) => {
+          return (
+            <img
+              key={k}
+              loading="lazy"
+              onClick={() => onClick(v)}
+              src={v}
+              className="inline w-[200px] max-h-[100px] object-cover"
+            />
+          );
+        })}
       </div>
     </div>
   );

src/components/modules/ScoreModule.tsx

@@ -1,19 +1,14 @@
 import { useEffect, useState } from "react";
 import { BillsScore, SabresScore } from "../../utils/types";
 
-const IMAGES = {
-  bills: "https://storage.alexav.gg/content/bills.png",
-  sabres: "https://storage.alexav.gg/content/sabres.png",
-};
-
-export default function ScoreModule({ type }: { type: "sabres" | "bills" }) {
+export default function ScoreModule() {
   const [billsScore, setBillsScore] = useState<BillsScore | null>(null);
   const [sabresScore, setSabresScore] = useState<SabresScore | null>(null);
   const [warpath, setWarpath] = useState<boolean>(false);
 
   useEffect(() => {
     async function fetchBillsScore() {
-      const res = await fetch("https://api.alexav.gg/v4/scores/bills");
+      const res = await fetch("https://api.alexav.gg/v4/sports/scores/bills");
       if (res.ok) {
         const data = await res.json();
         setBillsScore(data);
@@ -22,7 +17,7 @@ export default function ScoreModule({ type }: { type: "sabres" | "bills" }) {
       }
     }
     async function fetchSabresScore() {
-      const res = await fetch("https://api.alexav.gg/v4/scores/sabres");
+      const res = await fetch("https://api.alexav.gg/v4/sports/scores/sabres");
       if (res.ok) {
         const data = await res.json();
         setSabresScore(data);
@@ -31,16 +26,81 @@ export default function ScoreModule({ type }: { type: "sabres" | "bills" }) {
       }
     }
 
-    if (type == "bills" && !billsScore) {
-      fetchBillsScore();
-    } else if (type === "sabres" && !sabresScore) {
-      fetchSabresScore();
-    }
+    fetchBillsScore();
+    fetchSabresScore();
   }, []);
 
   return (
-    <div className="rounded-lg w-full">
-      <div className="flex justify-between">
+    <div className="rounded-lg w-full mb-2">
+      <div className="flex flex-row justify-between">
+        <div className="flex flex-row py-2">
+          <img
+            onClick={() => {
+              if (sabresScore?.homeTeam.abbreviation === "BUF")
+                setWarpath(true);
+            }}
+            width="80"
+            className="shrink-0"
+            src={sabresScore?.homeTeam.logo}
+          />
+          <img
+            onClick={() => {
+              if (sabresScore?.awayTeam.abbreviation === "BUF")
+                setWarpath(true);
+            }}
+            width="80"
+            className="shrink-0"
+            src={sabresScore?.awayTeam.logo}
+          />
+        </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
+            src={"https://storage.alexav.gg/content/warpath.mp3"}
+            autoPlay={true}
+            onTimeUpdate={(e) => {
+              if (e.currentTarget.duration === e.currentTarget.currentTime) {
+                setWarpath(false);
+              }
+            }}
+          />
+        )}
+      </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={() => {
@@ -68,17 +128,7 @@ export default function ScoreModule({ type }: { type: "sabres" | "bills" }) {
           </div>
         </div>
       </div>
-      {warpath && (
-        <audio
-          src={"https://storage.alexav.gg/content/warpath.mp3"}
-          autoPlay={true}
-          onTimeUpdate={(e) => {
-            if (e.currentTarget.duration === e.currentTarget.currentTime) {
-              setWarpath(false);
-            }
-          }}
-        />
-      )}
+       */}
     </div>
   );
 }

src/pages/App.tsx

@@ -8,6 +8,137 @@ import FantasyStatus from "../components/FantasyStatus";
 import Clock from "../components/modules/Clock";
 import MusicComponent from "../components/info/MusicComponent";
 
+const HomePage = () => {
+  return (
+    <>
+      <div className="p-2">
+        <div className="grid grid-cols-3 gap-2">
+          <div>
+            <img
+              className="h-40 w-50 object-cover object-top"
+              src="https://storage.alexav.gg/content/f49b355a-25cd-48ba-8421-da702620fcc6.jpeg"
+            />
+          </div>
+          <div>
+            <h1 className="text-2xl font-semibold">hi, i'm alex!</h1>
+            <p className="text-lg">
+              qa stuff & things at{" "}
+              <a
+                className="underline"
+                href="https://medal.tv/u/alexav"
+                target="_blank"
+              >
+                Medal.tv
+              </a>{" "}
+              <br />
+              sabres szn ticket holder
+              <br />
+              master of shenanigans
+            </p>
+            <hr />
+            <div className="block space-x-1">
+              <a
+                href="https://twitter.com/onelonesabre"
+                className="hover:underline"
+                target="_blank"
+              >
+                twt
+              </a>
+              <span>•</span>
+              <a
+                className="hover:underline"
+                href="https://instagram.com/alexfrantz07"
+                target="_blank"
+              >
+                instagram
+              </a>
+              <span>•</span>
+              <a
+                className="hover:underline"
+                href="https://tiktok.com/@lostinherabyss_"
+                target="_blank"
+              >
+                tiktok
+              </a>
+            </div>
+            <div className="block space-x-2">
+              <a
+                className="hover:underline"
+                href="https://steamcommunity.com/id/bayharborsmoocher/"
+                target="_blank"
+              >
+                steam
+              </a>
+              <span>•</span>
+              <a
+                className="hover:underline"
+                href="https://medal.tv/u/alexav"
+                target="_blank"
+              >
+                medal
+              </a>
+            </div>
+          </div>
+          <div className="text-2xl">
+            <div>
+              {" "}
+              <span className="bg-black text-white px-1">shows</span> dexter,
+              pitt, tlou, twd, ystone
+            </div>
+            <div>
+              <span className="bg-black text-white px-1">music</span> ptv,
+              treaty oak, zach top, zach bryan, type o
+            </div>
+          </div>
+        </div>
+      </div>
+      <hr className="border-black" />
+      <div className="px-2">
+        <div className="grid grid-cols-2">
+          <div>
+            <h1 className="text-2xl font-bold">about me</h1>
+            <p>
+              born and raised buffalonian + wnyer. doing qa work for 4 years and
+              learning software engineering on the side. i also play acoustic
+              guitar, been gaming since i was 4 and love going to games in
+              Buffalo. incredibly awkward, but that's besides the point
+            </p>
+          </div>
+          <div className="mx-auto">
+            <div className="p-2">
+              <div className="mb-2">
+                <MusicComponent />
+              </div>
+              <div className="mb-2">
+                <StatModule />
+              </div>
+              <div>
+                <GameComponent />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+const PicturesPage = ({
+  setOverlayImage,
+}: {
+  setOverlayImage: (v: string | null) => void;
+}) => {
+  return (
+    <div className="p-2 flex flex-col justify-center">
+      <h1 className="text-2xl font-bold">pictures</h1>
+
+      <div className="h-96 overflow-y-auto">
+        <PictureCarousel onClick={(url: string) => setOverlayImage(url)} />
+      </div>
+    </div>
+  );
+};
+
 export default function App() {
   const [tab, setTab] = useState<string>("home");
   const [overlayImage, setOverlayImage] = useState<string | null>(null);
@@ -45,115 +176,13 @@ export default function App() {
               src="https://storage.alexav.gg/content/sabres-board.jpg"
             />
             <hr className="border-black" />
-            <div className="p-2">
-              <div className="grid grid-cols-3 gap-2">
-                <div>
-                  <img
-                    className="h-40 w-50 object-cover object-top"
-                    src="https://storage.alexav.gg/content/f49b355a-25cd-48ba-8421-da702620fcc6.jpeg"
-                  />
-                </div>
-                <div>
-                  <h1 className="text-2xl font-semibold">hi, i'm alex!</h1>
-                  <p className="text-lg">
-                    qa stuff & things at{" "}
-                    <a
-                      className="underline"
-                      href="https://medal.tv/u/alexav"
-                      target="_blank"
-                    >
-                      Medal.tv
-                    </a>{" "}
-                    <br />
-                    sabres szn ticket holder
-                    <br />
-                    master of shenanigans
-                  </p>
-                  <hr />
-                  <div className="block space-x-1">
-                    <a
-                      href="https://twitter.com/onelonesabre"
-                      className="hover:underline"
-                      target="_blank"
-                    >
-                      twt
-                    </a>
-                    <span>•</span>
-                    <a
-                      className="hover:underline"
-                      href="https://instagram.com/alexfrantz07"
-                      target="_blank"
-                    >
-                      instagram
-                    </a>
-                    <span>•</span>
-                    <a
-                      className="hover:underline"
-                      href="https://tiktok.com/@lostinherabyss_"
-                      target="_blank"
-                    >
-                      tiktok
-                    </a>
-                  </div>
-                  <div className="block space-x-2">
-                    <a
-                      className="hover:underline"
-                      href="https://steamcommunity.com/id/bayharborsmoocher/"
-                      target="_blank"
-                    >
-                      steam
-                    </a>
-                    <span>•</span>
-                    <a
-                      className="hover:underline"
-                      href="https://medal.tv/u/alexav"
-                      target="_blank"
-                    >
-                      medal
-                    </a>
-                  </div>
-                </div>
-                <div className="text-2xl">
-                  <div>
-                    {" "}
-                    <span className="bg-black text-white px-1">shows</span>{" "}
-                    dexter, pitt, tlou, twd, ystone
-                  </div>
-                  <div>
-                    <span className="bg-black text-white px-1">music</span> ptv,
-                    treaty oak, zach top, zach bryan, type o
-                  </div>
-                </div>
-              </div>
-            </div>
-            <hr className="border-black" />
-            <div className="px-2">
-              <div className="grid grid-cols-2">
-                <div>
-                  <h1 className="text-2xl font-bold">about me</h1>
-                  <p>
-                    born and raised buffalonian + wnyer. doing qa work for 4
-                    years and learning software engineering on the side. i also
-                    play acoustic guitar, been gaming since i was 4 and love
-                    going to games in Buffalo. incredibly awkward, but that's
-                    besides the point
-                  </p>
-                </div>
-                <div className="mx-auto">
-                  <div className="p-2">
-                    <div className="mb-2">
-                      <MusicComponent />
-                    </div>
-                    <div className="mb-2">
-                      <StatModule />
-                    </div>
-                    <div>
-                      <GameComponent />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
+
+            {tab === "home" && <HomePage />}
+            {tab === "fantasy" && <FantasyStatus />}
+            {tab === "pictures" && (
+              <PicturesPage setOverlayImage={setOverlayImage} />
+            )}
+            {tab === "scores" && <ScoreModule />}
 
             <div className="grid grid-cols-4 text-center border-b border-b-black">
               <h1
@@ -162,12 +191,6 @@ export default function App() {
               >
                 home
               </h1>
-              <h1
-                onClick={() => setTab("fantasy")}
-                className={`border-r-1 border-t-1 border-black hover:cursor-pointer ${tab === "fantasy" && "underline"}`}
-              >
-                fantasy
-              </h1>
               <h1
                 onClick={() => setTab("pictures")}
                 className={`border-r-1 border-t-1 border-black hover:cursor-pointer ${tab === "pictures" && "underline"}`}
@@ -180,13 +203,14 @@ export default function App() {
               >
                 scores
               </h1>
+              <h1
+                onClick={() => setTab("fantasy")}
+                className={`border-l-1 border-t-1 border-black hover:cursor-pointer ${tab === "fantasy" && "underline"}`}
+              >
+                fantasy
+              </h1>
             </div>
           </div>
-          {tab === "fantasy" && <FantasyStatus />}
-          {tab === "pictures" && (
-            <PictureCarousel onClick={(url: string) => setOverlayImage(url)} />
-          )}
-          {tab === "scores" && <ScoreModule type="sabres" />}
         </div>
       </div>
     </Layout>

src/utils/types.ts

@@ -48,32 +48,31 @@ interface SleeperUser {
 
 // scores
 type BillsScore = {
-  name: string;
-  date: string;
-  score: string;
+  season: string;
+  gameType: string;
+  week: string;
+  gameDay: string;
+  gameTime: string;
+  venue: string;
+  homeTeam: NFLTeam;
+  awayTeam: NFLTeam;
 };
 type SabresScore = {
-  gameDate: string;
-  wonInRegulation: boolean;
-  sabresScore: number;
-  oppScore: number;
-  homeTeam: NHLTeam;
+  date: string;
+  venue: string;
   awayTeam: NHLTeam;
+  homeTeam: NHLTeam;
+};
+type NFLTeam = {
+  abbreviation: string;
+  score: string;
+  name: string;
+  nickname: string;
+  logo: string;
 };
 type NHLTeam = {
-  id: number;
-  name: {
-    default: string;
-    fr: string;
-  };
-  commonName: {
-    default: string;
-  };
-  placeNameWithPreposition: {
-    default: string;
-    fr: string;
-  };
-  abbrev: string;
+  abbreviation: string;
+  name: string;
   score: number;
   logo: string;
 };