diff --git a/public/assets/headsets/oculus.svg b/public/assets/headsets/oculus.svg new file mode 100644 index 0000000..a7c4ff4 --- /dev/null +++ b/public/assets/headsets/oculus.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/assets/headsets/valve-index.svg b/public/assets/headsets/valve-index.svg new file mode 100644 index 0000000..ffea6b6 --- /dev/null +++ b/public/assets/headsets/valve-index.svg @@ -0,0 +1,207 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + diff --git a/public/assets/headsets/vive.svg b/public/assets/headsets/vive.svg new file mode 100644 index 0000000..d98bfa8 --- /dev/null +++ b/public/assets/headsets/vive.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/HeadsetIcon.tsx b/src/components/HeadsetIcon.tsx new file mode 100644 index 0000000..969b37b --- /dev/null +++ b/src/components/HeadsetIcon.tsx @@ -0,0 +1,72 @@ +import Image from "next/image"; + +const headsets = [ + { + id: [-1], + name: "Unknown", + icon: "unknown.png", + }, + { + id: [64], + name: "Valve Index", + filters: + "invert(81%) sepia(27%) saturate(6288%) hue-rotate(344deg) brightness(103%) contrast(103%)", + icon: "valve-index.svg", + }, + { + id: [32], + name: "Oculus Quest", + filters: + "invert(49%) sepia(26%) saturate(5619%) hue-rotate(146deg) brightness(93%) contrast(86%)", + icon: "oculus.svg", + }, + { + id: [16], + name: "Rift S", + filters: + "invert(49%) sepia(26%) saturate(5619%) hue-rotate(146deg) brightness(93%) contrast(86%)", + icon: "oculus.svg", + }, + { + id: [1], + name: "Rift CV1", + filters: + "invert(99%) sepia(3%) saturate(82%) hue-rotate(58deg) brightness(118%) contrast(100%)", + icon: "oculus.svg", + }, + { + id: [2], + name: "Vive", + filters: + "invert(54%) sepia(78%) saturate(2598%) hue-rotate(157deg) brightness(97%) contrast(101%)", + icon: "vive.svg", + }, +]; + +interface IconProps { + id: number; + size?: number; + className?: string; +} + +export default function HeadsetIcon({ id, size = 32, className }: IconProps) { + let headset = headsets.find((h) => h.id.includes(id)); + if (!headset) { + headset = headsets[0]; + } + + return ( +
+ {headset.name} +
+ ); +} diff --git a/src/components/player/Score.tsx b/src/components/player/Score.tsx index 8510878..d4976c6 100644 --- a/src/components/player/Score.tsx +++ b/src/components/player/Score.tsx @@ -15,6 +15,7 @@ import { } from "@heroicons/react/20/solid"; import clsx from "clsx"; import Image from "next/image"; +import HeadsetIcon from "../HeadsetIcon"; import ScoreStatLabel from "./ScoreStatLabel"; type ScoreProps = { @@ -34,10 +35,11 @@ export default function Score({ score, player, leaderboard }: ScoreProps) { return ( //
-
-
+
+

#{formatNumber(score.rank)}

+

#{formatNumber(score.rank)}

+
{/* Time Set (Mobile) */} @@ -138,7 +141,11 @@ export default function Score({ score, player, leaderboard }: ScoreProps) { "min-w-[2rem]", isFullCombo ? "bg-green-500" : "bg-red-500", )} - title={isFullCombo ? "Full Combo" : `${score.missedNotes}x Missed Notes`} + title={ + isFullCombo + ? "Full Combo" + : `${score.missedNotes}x Missed Notes` + } icon={ isFullCombo ? (