sabs on the warpath

src/components/FantasyStatus.tsx

@@ -35,7 +35,7 @@ export default function FantasyStatus() {
   }, []);
 
   return (
-    <div className="p-2 text-black">
+    <div className="p-2">
       <div className="mb-4 space-y-4">
         {personalRoster && opposingRoster && (
           <>

src/components/modules/PictureCarousel.tsx

@@ -19,7 +19,7 @@ export default function PictureCarousel({
   onClick: (url: string) => void;
 }) {
   return (
-    <div className="border border-white border-solid rounded-lg p-2">
+    <div className="rounded-lg p-2">
       <div className="whitespace-nowrap overflow-x-auto">
         <div className="my-2 space-x-2">
           {images.map((v, k) => {

src/components/modules/ScoreModule.tsx

@@ -9,6 +9,7 @@ const IMAGES = {
 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() {
@@ -38,26 +39,46 @@ export default function ScoreModule({ type }: { type: "sabres" | "bills" }) {
   }, []);
 
   return (
-    <div className="text-black rounded-lg w-full">
+    <div className="rounded-lg w-full">
       <div className="flex justify-between">
         <div>
-          <img width="100" className="p-4" src={IMAGES[type]} />
+          <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} @ ${sabresScore?.homeTeam.abbrev}`}
+                : `${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}-${sabresScore?.oppScore}`}
+                : `${sabresScore && sabresScore?.sabresScore > sabresScore?.oppScore ? "W" : "L"} ${sabresScore?.sabresScore || 0}-${sabresScore?.oppScore || 0}`}
             </p>
           </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/components/modules/StatModule.tsx

@@ -41,13 +41,13 @@ export default function StatModule() {
     if (data) {
       return (
         <a href={`https://tracker.alexav.gg/info/${data?.id}`} target="_blank">
-          <div className="flex flex-col bg-black border border-black text-white">
+          <div className="flex flex-col bg-black border border-black">
             <div className="flex">
               <div className="pl-2 pr-1">
-                <p className="w-[150px] truncate flex justify-end overflow-hidden whitespace-nowrap">
+                <p className="w-[150px] truncate flex justify-end overflow-hidden whitespace-nowrap text-white">
                   {data?.title}
                 </p>
-                <p className="flex justify-end">
+                <p className="flex justify-end text-white">
                   {" "}
                   {data?.finished
                     ? "finished"

src/pages/App.tsx

@@ -25,20 +25,24 @@ export default function App() {
         </div>
       )}
 
-      <div className="min-h-screen flex justify-center items-center">
-        <div className="border-3 bg-[#ebebeb] border-black w-full sm:w-[500px]">
-          <div className="] text-black">
-            <div className="bg-black w-full text-white">
+      {/* 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">welcome</h1>
+                <h1 className="font-semibold text-white">welcome</h1>
                 <Clock />
-                <h1 className="text-right">let it rip</h1>
+                <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%_75%] w-full object-cover"
-              src="https://storage.alexav.gg/content/1f822215-0768-424d-893a-13bcd10aa98b.jpg"
+              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">
@@ -52,15 +56,18 @@ export default function App() {
                 <div>
                   <h1 className="text-2xl font-semibold">hi, i'm alex!</h1>
                   <p className="text-lg">
-                    i do QA stuff at{" "}
+                    qa stuff & things at{" "}
                     <a
                       className="underline"
                       href="https://medal.tv/u/alexav"
                       target="_blank"
                     >
                       Medal.tv
-                    </a>
-                    {" "}and write mediocre code sometimes
+                    </a>{" "}
+                    <br />
+                    sabres szn ticket holder
+                    <br />
+                    master of shenanigans
                   </p>
                   <hr />
                   <div className="block space-x-1">
@@ -148,7 +155,7 @@ export default function App() {
               </div>
             </div>
 
-            <div className="grid grid-cols-4 text-center border-b">
+            <div className="grid grid-cols-4 text-center border-b border-b-black">
               <h1
                 onClick={() => setTab("home")}
                 className={`border-r-1 border-t-1 border-black hover:cursor-pointer ${tab === "home" && "underline"}`}
@@ -169,7 +176,7 @@ export default function App() {
               </h1>
               <h1
                 onClick={() => setTab("scores")}
-                className={`border-r-1 border-t-1 border-black hover:cursor-pointer ${tab === "scores" && "underline"}`}
+                className={`border-t-1 border-black hover:cursor-pointer ${tab === "scores" && "underline"}`}
               >
                 scores
               </h1>