chat control messages

2 files changed, 14 insertions, 0 deletions

diff --git a/client-web/source/chat.ts b/client-web/source/chat.ts
index a28f6c7..6025878 100644
--- a/client-web/source/chat.ts
+++ b/client-web/source/chat.ts
@@ -16,6 +16,11 @@ import { User } from "./user/mod.ts";
 
 export let GLOBAL_CHAT: Chat;
 
+interface ControlMessage {
+    join?: User,
+    leave?: User,
+}
+
 export class Chat {
     messages: HTMLElement
     controls: HTMLElement
@@ -77,6 +82,12 @@ export class Chat {
         this.messages.firstChild?.remove()
     }
 
+    add_control_message(m: ControlMessage) {
+        const el = e("div", { class: ["message", "control-message"] }, e("span", { class: "author" }, m.join?.display_name ?? m.leave?.display_name ?? ""), ` ${m.join ? "joined" : "left"} the room.`)
+        this.messages.append(el)
+        el.scrollIntoView({ block: "end", behavior: "smooth", inline: "end" })
+    }
+
     add_message(sender: User, message: ChatMessage) {
         const els = []
         if (message.text) els.push(e("span", { class: "text" }, message.text))
diff --git a/client-web/source/user/remote.ts b/client-web/source/user/remote.ts
index 5e26838..9964937 100644
--- a/client-web/source/user/remote.ts
+++ b/client-web/source/user/remote.ts
@@ -6,6 +6,7 @@
 /// <reference lib="dom" />
 
 import { RelayMessage } from "../../../common/packets.d.ts";
+import { GLOBAL_CHAT } from "../chat.ts";
 import { notify } from "../helper.ts";
 import { log } from "../logger.ts"
 import { PREFS } from "../preferences/mod.ts";
@@ -80,6 +81,7 @@ export class RemoteUser extends User {
         this.room.remote_users.delete(this.id)
         this.room.element.removeChild(this.el)
         if (PREFS.notify_leave) notify(`${this.display_name} left`)
+        GLOBAL_CHAT.add_control_message({ leave: this })
     }
     on_relay(message: RelayMessage) {
         if (message.chat) this.room.chat.add_message(this, message.chat)
@@ -89,6 +91,7 @@ export class RemoteUser extends User {
         if (message.identify) {
             this.name = message.identify.username
             if (PREFS.notify_join) notify(`${this.display_name} joined`)
+            GLOBAL_CHAT.add_control_message({ join: this })
         }
         if (message.provide) {
             const d = new_remote_resource(this, message.provide)