From 9662f5b9a29217c110d4648982ded282269f842d Mon Sep 17 00:00:00 2001
From: core <core@coredoes.dev>
Date: Sun, 26 Nov 2023 12:02:39 -0500
Subject: [PATCH] stylistic improvements to the log

---
 starkingdoms-client/index.html       | 10 +++++++++-
 starkingdoms-client/src/css/log.css  | 20 ++++++++++++++++++++
 starkingdoms-client/src/packet_ui.ts |  4 ++++
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/starkingdoms-client/index.html b/starkingdoms-client/index.html
index c15942fab7b6f10b61df2136134ae2b96bebea66..87a7af0e14199cd69e7ebce603de2428e9b555c4 100644
--- a/starkingdoms-client/index.html
+++ b/starkingdoms-client/index.html
@@ -39,9 +39,17 @@ Here be dragons! You have a <b>prerelease server</b> selected. Expect bugs, and
     </form>
 </div>
 
-<div class="popup popup-wmin log-hidden" id="packet_log">
+<div class="popup popup-wmin log-hidden log-container" id="packet_log">
     <h1>Packet Log</h1>
     <table class="log">
+        <thead>
+            <tr class="log-wfull">
+                <th class="log-wfull log-lalign log-header log-w50">#</th>
+                <th class="log-wfull log-lalign log-header">Dir</th>
+                <th class="log-wfull log-lalign log-header log-w240">Type</th>
+                <th class="log-wfull log-lalign log-header">Delta</th>
+            </tr>
+        </thead>
         <tbody id="log_body">
 
         </tbody>
diff --git a/starkingdoms-client/src/css/log.css b/starkingdoms-client/src/css/log.css
index 6d9ae6ad97b6d4bc6047e26d70d9a0aa4ea30566..6b5a398324ecadc092b36243f26209ff74b5d6ef 100644
--- a/starkingdoms-client/src/css/log.css
+++ b/starkingdoms-client/src/css/log.css
@@ -16,6 +16,8 @@
     display: block;
     max-height: 200px;
     overflow: auto;
+    width: 100%;
+    table-layout: fixed;
 }
 .log-selected {
     background-color: #204e8a;
@@ -33,3 +35,21 @@
 .log-hidden {
     display: none;
 }
+#log_body {
+    width: 100%;
+}
+.log-container {
+    width: 350px;
+}
+.log-header {
+    padding: 5px;
+}
+.log-w240 {
+    width: 240px;
+}
+.log-w50 {
+    width: 50px;
+}
+.log-td {
+    padding: 5px;
+}
\ No newline at end of file
diff --git a/starkingdoms-client/src/packet_ui.ts b/starkingdoms-client/src/packet_ui.ts
index 627c2ca50d20f23995b797d7ec5b8caf7990dacf..fa8f26d181a527e139ffa19fea71d16284020a71 100644
--- a/starkingdoms-client/src/packet_ui.ts
+++ b/starkingdoms-client/src/packet_ui.ts
@@ -147,19 +147,23 @@ export function appendPacket(packet: Packet) {
 
     let td_idx = document.createElement("td");
     td_idx.innerHTML = index.toString();
+    td_idx.classList.add("log-td");
     tr.appendChild(td_idx);
 
     let td_direction = document.createElement("td");
     td_direction.innerHTML = type_direction(packet.t) == Direction.Clientbound ? down_arrow : up_arrow;
+    td_direction.classList.add("log-td");
     tr.appendChild(td_direction);
 
     let td_type = document.createElement("td");
     td_type.innerHTML = packet.t;
+    td_type.classList.add("log-td");
     tr.appendChild(td_type);
 
     let td_ts = document.createElement("td");
     td_ts.innerHTML = duration;
     td_ts.classList.add(type_direction(packet.t) == Direction.Clientbound ? "log-arriving" : "log-leaving")
+    td_ts.classList.add("log-td");
     tr.appendChild(td_ts);
 
     tr.addEventListener("click", () => {