Chat example: update nick in message history on peer announce

caolan · Oct 7, 2024 · 9b3f1ca · 9b3f1ca
1 parent 3572631
commit 9b3f1ca
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 10 deletions.
diff --git a/examples/chat/components/message-history.js b/examples/chat/components/message-history.js
@@ -7,15 +7,12 @@ export default class ChatMessageHistory extends HTMLElement {
     }
 
     connectedCallback() {
-        this.shadow = this.attachShadow({mode: "open"});
-        this.shadow.innerHTML = `
-            <link rel="stylesheet" href="style.css">
-            <pre id="message-history"></pre>
-        `;
-        this.history = this.shadow.getElementById('message-history');
-        this.stop = watch([local_peer_id, selected_announcement, messages], () => {
-            this.updateMessages();
-        });
+        this.stop = watch([
+            local_peer_id, 
+            selected_announcement, 
+            announcements,
+            messages,
+        ], () => this.updateMessages());
         this.updateMessages();
     }
 
@@ -52,7 +49,7 @@ export default class ChatMessageHistory extends HTMLElement {
                 }
             }
         }
-        this.history.textContent = txt;
+        this.textContent = txt;
     }
 }
 

diff --git a/examples/chat/style.css b/examples/chat/style.css
@@ -71,6 +71,8 @@ chat-message-history {
     flex-grow: 1;
     flex-shrink: 1;
     padding: 1em;
+    font-family: monospace;
+    white-space: pre;
 }
 
 #send-message-form {