chat control messages

5 files changed, 26 insertions, 5 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)
diff --git a/client-web/style/chat.sass b/client-web/style/chat.sass
index d9a3673..8f19358 100644
--- a/client-web/style/chat.sass
+++ b/client-web/style/chat.sass
@@ -10,6 +10,10 @@
 
     .message
         margin: 0.2em
+    .control-message
+        font-style: italic
+        color: var(--ac-light)
+        filter: brightness(160%) // TODO filter is a bad approach here.
     .author
         font-weight: bold
     .text
@@ -25,11 +29,10 @@
 
     .controls
         flex: 0
-    
+
     input
         font-size: medium
         width: 100%
         border-radius: 5px
         padding: 0.5em
         box-sizing: border-box
-        
diff --git a/client-web/style/master.sass b/client-web/style/master.sass
index 854bdae..44324bf 100644
--- a/client-web/style/master.sass
+++ b/client-web/style/master.sass
@@ -18,11 +18,11 @@
     --green: rgb(146, 243, 73)
     --red: #cf3f3f
     --textgrey: #bbbbbb
+    font-weight: 300
+    color: white
 
 *
     font-family: "Ubuntu", sans-serif
-    font-weight: 300
-    color: white
     margin: 0px
     padding: 0px
 
@@ -56,6 +56,7 @@ h1
 input[type="button"],
 button,
 .side-ui-control
+    color: white
     padding: 0.5em
     margin: 0.25em
     background-color: var(--ac)
@@ -80,11 +81,12 @@ button:disabled,
 input[type="button"].active,
 button.active,
 .side-ui-control.checked
-    filter: hue-rotate(30deg)
+    filter: brightness(80%)
 
 input[type="text"],
 select,
 input[type="number"]
+    color: white
     background-color: var(--bg-dark)
     border: 1.5px solid grey
 
diff --git a/client-web/style/menu.sass b/client-web/style/menu.sass
index 26a9cfd..9fc2c67 100644
--- a/client-web/style/menu.sass
+++ b/client-web/style/menu.sass
@@ -20,6 +20,8 @@
     right: 0px
     display: block
     text-align: right
+    a
+        color: lightgrey
 
 .info-br .version
     font-size: medium