hitbox detection UI thing idk

src/routes/scene/+page.svelte

@@ -1,5 +1,12 @@
-<div>
-  <div class="mt-12 mx-auto px-3 py-1 rounded w-min bg-white text-black">
-    <p>WYD</p>
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { startHitboxSync } from "./hitboxes";
+
+  onMount(startHitboxSync);
+</script>
+
+<div class="size-full flex flex-col justify-end">
+  <div role="banner" class="scene-hitbox w-full h-min bg-white text-black">
+    <p class="w-max">WYD</p>
   </div>
 </div>

src/routes/scene/hitboxes.ts

@@ -0,0 +1,41 @@
+import { commands } from "$lib/bindings";
+
+const HITBOX_SELECTOR = ".scene-hitbox";
+
+export function startHitboxSync(): () => void {
+  let resizeObserver: ResizeObserver;
+
+  const syncHitboxes = () => {
+    const elements = Array.from(document.querySelectorAll(HITBOX_SELECTOR));
+    elements.forEach((element) => resizeObserver.observe(element));
+
+    const hitboxes = elements.map((element) => {
+      const { x, y, width, height } = element.getBoundingClientRect();
+      return { x, y, width, height };
+    });
+
+    commands
+      .updateSceneHitboxes(hitboxes)
+      .catch((error) => console.error("Failed to update scene hitboxes", error));
+  };
+
+  resizeObserver = new ResizeObserver(syncHitboxes);
+  const mutationObserver = new MutationObserver(syncHitboxes);
+  mutationObserver.observe(document.body, {
+    attributes: true,
+    attributeFilter: ["class", "style"],
+    childList: true,
+    subtree: true,
+  });
+  window.addEventListener("resize", syncHitboxes);
+  syncHitboxes();
+
+  return () => {
+    resizeObserver.disconnect();
+    mutationObserver.disconnect();
+    window.removeEventListener("resize", syncHitboxes);
+    commands
+      .updateSceneHitboxes([])
+      .catch((error) => console.error("Failed to clear scene hitboxes", error));
+  };
+}