5 files changed, 72 insertions(+), 70 deletions(-)

M starkingdoms-client/src/components/Chatbox.svelte
M starkingdoms-client/src/components/ui/Popup.svelte
M starkingdoms-client/src/hub.ts
M starkingdoms-client/src/packet_ui.ts
M starkingdoms-client/src/rendering.ts

@@ 1,29 1,82 @@
 <script lang="ts">
   import Popup from "./ui/Popup.svelte";
+  import { type Packet, PacketType } from "../protocol.ts";
+  import { sendPacket } from "../hub.ts";
+  import { global } from "../globals.js";
+  import { afterUpdate } from "svelte";
+
+  interface Message {
+    classname: string;
+    message: string;
+  }
+
+  let messages: Message[] = [];
+  let chatbox: HTMLDivElement | null;
+  let chatentry;
 
   export function addMessage(classname: string, message: string) {
-    let chatbox = document.getElementById("chatbox")!;
-    let should_scroll =
-      chatbox!.scrollTop == chatbox!.scrollHeight - chatbox!.offsetHeight;
-    let p = document.createElement("p");
-    p.innerText = message;
-    p.classList.add("message");
-    p.classList.add(classname);
-    if (chatbox.children.length > 128) {
-      chatbox.children[0]!.remove();
+    messages.push({ classname: classname, message: message });
+    messages = messages; // Trigger Svelte reactivity
+
+    if (messages.length > 128) {
+      delete messages[0];
     }
-    chatbox!.appendChild(p);
-    if (should_scroll) {
-      chatbox!.scrollTop = chatbox!.scrollHeight;
+  }
+
+  afterUpdate(() => {
+    if (chatbox !== null) {
+      chatbox.scrollTo(0, chatbox.scrollHeight);
+    }
+  });
+
+  function onkeydown(e: KeyboardEvent) {
+    if (e.key === "Enter") {
+      let value = chatentry!.value;
+
+      if (value.startsWith(".msg")) {
+        let args = value.split(" ");
+        if (args.length < 3) {
+          addMessage("server-error", "Command error");
+
+          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(global.client!, chat_packet);
+
+        addMessage("direct-message", `you -> ${target}: ${message}`);
+      } else {
+        let chat_packet: Packet = {
+          t: PacketType.SendMessage,
+          c: {
+            target: null,
+            content: value,
+          },
+        };
+        sendPacket(global.client!, chat_packet);
+      }
+      chatentry!.value = "";
     }
   }
 </script>
 
 <Popup draggable minimizable title="Chat" class="chat-container" id="chat">
-  <div id="chatbox" class="chat-table mono">
-    <!-- Filled by script -->
+  <div bind:this={chatbox} id="chatbox" class="chat-table mono">
+    {#each messages as message}
+      <p class="message {message.classname}">{message.message}</p>
+    {/each}
   </div>
   <input
+    bind:this={chatentry}
+    on:keydown={onkeydown}
     placeholder="Enter message or command here..."
     class="chat-box"
     id="chatentry"

@@ 26,16 26,15 @@
   let minimized = false;
 
   onMount(() => {
-    console.log("popup mounted");
     if (draggable) {
-      console.log("importing old window positions");
-
       let top = window.localStorage.getItem(`pop-${id}top`);
       let left = window.localStorage.getItem(`pop-${id}left`);
 
       popup.style.top = top;
       popup.style.left = left;
-      console.log("imported, top = " + top + " left = " + left);
+    }
+    if (minimizable) {
+      minimized = window.localStorage.getItem(`pop-${id}minim`) === "yes";
     }
   });
 


@@ 60,15 59,6 @@
 
     window.localStorage.setItem(`pop-${id}top`, popup.style.top);
     window.localStorage.setItem(`pop-${id}left`, popup.style.left);
-
-    console.log(
-      "dragged, top = " +
-        (popup.offsetTop - pos2) +
-        "px" +
-        " left = " +
-        (popup.offsetLeft - pos1) +
-        "px",
-    );
   }
 
   function closeDragElement() {


@@ 82,6 72,7 @@
   function toggleMinimized() {
     if (minimizable) {
       minimized = !minimized;
+      window.localStorage.setItem(`pop-${id}minim`, minimized ? "yes" : "no");
     }
   }
 </script>

@@ 46,6 46,7 @@ export async function hub_connect(
     let client: ClientHub = {
       socket: ws,
     };
+    global.client = client;
 
     let packet: Packet = {
       t: PacketType.ClientLogin,


@@ 159,46 160,6 @@ export async function hub_connect(
       }
     };
 
-    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) {
-            chatbox.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);
-
-          chatbox.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);
 

@@ 136,7 136,6 @@ 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)!

@@ 41,7 41,6 @@ export function startRender() {
       } else {
         part_sprite = PIXI.Sprite.from(part_texture_url(part.part_type));
         global.rendering!.part_sprite_map.set(id, part_sprite);
-        console.log("adding part sprite");
         global.rendering!.app.stage.addChild(part_sprite);
       }
 


@@ 62,7 61,6 @@ export function startRender() {
           planet_texture_url(planet.planet_type),
         );
         global.rendering!.planet_sprite_map.set(id, planet_sprite);
-        console.log("adding planet sprite");
         global.rendering!.app.stage.addChild(planet_sprite);
       }