fix fantasy/reorganize site

src/assets/main.css

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

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,13 +19,13 @@ export default function PictureCarousel({
   onClick: (url: string) => void;
 }) {
   return (
-    <div className="rounded-lg p-2">
+    <div className="rounded-lg">
-      <div className="whitespace-nowrap overflow-x-auto">
+      <div className="my-2 space-x-2 space-y-2">
-        <div className="my-2 space-x-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"
@@ -34,6 +34,5 @@ export default function PictureCarousel({
         })}
       </div>
     </div>
-    </div>
   );
 }

src/components/modules/ScoreModule.tsx

@@ -1,19 +1,14 @@
 import { useEffect, useState } from "react";
 import { BillsScore, SabresScore } from "../../utils/types";
 
-const IMAGES = {
+export default function ScoreModule() {
-  bills: "https://storage.alexav.gg/content/bills.png",
-  sabres: "https://storage.alexav.gg/content/sabres.png",
-};
-
-export default function ScoreModule({ type }: { type: "sabres" | "bills" }) {
   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();
-    }
   }, []);
 
   return (
-    <div className="rounded-lg w-full">
+    <div className="rounded-lg w-full mb-2">
-      <div className="flex justify-between">
+      <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,43 +8,9 @@ import FantasyStatus from "../components/FantasyStatus";
 import Clock from "../components/modules/Clock";
 import MusicComponent from "../components/info/MusicComponent";
 
-export default function App() {
+const HomePage = () => {
-  const [tab, setTab] = useState<string>("home");
-  const [overlayImage, setOverlayImage] = useState<string | null>(null);
-
   return (
-    <Layout>
+    <>
-      {overlayImage && (
-        <div
-          onClick={() => setOverlayImage(null)}
-          className="absolute min-h-screen min-w-screen bg-black/75"
-        >
-          <div className="flex justify-center items-center h-screen">
-            <img className="w-[400px]" src={overlayImage} />
-          </div>
-        </div>
-      )}
-
-      {/* bg-[#ebebeb] */}
-      <div className="min-h-screen flex justify-center items-center text-white">
-        <div className="border-3 bg-gradient-to-t from-[#003087] to-[#FFB81C] border-black w-full sm:w-[500px]">
-          <div>
-            <div className="bg-[#003087] w-full">
-              <div className="grid grid-cols-3 gap-2 p-2 text-2xl">
-                <h1 className="font-semibold text-white">welcome</h1>
-                <Clock />
-                <h1 className="text-right text-transparent font-bold bg-clip-text bg-gradient-to-t from-[#003087] to-[#FFB81C]">
-                  GO SABRES!
-                </h1>
-              </div>
-            </div>
-
-            <img
-              className="h-[100px] object-[25%_35%] w-full object-cover"
-              // src="https://storage.alexav.gg/content/1f822215-0768-424d-893a-13bcd10aa98b.jpg"
-              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>
@@ -116,8 +82,8 @@ export default function App() {
           <div className="text-2xl">
             <div>
               {" "}
-                    <span className="bg-black text-white px-1">shows</span>{" "}
+              <span className="bg-black text-white px-1">shows</span> dexter,
-                    dexter, pitt, tlou, twd, ystone
+              pitt, tlou, twd, ystone
             </div>
             <div>
               <span className="bg-black text-white px-1">music</span> ptv,
@@ -132,11 +98,10 @@ export default function App() {
           <div>
             <h1 className="text-2xl font-bold">about me</h1>
             <p>
-                    born and raised buffalonian + wnyer. doing qa work for 4
+              born and raised buffalonian + wnyer. doing qa work for 4 years and
-                    years and learning software engineering on the side. i also
+              learning software engineering on the side. i also play acoustic
-                    play acoustic guitar, been gaming since i was 4 and love
+              guitar, been gaming since i was 4 and love going to games in
-                    going to games in Buffalo. incredibly awkward, but that's
+              Buffalo. incredibly awkward, but that's besides the point
-                    besides the point
             </p>
           </div>
           <div className="mx-auto">
@@ -154,6 +119,70 @@ export default function App() {
           </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);
+
+  return (
+    <Layout>
+      {overlayImage && (
+        <div
+          onClick={() => setOverlayImage(null)}
+          className="absolute min-h-screen min-w-screen bg-black/75"
+        >
+          <div className="flex justify-center items-center h-screen">
+            <img className="w-[400px]" src={overlayImage} />
+          </div>
+        </div>
+      )}
+
+      {/* bg-[#ebebeb] */}
+      <div className="min-h-screen flex justify-center items-center text-white">
+        <div className="border-3 bg-gradient-to-t from-[#003087] to-[#FFB81C] border-black w-full sm:w-[500px]">
+          <div>
+            <div className="bg-[#003087] w-full">
+              <div className="grid grid-cols-3 gap-2 p-2 text-2xl">
+                <h1 className="font-semibold text-white">welcome</h1>
+                <Clock />
+                <h1 className="text-right text-transparent font-bold bg-clip-text bg-gradient-to-t from-[#003087] to-[#FFB81C]">
+                  GO SABRES!
+                </h1>
+              </div>
+            </div>
+
+            <img
+              className="h-[100px] object-[25%_35%] w-full object-cover"
+              // src="https://storage.alexav.gg/content/1f822215-0768-424d-893a-13bcd10aa98b.jpg"
+              src="https://storage.alexav.gg/content/sabres-board.jpg"
+            />
+            <hr className="border-black" />
+
+            {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;
+  season: string;
-  date: string;
+  gameType: string;
-  score: string;
+  week: string;
+  gameDay: string;
+  gameTime: string;
+  venue: string;
+  homeTeam: NFLTeam;
+  awayTeam: NFLTeam;
 };
 type SabresScore = {
-  gameDate: string;
+  date: string;
-  wonInRegulation: boolean;
+  venue: string;
-  sabresScore: number;
-  oppScore: number;
-  homeTeam: NHLTeam;
   awayTeam: NHLTeam;
+  homeTeam: NHLTeam;
+};
+type NFLTeam = {
+  abbreviation: string;
+  score: string;
+  name: string;
+  nickname: string;
+  logo: string;
 };
 type NHLTeam = {
-  id: number;
+  abbreviation: string;
-  name: {
+  name: string;
-    default: string;
-    fr: string;
-  };
-  commonName: {
-    default: string;
-  };
-  placeNameWithPreposition: {
-    default: string;
-    fr: string;
-  };
-  abbrev: string;
   score: number;
   logo: string;
 };