readd latest game component

src/components/GameComponent.tsx

@@ -0,0 +1,87 @@
+import { useState, useEffect } from "react";
+
+type GameObject = {
+  currentlyPlaying: CurrentlyPlaying;
+  history: CurrentlyPlaying[];
+};
+type CurrentlyPlaying = {
+  game: string;
+  startedPlayingAt: number;
+  finishedAt?: number;
+};
+
+export default function GameComponent() {
+  const [game, setGame] = useState<GameObject | null>(null);
+
+  useEffect(() => {
+    async function fetchGame() {
+      const response = await fetch(
+        "https://api.alexav.gg/v4/tracker/latestGame"
+      );
+      if (response.ok) {
+        const data = await response.json();
+
+        if (data.data) {
+          setGame(data.data as GameObject);
+        }
+      }
+    }
+
+    setTimeout(() => {
+      fetchGame();
+    }, 60000);
+    fetchGame();
+  }, []);
+
+  if (game) {
+    const dateOrTime = (game: CurrentlyPlaying) => {
+      if (game.finishedAt) {
+        const currentDate = new Date();
+        const finishedDate = new Date(game.finishedAt);
+
+        if (
+          currentDate.toLocaleDateString() === finishedDate.toLocaleDateString()
+        ) {
+          return `at ${finishedDate.toLocaleTimeString()}`;
+        } else {
+          return `on ${finishedDate.toLocaleDateString()}`;
+        }
+      }
+    };
+
+    return (
+      <div className="border border-white border-solid p-2 rounded-lg space-y-2">
+        {game.currentlyPlaying && (
+          <>
+            <h1 className="text-2xl font-bold italic">currently playing</h1>
+            <p>
+              <span className="font-semibold">
+                {game.currentlyPlaying.game}
+              </span>{" "}
+              since{" "}
+              {new Date(
+                game.currentlyPlaying.startedPlayingAt
+              ).toLocaleTimeString()}
+            </p>
+          </>
+        )}
+
+        {game.history.length > 0 && (
+          <>
+            <h1 className="text-2xl font-bold italic">previously played</h1>
+            <div className="flex flex-wrap space-x-2">
+              {game.history.splice(0, 5).map((v) => {
+                return (
+                  <div>
+                    <p className="font-semibold">{v.game}</p>
+                    <p>{dateOrTime(v)}</p>
+                  </div>
+                );
+              })}
+            </div>
+          </>
+        )}
+      </div>
+    );
+  }
+}

src/pages/App.tsx

@@ -1,11 +1,11 @@
 import Layout from "../components/Layout";
 import MusicComponent from "../components/MusicComponent";
 import TVComponent from "../components/TVComponent";
+import GameComponent from "../components/GameComponent";
 import FantasyStatus from "../components/FantasyStatus";
 import Picture from "../components/Picture";
 import Overlay from "../components/Overlay";
