2 files changed, 39 insertions(+), 10 deletions(-)

M starkingdoms-client/src/hub.ts
M starkingdoms-client/src/pages/Play.svelte

@@ 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);
 


@@ 214,12 222,22 @@ 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) {

@@ 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,14 @@
 
     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 132,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>