From 25ff77753f74091ca29a5fbc4ca85a189b14857c Mon Sep 17 00:00:00 2001
From: core <core@coredoes.dev>
Date: Mon, 27 Nov 2023 11:27:48 -0500
Subject: [PATCH] update drone DAG names, fmt pass to make prettier happy

---
 .drone.yml                                    |   8 +-
 starkingdoms-client/.prettierrc               |   4 +-
 starkingdoms-client/index.html                | 210 +++++-----
 starkingdoms-client/src/chat.ts               |  10 +-
 starkingdoms-client/src/config.json           |   2 +-
 starkingdoms-client/src/config.ts             |  58 +--
 starkingdoms-client/src/css/chat.css          |  60 +--
 starkingdoms-client/src/css/footer.css        |  28 +-
 starkingdoms-client/src/css/form.css          | 190 ++++-----
 starkingdoms-client/src/css/game.css          |  20 +-
 starkingdoms-client/src/css/globals.css       |  45 +-
 starkingdoms-client/src/css/grid.css          |   6 +-
 starkingdoms-client/src/css/hud.css           |  22 +-
 starkingdoms-client/src/css/json.css          |  20 +-
 starkingdoms-client/src/css/log.css           |  48 +--
 starkingdoms-client/src/css/popup.css         |  36 +-
 starkingdoms-client/src/css/style.css         |   2 +-
 .../themes/catppuccin-common/definitions.css  |  56 +--
 .../css/themes/catppuccin-mocha/colors.css    |  53 ++-
 starkingdoms-client/src/env.d.ts              |   2 +-
 starkingdoms-client/src/hub.ts                | 383 +++++++++---------
 starkingdoms-client/src/main.ts               | 216 +++++-----
 starkingdoms-client/src/packet_ui.ts          | 178 ++++----
 starkingdoms-client/src/planet_colors.ts      |  14 +-
 starkingdoms-client/src/protocol.ts           | 132 +++---
 starkingdoms-client/src/rendering.ts          | 209 +++++-----
 starkingdoms-client/src/textures.ts           |  76 ++--
 starkingdoms-client/vite.config.ts            |  27 +-
 28 files changed, 1121 insertions(+), 994 deletions(-)
diff --git a/.drone.yml b/.drone.yml
index 73d8dd1a281e6cd00f8d127c6dbd2ff71c9faff8..a407d0e58bab8a3915f31360b47576e465500b62 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -9,7 +9,7 @@ trigger:
       - rollback
 
 steps:
-  - name: client_formatting
+  - name: client_fmt
     image: node
     commands:
       - cd starkingdoms-client
@@ -17,7 +17,7 @@ steps:
       - yarn prettier . --check
   - name: client_build
     depends_on:
-      - client_formatting
+      - client_fmt
     image: node
     commands:
       - cd starkingdoms-client
@@ -42,7 +42,7 @@ steps:
       target: builds/${DRONE_COMMIT_SHA}/client.tar.xz
       path_style: true
 
-  - name: server_formatting
+  - name: server_fmt
     image: coresdev/stk_build_env
     commands:
       - cd server
@@ -63,7 +63,7 @@ steps:
   - name: server_clippy
     image: coresdev/stk_build_env
     depends_on:
-      - server_formatting
+      - server_fmt
     commands:
       - cd server
       - cargo clippy --color always
diff --git a/starkingdoms-client/.prettierrc b/starkingdoms-client/.prettierrc
index 0db3279e44b0dc4fb7e694b6cb10210a96ba6ba5..0967ef424bce6791893e9a57bb952f80fd536e93 100644
--- a/starkingdoms-client/.prettierrc
+++ b/starkingdoms-client/.prettierrc
@@ -1,3 +1 @@
-{
-
-}
+{}
diff --git a/starkingdoms-client/index.html b/starkingdoms-client/index.html
index b844cc5ef60af7769ae8cd31d6df13c8d6e6caa6..ea6a9c7dc607e13ee35917d8350bfb328c76bbd5 100644
--- a/starkingdoms-client/index.html
+++ b/starkingdoms-client/index.html
@@ -1,109 +1,127 @@
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-        <title>StarKingdoms</title>
-    </head>
-    <body class="bg-grid">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>StarKingdoms</title>
+  </head>
+  <body class="bg-grid">
+    <div id="gamewindow">
+      <!-- Canvas gets added here by the game script -->
+    </div>
 
-        <div id="gamewindow">
-            <!-- Canvas gets added here by the game script -->
-        </div>
-
-        <div class="popup popup-center popup-max-width-300" id="server_selector">
-
-            <h1>StarKingdoms</h1>
-            <h2>Join Game</h2>
+    <div class="popup popup-center popup-max-width-300" id="server_selector">
+      <h1>StarKingdoms</h1>
+      <h2>Join Game</h2>
 
-            <form id="join-fm">
-                <label>Choose server</label>
+      <form id="join-fm">
+        <label>Choose server</label>
 
-                <div class="fm-select">
-                    <button class="fm-select-button" role="combobox" aria-labelledby="server selector"
-                            aria-haspopup="listbox"
-                            aria-expanded="false" aria-controls="fm-select-dropdown">
-                        <span class="fm-selected-value">Loading servers list</span>
-                        <span class="fm-arrow"></span>
-                    </button>
-                    <ul class="fm-select-dropdown" role="listbox" id="fm-select-dropdown">
-                        <!-- Filled by TS -->
-                    </ul>
-                </div>
-
-                <label for="username" class="username-label">Username</label>
-                <input class="username-box" id="username" required autocomplete="off"/>
-                <button id="launch-btn" class="launch-btn">Launch!</button>
-                <span id="server-danger" class="server-danger hidden">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="server-danger-icon">
-  <path fill-rule="evenodd"
-        d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
-        clip-rule="evenodd"/>
-</svg>
-Here be dragons! You have a <b>prerelease server</b> selected. Expect bugs, and save data on this server may be wiped at any time.
-        </span>
-            </form>
+        <div class="fm-select">
+          <button
+            class="fm-select-button"
+            role="combobox"
+            aria-labelledby="server selector"
+            aria-haspopup="listbox"
+            aria-expanded="false"
+            aria-controls="fm-select-dropdown"
+          >
+            <span class="fm-selected-value">Loading servers list</span>
+            <span class="fm-arrow"></span>
+          </button>
+          <ul class="fm-select-dropdown" role="listbox" id="fm-select-dropdown">
+            <!-- Filled by TS -->
+          </ul>
         </div>
 
-        <div class="popup popup-wmin log-hidden log-container popup-max-width-300" 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">
+        <label for="username" class="username-label">Username</label>
+        <input class="username-box" id="username" required autocomplete="off" />
+        <button id="launch-btn" class="launch-btn">Launch!</button>
+        <span id="server-danger" class="server-danger hidden">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            class="server-danger-icon"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
+              clip-rule="evenodd"
+            />
+          </svg>
+          Here be dragons! You have a <b>prerelease server</b> selected. Expect
+          bugs, and save data on this server may be wiped at any time.
+        </span>
+      </form>
+    </div>
 
-                </tbody>
-            </table>
-            <hr>
-            <h1>Packet Explorer</h1>
-            <p id="explorer_selected" class="mono">Selected: --</p>
-            <table class="mono json" id="explorer_json"></table>
-        </div>
+    <div
+      class="popup popup-wmin log-hidden log-container popup-max-width-300"
+      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>
+      </table>
+      <hr />
+      <h1>Packet Explorer</h1>
+      <p id="explorer_selected" class="mono">Selected: --</p>
+      <table class="mono json" id="explorer_json"></table>
+    </div>
 
-        <div class="popup chat-container hidden" id="chat">
-            <h1>Chat</h1>
-            <div id="chatbox" class="chat-table mono">
-                <!-- Filled by script -->
-            </div>
-            <input placeholder="Enter message or command here..." class="chat-box" id="chatentry" required autocomplete="off"/>
-        </div>
+    <div class="popup chat-container hidden" id="chat">
+      <h1>Chat</h1>
+      <div id="chatbox" class="chat-table mono">
+        <!-- Filled by script -->
+      </div>
+      <input
+        placeholder="Enter message or command here..."
+        class="chat-box"
+        id="chatentry"
+        required
+        autocomplete="off"
+      />
+    </div>
 
-        <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>
+    <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>
-        <span class="footer-right" id="footer-right"></span>
+    <span class="footer-left" id="footer-left"></span>
+    <span class="footer-right" id="footer-right"></span>
 
-        <script type="module" src="src/main.ts"></script>
-    </body>
+    <script type="module" src="src/main.ts"></script>
+  </body>
 </html>
diff --git a/starkingdoms-client/src/chat.ts b/starkingdoms-client/src/chat.ts
index 6287f2477d479a35cac2d04a109d5cb9cbd2df97..72337dfd0ed328687639b68e9215b27d8ba2299a 100644
--- a/starkingdoms-client/src/chat.ts
+++ b/starkingdoms-client/src/chat.ts
@@ -1,7 +1,7 @@
 export function addMessage(classname: string, message: string) {
-    let p = document.createElement("p");
-    p.innerText = message;
-    p.classList.add("message");
-    p.classList.add(classname);
-    document.getElementById("chatbox")!.appendChild(p);
+  let p = document.createElement("p");
+  p.innerText = message;
+  p.classList.add("message");
+  p.classList.add(classname);
+  document.getElementById("chatbox")!.appendChild(p);
 }
diff --git a/starkingdoms-client/src/config.json b/starkingdoms-client/src/config.json
index dd50eba03929d5c17e6bd9a861e375051a85f2bf..eb1515fed7746cb12319760fc347b6626689d60e 100644
--- a/starkingdoms-client/src/config.json
+++ b/starkingdoms-client/src/config.json
@@ -33,4 +33,4 @@
       "isPrimary": false
     }
   }