-import ScrollingText from "../components/ScrollingText";
+import { useState } from "react";
-import { useState, useEffect } from "react";
 
 const images = [
   "https://storage.alexav.gg/content/1f822215-0768-424d-893a-13bcd10aa98b.jpg",
@@ -14,69 +14,68 @@ const images = [
   "https://storage.alexav.gg/content/1d717aab-3058-405a-b04d-324d7ab3e658.jpg",
   "https://storage.alexav.gg/content/2f36c1dd-eaf8-4fd3-a3cd-1d25fe8f5a07.jpg",
 ];
-const lyrics: LyricItem[] = [
+// const lyrics: LyricItem[] = [
-  {
+//   {
-    string: "and we're laying on the roof of my car",
+//     string: "and we're laying on the roof of my car",
-    url: "https://open.spotify.com/track/4Pt2R2EJ3rZBRn2JpH7WnJ?si=7a167c7b22354d24",
+//     url: "https://open.spotify.com/track/4Pt2R2EJ3rZBRn2JpH7WnJ?si=7a167c7b22354d24",
-  },
+//   },
-  {
+//   {
-    string: "your funeral was beautiful",
+//     string: "your funeral was beautiful",
-    url: "https://open.spotify.com/track/4ZJ4vzLQekI0WntDbanNC7?si=914245f4e48a4c00",
+//     url: "https://open.spotify.com/track/4ZJ4vzLQekI0WntDbanNC7?si=914245f4e48a4c00",
-  },
+//   },
-  {
+//   {
-    string: "she was always the one",
+//     string: "she was always the one",
-    url: "https://open.spotify.com/track/21n769QrJtrmN0pXuBkYOm?si=b4a5e7f627b54fd9",
+//     url: "https://open.spotify.com/track/21n769QrJtrmN0pXuBkYOm?si=b4a5e7f627b54fd9",
-  },
+//   },
-  {
+//   {
-    string: "how lucky are we?",
+//     string: "how lucky are we?",
-    url: "https://open.spotify.com/track/5iJKGpnFfvbjZJeAtwXfCj?si=a0b160c9cead4863",
+//     url: "https://open.spotify.com/track/5iJKGpnFfvbjZJeAtwXfCj?si=a0b160c9cead4863",
-  },
+//   },
-  {
+//   {
-    string: "i'm yours to take darlin'",
+//     string: "i'm yours to take darlin'",
-    url: "https://open.spotify.com/track/2nATTe1i7aMzIZ8klEpgQ7?si=1bcd8e6aa9324b81",
+//     url: "https://open.spotify.com/track/2nATTe1i7aMzIZ8klEpgQ7?si=1bcd8e6aa9324b81",
-  },
+//   },
-  {
+//   {
-    string: "wet, hot, american nights",
+//     string: "wet, hot, american nights",
-    url: "https://open.spotify.com/track/3c9EsIo34kil8Oj1reaozB?si=8c0aaf0fdb7a4e5f",
+//     url: "https://open.spotify.com/track/3c9EsIo34kil8Oj1reaozB?si=8c0aaf0fdb7a4e5f",
-  },
+//   },
-  {
+//   {
-    string: "it ain't the whiskey that gets me",
+//     string: "it ain't the whiskey that gets me",
-    url: "https://open.spotify.com/track/0AsrOS8HktHe9TaB1i9W3v?si=c186a29f4e804d05",
+//     url: "https://open.spotify.com/track/0AsrOS8HktHe9TaB1i9W3v?si=c186a29f4e804d05",
-  },
+//   },
-  {
+//   {
-    string: "i wrote a song for you",
+//     string: "i wrote a song for you",
-    url: "https://open.spotify.com/track/744zwLqGKbOZW3RnxkRfHE?si=4d2230964fcc4f2f",
+//     url: "https://open.spotify.com/track/744zwLqGKbOZW3RnxkRfHE?si=4d2230964fcc4f2f",
-  },
+//   },
-  {
+//   {
-    string: "oh madeline, how you been?",
+//     string: "oh madeline, how you been?",
-    url: "https://open.spotify.com/track/2DDo2QqElDO9PgOHeGtQiy?si=0fdcbaeb64694249",
+//     url: "https://open.spotify.com/track/2DDo2QqElDO9PgOHeGtQiy?si=0fdcbaeb64694249",
-  },
+//   },
-  {
+//   {
-    string: "she makes this country boy feel like a king",
+//     string: "she makes this country boy feel like a king",
-    url: "https://open.spotify.com/track/091Ibwvg7tTp7eNGLlT7cT?si=67be323416b24729",
+//     url: "https://open.spotify.com/track/091Ibwvg7tTp7eNGLlT7cT?si=67be323416b24729",
-  },
+//   },
-  {
+//   {
-    string: "ain't in it for my health",
+//     string: "ain't in it for my health",
-    url: "https://open.spotify.com/track/5Mz9T6QGwScq6Yt7DAXxi8?si=f51ff7f76dd24b00",
+//     url: "https://open.spotify.com/track/5Mz9T6QGwScq6Yt7DAXxi8?si=f51ff7f76dd24b00",
-  },
+//   },
-];
+// ];
-
+// type LyricItem = {
-type LyricItem = {
+//   string: string;
-  string: string;
+//   url: string;
-  url: string;
+// };
-};
 
 export default function App() {
   const [selectedImage, setSelectedImage] = useState<string>("");
 
-  const [lyric, setLyric] = useState<LyricItem | null>();
+  // const [lyric, setLyric] = useState<LyricItem | null>();
-  const getRandomLyric = () => {
+  // const getRandomLyric = () => {
-    const randomNumber = Math.floor(Math.random() * lyrics.length);
+  //   const randomNumber = Math.floor(Math.random() * lyrics.length);
-    setLyric(lyrics[randomNumber]);
+  //   setLyric(lyrics[randomNumber]);
-  };
+  // };
-  useEffect(() => {
+  // useEffect(() => {
-    getRandomLyric();
+  //   getRandomLyric();
-  }, []);
+  // }, []);
 
   return (
     <Layout>
@@ -86,8 +85,8 @@ export default function App() {
         </Overlay>
       )}
 
-      <div className="my-2">
+      <div className="my-2 space-y-4">
-        <div className="border border-white border-solid p-2 rounded-lg mb-4 flex justify-between">
+        <div className="border border-white border-solid p-2 rounded-lg flex justify-between">
           <h1 className="text-2xl font-bold">welcome to my site !</h1>
         </div>
 
@@ -109,11 +108,12 @@ export default function App() {
           </div>
         </div>
 
-        <div className="border border-white border-solid rounded-lg p-2 my-4">
+        <GameComponent />
+
+        <div className="border border-white border-solid rounded-lg p-2">
           <div className="flex flex-wrap justify-between p-2">
             <div>
               <h1 className="text-2xl font-bold italic opacity-95">alex, 18</h1>
-              <ScrollingText text={lyric ? lyric.string : ""} />
               <img
                 src="https://storage.alexav.gg/content/yeehaw.jpg"
                 className="rounded-md w-[150px] h-[110px] object-cover object-left-top"