From 17c7a5c7f5e60f6ebce90f37651bd993c66cdbe2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 13 Sep 2025 23:57:10 -0500
Subject: [PATCH] feat: start of selector

---
 .../MixerScene/components/Model.tsx           | 24 ++++++++++++++++
 .../MixerScene/components/Selector.tsx        | 28 +++++++++++++++++++
 2 files changed, 52 insertions(+)
 create mode 100644 packages/website/src/components/MixerScene/components/Selector.tsx

diff --git a/packages/website/src/components/MixerScene/components/Model.tsx b/packages/website/src/components/MixerScene/components/Model.tsx
index 471883278..4a8f27335 100644
--- a/packages/website/src/components/MixerScene/components/Model.tsx
+++ b/packages/website/src/components/MixerScene/components/Model.tsx
@@ -1,7 +1,9 @@
+import { Html } from "@react-three/drei";
 import { awaitableModelDefinitions } from "../../../core/awaitables/modelDefinitions";
 import { jsxTree } from "../../../core/blitzkit/jsxTree";
 import { useModel } from "../../../hooks/useModel";
 import { Mixer } from "../../../stores/mixer";
+import { Selector } from "./Selector";
 
 const modelDefinitions = await awaitableModelDefinitions;
 
@@ -48,6 +50,28 @@ export function Model() {
         });
       })}
 
+      <Html
+        position={[
+          0,
+          trackModel.origin.z + tankModel.turret_origin.z,
+          (trackModel.origin.y + tankModel.turret_origin.y) / 2,
+        ]}
+      >
+        <Selector>test hull</Selector>
+      </Html>
+
+      <Html
+        position={[
+          0,
+          trackModel.origin.z + tankModel.turret_origin.z,
+          trackModel.origin.y +
+            tankModel.turret_origin.y +
+            turretModel.gun_origin.y,
+        ]}
+      >
+        <Selector>test turret</Selector>
+      </Html>
+
       <group
         position={[
           tankModel.turret_origin.x +
diff --git a/packages/website/src/components/MixerScene/components/Selector.tsx b/packages/website/src/components/MixerScene/components/Selector.tsx
new file mode 100644
index 000000000..d81bf194b
--- /dev/null
+++ b/packages/website/src/components/MixerScene/components/Selector.tsx
@@ -0,0 +1,28 @@
+import { Box, Flex, Text } from "@radix-ui/themes";
+import type { ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+}
+
+export function Selector({ children }: Props) {
+  return (
+    <Flex align="center">
+      <Box
+        width="16rem"
+        height="1px"
+        style={{ backgroundColor: "var(--gray-12)" }}
+      />
+      <Box
+        style={{
+          padding: "var(--space-3)",
+          backgroundColor: "var(--gray-3)",
+          borderRadius: "var(--radius-3)",
+          boxShadow: "var(--shadow-3)",
+        }}
+      >
+        <Text style={{ whiteSpace: "nowrap" }}>{children}</Text>
+      </Box>
+    </Flex>
+  );
+}