hitbox detection UI thing idk

src/lib/bindings.ts

@@ -43,6 +43,9 @@ async getPublicKey() : Promise<string> {
 },
 async listStatuses() : Promise<ConnectionStatus[]> {
     return await TAURI_INVOKE("list_statuses");
+},
+async updateSceneHitboxes(hitboxes: SceneHitbox[]) : Promise<null> {
+    return await TAURI_INVOKE("update_scene_hitboxes", { hitboxes });
 }
 }
 
@@ -90,6 +93,7 @@ export type ProfileChanged = { profile: User }
 export type Remote = { id: string; address: string; name: string | null; port: number | null }
 export type RemoteInput = { address: string; name: string | null; port: number | null }
 export type RemotesChanged = { remotes: Remote[] }
+export type SceneHitbox = { x: number; y: number; width: number; height: number }
 /**
  * Public user identity exchanged with peers and remote servers. `id` is the
  * user's Ed25519 public key and is not persisted as local profile metadata.

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));
+  };
+}