2 files changed, 38 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);
 


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

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