Format and update

compose.yaml

@@ -8,3 +8,8 @@ services:
       WEB_SERVER_PORT: 8000
       OSC_SERVER_PORT: 9000
       NUM_TRACKERS: 3
+    volumes:
+      - spot-data:/data
+
+volumes:
+  spot-data:

frontend/package.json

@@ -11,17 +11,22 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/svelte": "^7.0.3",
-    "@astrojs/tailwind": "^5.1.4",
-    "astro": "^5.1.4",
-    "svelte": "^5.17.2",
+    "@astrojs/svelte": "^7.0.5",
+    "@astrojs/tailwind": "^5.1.5",
+    "astro": "^5.4.2",
+    "svelte": "^5.22.6",
     "tailwindcss": "^3.4.17",
-    "typescript": "^5.7.3"
+    "typescript": "^5.8.2"
   },
   "devDependencies": {
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1",
-    "prettier-plugin-svelte": "^3.3.2",
-    "prettier-plugin-tailwindcss": "^0.6.9"
+    "prettier-plugin-svelte": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.11"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
   }
 }

frontend/src/components/Container.svelte

@@ -27,14 +27,12 @@
 
     ws.onmessage = (event) => {
       const data = JSON.parse(event.data);
-      console.log(data)
+      console.log(data);
 
       if (data.refresh && image) {
-          image.src = `/background_image?${Math.random()}`;
+        image.src = `/background_image?${Math.random()}`;
         return;
-      }
-
-      else {
+      } else {
         for (const tracker of data) {
           tracker.x *= width;
           tracker.y *= height;
@@ -63,13 +61,11 @@
     width = image?.getBoundingClientRect().width ?? 0;
     height = image?.getBoundingClientRect().height ?? 0;
   });
-
-
 </script>
 
 <svelte:window onresize={resize} />
-<div class="flex h-screen items-center justify-center w-screen">
-  <div class="w-20 mr-auto"></div>
+<div class="flex h-screen w-screen items-center justify-center">
+  <div class="mr-auto w-20"></div>
   <div class="relative">
     <img
       src="/background_image?342038402"

frontend/src/components/Drag.svelte

@@ -76,7 +76,7 @@
   onpointermove={onPointerMove}
   style={`transform: translate(${vis_x}px, ${vis_y}px)`}
   class={`absolute flex h-24 w-24 touch-none select-none items-center justify-center rounded-full
-  ${selected === id ? 'bg-green-400 border-green-400' : 'bg-red-400 border-red-400'}`}
+  ${selected === id ? "border-green-400 bg-green-400" : "border-red-400 bg-red-400"}`}
 >
   Tracker {id}
 </div>

frontend/src/components/Modal.svelte

@@ -21,8 +21,8 @@
   class="absolute left-0 top-0 z-50 m-0 h-full max-h-full w-full max-w-full p-0 open:bg-black/80"
 >
   <div class="flex h-full w-full flex-col items-center justify-center">
-    <h1 class="text-red-600 text-8xl">THIS GONNA FUCK THINGS UP</h1>
-    <div class="flex  items-center justify-center gap-6">
+    <h1 class="text-8xl text-red-600">THIS GONNA FUCK THINGS UP</h1>
+    <div class="flex items-center justify-center gap-6">
       <button class="rounded-md bg-gray-400 p-4" onclick={() => dialog.close()}
         >Close</button
       >