From 6fcee1ef2913b8518a5b84d0b147e36c2a17b176 Mon Sep 17 00:00:00 2001
From: core <core@coredoes.dev>
Date: Mon, 27 Nov 2023 08:53:22 -0500
Subject: [PATCH] remove the funny html injection

---
 starkingdoms-client/src/chat.ts |  7 +++++++
 starkingdoms-client/src/hub.ts  | 17 +++++++++--------
 2 files changed, 16 insertions(+), 8 deletions(-)
 create mode 100644 starkingdoms-client/src/chat.ts

diff --git a/starkingdoms-client/src/chat.ts b/starkingdoms-client/src/chat.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6287f2477d479a35cac2d04a109d5cb9cbd2df97
--- /dev/null
+++ b/starkingdoms-client/src/chat.ts
@@ -0,0 +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);
+}
diff --git a/starkingdoms-client/src/hub.ts b/starkingdoms-client/src/hub.ts
index e6cb7a52fa445d13d60e08c32fee84a286c27fcb..c590c1aaba58ab2148347769eb49d343aa87a1b2 100644
--- a/starkingdoms-client/src/hub.ts
+++ b/starkingdoms-client/src/hub.ts
@@ -13,6 +13,7 @@ import {
 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");
 
@@ -58,7 +59,8 @@ export async function hub_connect(url: string, username: string): Promise<Client
                 if (value.startsWith(".msg")) {
                     let args = value.split(" ");
                     if (args.length < 3) {
-                        document.getElementById("chatbox")!.innerHTML += `<p class="message server-error">Command error</p>`;
+                        addMessage("server-error", "Command error");
+
                         (<HTMLInputElement>document.getElementById("chatentry")!).value = "";
                         return;
                     }
@@ -72,7 +74,8 @@ export async function hub_connect(url: string, username: string): Promise<Client
                         }
                     };
                     sendPacket(client, chat_packet);
-                    document.getElementById("chatbox")!.innerHTML += `<p class="message direct-message">${global.me!.username} -> ${target}: ${message}</p>`;
+
+                    addMessage("direct-message", `you -> ${target}: ${message}`);
                 } else {
                     let chat_packet: Packet = {
                         t: PacketType.SendMessage,
@@ -133,21 +136,19 @@ export async function hub_connect(url: string, username: string): Promise<Client
                 let p = <MessagePacket>packet.c;
                 logger(`message type=${p.message_type} actor=${p.actor} content=${p.content}`);
 
-                let chatbox = document.getElementById("chatbox")!;
-
                 if (p.message_type == MessageType.Server) {
-                    chatbox.innerHTML += `<p class="message server-message">[SERVER] ${p.content}</p>`;
+                    addMessage("server-message", `[SERVER] ${p.content}`);
                 } else if (p.message_type == MessageType.Chat) {
-                    chatbox.innerHTML += `<p class="message global-message">${p.actor}: ${p.content}</p>`;
+                    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 {
-                        chatbox.innerHTML += `<p class="message direct-message">${p.actor} -> ${global.me!.username}: ${p.content}</p>`;
+                        addMessage("direct-message", `${p.actor} -> you: ${p.content}`);
                     }
                 } else {
-                    chatbox.innerHTML += `<p class="message server-error">[SERVER] ${p.content}</p>`;
+                    addMessage("server-error", `${p.content}`);
                 }
             } else {
                 logger(`unrecognized packet type ${packet.t}`);