From 27a651760ee65e87296ba2efedb52fb4361e57ff Mon Sep 17 00:00:00 2001
From: TerraMaster85 <tm85@e3t.cc>
Date: Sun, 26 Nov 2023 23:14:11 -0500
Subject: [PATCH] Fix lost CSS and improve the HUD

---
 starkingdoms-client/index.html        | 42 ++++++++++++++++-----------
 starkingdoms-client/src/css/hud.css   | 22 +++++++++++---
 starkingdoms-client/src/css/popup.css |  1 +
 3 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/starkingdoms-client/index.html b/starkingdoms-client/index.html
index 116cb9a22162b26350f760a7097cd718ab2398a6..b844cc5ef60af7769ae8cd31d6df13c8d6e6caa6 100644
--- a/starkingdoms-client/index.html
+++ b/starkingdoms-client/index.html
@@ -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>
diff --git a/starkingdoms-client/src/css/hud.css b/starkingdoms-client/src/css/hud.css
index dc582cc2af0785680a30efabc871bc06d8248cf0..443090aa8732f07efd4914b320f5bbc6622f9d11 100644
--- a/starkingdoms-client/src/css/hud.css
+++ b/starkingdoms-client/src/css/hud.css
@@ -1,12 +1,26 @@
 .hud {
     position: absolute;
-    left: 50%;
     bottom: 10px;
-    transform: translate(-50%);
     margin: 0 0;
-    width: 25vw;
-    min-width: 640px;
+    display: flex;
+    justify-content: center;
+    width: 100%;
 }
+
+#hud-content-wrapper {
+    width: min(100vw, 620px);
+    gap: 16px;
+}
+
+#hud-content-wrapper > table {
+    width: 100%;
+    table-layout: fixed;
+}
+
+#hud-content-wrapper td {
+    text-align: center;
+}
+
 .hud-d {
     margin-left: 5px;
     margin-right: 5px;
diff --git a/starkingdoms-client/src/css/popup.css b/starkingdoms-client/src/css/popup.css
index 8b5564f81d9dc2fe56670fcc3b6fbd2e7fce7ca9..2dc9ee8084412f54f686710005d9ad7675bcf3f7 100644
--- a/starkingdoms-client/src/css/popup.css
+++ b/starkingdoms-client/src/css/popup.css
@@ -31,4 +31,5 @@
 }
 .hidden {
     display: none;
+    visibility: hidden;
 }