-}
\ No newline at end of file
+}
diff --git a/starkingdoms-client/src/config.ts b/starkingdoms-client/src/config.ts
index b184a00921d084ba8c84a1cee1487963ffc6cdbd..b08b229025dbb55e1ead91c3e326077755e22100 100644
--- a/starkingdoms-client/src/config.ts
+++ b/starkingdoms-client/src/config.ts
@@ -6,43 +6,43 @@ const logger = createDebug("config");
 const CONFIG_URL = "https://configuration.starkingdoms.io";
 
 export interface Config {
-    servers: {[id: string]: ConfigServer}
+  servers: { [id: string]: ConfigServer };
 }
 export interface ConfigServer {
-    name: string;
-    clientHubUrl: string;
-    apiBaseUrl: string;
-    isProduction: boolean;
-    isDevelopment: boolean;
-    isPrimary: boolean;
+  name: string;
+  clientHubUrl: string;
+  apiBaseUrl: string;
+  isProduction: boolean;
+  isDevelopment: boolean;
+  isPrimary: boolean;
 }
 
 async function fetchWithTimeout(resource: RequestInfo | URL, options = {}) {
-    // @ts-ignore
-    const { timeout = 8000 } = options;
+  // @ts-ignore
+  const { timeout = 8000 } = options;
 
-    const controller = new AbortController();
-    const id = setTimeout(() => controller.abort(), timeout);
+  const controller = new AbortController();
+  const id = setTimeout(() => controller.abort(), timeout);
 
-    const response = await fetch(resource, {
-        ...options,
-        signal: controller.signal
-    });
-    clearTimeout(id);
+  const response = await fetch(resource, {
+    ...options,
+    signal: controller.signal,
+  });
+  clearTimeout(id);
 
-    return response;
+  return response;
 }
 
 export async function loadConfig(): Promise<Config> {
-    logger("loading configuration from " + CONFIG_URL);
-    try {
-        const response = await fetchWithTimeout(CONFIG_URL, {
-            timeout: 1000
-        });
-        return await response.json();
-    } catch (e) {
-        logger(`error loading configuration: ${e}, using fallback`);
-        // @ts-ignore strong types are unhelpful here
-        return CONFIG;
-    }
-}
\ No newline at end of file
+  logger("loading configuration from " + CONFIG_URL);
+  try {
+    const response = await fetchWithTimeout(CONFIG_URL, {
+      timeout: 1000,
+    });
+    return await response.json();
+  } catch (e) {
+    logger(`error loading configuration: ${e}, using fallback`);
+    // @ts-ignore strong types are unhelpful here
+    return CONFIG;
+  }
+}
diff --git a/starkingdoms-client/src/css/chat.css b/starkingdoms-client/src/css/chat.css
index a42cc4069fd47e3245035a234a4fbab572454fc9..ea01e506711d375f26526573353ebcb62806a0ea 100644
--- a/starkingdoms-client/src/css/chat.css
+++ b/starkingdoms-client/src/css/chat.css
@@ -1,48 +1,48 @@
 .chat-container {
-    position: absolute;
-    top: 0.5em;
-    right: 0.5em;
-    width: 30vw;
-    height: min-content;
-    font-size: 0.875rem; /* 14px */
-    line-height: 1.25rem; /* 20px */
-    font-weight: 500;
+  position: absolute;
+  top: 0.5em;
+  right: 0.5em;
+  width: 30vw;
+  height: min-content;
+  font-size: 0.875rem; /* 14px */
+  line-height: 1.25rem; /* 20px */
+  font-weight: 500;
 }
 .chat-table {
-    height: 23vh;
-    display: block;
-    overflow: auto;
+  height: 23vh;
+  display: block;
+  overflow: auto;
 }
 .chat-box {
-    appearance: none;
-    background: transparent;
-    color: var(--text);
-    padding: 0.675em 1em;
-    border: 1px solid var(--links);
-    border-radius: 0.25rem;
-    cursor: text;
-    width: 100%;
-    max-width: 100%;
+  appearance: none;
+  background: transparent;
+  color: var(--text);
+  padding: 0.675em 1em;
+  border: 1px solid var(--links);
+  border-radius: 0.25rem;
+  cursor: text;
+  width: 100%;
+  max-width: 100%;
 }
 .chat-box:focus {
-    outline: none;
-    background-color: var(--links-ultratransparent);
+  outline: none;
+  background-color: var(--links-ultratransparent);
 }
 .message {
-    padding-top: 0;
-    padding-bottom: 0;
-    margin-top: 1px;
-    margin-bottom: 1px;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 1px;
+  margin-bottom: 1px;
 }
 .server-message {
-    color: #facb61;
+  color: #facb61;
 }
 .server-error {
-    color: #ff2222;
+  color: #ff2222;
 }
 .global-message {
-    color: #4de640;
+  color: #4de640;
 }
 .direct-message {
-    color: #599fbd;
+  color: #599fbd;
 }
diff --git a/starkingdoms-client/src/css/footer.css b/starkingdoms-client/src/css/footer.css
index 81bdd7f0d68d4b388cf2d9cdca973a89510d3645..8a9bbd2d71a7e80dd17dbf006950209f3cc6849d 100644
--- a/starkingdoms-client/src/css/footer.css
+++ b/starkingdoms-client/src/css/footer.css
@@ -1,20 +1,20 @@
 .footer-left {
-    font-size: 0.75rem;
-    line-height: 1rem;
-    position: absolute;
-    bottom: 1em;
-    left: 1em;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  position: absolute;
+  bottom: 1em;
+  left: 1em;
 }
 .footer-right {
-    font-size: 0.75rem;
-    line-height: 1rem;
-    position: absolute;
-    bottom: 1vh;
-    right: 1vw;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  position: absolute;
+  bottom: 1vh;
+  right: 1vw;
 }
 .footer-icon {
-    vertical-align: middle;
-    display: inline-block;
-    width: 1rem;
-    height: 1rem;
+  vertical-align: middle;
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
 }
