add some new fun things

src/components/info/GameComponent.tsx

@@ -0,0 +1,86 @@
+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(() => {
+    if (game) return;
+
+    async function fetchGame() {
+      const response = await fetch(
+        "https://api.alexav.gg/v4/tracker/latestGame"
+      );
+      if (response.ok) {
+        const data = await response.json();
+
+        if (data) {
+          setGame(data as GameObject);
+        }
+      }
+    }
+
+    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, k) => {
+                return (
+                  <div key={k}>
+                    <p className="font-semibold">{v.game}</p>
+                    <p>{dateOrTime(v)}</p>
+                  </div>
+                );
+              })}
+            </div>
+          </>
+        )}
+      </div>
+    );
+  }
+}

src/components/info/MusicComponent.tsx

@@ -0,0 +1,56 @@
+import { useState, useEffect } from "react";
+import ScrollingText from "../ScrollingText";
+import type { LastFMMusicObject } from "../../utils/types";
+
+export default function MusicComponent() {
+  const [music, setMusic] = useState<LastFMMusicObject | null>(null);
+  const [failedFetch, setFailedFetch] = useState(false);
+
+  useEffect(() => {
+    async function fetchMusic() {
+      try {
+        const response = await fetch("https://api.alexav.gg/v4/social/music");
+        if (response.ok) {
+          const data = await response.json();
+          setMusic(data as LastFMMusicObject);
+        } else setFailedFetch(true);
+      } catch (e) {
+        console.error("Failed to fetch music!", e);
+        setFailedFetch(true);
+      }
+    }
+
+    setTimeout(() => {
+      fetchMusic();
+    }, 60000);
+    fetchMusic();
+  }, []);
+
+  if (music) {
+    return (
+      <div className="flex align-middle">
+        <img width="50" src={music.images[1]?.url} />
+        <div className="pl-2 max-w-25">
+          <ScrollingText size="24" speed={0.1} text={music.title} />
+          <p className="truncate">{music.artist}</p>
+        </div>
+      </div>
+    );
+  } else {
+    if (failedFetch) {
+      return (
+        <div>
+          <h1>uh oh!</h1>
+          <p>failed to get music :(</p>
+        </div>
+      );
+    } else {
+      return (
+        <div>
+          <h1>loading music..</h1>
+          <p>loading artist..</p>
+        </div>
+      );
+    }
+  }
+}

src/components/info/TVComponent.tsx

@@ -0,0 +1,73 @@
+import { useState, useEffect } from "react";
+
+type TVObject = {
+  id: number;
+  type: string;
+  title: string;
+  author: string | null;
+  description: string;
+  image: string;
+  paused: boolean;
+  episode: string;
+  tmdbId: string;
+  finished: boolean;
+  yearReleased: string;
+  genre: string;
+  startedOn: string;
+};
+
+export default function TVComponent() {
+  const [show, setShow] = useState<TVObject | null>(null);
+  const [failedFetch, setFailedFetch] = useState(false);
+
+  useEffect(() => {
+    async function fetchMusic() {
+      const response = await fetch(
+        "https://api.alexav.gg/v4/tracker/items?type=TV&sort=desc&limit=1"
+      );
+      if (response.ok) {
+        const data = await response.json();
+        if (data && data.length <= 0) {
+          setFailedFetch(true);
+        } else setShow(data[0] as TVObject);
+      } else setFailedFetch(true);
+    }
+
+    setTimeout(() => {
+      fetchMusic();
+    }, 60000);
+    fetchMusic();
+  }, []);
+
+  if (show) {
+    return (
+      <div className="flex align-middle">
+        <a
+          className="hover:underline"
+          href={`https://tracker.alexav.gg/info/${show.id}`}
+          target="_blank"
+        >
+          <h1 className="lowercase">
+            {show.title}
+            <br />
+            {show.finished ? "finished" : show.paused ? "paused" : show.episode}
+          </h1>
+        </a>
+      </div>
+    );
+  } else {
+    if (failedFetch) {
+      return (
+        <div>
+          <p>failed to get show :(</p>
+        </div>
+      );
+    } else {
+      return (
+        <div>
+          <p>loading show..</p>
+        </div>
+      );
+    }
+  }
+}