2 files changed, 16 insertions(+), 8 deletions(-)

A starkingdoms-client/src/chat.ts
M starkingdoms-client/src/hub.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);
+}

@@ 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}`);