fix fantasy/reorganize site
This commit is contained in:
+13
-13
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
+144
-120
@@ -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>
|
||||
|
||||
+20
-21
@@ -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;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user