fix scroll-to-bottom by suppressing scroll events for 1/2 a second

diff --git a/site/modules/chatroom.js b/site/modules/chatroom.js
index b2b17a1ff5c17b497336d8ebd8dd8c5d65768855..ddd669ae4fca876da550d00f1f47afaa0aee3add 100644 (file)
--- a/site/modules/chatroom.js
+++ b/site/modules/chatroom.js
@@ -22,6 +22,14 @@ export class Chatroom {
         this.chatroom.append(this.chatroom_input);
         this.container.append(this.chatroom);
 
+        this.is_at_end = true;
+        this.suppress_scroll_events = null;
+        this.chat.onscroll = () => {
+            if (!this.suppress_scroll_events) {
+                this.is_at_end = this.chat.scrollTop + this.chat.clientHeight > this.chat.scrollHeight - 10;
+            }
+        };
+
         if (close) {
             const close_button = document.createElement("button");
             close_button.classList.add("game-close");
@@ -40,18 +48,18 @@ export class Chatroom {
     }
 
     set_error_text(text) {
-        const is_at_end = this.chat.scrollTop + this.chat.clientHeight == this.chat.scrollHeight;
         this.chat.append(this.chat_element("chatroom-error", "«error»", text));
-        if (is_at_end) {
+        if (this.is_at_end) {
             this.chat.scrollTo({
                 top: this.chat.scrollHeight - this.chat.clientHeight,
                 behavior: "smooth"
             });
+            window.clearTimeout(this.suppress_scroll_events);
+            this.suppress_scroll_events = window.setTimeout(() => this.suppress_scroll_events = null, 500);
         }
     }
 
     take_action(user_action, initialising) {
-        const is_at_end = this.chat.scrollTop + this.chat.clientHeight == this.chat.scrollHeight;
         switch (user_action.action.action) {
             case "Join":
                 this.seats.set(user_action.username, user_action.action.seat);
@@ -140,11 +148,13 @@ export class Chatroom {
                 console.error("Unknown action for chatroom", user_action);
                 break;
         }
-        if (is_at_end) {
+        if (this.is_at_end) {
             this.chat.scrollTo({
                 top: this.chat.scrollHeight - this.chat.clientHeight,
                 behavior: "smooth"
             });
+            window.clearTimeout(this.suppress_scroll_events);
+            this.suppress_scroll_events = window.setTimeout(() => this.suppress_scroll_events = null, 500);
         }
     }
 

diff --git a/site/modules/poker.js b/site/modules/poker.js
index b2e57616b48182ae3f5750fdb37e21fc8e5fac29..c5c75f1de05d3129271b765d3277fa8c08eda225 100644 (file)
--- a/site/modules/poker.js
+++ b/site/modules/poker.js
@@ -563,6 +563,7 @@ export class TexasHoldEm {
                     }
                 }
                 this.pot = 0;
+                this.dealer = null;
                 this.hands.clear();
                 this.redraw_players();
                 new CongratulateWinner(this.svg, user_action.username);

diff --git a/site/style/chatroom.css b/site/style/chatroom.css
index 3b36722676a6e7b9a72444e09a2232c89218d1e7..0c032d09f79c5340e14c9a789d2f2c5306301888 100644 (file)
--- a/site/style/chatroom.css
+++ b/site/style/chatroom.css
@@ -66,6 +66,7 @@
 .chatroom-text {
     justify-self: right;
     text-align: left;
+    overflow-wrap: break-word;
     height: 100%;
     margin: 0.5vmin;
     width: calc(100% - 36vmin);