diff --git a/starkingdoms-client/src/css/form.css b/starkingdoms-client/src/css/form.css
index 2698c660345cb31f648563ebd08efd7e8d6b2bfa..32aacf27879bcc2bc61c2362074d3e2091ee95d3 100644
--- a/starkingdoms-client/src/css/form.css
+++ b/starkingdoms-client/src/css/form.css
@@ -1,156 +1,158 @@
 .launch-btn {
-    appearance: none;
-    width: 100%;
-    padding: 1em;
-    margin-top: 1em;
-    color: var(--text);
-    background: transparent;
-    border: 2px solid var(--links);
-    border-radius: 5px;
-    transition: 0.1s ease-in-out;
+  appearance: none;
+  width: 100%;
+  padding: 1em;
+  margin-top: 1em;
+  color: var(--text);
+  background: transparent;
+  border: 2px solid var(--links);
+  border-radius: 5px;
+  transition: 0.1s ease-in-out;
 }
 .launch-btn:hover {
-    cursor: pointer;
-    background-color: var(--links-transparent);
+  cursor: pointer;
+  background-color: var(--links-transparent);
 }
 
 .username-label {
-    margin-top: 1em;
+  margin-top: 1em;
 }
 .fm-select {
-    margin-bottom: 1em;
-    position: relative;
+  margin-bottom: 1em;
+  position: relative;
 }
 
 .username-box {
-    appearance: none;
-    background: transparent;
-    color: var(--text);
-    padding: 0.675em 1em;
-    border: 1px solid var(--links);
-    border-radius: 0.25rem;
-    cursor: text;
-    width: 100%;
-    max-width: 100%;
+  appearance: none;
+  background: transparent;
+  color: var(--text);
+  padding: 0.675em 1em;
+  border: 1px solid var(--links);
+  border-radius: 0.25rem;
+  cursor: text;
+  width: 100%;
+  max-width: 100%;
 }
 .username-box:focus {
-    outline: none;
-    background-color: var(--links-ultratransparent);
+  outline: none;
+  background-color: var(--links-ultratransparent);
 }
 
 .fm-select-button {
-    appearance: none;
-    background: transparent;
-    color: var(--text);
-    width: 100%;
-    padding: 0.675em 1em;
-    border: 1px solid var(--links);
-    border-radius: 0.25rem;
-    cursor: pointer;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  appearance: none;
+  background: transparent;
+  color: var(--text);
+  width: 100%;
+  padding: 0.675em 1em;
+  border: 1px solid var(--links);
+  border-radius: 0.25rem;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 .fm-selected-value {
-    text-align: left;
+  text-align: left;
 }
 .fm-arrow {
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-    border-top: 6px solid var(--links);
-    transition: transform ease-in-out 0.3s;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 6px solid var(--links);
+  transition: transform ease-in-out 0.3s;
 }
 .fm-select-dropdown {
-    position: absolute;
-    list-style: none;
-    width: 100%;
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
-    background-color: var(--bg-secondary-1);
-    border: 1px solid var(--links);
-    border-radius: 4px;
-    padding: 10px;
-    margin-top: 10px;
-    max-height: 200px;
-    overflow-y: auto;
-    transition: 0.2s ease;
+  position: absolute;
+  list-style: none;
+  width: 100%;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+  background-color: var(--bg-secondary-1);
+  border: 1px solid var(--links);
+  border-radius: 4px;
+  padding: 10px;
+  margin-top: 10px;
+  max-height: 200px;
+  overflow-y: auto;
+  transition: 0.2s ease;
 
-    /*transform: scaleY(0);*/
-    opacity: 0;
-    visibility: hidden;
+  /*transform: scaleY(0);*/
+  opacity: 0;
+  visibility: hidden;
 }
 .fm-select-dropdown:focus-within {
-    box-shadow: 0 10px 25px var(--links-ultratransparent);
+  box-shadow: 0 10px 25px var(--links-ultratransparent);
 }
 
 .fm-select-dropdown li {
-    position: relative;
-    cursor: pointer;
-    display: flex;
-    gap: 1rem;
-    align-items: center;
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  gap: 1rem;
+  align-items: center;
 }
 
 .fm-select-dropdown li label {
-    width: 100%;
-    padding: 8px 10px;
-    cursor: pointer;
+  width: 100%;
+  padding: 8px 10px;
+  cursor: pointer;
 }
 
 .fm-select-dropdown::-webkit-scrollbar {
-    width: 7px;
+  width: 7px;
 }
 .fm-select-dropdown::-webkit-scrollbar-track {
-    background: #f1f1f1;
-    border-radius: 25px;
+  background: #f1f1f1;
+  border-radius: 25px;
 }
 
 .fm-select-dropdown::-webkit-scrollbar-thumb {
-    background: #ccc;
-    border-radius: 25px;
+  background: #ccc;
+  border-radius: 25px;
 }
 
 .fm-select-dropdown li + li {
-    margin-top: 5px;
+  margin-top: 5px;
 }
 
-.fm-select-dropdown li, .fm-select-dropdown input ~ label {
-    border-radius: 5px;
+.fm-select-dropdown li,
+.fm-select-dropdown input ~ label {
+  border-radius: 5px;
 }
 
-.fm-select-dropdown li:hover, .fm-select-dropdown input:checked ~ label {
-    background-color: var(--surface-0);
+.fm-select-dropdown li:hover,
+.fm-select-dropdown input:checked ~ label {
+  background-color: var(--surface-0);
 }
 .fm-select-dropdown input:focus ~ label {
-    background-color: var(--surface-1);
+  background-color: var(--surface-1);
 }
 
 .fm-select-dropdown input[type="radio"] {
-    position: absolute;
-    left: 0;
-    opacity: 0;
+  position: absolute;
+  left: 0;
+  opacity: 0;
 }
 .fm-select.active .fm-arrow {
-    transform: rotate(180deg);
+  transform: rotate(180deg);
 }
 .fm-select.active .fm-select-dropdown {
-    opacity: 1;
-    visibility: visible;
-    /*transform: scaleY(1);*/
+  opacity: 1;
+  visibility: visible;
+  /*transform: scaleY(1);*/
 }
 .server-danger {
-    width: 100%;
-    display: block;
-    height: max-content;
-    margin-top: 1em;
-    color: var(--error);
-    font-size: 0.875rem;
-    line-height: 1.25rem;
+  width: 100%;
+  display: block;
+  height: max-content;
+  margin-top: 1em;
+  color: var(--error);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 .server-danger.hidden {
-    display: none;
+  display: none;
 }
 .server-danger-icon {
-    height: 1.25rem;
-    vertical-align: middle;
-    display: inline-block;
+  height: 1.25rem;
+  vertical-align: middle;
+  display: inline-block;
 }
diff --git a/starkingdoms-client/src/css/game.css b/starkingdoms-client/src/css/game.css
index 5455f2e23c21d7f68966179a7f1d1d047759014b..fc5f2058326a2418144fcd1db8bf6171f8b84982 100644
--- a/starkingdoms-client/src/css/game.css
+++ b/starkingdoms-client/src/css/game.css
@@ -1,11 +1,11 @@
 .game {
-    width: 100vw;
-    height: 100vh;
-    margin: 0;
-    padding: 0;
-    position: fixed;
-    left: 0;
-    top: 0;
-    z-index: -1;
-    background: url("../assets/starfield.svg");
-}
\ No newline at end of file
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: -1;
+  background: url("../assets/starfield.svg");
+}
diff --git a/starkingdoms-client/src/css/globals.css b/starkingdoms-client/src/css/globals.css
index 1cb81b287f80243bfc23c5713e55fb760edc2ec4..a0730f7ce03cc27ea8d5b7a38cf8c5d544ffe51b 100644
--- a/starkingdoms-client/src/css/globals.css
+++ b/starkingdoms-client/src/css/globals.css
@@ -1,28 +1,45 @@
 html {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
-*, *:before, *:after {
-    box-sizing: inherit;
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
 }
 
 body {
-    background-color: var(--bg);
-    color: var(--body);
-    /* Stolen from Tailwind. Looks good in most places. */
-    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    font-size: 1rem;
-    line-height: 1.5rem;
+  background-color: var(--bg);
+  color: var(--body);
+  /* Stolen from Tailwind. Looks good in most places. */
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    "Noto Sans",
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji";
+  font-size: 1rem;
+  line-height: 1.5rem;
 }
 
 .mono {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
 }
 
 h1 {
-    font-size: 1.25rem;
-    line-height: 1.75rem;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
 }
 h2 {
-    font-size: 1.125rem;
-    line-height: 1.75rem;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
 }
diff --git a/starkingdoms-client/src/css/grid.css b/starkingdoms-client/src/css/grid.css
index 24007545d0f3e3956cc41f2aa54365a917143d37..39827aac56dbff971900071a6df44cfc34e186d7 100644
--- a/starkingdoms-client/src/css/grid.css
+++ b/starkingdoms-client/src/css/grid.css
@@ -1,5 +1,5 @@
 .bg-grid {
-    background-image: linear-gradient(to right, #80808012 1px, transparent 1px),
+  background-image: linear-gradient(to right, #80808012 1px, transparent 1px),
     linear-gradient(to bottom, #80808012 1px, transparent 1px);
-    background-size: 24px 24px;
-}
\ No newline at end of file
+  background-size: 24px 24px;
+}
diff --git a/starkingdoms-client/src/css/hud.css b/starkingdoms-client/src/css/hud.css
index 7fce7ecef8074e4860dbdc9f8eae87323888d192..5854734cd8bb3639e69ec1e59c452670db1583e2 100644
--- a/starkingdoms-client/src/css/hud.css
+++ b/starkingdoms-client/src/css/hud.css
@@ -1,25 +1,25 @@
 .hud {
-    position: absolute;
-    bottom: .5em;
-    left: .5em;
-    width: calc(100% - 1em);
+  position: absolute;
+  bottom: 0.5em;
+  left: 0.5em;
+  width: calc(100% - 1em);
 }
 
 #hud-content-wrapper {
-    width: min(100vw, 620px);
-    margin: 0 auto;
+  width: min(100vw, 620px);
+  margin: 0 auto;
 }
 
 #hud-content-wrapper > table {
-    width: 100%;
-    table-layout: fixed;
+  width: 100%;
+  table-layout: fixed;
 }
 
 #hud-content-wrapper td {
-    text-align: center;
+  text-align: center;
 }
 
 .hud-d {
-    margin-left: 5px;
-    margin-right: 5px;
+  margin-left: 5px;
+  margin-right: 5px;
 }
diff --git a/starkingdoms-client/src/css/json.css b/starkingdoms-client/src/css/json.css
index 1127d92a829ac6dae1580f8914ad3ee7a03a7123..a9046e3b35e5fa8c7a8d1e22b34af3c9e1c44066 100644
--- a/starkingdoms-client/src/css/json.css
+++ b/starkingdoms-client/src/css/json.css
@@ -1,21 +1,21 @@
 :root {
-    --ident: #75bfff;
-    --string: #ff7de9;
-    --literal: #86de74;
-    --indent-spacing: 16px;
+  --ident: #75bfff;
+  --string: #ff7de9;
+  --literal: #86de74;
+  --indent-spacing: 16px;
 }
 
 .json-ident {
-    color: var(--ident);
+  color: var(--ident);
 }
 .json-string {
-    color: var(--string);
+  color: var(--string);
 }
 .json-literal {
-    color: var(--literal);
+  color: var(--literal);
 }
 .json {
-    max-height: 200px;
-    display: block;
-    overflow: auto;
+  max-height: 200px;
+  display: block;
+  overflow: auto;
 }
diff --git a/starkingdoms-client/src/css/log.css b/starkingdoms-client/src/css/log.css
index 6b5a398324ecadc092b36243f26209ff74b5d6ef..f807442814fb54fc012ffc1b7fde4f366b731d30 100644
--- a/starkingdoms-client/src/css/log.css
+++ b/starkingdoms-client/src/css/log.css
@@ -1,55 +1,55 @@
 .log-icon {
-    width: 16px
+  width: 16px;
 }
 .log-lalign {
-    text-align: left;
+  text-align: left;
 }
 .log-item {
-    cursor: pointer;
+  cursor: pointer;
 }
 .log-item:hover {
-    background-color: #4a4a4f;
+  background-color: #4a4a4f;
 }
 .log {
-    border: none;
-    border-collapse: collapse;
-    display: block;
-    max-height: 200px;
-    overflow: auto;
-    width: 100%;
-    table-layout: fixed;
+  border: none;
+  border-collapse: collapse;
+  display: block;
+  max-height: 200px;
+  overflow: auto;
+  width: 100%;
+  table-layout: fixed;
 }
 .log-selected {
-    background-color: #204e8a;
-    cursor: default;
+  background-color: #204e8a;
+  cursor: default;
 }
 .log-leaving {
-    color: var(--error);
+  color: var(--error);
 }
 .log-arriving {
-    color: var(--success);
+  color: var(--success);
 }
 .log > tbody > tr > td {
-    padding: 2px;
+  padding: 2px;
 }
 .log-hidden {
-    display: none;
+  display: none;
 }
 #log_body {
-    width: 100%;
+  width: 100%;
 }
 .log-container {
-    width: 350px;
+  width: 350px;
 }
 .log-header {
-    padding: 5px;
+  padding: 5px;
 }
 .log-w240 {
-    width: 240px;
+  width: 240px;
 }
 .log-w50 {
-    width: 50px;
+  width: 50px;
 }
 .log-td {
-    padding: 5px;
-}
\ No newline at end of file
+  padding: 5px;
+}
diff --git a/starkingdoms-client/src/css/popup.css b/starkingdoms-client/src/css/popup.css
index 2dc9ee8084412f54f686710005d9ad7675bcf3f7..722fa401eca492fdddb737fa6e22879a8a40b98a 100644
--- a/starkingdoms-client/src/css/popup.css
+++ b/starkingdoms-client/src/css/popup.css
@@ -1,35 +1,35 @@
 .popup {
-    padding: 1em;
+  padding: 1em;
 
-    background-color: var(--bg-secondary-1);
+  background-color: var(--bg-secondary-1);
 
-    height: min-content;
+  height: min-content;
 
-    border-radius: 5px;
-    z-index: 100000;
+  border-radius: 5px;
+  z-index: 100000;
 }
 .popup-max-width-300 {
-    max-width: 300px;
+  max-width: 300px;
 }
 .popup-wmin {
-    width: min-content;
+  width: min-content;
 }
 .popup-center {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
 }
 .popup > h1 {
-    margin: 0;
+  margin: 0;
 }
 .popup > h2 {
-    margin: 0 0 0.5em;
-    color: var(--sub-headline);
+  margin: 0 0 0.5em;
+  color: var(--sub-headline);
 }
 .hidden {
-    display: none;
-    visibility: hidden;
+  display: none;
+  visibility: hidden;
 }
diff --git a/starkingdoms-client/src/css/style.css b/starkingdoms-client/src/css/style.css
index 9f73f2728b7b2f5620cc3263d006a9b8a4b5a1aa..eb4b78e29760fc73d6d8f84b57a51a5f29597fa9 100644
--- a/starkingdoms-client/src/css/style.css
+++ b/starkingdoms-client/src/css/style.css
@@ -7,4 +7,4 @@
 @import "log.css";
 @import "game.css";
 @import "hud.css";
-@import "chat.css";
\ No newline at end of file
+@import "chat.css";
diff --git a/starkingdoms-client/src/css/themes/catppuccin-common/definitions.css b/starkingdoms-client/src/css/themes/catppuccin-common/definitions.css
index d98803c3f89e556715417a944307b9521d78d88f..bf5df171bc6fd150353df885764ac5eac478ec10 100644
--- a/starkingdoms-client/src/css/themes/catppuccin-common/definitions.css
+++ b/starkingdoms-client/src/css/themes/catppuccin-common/definitions.css
@@ -2,34 +2,34 @@
 /* This is also a good reference if you want to make your own themes, for what variables you *must* define. */
 
 :root {
-    /* Background colors */
-    --bg: rgb(var(--base));
-    --bg-secondary-1: rgb(var(--crust));
-    --bg-secondary-2: rgb(var(--mantle));
+  /* Background colors */
+  --bg: rgb(var(--base));
+  --bg-secondary-1: rgb(var(--crust));
+  --bg-secondary-2: rgb(var(--mantle));
 
-    --surface-0: rgb(var(--surface0));
-    --surface-1: rgb(var(--surface1));
-    --surface-2: rgb(var(--surface2));
+  --surface-0: rgb(var(--surface0));
+  --surface-1: rgb(var(--surface1));
+  --surface-2: rgb(var(--surface2));
 
-    --overlay-0: rgb(var(--overlay0));
-    --overlay-1: rgb(var(--overlay1));
-    --overlay-2: rgb(var(--overlay2));
+  --overlay-0: rgb(var(--overlay0));
+  --overlay-1: rgb(var(--overlay1));
+  --overlay-2: rgb(var(--overlay2));
 
-    /* Typography */
-    --body: rgb(var(--text));
-    --headline: rgb(var(--text));
-    --sub-headline: rgb(var(--subtext0));
-    --label: rgb(var(--subtext0));
-    --subtle: rgb(var(--overlay1));
-    --links: rgb(var(--blue));
-    --links-transparent: rgba(var(--blue), 0.35);
-    --links-ultratransparent: rgba(var(--blue), 0.15);
-    --success: rgb(var(--green));
-    --warning: rgb(var(--yellow));
-    --error: rgb(var(--red));
-    --tag: rgb(var(--blue));
-    --pill: rgb(var(--blue));
-    --sel-bg: rgba(var(--surface2), 0.4);
-    --cursor: rgb(var(--rosewater));
-    --dm: rgb(var(--teal));
-}
\ No newline at end of file
+  /* Typography */
+  --body: rgb(var(--text));
+  --headline: rgb(var(--text));
+  --sub-headline: rgb(var(--subtext0));
+  --label: rgb(var(--subtext0));
+  --subtle: rgb(var(--overlay1));
+  --links: rgb(var(--blue));
+  --links-transparent: rgba(var(--blue), 0.35);
+  --links-ultratransparent: rgba(var(--blue), 0.15);
+  --success: rgb(var(--green));
+  --warning: rgb(var(--yellow));
+  --error: rgb(var(--red));
+  --tag: rgb(var(--blue));
+  --pill: rgb(var(--blue));
+  --sel-bg: rgba(var(--surface2), 0.4);
+  --cursor: rgb(var(--rosewater));
+  --dm: rgb(var(--teal));
+}
diff --git a/starkingdoms-client/src/css/themes/catppuccin-mocha/colors.css b/starkingdoms-client/src/css/themes/catppuccin-mocha/colors.css
index 9b3bca6266e0f8fed68b09eb75f8ed873b52027d..6fc519602f4653bf87a738562e985261ccf4f375 100644
--- a/starkingdoms-client/src/css/themes/catppuccin-mocha/colors.css
+++ b/starkingdoms-client/src/css/themes/catppuccin-mocha/colors.css
@@ -2,31 +2,30 @@
 @import "../catppuccin-common/definitions.css";
 
 :root {
-    --rosewater: 245, 224, 220;
-    --flamingo: 242, 205, 205;
-    --pink: 245, 194, 231;
-    --mauve: 203, 166, 247;
-    --red: 243, 139, 169;
-    --maroon: 235, 160, 172;
-    --peach: 250, 179, 135;
-    --yellow: 249, 226, 175;
-    --green: 166, 227, 161;
-    --teal: 148, 226, 213;
-    --sky: 137, 220, 235;
-    --sapphire: 116, 199, 236;
-    --blue: 137, 180, 250;
-    --lavender: 180, 190, 254;
-    --text: 205, 214, 244;
-    --subtext1: 186, 194, 222;
-    --subtext0: 166, 173, 200;
-    --overlay2: 147, 153, 178;
-    --overlay1: 127, 132, 156;
-    --overlay0: 108, 112, 134;
-    --surface2: 88, 91, 112;
-    --surface1: 69, 71, 90;
-    --surface0: 49, 50, 68;
-    --base: 30, 30, 46;
-    --mantle: 24, 24, 37;
-    --crust: 17, 17, 27;
+  --rosewater: 245, 224, 220;
+  --flamingo: 242, 205, 205;
+  --pink: 245, 194, 231;
+  --mauve: 203, 166, 247;
+  --red: 243, 139, 169;
+  --maroon: 235, 160, 172;
+  --peach: 250, 179, 135;
+  --yellow: 249, 226, 175;
+  --green: 166, 227, 161;
+  --teal: 148, 226, 213;
+  --sky: 137, 220, 235;
+  --sapphire: 116, 199, 236;
+  --blue: 137, 180, 250;
+  --lavender: 180, 190, 254;
+  --text: 205, 214, 244;
+  --subtext1: 186, 194, 222;
+  --subtext0: 166, 173, 200;
+  --overlay2: 147, 153, 178;
+  --overlay1: 127, 132, 156;
+  --overlay0: 108, 112, 134;
+  --surface2: 88, 91, 112;
+  --surface1: 69, 71, 90;
+  --surface0: 49, 50, 68;
+  --base: 30, 30, 46;
+  --mantle: 24, 24, 37;
+  --crust: 17, 17, 27;
 }
