add headset icons

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 (
+    <div className={className}>
+      <Image
+        src={`/assets/headsets/${headset.icon}`}
+        alt={headset.name}
+        title={headset.name}
+        width={size}
+        height={size}
+        style={{
+          filter: headset.filters,
+        }}
+      />
+    </div>
+  );
+}

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 (
     // <div className="grid grid-cols-1 pb-2 pt-2 first:pt-0 last:pb-0 md:grid-cols-[1fr_6fr_0.4fr_1.3fr]">
     <div className="grid grid-cols-1 pb-2 pt-2 first:pt-0 last:pb-0 md:grid-cols-[0.8fr_6fr_1.3fr]">
-      <div className="ml-3 flex flex-col items-start justify-center">
-        <div className="hidden w-fit flex-row items-center justify-start gap-1 md:flex">
+      <div className="flex flex-col items-center justify-center">
+        <div className="hidden w-fit flex-row items-center justify-center gap-1 md:flex">
           <GlobeAsiaAustraliaIcon width={20} height={20} />
           <p>#{formatNumber(score.rank)}</p>
+          <HeadsetIcon id={score.hmd} size={20} />
         </div>
         <p
           className="hidden text-sm text-gray-200 md:block"
@@ -98,6 +100,7 @@ export default function Score({ score, player, leaderboard }: ScoreProps) {
           <div className="flex items-center gap-1">
             <GlobeAsiaAustraliaIcon width={20} height={20} />
             <p>#{formatNumber(score.rank)}</p>
+            <HeadsetIcon id={score.hmd} size={20} />
           </div>
 
           {/* 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 ? (
                   <CheckIcon width={20} height={20} />