4 files changed, 53 insertions(+), 24 deletions(-)

M starkingdoms-client/index.html
M starkingdoms-client/src/css/hud.css
M starkingdoms-client/src/css/popup.css
M starkingdoms-client/src/packet_ui.ts

@@ 74,23 74,31 @@ Here be dragons! You have a <b>prerelease server</b> selected. Expect bugs, and 
             <input placeholder="Enter message or command here..." class="chat-box" id="chatentry" required autocomplete="off"/>
         </div>
 
-        <div class="popup hud hidden popup-max-width-300" id="hud">
-            <table>
-                <thead>
-                    <tr>
-                        <th class="hud-d"></th>
-                        <th class="hud-d"></th>
-                        <th class="hud-d"></th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td id="pos">Position: --, --</td>
-                        <td id="velocity">Velocity: --</td>
-                        <td id="track">Track Angle: --</td>
-                    </tr>
-                </tbody>
-            </table>
+        <div class="hud hidden" id="hud">
+            <div class="popup" id="hud-content-wrapper">  
+                <table>
+                    <thead>
+                        <tr>
+                            <th class="hud-d">Position</th>
+                            <th class="hud-d">Velocity</th>
+                            <th class="hud-d">Track Angle</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                          <td id="pos">
+                              <span id="pos-val-x">--</span>, <span id="pos-val-y">--</span>
+                          </td>
+                          <td id="velocity">
+                              <span id="velocity-val">--</span>
+                          </td>
+                          <td id="track">
+                              <span id="track-val">--</span>
+                          </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
 
         <span class="footer-left" id="footer-left"></span>

@@ 1,12 1,24 @@
 .hud {
     position: absolute;
-    left: 50%;
-    bottom: 10px;
-    transform: translate(-50%);
-    margin: 0 0;
-    width: 25vw;
-    min-width: 640px;
+    bottom: .5em;
+    left: .5em;
+    width: calc(100% - 1em);
 }
+
+#hud-content-wrapper {
+    width: min(100vw, 620px);
+    margin: 0 auto;
+}
+
+#hud-content-wrapper > table {
+    width: 100%;
+    table-layout: fixed;
+}
+
+#hud-content-wrapper td {
+    text-align: center;
+}
+
 .hud-d {
     margin-left: 5px;
     margin-right: 5px;

@@ 31,4 31,5 @@
 }
 .hidden {
     display: none;
+    visibility: hidden;
 }

@@ 1,3 1,4 @@
+// @ts-ignore
 import {Direction, Packet, type_direction} from "./protocol.ts";
 import createDebug from "debug";
 


@@ 107,12 108,16 @@ function generateTree(object: any, level: number): [indent: number, key: string,
 
 export let packets: Packet[] = [];
 export let selected_packet: number | null = null;
+// @ts-ignore
 let last_packet: Date | null = null;
+// @ts-ignore
 const log_body = document.getElementById("log_body")!;
+// @ts-ignore
 
 const up_arrow = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="log-icon log-leaving">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18" />
             </svg>`;
+// @ts-ignore
 const down_arrow = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="log-icon log-arriving">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" />
             </svg>`;


@@ 131,7 136,8 @@ export function selectPacket(id: number) {
 
 export function appendPacket(packet: Packet) {
     packets.push(packet);
-
+    return;
+/*
     let duration = "--";
     if (last_packet !== null) {
         duration = (new Date().getTime() - last_packet!.getTime()).toString() + "ms";


@@ 173,4 179,6 @@ export function appendPacket(packet: Packet) {
     log_body.appendChild(tr);
 
     log_body.scrollTop = log_body.scrollHeight;
+
+ */
 }