-
diff --git a/starkingdoms-client/src/env.d.ts b/starkingdoms-client/src/env.d.ts
index c10a6231aea681dd4fd0b445c26d2ee292b4453e..df42d3c25e33a597b4d1c859e7d447ad05b19ba2 100644
--- a/starkingdoms-client/src/env.d.ts
+++ b/starkingdoms-client/src/env.d.ts
@@ -1,2 +1,2 @@
 declare const APP_VERSION: string;
-declare const COMMIT_HASH: string;
\ No newline at end of file
+declare const COMMIT_HASH: string;
diff --git a/starkingdoms-client/src/hub.ts b/starkingdoms-client/src/hub.ts
index 17f8499c409ad1c733feb624a5334910b5e525b8..05ab0c622e423432dc7ce28404fdca27417f6eed 100644
--- a/starkingdoms-client/src/hub.ts
+++ b/starkingdoms-client/src/hub.ts
@@ -1,212 +1,219 @@
 import createDebug from "debug";
 import {
-    MessagePacket,
-    MessageType,
-    Packet,
-    PacketType,
-    PartPositionsPacket,
-    PlanetPositionsPacket,
-    PlayerLeavePacket,
-    PlayerListPacket,
-    SpawnPlayerPacket,
+  MessagePacket,
+  MessageType,
+  Packet,
+  PacketType,
+  PartPositionsPacket,
+  PlanetPositionsPacket,
+  PlayerLeavePacket,
+  PlayerListPacket,
+  SpawnPlayerPacket,
 } from "./protocol.ts";
-import {appendPacket} from "./packet_ui.ts";
-import {global} from "./main.ts";
-import {startRender} from "./rendering.ts";
-import {addMessage} from "./chat.ts";
+import { appendPacket } from "./packet_ui.ts";
+import { global } from "./main.ts";
+import { startRender } from "./rendering.ts";
+import { addMessage } from "./chat.ts";
 
 const logger = createDebug("hub");
 
 export interface ClientHub {
-    socket: WebSocket;
+  socket: WebSocket;
 }
 
 export function sendPacket(client: ClientHub, packet: Packet) {
-    client.socket.send(JSON.stringify(packet));
-    appendPacket(packet);
+  client.socket.send(JSON.stringify(packet));
+  appendPacket(packet);
 }
 
