add overlay

src/components/overlay/PlayerStats.tsx

@@ -0,0 +1,34 @@
+import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
+import { formatNumber } from "@/utils/numberUtils";
+import { GlobeAltIcon } from "@heroicons/react/20/solid";
+import Image from "next/image";
+import CountyFlag from "../CountryFlag";
+
+type PlayerStatsProps = {
+  player: ScoresaberPlayer;
+};
+
+export default function PlayerStats({ player }: PlayerStatsProps) {
+  return (
+    <div className="flex gap-2 p-2">
+      <Image
+        alt="Player profile picture"
+        className="rounded-md"
+        src={player.profilePicture}
+        width={180}
+        height={180}
+      />
+      <div>
+        <p className="text-3xl font-bold">{formatNumber(player.pp, 2)}pp</p>
+        <div className="flex items-center gap-2">
+          <GlobeAltIcon width={25} height={25} />
+          <p className="text-3xl">#{formatNumber(player.rank)}</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <CountyFlag className="w-[25px]" countryCode={player.country} />
+          <p className="text-3xl">#{formatNumber(player.countryRank)}</p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/overlay/ScoreStats.tsx

@@ -0,0 +1,20 @@
+import { useOverlayDataStore } from "@/store/overlayDataStore";
+import { formatNumber } from "@/utils/numberUtils";
+import useStore from "@/utils/useStore";
+
+export default function ScoreStats() {
+  const dataStore = useStore(useOverlayDataStore, (store) => store);
+  if (!dataStore) return null;
+  const { scoreStats } = dataStore;
+  if (!scoreStats) return null;
+
+  return (
+    <div className="flex flex-col p-2">
+      <p className="text-2xl">{formatNumber(scoreStats.score)}</p>
+      <p className="text-2xl">Combo: {formatNumber(scoreStats.combo)}</p>
+      <p className="text-2xl">
+        {scoreStats.rank} {scoreStats.accuracy.toFixed(2)}%
+      </p>
+    </div>
+  );
+}

src/components/overlay/SongInfo.tsx

@@ -0,0 +1,46 @@
+import { useOverlayDataStore } from "@/store/overlayDataStore";
+import { songDifficultyToColor } from "@/utils/songUtils";
+import useStore from "@/utils/useStore";
+import clsx from "clsx";
+import Image from "next/image";
+
+export default function SongInfo() {
+  const dataStore = useStore(useOverlayDataStore, (store) => store);
+  if (!dataStore) return null;
+  const { paused, songInfo } = dataStore;
+  if (!songInfo) return null;
+
+  return (
+    <div
+      className={clsx(
+        "flex transform-gpu gap-2 p-2 transition-all",
+        paused ? "grayscale" : "grayscale-0",
+      )}
+    >
+      <Image
+        className="rounded-md"
+        alt="Song Image"
+        src={songInfo.art}
+        width={120}
+        height={120}
+      />
+      <div className="flex flex-col justify-between pb-2 pt-1">
+        <div>
+          <p className="text-xl font-bold">{songInfo.songName}</p>
+          <p className="text-md">{songInfo.songMapper}</p>
+        </div>
+        <div className="mt-1 flex items-center gap-2">
+          <p
+            className="text-md rounded-md p-[3px]"
+            style={{
+              backgroundColor: songDifficultyToColor(songInfo.difficulty),
+            }}
+          >
+            {songInfo.difficulty}
+          </p>
+          <p className="text-md">!bsr {songInfo.bsr}</p>
+        </div>
+      </div>
+    </div>
+  );
+}