From 44cf787478a3835d0bb9d42009a4f1fe2aac39e4 Mon Sep 17 00:00:00 2001
From: TerraMaster85 <tm85@e3t.cc>
Date: Sat, 6 Jan 2024 21:55:45 -0500
Subject: [PATCH] I am at war with `bind` (1/x)

---
 starkingdoms-client/src/hub.ts            | 36 +++++++++++++++++++----
 starkingdoms-client/src/pages/Play.svelte | 12 +++++---
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/starkingdoms-client/src/hub.ts b/starkingdoms-client/src/hub.ts
index a5adbcd3c37ce0556bfb7503387ee08b66579dbf..c8088b061f7fd5cfcfd1859b94e7d63fec459681 100644
--- a/starkingdoms-client/src/hub.ts
+++ b/starkingdoms-client/src/hub.ts
@@ -22,6 +22,11 @@ import { part_texture_url } from "./textures.js";
 import * as PIXI from "pixi.js";
 
 const logger = createDebug("hub");
+let hud = {
+  "x": 0,
+  "y": 0,
+  "next_poll": 0,
+};
 
 export interface ClientHub {
   socket: WebSocket;
@@ -36,6 +41,9 @@ export async function hub_connect(
   url: string,
   username: string,
   chatbox: Chatbox,
+  velocity: HTMLSpanElement,
+  x_pos: HTMLSpanElement,
+  y_pos: HTMLSpanElement
 ): Promise<ClientHub | null> {
   logger("connecting to client hub at " + url);
 
@@ -47,6 +55,8 @@ export async function hub_connect(
   };
 
   ws.onopen = () => {
+
+
     logger("connected to client hub, sending username and auth details");
 
     let client: ClientHub = {
@@ -205,12 +215,26 @@ export async function hub_connect(
 
           global.parts_map.set(id, new_part);
           if (id === global.me?.part_id) {
-            document.getElementById("pos-val-x")!.innerText = Math.round(
-              new_part.transform.x,
-            ).toString();
-            document.getElementById("pos-val-y")!.innerText = Math.round(
-              new_part.transform.y,
-            ).toString();
+            if (hud.next_poll <= 0) {
+              velocity!.innerText = Math.round(
+                Math.sqrt(
+                  Math.pow(Math.abs(new_part.transform.x - hud.x), 2) +
+                  Math.pow(Math.abs(new_part.transform.y - hud.y), 2)
+                )
+              ).toString();
+              hud.next_poll = 30;
+
+              hud.x = new_part.transform.x;
+              hud.y = new_part.transform.y;
+
+              x_pos!.innerText = Math.round(
+                new_part.transform.x,
+              ).toString();
+              y_pos!.innerText = Math.round(
+                new_part.transform.y,
+              ).toString();
+            }
+            hud.next_poll--;
           }
         }
       } else if (packet.t == PacketType.SpawnPart) {
diff --git a/starkingdoms-client/src/pages/Play.svelte b/starkingdoms-client/src/pages/Play.svelte
index aab7b3478896dd6abac04cff6609d8cc45c56fe7..e5577f2f6f871fd6ea9717d11c90838d7375858d 100644
--- a/starkingdoms-client/src/pages/Play.svelte
+++ b/starkingdoms-client/src/pages/Play.svelte
@@ -10,9 +10,13 @@
   import { onMount } from "svelte";
   import Popup from "../components/ui/Popup.svelte";
   import Checkbox from "../components/ui/Checkbox.svelte";
+  import { global } from "../globals.ts";
 
   let config = DEFAULT_CONFIG;
 
+  let velocity;
+  let x_pos;
+  let y_pos;
   let chatbox: Chatbox;
 
   const logger = createDebug("main");
@@ -64,7 +68,7 @@
 
     let server = config.servers[server_id];
 
-    await hub_connect(server.clientHubUrl, username, chatbox);
+    await hub_connect(server.clientHubUrl, username, chatbox, velocity, x_pos, y_pos);
   });
 </script>
 
@@ -121,12 +125,12 @@
       <tbody>
         <tr>
           <td id="pos">
-            <span id="pos-val-x">--</span>
+            <span id="pos-val-x" bind:this={y_pos}>--</span>
             ,
-            <span id="pos-val-y">--</span>
+            <span id="pos-val-y" bind:this={y_pos}>--</span>
           </td>
           <td id="velocity">
-            <span id="velocity-val">--</span>
+            <span id="velocity-val" bind:this={velocity}>--</span>
           </td>
           <td id="track">
             <span id="track-val">--</span>