2 files changed, 56 insertions(+), 6 deletions(-)

M starkingdoms-client/index.html
M starkingdoms-client/src/hub.ts

@@ 69,11 69,7 @@ Here be dragons! You have a <b>prerelease server</b> selected. Expect bugs, and 
         <div class="popup chat-container hidden" id="chat">
             <h1>Chat</h1>
             <div id="chatbox" class="chat-table mono">
-                <p class="message server-message">[SERVER] Welcome to StarKingdoms.IO! Have fun!</p>
-                <p class="message global-message">core: this is a global chat message</p>
-                <p class="message direct-message">[DM core2] core this is a direct message</p>
-                <p class="message direct-message">[DM core2] core2: and this is a reply</p>
-                <p class="message server-error">[SERVER] Disconnected</p>
+                <!-- Filled by script -->
             </div>
             <input placeholder="Enter message or command here..." class="chat-box" id="chatentry" required autocomplete="off"/>
         </div>

@@ 1,6 1,7 @@
 import createDebug from "debug";
 import {
     MessagePacket,
+    MessageType,
     Packet,
     PacketType,
     PartPositionsPacket,


@@ 50,6 51,42 @@ export async function hub_connect(url: string, username: string): Promise<Client
         };
         sendPacket(client, 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) {
+                        document.getElementById("chatbox")!.innerHTML += `<p class="message server-error">Command error</p>`;
+                        (<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);
+                    document.getElementById("chatbox")!.innerHTML += `<p class="message direct-message">${global.me!.username} -> ${target}: ${message}</p>`;
+                } 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);
 


@@ 95,6 132,23 @@ export async function hub_connect(url: string, username: string): Promise<Client
             } else if (packet.t == PacketType.Message) {
                 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>`;
+                } else if (p.message_type == MessageType.Chat) {
+                    chatbox.innerHTML += `<p class="message global-message">${p.actor}: ${p.content}</p>`;
+                } 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>`;
+                    }
+                } else {
+                    chatbox.innerHTML += `<p class="message server-error">[SERVER] ${p.content}</p>`;
+                }
             } else {
                 logger(`unrecognized packet type ${packet.t}`);
             }


@@ 103,4 157,4 @@ export async function hub_connect(url: string, username: string): Promise<Client
         return client;
     };
     return null;
-}>
\ No newline at end of file
+}