-export async function hub_connect(url: string, username: string): Promise<ClientHub | null> {
-    logger("connecting to client hub at " + url)
+export async function hub_connect(
+  url: string,
+  username: string,
+): Promise<ClientHub | null> {
+  logger("connecting to client hub at " + url);
 
-    let ws  = new WebSocket(url);
+  let ws = new WebSocket(url);
 
-    ws.onerror = (e) => {
-        console.error(e);
-        throw e;
-    }
+  ws.onerror = (e) => {
+    console.error(e);
+    throw e;
+  };
 
-    ws.onopen = () => {
-        logger("connected to client hub, sending username and auth details");
+  ws.onopen = () => {
+    logger("connected to client hub, sending username and auth details");
 
-        let client: ClientHub = {
-            socket: ws
-        };
+    let client: ClientHub = {
+      socket: ws,
+    };
 
-        let packet: Packet = {
-            t: PacketType.ClientLogin,
+    let packet: Packet = {
+      t: PacketType.ClientLogin,
+      c: {
+        username,
+        jwt: null,
+      },
+    };
+    sendPacket(client, packet);
+
+    // input
+    document.onkeydown = (e) => {
+      // currently, input packet is sent on any key down. fix that
+      if (e.key == "ArrowUp" || e.key == "w") {
+        global.up = true;
+      }
+      if (e.key == "ArrowDown" || e.key == "s") {
+        global.down = true;
+      }
+      if (e.key == "ArrowLeft" || e.key == "a") {
+        global.left = true;
+      }
+      if (e.key == "ArrowRight" || e.key == "d") {
+        global.right = true;
+      }
+      let input_packet: Packet = {
+        t: PacketType.PlayerInput,
+        c: {
+          up: global.up,
+          down: global.down,
+          left: global.left,
+          right: global.right,
+        },
+      };
+      sendPacket(client, input_packet);
+    };
+    document.onkeyup = (e) => {
+      if (e.key == "ArrowUp" || e.key == "w") {
+        global.up = false;
+      }
+      if (e.key == "ArrowDown" || e.key == "s") {
+        global.down = false;
+      }
+      if (e.key == "ArrowLeft" || e.key == "a") {
+        global.left = false;
+      }
+      if (e.key == "ArrowRight" || e.key == "d") {
+        global.right = false;
+      }
+      let input_packet: Packet = {
+        t: PacketType.PlayerInput,
+        c: {
+          up: global.up,
+          down: global.down,
+          left: global.left,
+          right: global.right,
+        },
+      };
+      sendPacket(client, input_packet);
+    };
+
+    document.getElementById("chatentry")!.onkeydown = (e) => {
+      if (e.key === "Enter") {
+        let value = (<HTMLInputElement>document.getElementById("chatentry")!)
+          .value;
+
+        if (value.startsWith(".msg")) {
+          let args = value.split(" ");
+          if (args.length < 3) {
+            addMessage("server-error", "Command error");
+
+            (<HTMLInputElement>document.getElementById("chatentry")!).value =
+              "";
+            return;
+          }
+          let target = args[1];
+          let message = args.slice(2).join(" ");
+          let chat_packet: Packet = {
+            t: PacketType.SendMessage,
             c: {
-                username,
-                jwt: null
-            }
-        };
-        sendPacket(client, packet);
-
-        // input
-        document.onkeydown = (e) => {
-            // currently, input packet is sent on any key down. fix that
-            if(e.key == "ArrowUp" || e.key == "w") {
-                global.up = true;
-            }
-            if(e.key == "ArrowDown" || e.key == "s") {
-                global.down = true;
-            }
-            if(e.key == "ArrowLeft" || e.key == "a") {
-                global.left = true;
-            }
-            if(e.key == "ArrowRight" || e.key == "d") {
-                global.right = true;
-            }
-            let input_packet: Packet = {
-                t: PacketType.PlayerInput,
-                c: {
-                    up: global.up,
-                    down: global.down,
-                    left: global.left,
-                    right: global.right,
-                }
-            }
-            sendPacket(client, input_packet);
-        }
-        document.onkeyup = (e) => {
-            if(e.key == "ArrowUp" || e.key == "w") {
-                global.up = false;
-            }
-            if(e.key == "ArrowDown" || e.key == "s") {
-                global.down = false;
-            }
-            if(e.key == "ArrowLeft" || e.key == "a") {
-                global.left = false;
-            }
-            if(e.key == "ArrowRight" || e.key ==  "d") {
-                global.right = false;
-            }
-            let input_packet: Packet = {
-                t: PacketType.PlayerInput,
-                c: {
-                    up: global.up,
-                    down: global.down,
-                    left: global.left,
-                    right: global.right,
-                }
-            }
-            sendPacket(client, input_packet);
+              target: target,
+              content: message,
+            },
+          };
+          sendPacket(client, chat_packet);
+
+          addMessage("direct-message", `you -> ${target}: ${message}`);
+        } else {
+          let chat_packet: Packet = {
+            t: PacketType.SendMessage,
+            c: {
+              target: null,
+              content: value,
+            },
+          };
+          sendPacket(client, chat_packet);
         }
+        (<HTMLInputElement>document.getElementById("chatentry")!).value = "";
+      }
+    };
 
-        document.getElementById("chatentry")!.onkeydown = (e) => {
-            if (e.key === 'Enter') {
-                let value = (<HTMLInputElement>document.getElementById("chatentry")!).value;
-
-                if (value.startsWith(".msg")) {
-                    let args = value.split(" ");
-                    if (args.length < 3) {
-                        addMessage("server-error", "Command error");
-
-                        (<HTMLInputElement>document.getElementById("chatentry")!).value = "";
-                        return;
-                    }
-                    let target = args[1];
-                    let message = args.slice(2).join(" ");
-                    let chat_packet: Packet = {
-                        t: PacketType.SendMessage,
-                        c: {
-                            target: target,
-                            content: message
-                        }
-                    };
-                    sendPacket(client, chat_packet);
-
-                    addMessage("direct-message", `you -> ${target}: ${message}`);
-                } else {
-                    let chat_packet: Packet = {
-                        t: PacketType.SendMessage,
-                        c: {
-                            target: null,
-                            content: value
-                        }
-                    };
-                    sendPacket(client, chat_packet);
-                }
-                (<HTMLInputElement>document.getElementById("chatentry")!).value = "";
-            }
+    ws.onmessage = (e) => {
+      let packet: Packet = JSON.parse(e.data);
+
+      appendPacket(packet);
+
+      if (packet.t == PacketType.SpawnPlayer) {
+        let p = <SpawnPlayerPacket>packet.c;
+        if (p.username === username) {
+          global.me = {
+            username: p.username,
+            part_id: p.id,
+          };
+          logger(`client spawned (username=${p.username} part_id=${p.id})`);
+          startRender();
+        } else {
+          global.players_map.set(p.id, p.username);
+          global.inverse_players_map.set(p.username, p.id);
+          logger(`player joined (username=${p.username} part_id=${p.id})`);
         }
-
-        ws.onmessage = (e) => {
-            let packet: Packet = JSON.parse(e.data);
-
-            appendPacket(packet);
-
-            if (packet.t == PacketType.SpawnPlayer) {
-                let p = <SpawnPlayerPacket> packet.c;
-                if (p.username === username) {
-                    global.me = {
-                        username: p.username,
-                        part_id: p.id
-                    };
-                    logger(`client spawned (username=${p.username} part_id=${p.id})`);
-                    startRender();
-                } else {
-                    global.players_map.set(p.id, p.username);
-                    global.inverse_players_map.set(p.username, p.id);
-                    logger(`player joined (username=${p.username} part_id=${p.id})`);
-                }
-            } else if (packet.t == PacketType.PlayerList) {
-                let p = <PlayerListPacket> packet.c;
-                for (let i = 0; i < p.players.length; i++) {
-                    global.players_map.set(p.players[i][0], p.players[i][1]);
-                    global.inverse_players_map.set(p.players[i][1], p.players[i][0]);
-                }
-                logger(`added ${p.players.length} existing players to player list`);
-            } else if (packet.t == PacketType.PlanetPositions) {
-                let p = <PlanetPositionsPacket> packet.c;
-                for (let i = 0; i < p.planets.length; i++) {
-                    global.planets_map.set(p.planets[i][0], p.planets[i][1]);
-                }
-            } else if (packet.t == PacketType.PartPositions) {
-                let p = <PartPositionsPacket> packet.c;
-                for (let i = 0; i < p.parts.length; i++) {
-                    global.parts_map.set(p.parts[i][0], p.parts[i][1]);
-                }
-            } else if (packet.t == PacketType.PlayerLeave) {
-                let p = <PlayerLeavePacket>packet.c;
-                let username = global.players_map.get(p.id)!;
-                global.inverse_players_map.delete(username);
-                global.players_map.delete(p.id);
-                logger(`player removed (id=${p.id})`);
-            } else if (packet.t == PacketType.Message) {
-                let p = <MessagePacket>packet.c;
-                logger(`message type=${p.message_type} actor=${p.actor} content=${p.content}`);
-
-                if (p.message_type == MessageType.Server) {
-                    addMessage("server-message", `[SERVER] ${p.content}`);
-                } else if (p.message_type == MessageType.Chat) {
-                    addMessage("global-message", `${p.actor}: ${p.content}`);
-                } else if (p.message_type == MessageType.Direct) {
-                    // actor is who sent the message. destination is not included in this packet
-                    if (p.actor === global.me!.username) {
-                        // skip (shown above)
-                    } else {
-                        addMessage("direct-message", `${p.actor} -> you: ${p.content}`);
-                    }
-                } else {
-                    addMessage("server-error", `${p.content}`);
-                }
-            } else {
-                logger(`unrecognized packet type ${packet.t}`);
-            }
+      } else if (packet.t == PacketType.PlayerList) {
+        let p = <PlayerListPacket>packet.c;
+        for (let i = 0; i < p.players.length; i++) {
+          global.players_map.set(p.players[i][0], p.players[i][1]);
+          global.inverse_players_map.set(p.players[i][1], p.players[i][0]);
         }
-
-        return client;
+        logger(`added ${p.players.length} existing players to player list`);
+      } else if (packet.t == PacketType.PlanetPositions) {
+        let p = <PlanetPositionsPacket>packet.c;
+        for (let i = 0; i < p.planets.length; i++) {
+          global.planets_map.set(p.planets[i][0], p.planets[i][1]);
+        }
+      } else if (packet.t == PacketType.PartPositions) {
+        let p = <PartPositionsPacket>packet.c;
+        for (let i = 0; i < p.parts.length; i++) {
+          global.parts_map.set(p.parts[i][0], p.parts[i][1]);
+        }
+      } else if (packet.t == PacketType.PlayerLeave) {
+        let p = <PlayerLeavePacket>packet.c;
+        let username = global.players_map.get(p.id)!;
+        global.inverse_players_map.delete(username);
+        global.players_map.delete(p.id);
+        logger(`player removed (id=${p.id})`);
+      } else if (packet.t == PacketType.Message) {
+        let p = <MessagePacket>packet.c;
+        logger(
+          `message type=${p.message_type} actor=${p.actor} content=${p.content}`,
+        );
+
+        if (p.message_type == MessageType.Server) {
+          addMessage("server-message", `[SERVER] ${p.content}`);
+        } else if (p.message_type == MessageType.Chat) {
+          addMessage("global-message", `${p.actor}: ${p.content}`);
+        } else if (p.message_type == MessageType.Direct) {
+          // actor is who sent the message. destination is not included in this packet
+          if (p.actor === global.me!.username) {
+            // skip (shown above)
+          } else {
+            addMessage("direct-message", `${p.actor} -> you: ${p.content}`);
+          }
+        } else {
+          addMessage("server-error", `${p.content}`);
+        }
+      } else {
+        logger(`unrecognized packet type ${packet.t}`);
+      }
     };
-    return null;
+
+    return client;
+  };
+  return null;
 }
diff --git a/starkingdoms-client/src/main.ts b/starkingdoms-client/src/main.ts
index 3c4899559b177a518d38655cda6f5d7cef320bb5..f86abac3348e74570b86aae5e25030d30c205a20 100644
--- a/starkingdoms-client/src/main.ts
+++ b/starkingdoms-client/src/main.ts
@@ -1,166 +1,190 @@
 import createDebug from "debug";
-import {ClientHub, hub_connect} from "./hub.ts";
-import {ConfigServer, loadConfig} from "./config.ts";
+import { ClientHub, hub_connect } from "./hub.ts";
+import { ConfigServer, loadConfig } from "./config.ts";
 import "./css/style.css";
 import "./css/themes/catppuccin-mocha/colors.css";
-import {Part, Planet} from "./protocol.ts";
+import { Part, Planet } from "./protocol.ts";
 
 let config = await loadConfig();
 
 const logger = createDebug("main");
-logger(`Hello, world! StarKingdoms ${APP_VERSION} (${COMMIT_HASH}) at your service!`);
+logger(
+  `Hello, world! StarKingdoms ${APP_VERSION} (${COMMIT_HASH}) at your service!`,
+);
 
 if (window.localStorage.getItem("stk-packet-mode") === "debug") {
-    document.getElementById("packet_log")!.classList.remove("log-hidden");
+  document.getElementById("packet_log")!.classList.remove("log-hidden");
 } else {
-    document.getElementById("packet_log")!.remove();
+  document.getElementById("packet_log")!.remove();
 }
 
 export interface GlobalData {
-    client: ClientHub | null,
-    me: GlobalMe | null,
+  client: ClientHub | null;
+  me: GlobalMe | null;
 
-    players_map: Map<number, string>,
-    inverse_players_map: Map<string, number>,
+  players_map: Map<number, string>;
+  inverse_players_map: Map<string, number>;
 
-    planets_map: Map<number, Planet>,
+  planets_map: Map<number, Planet>;
 
-    parts_map: Map<number, Part>,
+  parts_map: Map<number, Part>;
 
-    up: boolean,
-    down: boolean,
-    left: boolean,
-    right: boolean,
+  up: boolean;
+  down: boolean;
+  left: boolean;
+  right: boolean;
 
-    rendering: GlobalRendering | null
+  rendering: GlobalRendering | null;
 }
 
 export interface GlobalMe {
-    username: string,
-    part_id: number
+  username: string;
+  part_id: number;
 }
 export interface GlobalRendering {
-    canvas: HTMLCanvasElement,
-    ctx: CanvasRenderingContext2D
+  canvas: HTMLCanvasElement;
+  ctx: CanvasRenderingContext2D;
 }
 
 export const global: GlobalData = {
-    client: null,
-    me: null,
-    players_map: new Map(),
-    inverse_players_map: new Map(),
-    planets_map: new Map(),
-    parts_map: new Map(),
-    up: false,
-    down: false,
-    left: false,
-    right: false,
-    rendering: null
-}
+  client: null,
+  me: null,
+  players_map: new Map(),
+  inverse_players_map: new Map(),
+  planets_map: new Map(),
+  parts_map: new Map(),
+  up: false,
+  down: false,
+  left: false,
+  right: false,
+  rendering: null,
+};
 
 export function player(): Part | undefined {
-    if (global.me !== null) {
-        return global.parts_map.get(global.me!.part_id);
-    } else {
-        return undefined;
-    }
+  if (global.me !== null) {
+    return global.parts_map.get(global.me!.part_id);
+  } else {
+    return undefined;
+  }
 }
 
 const version_string = `StarKingdoms Client ${APP_VERSION} (${COMMIT_HASH})`;
 document.getElementById("footer-left")!.innerHTML = version_string;
-document.getElementById("footer-right")!.innerHTML = `Made with <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="footer-icon"><path d="M9.653 16.915l-.005-.003-.019-.01a20.759 20.759 0 01-1.162-.682 22.045 22.045 0 01-2.582-1.9C4.045 12.733 2 10.352 2 7.5a4.5 4.5 0 018-2.828A4.5 4.5 0 0118 7.5c0 2.852-2.044 5.233-3.885 6.82a22.049 22.049 0 01-3.744 2.582l-.019.01-.005.003h-.002a.739.739 0 01-.69.001l-.002-.001z" /></svg> by the StarKingdoms team`;
+document.getElementById("footer-right")!.innerHTML =
+  `Made with <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="footer-icon"><path d="M9.653 16.915l-.005-.003-.019-.01a20.759 20.759 0 01-1.162-.682 22.045 22.045 0 01-2.582-1.9C4.045 12.733 2 10.352 2 7.5a4.5 4.5 0 018-2.828A4.5 4.5 0 0118 7.5c0 2.852-2.044 5.233-3.885 6.82a22.049 22.049 0 01-3.744 2.582l-.019.01-.005.003h-.002a.739.739 0 01-.69.001l-.002-.001z" /></svg> by the StarKingdoms team`;
 
 // Dropdown stuff
 const custom_select = document.querySelector(".fm-select")!;
-const custom_select_btn = <HTMLButtonElement>document.querySelector(".fm-select-button")!;
+const custom_select_btn = <HTMLButtonElement>(
+  document.querySelector(".fm-select-button")!
+);
 
 custom_select_btn.onclick = (e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    custom_select.classList.toggle("active");
-    custom_select_btn.setAttribute("aria-expanded", custom_select_btn.getAttribute("aria-expanded") === "true" ? "false" : "true");
+  e.stopPropagation();
+  e.preventDefault();
+  custom_select.classList.toggle("active");
+  custom_select_btn.setAttribute(
+    "aria-expanded",
+    custom_select_btn.getAttribute("aria-expanded") === "true"
+      ? "false"
+      : "true",
+  );
 };
 
 const selected_value = document.querySelector(".fm-selected-value")!;
 
 // Populate the main page server selector
 
-
-let inverse_server_lookup: {[name: string]: string} = {};
+let inverse_server_lookup: { [name: string]: string } = {};
 
 const dropdown = document.getElementById("fm-select-dropdown")!;
 
 dropdown.innerHTML = "";
 
 for (let server_id in config.servers) {
-    let server: ConfigServer = config.servers[server_id];
-    if (server.isDevelopment && window.localStorage.getItem("stk-mode") !== "debug") {
-        continue;
-    }
-    let html_text = `
+  let server: ConfigServer = config.servers[server_id];
+  if (
+    server.isDevelopment &&
+    window.localStorage.getItem("stk-mode") !== "debug"
+  ) {
+    continue;
+  }
+  let html_text = `
     <li>
-        <input type="radio" id="${server_id}" name="server" autocomplete="off" ${server.isPrimary ? "checked" : ""} />
+        <input type="radio" id="${server_id}" name="server" autocomplete="off" ${
+          server.isPrimary ? "checked" : ""
+        } />
         <label for="${server_id}">${server.name}</label>
     </li>
     `;
-    inverse_server_lookup[server.name] = server_id;
-    dropdown.innerHTML += html_text;
-    if (server.isPrimary) {
-        selected_value.textContent = server.name;
-    }
+  inverse_server_lookup[server.name] = server_id;
+  dropdown.innerHTML += html_text;
+  if (server.isPrimary) {
+    selected_value.textContent = server.name;
+  }
 }
 
 const options_list = document.querySelectorAll(".fm-select-dropdown li");
 options_list.forEach((option) => {
-    function handler(e: Event) {
-        if (e.type === "click" && (<PointerEvent>e).clientX !== 0 && (<PointerEvent>e).clientY !== 0) {
-            // @ts-ignore
-            selected_value.textContent = this.children[1].textContent;
-            custom_select.classList.remove("active");
-        }
-        if (e.type === "keyup") {
-            console.log((<KeyboardEvent>e).target!);
-            // @ts-ignore
-            selected_value.textContent = this.textContent;
-            custom_select.classList.remove("active");
-        }
-        if (!config.servers[inverse_server_lookup[selected_value.textContent!]].isProduction) {
-            document.getElementById("server-danger")!.classList.remove("hidden");
-        } else {
-            document.getElementById("server-danger")!.classList.add("hidden");
-        }
+  function handler(e: Event) {
+    if (
+      e.type === "click" &&
+      (<PointerEvent>e).clientX !== 0 &&
+      (<PointerEvent>e).clientY !== 0
+    ) {
+      // @ts-ignore
+      selected_value.textContent = this.children[1].textContent;
+      custom_select.classList.remove("active");
+    }
+    if (e.type === "keyup") {
+      console.log((<KeyboardEvent>e).target!);
+      // @ts-ignore
+      selected_value.textContent = this.textContent;
+      custom_select.classList.remove("active");
+    }
+    if (
+      !config.servers[inverse_server_lookup[selected_value.textContent!]]
+        .isProduction
+    ) {
+      document.getElementById("server-danger")!.classList.remove("hidden");
+    } else {
+      document.getElementById("server-danger")!.classList.add("hidden");
     }
-    // @ts-ignore
-    option.onkeyup = handler;
-    // @ts-ignore
-    option.onclick = handler;
+  }
+  // @ts-ignore
+  option.onkeyup = handler;
+  // @ts-ignore
+  option.onclick = handler;
 });
 
 function setStatus(stat: string) {
-    document.getElementById("launch-btn")!.textContent = stat;
+  document.getElementById("launch-btn")!.textContent = stat;
 }
 
 document.getElementById("join-fm")!.onsubmit = async (e) => {
-    e.preventDefault();
+  e.preventDefault();
 
-    setStatus("Connecting...");
-    (<HTMLButtonElement>custom_select_btn).disabled = true;
-    (<HTMLInputElement>document.getElementById("username")!).disabled = true;
+  setStatus("Connecting...");
+  (<HTMLButtonElement>custom_select_btn).disabled = true;
+  (<HTMLInputElement>document.getElementById("username")!).disabled = true;
 
-    try {
-        let server_name = selected_value.textContent!;
-        let server_id = inverse_server_lookup[server_name];
-        let server: ConfigServer = config.servers[server_id];
+  try {
+    let server_name = selected_value.textContent!;
+    let server_id = inverse_server_lookup[server_name];
+    let server: ConfigServer = config.servers[server_id];
 
-        let username = (<HTMLInputElement>document.getElementById("username")!).value;
+    let username = (<HTMLInputElement>document.getElementById("username")!)
+      .value;
 
-        logger(`connecting to ${server.clientHubUrl} as ${username} with auth = none`);
+    logger(
+      `connecting to ${server.clientHubUrl} as ${username} with auth = none`,
+    );
 
-        global.client = await hub_connect(server.clientHubUrl, username);
-    } catch (e) {
-        setStatus("Connection failed!");
-        console.error(e);
-        (<HTMLButtonElement>custom_select_btn).disabled = false;
-        (<HTMLInputElement>document.getElementById("username")!).disabled = false;
-    }
+    global.client = await hub_connect(server.clientHubUrl, username);
+  } catch (e) {
+    setStatus("Connection failed!");
+    console.error(e);
+    (<HTMLButtonElement>custom_select_btn).disabled = false;
+    (<HTMLInputElement>document.getElementById("username")!).disabled = false;
+  }
 };
diff --git a/starkingdoms-client/src/packet_ui.ts b/starkingdoms-client/src/packet_ui.ts
index 321b6e1de638482343a45d6389ff5333e2a701c8..90ce66521b95d79bf5b4fcfd038c60dac709ea37 100644
--- a/starkingdoms-client/src/packet_ui.ts
+++ b/starkingdoms-client/src/packet_ui.ts
@@ -1,5 +1,5 @@
 // @ts-ignore
-import {Direction, Packet, type_direction} from "./protocol.ts";
+import { Direction, Packet, type_direction } from "./protocol.ts";
 import createDebug from "debug";
 
 const logger = createDebug("jsonview");
@@ -7,40 +7,47 @@ const logger = createDebug("jsonview");
 let selected = document.getElementById("explorer_selected")!;
 let table = document.getElementById("explorer_json")!;
 
-export function show_packet(maybe_packet: Packet | null, sequence_number: number) {
-    logger(`selected packet ${sequence_number}`);
-    if (maybe_packet === null) {
-        selected.textContent = "Selected: --";
-        table.innerHTML = "";
-        return;
-    }
-    let packet = maybe_packet!;
-    let direction = type_direction(packet.t);
+export function show_packet(
+  maybe_packet: Packet | null,
+  sequence_number: number,
+) {
+  logger(`selected packet ${sequence_number}`);
+  if (maybe_packet === null) {
+    selected.textContent = "Selected: --";
+    table.innerHTML = "";
+    return;
+  }
+  let packet = maybe_packet!;
+  let direction = type_direction(packet.t);
 
-    selected.textContent = `Selected: #${sequence_number} ${direction} ${packet.t}`;
+  selected.textContent = `Selected: #${sequence_number} ${direction} ${packet.t}`;
 
-    // iterate over everything and calculate a max depth
-    let max_depth = depthOf(packet.c);
-    logger(`indent depth ${max_depth}`);
+  // iterate over everything and calculate a max depth
+  let max_depth = depthOf(packet.c);
+  logger(`indent depth ${max_depth}`);
 
-    // generate a tree
-    let tree = generateTree(packet.c, 0);
+  // generate a tree
+  let tree = generateTree(packet.c, 0);
 
-    logger(`generating tree of ${tree.length} items`);
+  logger(`generating tree of ${tree.length} items`);
 
-    let table_html = "";
+  let table_html = "";
 
-    for (let i = 0; i < tree.length; i++) {
-        let [indent, key, value, is_text] = tree[i];
-        table_html += `
+  for (let i = 0; i < tree.length; i++) {
+    let [indent, key, value, is_text] = tree[i];
+    table_html += `
         <tr>
             <td style="padding-left: calc(var(--indent-spacing) * ${indent})" class="json-ident">${key}</td>
-            <td style="padding-left: calc(var(--indent-spacing) * ${max_depth + 1})" class="${is_text ? "json-string" : "json-literal"}">${value}</td>
+            <td style="padding-left: calc(var(--indent-spacing) * ${
+              max_depth + 1
+            })" class="${
+              is_text ? "json-string" : "json-literal"
+            }">${value}</td>
         </tr>
-        `
-    }
+        `;
+  }
 
-    table.innerHTML = `
+  table.innerHTML = `
 <!-- Rendered tree of ${tree.length} items -->
     <thead>
     <tr></tr>
@@ -53,57 +60,64 @@ export function show_packet(maybe_packet: Packet | null, sequence_number: number
 }
 
 function depthOf(object: any) {
-    let level = 0;
-    for(let key in object) {
-        if (!object.hasOwnProperty(key)) continue;
+  let level = 0;
+  for (let key in object) {
+    if (!object.hasOwnProperty(key)) continue;
 
-        if(typeof object[key] == 'object'){
-            let depth = depthOf(object[key]) + 1;
-            level = Math.max(depth, level);
-        }
+    if (typeof object[key] == "object") {
+      let depth = depthOf(object[key]) + 1;
+      level = Math.max(depth, level);
     }
-    return level;
+  }
+  return level;
 }
 
-
-function generateTree(object: any, level: number): [indent: number, key: string, value: string, value_string: boolean][] {
-    let items: [indent: number, key: string, value: string, value_string: boolean][] = [];
-
-    for (let key in object) {
-        if (!object.hasOwnProperty(key)) continue;
-
-        if (object[key] === null) {
-            items.push([level, key, "null", false]);
-        } else if (object[key] === undefined) {
-            items.push([level, key, "undefined", false]);
-        } else if (typeof object[key] === 'object') {
-            if (Array.isArray(object[key])) {
-                if (object[key].length == 0) {
-                    items.push([level, key + ":", "[]", false]);
-                } else {
-                    items.push([level, key + ":", "", false]);
-                }
-                for (let i = 0; i < object[key].length; i++) {
-                    items.push([level+1, i.toString() + ":", "", false]);
-                    items = items.concat(generateTree(object[key][i], level+2));
-                }
-                continue;
-            }
-            items.push([level, key + ":", "", false]);
-            items = items.concat(generateTree(object[key], level + 1));
-        } else if (Array.isArray(object[key])) {
-            for (let i = 0; i < object[key].length; i++) {
-                items.push([level, i.toString() + ":", "", false]);
-                items = items.concat(generateTree(object[key][i], level));
-            }
-        } else if (typeof object[key] === 'string') {
-            items.push([level, key + ":", "\"" + object[key] + "\"", true]);
+function generateTree(
+  object: any,
+  level: number,
+): [indent: number, key: string, value: string, value_string: boolean][] {
+  let items: [
+    indent: number,
+    key: string,
+    value: string,
+    value_string: boolean,
+  ][] = [];
+
+  for (let key in object) {
+    if (!object.hasOwnProperty(key)) continue;
+
+    if (object[key] === null) {
+      items.push([level, key, "null", false]);
+    } else if (object[key] === undefined) {
+      items.push([level, key, "undefined", false]);
+    } else if (typeof object[key] === "object") {
+      if (Array.isArray(object[key])) {
+        if (object[key].length == 0) {
+          items.push([level, key + ":", "[]", false]);
         } else {
-            items.push([level, key + ":", object[key].toString(), false]);
+          items.push([level, key + ":", "", false]);
+        }
+        for (let i = 0; i < object[key].length; i++) {
+          items.push([level + 1, i.toString() + ":", "", false]);
+          items = items.concat(generateTree(object[key][i], level + 2));
         }
+        continue;
+      }
+      items.push([level, key + ":", "", false]);
+      items = items.concat(generateTree(object[key], level + 1));
+    } else if (Array.isArray(object[key])) {
+      for (let i = 0; i < object[key].length; i++) {
+        items.push([level, i.toString() + ":", "", false]);
+        items = items.concat(generateTree(object[key][i], level));
+      }
+    } else if (typeof object[key] === "string") {
+      items.push([level, key + ":", '"' + object[key] + '"', true]);
+    } else {
+      items.push([level, key + ":", object[key].toString(), false]);
     }
+  }
 
-    return items;
+  return items;
 }
 
 export let packets: Packet[] = [];
@@ -123,21 +137,25 @@ const down_arrow = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox=
             </svg>`;
 
 export function selectPacket(id: number) {
-    console.log("selecting packet " + id);
-    if (selected_packet !== null) {
-        document.getElementById("packet-" + selected_packet)!.classList.remove("log-selected");
-        document.getElementById("packet-" + selected_packet)!.classList.add("log-item");
-    }
-    document.getElementById("packet-" + id)!.classList.add("log-selected");
-    document.getElementById("packet-" + id)!.classList.remove("log-item");
-    selected_packet = id;
-    show_packet(packets[id], id);
+  console.log("selecting packet " + id);
+  if (selected_packet !== null) {
+    document
+      .getElementById("packet-" + selected_packet)!
+      .classList.remove("log-selected");
+    document
+      .getElementById("packet-" + selected_packet)!
+      .classList.add("log-item");
+  }
+  document.getElementById("packet-" + id)!.classList.add("log-selected");
+  document.getElementById("packet-" + id)!.classList.remove("log-item");
+  selected_packet = id;
+  show_packet(packets[id], id);
 }
 
 export function appendPacket(packet: Packet) {
-    packets.push(packet);
-    return;
-/*
+  packets.push(packet);
+  return;
+  /*
     let duration = "--";
     if (last_packet !== null) {
         duration = (new Date().getTime() - last_packet!.getTime()).toString() + "ms";
diff --git a/starkingdoms-client/src/planet_colors.ts b/starkingdoms-client/src/planet_colors.ts
index 8df94fd7aa27ec255d57cce223f91d03d0936ff2..7cb4aaa235a8218247c376bac2cb5a874731f7d5 100644
--- a/starkingdoms-client/src/planet_colors.ts
+++ b/starkingdoms-client/src/planet_colors.ts
@@ -1,9 +1,9 @@
-import {PlanetType} from "./protocol.ts";
+import { PlanetType } from "./protocol.ts";
 
 export function planet_color(type: PlanetType): string {
-    if (type === PlanetType.Earth) {
-        return "limegreen";
-    } else {
-        return "white";
-    }
-}
\ No newline at end of file
+  if (type === PlanetType.Earth) {
+    return "limegreen";
+  } else {
+    return "white";
+  }
+}
diff --git a/starkingdoms-client/src/protocol.ts b/starkingdoms-client/src/protocol.ts
index 13d17c3b0afc9360af16321a5193a65359b50910..c8304274ce53d6b8b41733c60fcbde1f169f9e2d 100644
--- a/starkingdoms-client/src/protocol.ts
+++ b/starkingdoms-client/src/protocol.ts
@@ -1,99 +1,119 @@
 export interface ProtoTransform {
-    x: number,
-    y: number,
-    rot: number
+  x: number;
+  y: number;
+  rot: number;
 }
 export enum PlanetType {
-    Earth = "Earth"
+  Earth = "Earth",
 }
 export enum PartType {
-    Hearty = "Hearty"
+  Hearty = "Hearty",
 }
 export interface Planet {
-    planet_type: PlanetType,
-    transform: ProtoTransform,
-    radius: number
+  planet_type: PlanetType;
+  transform: ProtoTransform;
+  radius: number;
 }
 export interface Part {
-    part_type: PartType,
-    transform: ProtoTransform
+  part_type: PartType;
+  transform: ProtoTransform;
 }
 export interface ClientLoginPacket {
-    username: string,
-    jwt: string | null,
+  username: string;
+  jwt: string | null;
 }
 export interface SpawnPlayerPacket {
-    id: number,
-    username: string
+  id: number;
+  username: string;
 }
 export interface PlanetPositionsPacket {
-    planets: [number, Planet][]
+  planets: [number, Planet][];
 }
 export interface PartPositionsPacket {
-    parts: [number, Part][]
+  parts: [number, Part][];
 }
 export interface PlayerInputPacket {
-    up: boolean,
-    down: boolean,
-    left: boolean,
-    right: boolean,
+  up: boolean;
+  down: boolean;
+  left: boolean;
+  right: boolean;
 }
 export interface PlayerListPacket {
-    players: [number, string][]
+  players: [number, string][];
 }
 export interface PlayerLeavePacket {
-    id: number
+  id: number;
 }
 export interface SendMessagePacket {
-    target: string | null,
-    content: string
+  target: string | null;
+  content: string;
 }
 export enum MessageType {
-    Server = "Server",
-    Error = "Error",
-    Chat = "Chat",
-    Direct = "Direct"
+  Server = "Server",
+  Error = "Error",
+  Chat = "Chat",
+  Direct = "Direct",
 }
 export interface MessagePacket {
-    message_type: MessageType,
-    actor: string,
-    content: string
+  message_type: MessageType;
+  actor: string;
+  content: string;
 }
 
 export enum PacketType {
-    // serverbound
-    ClientLogin = "ClientLogin",
-    SendMessage = "SendMessage",
-    PlayerInput = "PlayerInput",
-    // clientbound
-    SpawnPlayer = "SpawnPlayer",
-    PlayerList = "PlayerList",
-    PlanetPositions = "PlanetPositions",
-    PartPositions = "PartPositions",
-    PlayerLeave = "PlayerLeave",
-    Message = "Message"
+  // serverbound
+  ClientLogin = "ClientLogin",
+  SendMessage = "SendMessage",
+  PlayerInput = "PlayerInput",
+  // clientbound
+  SpawnPlayer = "SpawnPlayer",
+  PlayerList = "PlayerList",
+  PlanetPositions = "PlanetPositions",
+  PartPositions = "PartPositions",
+  PlayerLeave = "PlayerLeave",
+  Message = "Message",
 }
 
 export interface Packet {
-    t: PacketType,
-    c: ClientLoginPacket | SpawnPlayerPacket | PlayerListPacket | PlanetPositionsPacket | PartPositionsPacket | PlayerLeavePacket | SendMessagePacket | MessagePacket | PlayerInputPacket
+  t: PacketType;
+  c:
+    | ClientLoginPacket
+    | SpawnPlayerPacket
+    | PlayerListPacket
+    | PlanetPositionsPacket
+    | PartPositionsPacket
+    | PlayerLeavePacket
+    | SendMessagePacket
+    | MessagePacket
+    | PlayerInputPacket;
 }
 
-export const SERVERBOUND = [PacketType.ClientLogin, PacketType.SendMessage, PacketType.PlayerInput];
-export const CLIENTBOUND = [PacketType.SpawnPlayer, PacketType.PlayerList, PacketType.PlanetPositions, PacketType.PartPositions, PacketType.PlayerLeave, PacketType.Message];
+export const SERVERBOUND = [
+  PacketType.ClientLogin,
+  PacketType.SendMessage,
+  PacketType.PlayerInput,
+];
+export const CLIENTBOUND = [
+  PacketType.SpawnPlayer,
+  PacketType.PlayerList,
+  PacketType.PlanetPositions,
+  PacketType.PartPositions,
+  PacketType.PlayerLeave,
+  PacketType.Message,
+];
 
 export enum Direction {
-    Serverbound = "Serverbound",
-    Clientbound = "Clientbound",
-    InvalidType = "InvalidType"
+  Serverbound = "Serverbound",
+  Clientbound = "Clientbound",
+  InvalidType = "InvalidType",
 }
 
 export function type_direction(type: PacketType): Direction {
-    if (SERVERBOUND.includes(type)) {
-        return Direction.Serverbound;
-    } else if (CLIENTBOUND.includes(type)) {
-        return Direction.Clientbound;
-    } else {
-        return Direction.InvalidType;
-    }
+  if (SERVERBOUND.includes(type)) {
+    return Direction.Serverbound;
+  } else if (CLIENTBOUND.includes(type)) {
+    return Direction.Clientbound;
+  } else {
+    return Direction.InvalidType;
+  }
 }
diff --git a/starkingdoms-client/src/rendering.ts b/starkingdoms-client/src/rendering.ts
index 4995de1de917a3d09776af7ea086ba4badb510e4..ca53b6d945caf58827d2368444428df06ff9a99d 100644
--- a/starkingdoms-client/src/rendering.ts
+++ b/starkingdoms-client/src/rendering.ts
@@ -1,117 +1,136 @@
-import {global, player} from "./main.ts";
-import {part_texture, planet_texture} from "./textures.ts";
-import {planet_color} from "./planet_colors.ts";
+import { global, player } from "./main.ts";
+import { part_texture, planet_texture } from "./textures.ts";
+import { planet_color } from "./planet_colors.ts";
 
 //let t = performance.now();
 //let delta = 0.0;
 
 export function startRender() {
-    // hide the launch popup
-    document.getElementById("server_selector")!.classList.add("hidden");
-    // show the HUD
-    document.getElementById("hud")!.classList.remove("hidden");
-    // and chat
-    document.getElementById("chat")!.classList.remove("hidden");
-    // create the canvas
-    let canvas = document.createElement("canvas");
-    canvas.classList.add("game");
-    // append it
-    document.getElementById("gamewindow")!.appendChild(canvas);
-    let ctx = canvas.getContext("2d")!;
+  // hide the launch popup
+  document.getElementById("server_selector")!.classList.add("hidden");
+  // show the HUD
+  document.getElementById("hud")!.classList.remove("hidden");
+  // and chat
+  document.getElementById("chat")!.classList.remove("hidden");
+  // create the canvas
+  let canvas = document.createElement("canvas");
+  canvas.classList.add("game");
+  // append it
+  document.getElementById("gamewindow")!.appendChild(canvas);
+  let ctx = canvas.getContext("2d")!;
+  ctx.canvas.width = window.innerWidth;
+  ctx.canvas.height = window.innerHeight;
+
+  window.onresize = () => {
     ctx.canvas.width = window.innerWidth;
     ctx.canvas.height = window.innerHeight;
-
-    window.onresize = () => {
-        ctx.canvas.width = window.innerWidth;
-        ctx.canvas.height = window.innerHeight;
-    }
-
-    global.rendering = {
-        canvas: canvas,
-        ctx: ctx
-    };
-    //t = performance.now();
-    //delta = 0.0;
-    // start the render loop
-    requestAnimationFrame(renderLoop);
+  };
+
+  global.rendering = {
+    canvas: canvas,
+    ctx: ctx,
+  };
+  //t = performance.now();
+  //delta = 0.0;
+  // start the render loop
+  requestAnimationFrame(renderLoop);
 }
 
 async function renderLoop(_newT: DOMHighResTimeStamp) {
-    //delta = newT - t;
-    //t = newT;
+  //delta = newT - t;
+  //t = newT;
 
-    let viewer_size_x = global.rendering?.canvas.width!;
-    let viewer_size_y = global.rendering?.canvas.height!;
+  let viewer_size_x = global.rendering?.canvas.width!;
+  let viewer_size_y = global.rendering?.canvas.height!;
 
-    global.rendering!.canvas.style.setProperty("background-position", `${player()?.transform.x!/5}px ${-player()?.transform.y!/5}px`);
+  global.rendering!.canvas.style.setProperty(
+    "background-position",
+    `${player()?.transform.x! / 5}px ${-player()?.transform.y! / 5}px`,
+  );
 
-    global.rendering!.ctx.setTransform(1, 0, 0, 1, 0, 0);
-    global.rendering!.ctx.clearRect(0, 0, viewer_size_x, viewer_size_y);
+  global.rendering!.ctx.setTransform(1, 0, 0, 1, 0, 0);
+  global.rendering!.ctx.clearRect(0, 0, viewer_size_x, viewer_size_y);
 
-    // *dont* translate the camera. we're moving everything else around us. cameracentrism.
-    // only translation will be to center our core module.
+  // *dont* translate the camera. we're moving everything else around us. cameracentrism.
+  // only translation will be to center our core module.
 
-    global.rendering!.ctx.translate(viewer_size_x / 2, viewer_size_y / 2);
+  global.rendering!.ctx.translate(viewer_size_x / 2, viewer_size_y / 2);
 
-    /*
+  /*
     todo: track indicator
      */
 
-    for (let [_id, planet] of global.planets_map) {
-        global.rendering!.ctx.drawImage(
-            await planet_texture(planet.planet_type),
-            (planet.transform.x - planet.radius - player()?.transform.x!), // dx
-            (planet.transform.y - planet.radius - player()?.transform.y!), // dy
-            planet.radius * 2, // dw
-            planet.radius * 2 // dh
-        );
-
-        global.rendering!.ctx.beginPath();
-        global.rendering!.ctx.strokeStyle = planet_color(planet.planet_type);
-        global.rendering!.ctx.lineWidth = 5;
-        global.rendering!.ctx.moveTo(player()!.transform.x - player()!.transform.x, player()!.transform.y - player()!.transform.y);
-        global.rendering!.ctx.lineTo(planet.transform.x - player()!.transform.x, planet.transform.y - player()!.transform.y);
-        global.rendering!.ctx.stroke();
-    }
-
-    for (let [_id, part] of global.parts_map) {
-        global.rendering!.ctx.save();
-
-        // x_{screen} = x_{world} - player_{x_{world}}
-        // x_{world} = x_{screen} + player_{x_{world}}
-
-        global.rendering!.ctx.translate(part.transform.x - player()!.transform.x, part.transform.y - player()!.transform.y);
-
-        global.rendering!.ctx.rotate(part.transform.rot);
-
-        global.rendering!.ctx.drawImage(
-            await part_texture(part.part_type),
-            -25, -25, 50, 50
-        );
-
-        global.rendering!.ctx.restore();
-
-        // todo: clicked stuff
+  for (let [_id, planet] of global.planets_map) {
+    global.rendering!.ctx.drawImage(
+      await planet_texture(planet.planet_type),
+      planet.transform.x - planet.radius - player()?.transform.x!, // dx
+      planet.transform.y - planet.radius - player()?.transform.y!, // dy
+      planet.radius * 2, // dw
+      planet.radius * 2, // dh
+    );
+
+    global.rendering!.ctx.beginPath();
+    global.rendering!.ctx.strokeStyle = planet_color(planet.planet_type);
+    global.rendering!.ctx.lineWidth = 5;
+    global.rendering!.ctx.moveTo(
+      player()!.transform.x - player()!.transform.x,
+      player()!.transform.y - player()!.transform.y,
+    );
+    global.rendering!.ctx.lineTo(
+      planet.transform.x - player()!.transform.x,
+      planet.transform.y - player()!.transform.y,
+    );
+    global.rendering!.ctx.stroke();
+  }
+
+  for (let [_id, part] of global.parts_map) {
+    global.rendering!.ctx.save();
+
+    // x_{screen} = x_{world} - player_{x_{world}}
+    // x_{world} = x_{screen} + player_{x_{world}}
+
+    global.rendering!.ctx.translate(
+      part.transform.x - player()!.transform.x,
+      part.transform.y - player()!.transform.y,
+    );
+
+    global.rendering!.ctx.rotate(part.transform.rot);
+
+    global.rendering!.ctx.drawImage(
+      await part_texture(part.part_type),
+      -25,
+      -25,
+      50,
+      50,
+    );
+
+    global.rendering!.ctx.restore();
+
+    // todo: clicked stuff
+  }
+
+  for (let [id, username] of global.players_map) {
+    let part = global.parts_map.get(id);
+
+    if (part !== undefined) {
+      global.rendering!.ctx.save();
+
+      global.rendering!.ctx.translate(
+        part!.transform.x - player()!.transform.x,
+        part!.transform.y - player()!.transform.y,
+      );
+
+      global.rendering!.ctx.textAlign = "center";
+      global.rendering!.ctx.font =
+        '30px ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
+      global.rendering!.ctx.fillStyle = "white";
+      global.rendering!.ctx.fillText(username, 0, -35);
+
+      global.rendering!.ctx.restore();
     }
+  }
 
-    for (let [id, username] of global.players_map) {
-        let part = global.parts_map.get(id);
-
-        if (part !== undefined) {
-            global.rendering!.ctx.save();
-
-            global.rendering!.ctx.translate(part!.transform.x - player()!.transform.x, part!.transform.y - player()!.transform.y);
-
-            global.rendering!.ctx.textAlign = "center";
-            global.rendering!.ctx.font = '30px ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
-            global.rendering!.ctx.fillStyle = "white";
-            global.rendering!.ctx.fillText(username, 0, -35);
+  // particles stuff
 
-            global.rendering!.ctx.restore();
-        }
-    }
-
-    // particles stuff
-
-    requestAnimationFrame(renderLoop);
-}
\ No newline at end of file
+  requestAnimationFrame(renderLoop);
+}
diff --git a/starkingdoms-client/src/textures.ts b/starkingdoms-client/src/textures.ts
index 770172c8a641e7b8efb31eb0e3aa23b3402d498a..f02b5fe21eac81f0b55e4ce3a6cb018cff5d1662 100644
--- a/starkingdoms-client/src/textures.ts
+++ b/starkingdoms-client/src/textures.ts
@@ -1,4 +1,4 @@
-import {PartType, PlanetType} from "./protocol.ts";
+import { PartType, PlanetType } from "./protocol.ts";
 import tex_earth from "./assets/earth.svg";
 import tex_hearty from "./assets/hearty.svg";
 import tex_missing from "./assets/missing.svg";
@@ -6,49 +6,51 @@ import tex_missing from "./assets/missing.svg";
 let planet_textures: Map<PlanetType, HTMLImageElement> = new Map();
 
 function planet_texture_url(type: PlanetType): string {
-    if (type == PlanetType.Earth) {
-        return tex_earth;
-    }
-    return tex_missing;
+  if (type == PlanetType.Earth) {
+    return tex_earth;
+  }
+  return tex_missing;
 }
 
-export async function planet_texture(type: PlanetType): Promise<HTMLImageElement> {
-    return new Promise((resolve, reject) => {
-        if (planet_textures.has(type)) {
-            resolve(planet_textures.get(type)!);
-        } else {
-            let img = new Image();
-            img.onload = () => {
-                planet_textures.set(type, img);
-                resolve(img);
-            };
-            img.onerror = reject;
-            img.src = planet_texture_url(type)
-        }
-    });
+export async function planet_texture(
+  type: PlanetType,
+): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    if (planet_textures.has(type)) {
+      resolve(planet_textures.get(type)!);
+    } else {
+      let img = new Image();
+      img.onload = () => {
+        planet_textures.set(type, img);
+        resolve(img);
+      };
+      img.onerror = reject;
+      img.src = planet_texture_url(type);
+    }
+  });
 }
 
 let part_textures: Map<PartType, HTMLImageElement> = new Map();
 
 function part_texture_url(type: PartType): string {
-    if (type == PartType.Hearty) {
-        return tex_hearty;
-    }
-    return tex_missing;
+  if (type == PartType.Hearty) {
+    return tex_hearty;
+  }
+  return tex_missing;
 }
 
 export async function part_texture(type: PartType): Promise<HTMLImageElement> {
-    return new Promise((resolve, reject) => {
-        if (part_textures.has(type)) {
-            resolve(part_textures.get(type)!);
-        } else {
-            let img = new Image();
-            img.onload = () => {
-                part_textures.set(type, img);
-                resolve(img);
-            };
-            img.onerror = reject;
-            img.src = part_texture_url(type)
-        }
-    });
-}
\ No newline at end of file
+  return new Promise((resolve, reject) => {
+    if (part_textures.has(type)) {
+      resolve(part_textures.get(type)!);
+    } else {
+      let img = new Image();
+      img.onload = () => {
+        part_textures.set(type, img);
+        resolve(img);
+      };
+      img.onerror = reject;
+      img.src = part_texture_url(type);
+    }
+  });
+}
diff --git a/starkingdoms-client/vite.config.ts b/starkingdoms-client/vite.config.ts
index 9647e713a58951519da9557adb6f6d8171f9492e..e3285377647c111e905873d1cb61bb304578736c 100644
--- a/starkingdoms-client/vite.config.ts
+++ b/starkingdoms-client/vite.config.ts
@@ -1,16 +1,19 @@
-import {defineConfig} from "vite";
+import { defineConfig } from "vite";
 import * as child from "child_process";
 
-const commitHash = child.execSync('git describe --no-match --always --abbrev=8 --dirty').toString().trim();
+const commitHash = child
+  .execSync("git describe --no-match --always --abbrev=8 --dirty")
+  .toString()
+  .trim();
 
 export default defineConfig({
-    plugins: [],
-    define: {
-        APP_VERSION: JSON.stringify(process.env.npm_package_version),
-        COMMIT_HASH: JSON.stringify(commitHash)
-    },
-    build: {
-        target: ['chrome89', 'edge89', 'firefox89', 'safari15'],
-        cssCodeSplit: false,
-    }
-})
\ No newline at end of file
+  plugins: [],
+  define: {
+    APP_VERSION: JSON.stringify(process.env.npm_package_version),
+    COMMIT_HASH: JSON.stringify(commitHash),
+  },
+  build: {
+    target: ["chrome89", "edge89", "firefox89", "safari15"],
+    cssCodeSplit: false,
+  },
+});
