Move shieet

frontend/src/components/Container.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { TrackerData } from "../utils/types";
+  import Drag from "./Drag.svelte";
+
+  let ws: WebSocket | null = $state(null);
+
+  let trackers: TrackerData[] = $state([
+    { id: 1, x: 0, y: 0 },
+    { id: 2, x: 400, y: 40 },
+  ]);
+
+  onMount(() => {
+    ws = new WebSocket("/ws");
+    ws.onmessage = (event) => {
+      const data = JSON.parse(event.data);
+      trackers = data;
+    };
+  });
+</script>
+
+{#each trackers as tracker}
+  <Drag bind:id={tracker.id} bind:x={tracker.x} bind:y={tracker.y} {ws} />
+{/each}

frontend/src/components/Drag.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  type Props = {
+    id: number;
+    x: number;
+    y: number;
+    ws: WebSocket | null;
+  };
+
+  let {
+    id = $bindable(),
+    x = $bindable(),
+    y = $bindable(),
+    ws = $bindable(),
+  }: Props = $props();
+
+  let element: HTMLElement;
+
+  let capturedPointerId: number | null = $state(null);
+
+  function onPointerDown(e: PointerEvent) {
+    element.setPointerCapture(e.pointerId);
+    capturedPointerId = e.pointerId;
+  }
+  function onPointerUp(e: PointerEvent) {
+    capturedPointerId = null;
+    element.releasePointerCapture(e.pointerId);
+  }
+  function onPointerMove(e: PointerEvent) {
+    if (capturedPointerId != e.pointerId) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    x += e.movementX;
+    y += e.movementY;
+
+    if (ws) {
+      ws.send(
+        JSON.stringify({
+          id,
+          x,
+          y,
+        }),
+      );
+    }
+  }
+</script>
+
+<div
+  bind:this={element}
+  onpointerdown={onPointerDown}
+  onpointerup={onPointerUp}
+  onpointermove={onPointerMove}
+  style={`transform: translate(${x}px, ${y}px)`}
+  class="absolute flex h-40 w-40 touch-none items-center justify-center rounded-full border-red-400 bg-red-400"
+>
+  dragable
+</div>