Move shieet

2025-12-06 22:03:05 +00:00 · 2024-12-01 15:01:41 +01:00
parent b85aaa5687
commit 0bb07ce1da
13 changed files with 11 additions and 0 deletions
--- a/frontend/src/components/Container.svelte
+++ b/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}
--- a/frontend/src/components/Drag.svelte
+++ b/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>
--- a/frontend/src/env.d.ts
+++ b/frontend/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference path="../.astro/types.d.ts" />
--- a/frontend/src/pages/index.astro
+++ b/frontend/src/pages/index.astro
@@ -0,0 +1,16 @@
+---
+import Container from "../components/Container.svelte";
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <title>Astro</title>
+  </head>
+  <body class="h-dvh w-screen">
+    <Container client:load />
+  </body>
+</html>
--- a/frontend/src/utils/types.ts
+++ b/frontend/src/utils/types.ts
@@ -0,0 +1,5 @@
+export interface TrackerData {
+  id: number;
+  x: number;
+  y: number;
+}
				`@@ -0,0 +1 @@`
				`/// <reference path="../.astro/types.d.ts" />`