diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 53bf052..9634562 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -2,8 +2,8 @@ import type { ReactNode } from "react"; export default function Layout({ children }: { children: ReactNode }) { return ( -
-
{children}
+
+
{children}
); } diff --git a/src/components/Overlay.tsx b/src/components/Overlay.tsx index a9403cc..3ba2142 100644 --- a/src/components/Overlay.tsx +++ b/src/components/Overlay.tsx @@ -8,10 +8,16 @@ export default function Overlay({ onClose: () => void; }) { return ( -
+ //
+ //

+ // X + //

+ // {children} + //
+
{children}
); diff --git a/src/components/GameComponent.tsx b/src/components/info/GameComponent.tsx similarity index 100% rename from src/components/GameComponent.tsx rename to src/components/info/GameComponent.tsx diff --git a/src/components/MusicComponent.tsx b/src/components/info/MusicComponent.tsx similarity index 92% rename from src/components/MusicComponent.tsx rename to src/components/info/MusicComponent.tsx index 8432837..8cefd18 100644 --- a/src/components/MusicComponent.tsx +++ b/src/components/info/MusicComponent.tsx @@ -1,6 +1,6 @@ import { useState, useEffect } from "react"; -import ScrollingText from "./ScrollingText"; -import type { LastFMMusicObject } from "../utils/types"; +import ScrollingText from "../ScrollingText"; +import type { LastFMMusicObject } from "../../utils/types"; export default function MusicComponent() { const [music, setMusic] = useState(null); diff --git a/src/components/TVComponent.tsx b/src/components/info/TVComponent.tsx similarity index 100% rename from src/components/TVComponent.tsx rename to src/components/info/TVComponent.tsx diff --git a/src/components/Countdown.tsx b/src/components/modules/CountdownModule.tsx similarity index 97% rename from src/components/Countdown.tsx rename to src/components/modules/CountdownModule.tsx index 00fcbd9..fdb0835 100644 --- a/src/components/Countdown.tsx +++ b/src/components/modules/CountdownModule.tsx @@ -1,6 +1,6 @@ import { useEffect, useRef } from "react"; -export default function Countdown() { +export default function CountdownModule() { const countdownRef = useRef(null); const audioRef = useRef(null); diff --git a/src/components/modules/InfoModule.tsx b/src/components/modules/InfoModule.tsx new file mode 100644 index 0000000..72a724e --- /dev/null +++ b/src/components/modules/InfoModule.tsx @@ -0,0 +1,60 @@ +import MusicComponent from "../info/MusicComponent"; +import TVComponent from "../info/TVComponent"; + +export default function InfoModule() { + return ( +
+
+
+

alex, 18

+ Profile + +
+
+

what i do

+

+ qa @{" "} + + medal.tv + + , game, code +

+

navigator.clipboard.writeText("alex@vierfrantz.com")} + > + alex@vierfrantz.com +

+ +
+ +

obsessed with

+

dexter, tlou, twd

+ +
+ +

status

+ +
+
+
+ ); +} diff --git a/src/components/modules/ScoreModule.tsx b/src/components/modules/ScoreModule.tsx new file mode 100644 index 0000000..87ac7e0 --- /dev/null +++ b/src/components/modules/ScoreModule.tsx @@ -0,0 +1,63 @@ +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" }) { + const [billsScore, setBillsScore] = useState(null); + const [sabresScore, setSabresScore] = useState(null); + + useEffect(() => { + async function fetchBillsScore() { + const res = await fetch("https://api.alexav.gg/v4/scores/bills"); + if (res.ok) { + const data = await res.json(); + setBillsScore(data); + } else { + console.error("Failed to fetch Bills score; " + res.statusText); + } + } + async function fetchSabresScore() { + const res = await fetch("https://api.alexav.gg/v4/scores/sabres"); + if (res.ok) { + const data = await res.json(); + setSabresScore(data); + } else { + console.error("Failed to fetch Sabresscore; " + res.statusText); + } + } + + if (type == "bills" && !billsScore) { + fetchBillsScore(); + } else if (type === "sabres" && !sabresScore) { + fetchSabresScore(); + } + }, []); + + return ( +
+
+
+ +
+
+
+

+ {type === "bills" + ? billsScore?.name + : `${sabresScore?.awayTeam.abbrev} @ ${sabresScore?.homeTeam.abbrev}`} +

+

+ {type === "bills" + ? billsScore?.score + : `${sabresScore && sabresScore?.sabresScore > sabresScore?.oppScore ? "W" : "L"} ${sabresScore?.sabresScore}-${sabresScore?.oppScore}`} +

+
+
+
+
+ ); +} diff --git a/src/components/modules/WelcomeModule.tsx b/src/components/modules/WelcomeModule.tsx new file mode 100644 index 0000000..83718b1 --- /dev/null +++ b/src/components/modules/WelcomeModule.tsx @@ -0,0 +1,7 @@ +export default function WelcomeModule() { + return ( +
+

welcome to my site !

+
+ ); +} diff --git a/src/pages/App.tsx b/src/pages/App.tsx index 812776c..ab78f29 100644 --- a/src/pages/App.tsx +++ b/src/pages/App.tsx @@ -1,11 +1,12 @@ import { useState } from "react"; import Layout from "../components/Layout"; import Overlay from "../components/Overlay"; -import MusicComponent from "../components/MusicComponent"; -import TVComponent from "../components/TVComponent"; -import GameComponent from "../components/GameComponent"; -import FantasyStatus from "../components/FantasyStatus"; +import GameComponent from "../components/info/GameComponent"; import PictureCarousel from "../components/modules/PictureCarousel"; +import InfoModule from "../components/modules/InfoModule"; +import WelcomeModule from "../components/modules/WelcomeModule"; +import FantasyStatus from "../components/FantasyStatus"; +import ScoreModule from "../components/modules/ScoreModule"; export default function App() { const [selectedImage, setSelectedImage] = useState(""); @@ -14,80 +15,34 @@ export default function App() { {selectedImage !== "" && ( setSelectedImage("")}> - +
+ +
)} -
- setSelectedImage(url)} /> +
+
+ -
-

welcome to my site !

+ + + setSelectedImage(url)} /> + + +
- - -
-
-
-

alex, 18

- Profile - -
-
-

what i do

-

- qa @{" "} - - medal.tv - - , game, code -

-

- navigator.clipboard.writeText("alex@vierfrantz.com") - } - > - alex@vierfrantz.com -

- -
- -

obsessed with

-

dexter, tlou, twd

- -
- -

status

- -
-
-
-
); diff --git a/src/utils/types.ts b/src/utils/types.ts index d3ce342..75307b9 100644 --- a/src/utils/types.ts +++ b/src/utils/types.ts @@ -46,6 +46,38 @@ interface SleeperUser { }; } +// scores +type BillsScore = { + name: string; + date: string; + score: string; +}; +type SabresScore = { + gameDate: string; + wonInRegulation: boolean; + sabresScore: number; + oppScore: number; + homeTeam: NHLTeam; + awayTeam: NHLTeam; +}; +type NHLTeam = { + id: number; + name: { + default: string; + fr: string; + }; + commonName: { + default: string; + }; + placeNameWithPreposition: { + default: string; + fr: string; + }; + abbrev: string; + score: number; + logo: string; +}; + export type { LastFMMusicObject, LastFMImageObject, @@ -54,4 +86,6 @@ export type { SleeperUser, NFLAPIData, NFLPlayer, + BillsScore, + SabresScore, };