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 @@ + + 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 ( +
#{formatNumber(score.rank)}
+
#{formatNumber(score.rank)}
+