add error text display

diff --git a/site/modules/poker.js b/site/modules/poker.js
index e9dc7034a0da62fb43f20e6b530031ed69e6a00d..6891836efa51788fb1a9828282d9947a083770de 100644 (file)
--- a/site/modules/poker.js
+++ b/site/modules/poker.js
@@ -20,6 +20,7 @@ export class TexasHoldEm {
         this.user_icons = new Map();
         this.small_blind = this.summary.settings.small_blind;
         this.big_blind = this.small_blind * 2;
+        this.error_text_timeout = null;
 
         this.mouse_clicked = false;
         document.addEventListener("mousedown", () => this.mouse_clicked = true);
@@ -35,6 +36,14 @@ export class TexasHoldEm {
         background.setAttribute("fill", "#404040");
         this.svg.append(background);
 
+        this.error = document.createElementNS(svgns, "text");
+        this.error.setAttribute("x", "20");
+        this.error.setAttribute("y", "480");
+        this.error.classList.add("game-error");
+        this.error_text = document.createTextNode("");
+        this.error.append(this.error_text);
+        this.svg.append(this.error);
+
         const table = document.createElementNS(svgns, "ellipse");
         table.setAttribute("cx", "250");
         table.setAttribute("cy", "253");
@@ -195,6 +204,15 @@ export class TexasHoldEm {
         }
     }
 
+    set_error_text(text) {
+        this.error_text.textContent = text;
+        if (this.error_text_timeout !== null) clearTimeout(this.error_text_timeout);
+        this.error_text_timeout = setTimeout(() => {
+            this.error_text.textContent = "";
+            this.error_text_timeout = null;
+        }, 5000);
+    }
+
     redraw_players() {
         this.fold_control.classList.toggle("active", this.active === this.username && this.chips_to_call() > 0);
         this.call_control.classList.toggle("active", this.active === this.username);
@@ -475,6 +493,7 @@ export class TexasHoldEm {
                 break;
             default:
                 console.error("Unhandled action for texas hold'em", user_action);
+                this.set_error_text("Unhandled action for texas hold'em: " + user_action.action.action);
                 break;
         }
     }

diff --git a/site/modules/socket.js b/site/modules/socket.js
index 5edded5cf78c8a5579eafbd5e062e12cbee02c87..42e7553bd6014813f91618cb582bd30c58c609e1 100644 (file)
--- a/site/modules/socket.js
+++ b/site/modules/socket.js
@@ -96,6 +96,7 @@ export class Socket {
                     this.send({type: "TakeAction", action: {action: "Join", seat: message.action.action.seat + 1, chips: message.action.action.chips}});
                 } else {
                     console.error("Taking action failed: " + message.reason, message.action);
+                    this.game.set_error_text(message.reason);
                 }
                 break;
             case "TakeActionSuccess":
@@ -238,5 +239,6 @@ export class Socket {
         console.error("Websocket closed unexpectedly - attempting reconnect in " + reconnect_timeout + "ms");
         this.state = "Disconnected";
         setTimeout(() => window.location.reload(), reconnect_timeout);
+        this.game.set_error_text("Websocket closed unexpectedly - attempting reconnect in " + reconnect_timeout + "ms");
     }
 }

diff --git a/site/modules/whist.js b/site/modules/whist.js
index 6a207458e1d54010a08a6144db7248e00e5830e5..276dc9c79338a31ac00befca259857f249f512b2 100644 (file)
--- a/site/modules/whist.js
+++ b/site/modules/whist.js
@@ -14,6 +14,7 @@ export class KnockOutWhist {
         this.community = [];
         this.trick = [];
         this.user_icons = new Map();
+        this.error_text_timeout = null;
 
         this.svg = document.createElementNS(svgns, "svg");
         this.svg.classList.add("knock-out-whist");
@@ -25,6 +26,14 @@ export class KnockOutWhist {
         background.setAttribute("fill", "#404040");
         this.svg.append(background);
 
+        this.error = document.createElementNS(svgns, "text");
+        this.error.setAttribute("x", "20");
+        this.error.setAttribute("y", "480");
+        this.error.classList.add("game-error");
+        this.error_text = document.createTextNode("");
+        this.error.append(this.error_text);
+        this.svg.append(this.error);
+
         const table = document.createElementNS(svgns, "ellipse");
         table.setAttribute("cx", "250");
         table.setAttribute("cy", "253");
@@ -82,6 +91,15 @@ export class KnockOutWhist {
         }
     }
 
+    set_error_text(text) {
+        this.error_text.textContent = text;
+        if (this.error_text_timeout !== null) clearTimeout(this.error_text_timeout);
+        this.error_text_timeout = setTimeout(() => {
+            this.error_text.textContent = "";
+            this.error_text_timeout = null;
+        }, 5000);
+    }
+
     redraw_players() {
         const active_player = this.call || this.active;
         for (const [username, [icon, active]] of this.user_icons) {
@@ -138,18 +156,20 @@ export class KnockOutWhist {
                 x -= 20;
             }
         }
+        let x = 257.5;
         for (const {card, image} of this.trick) {
-            const x = 227.5;
             const y = 210;
             image.classList.remove("my-card");
             image.setAttribute("x", x);
             image.setAttribute("y", y);
+            x -= 20;
         }
+        x = 120.0;
         for (const {card, image} of this.community) {
-            const x = 120.0;
             const y = 210;
             image.setAttribute("x", x);
             image.setAttribute("y", y);
+            x -= 20;
         }
     }
 
@@ -253,6 +273,7 @@ export class KnockOutWhist {
                         }
                     } else if (card.card.suit === user_action.action.card.suit && card.card.rank === user_action.action.card.rank) {
                         this.trick.push(card);
+                        this.svg.append(card.image);
                         return false;
                     } else {
                         return true;
@@ -302,6 +323,7 @@ export class KnockOutWhist {
                 break;
             default:
                 console.error("Unhandled action for knock-out whist", user_action);
+                this.set_error_text("Unhandled action for knock-out whist: " + user_action.action.action);
                 break;
         }
     }

diff --git a/site/style/whist.css b/site/style/whist.css
index 43b41cd22f3035453be418b0f52efe84c6d1d8a5..faba26ebf9bc9a092746a20931ce83c3e68914a3 100644 (file)
--- a/site/style/whist.css
+++ b/site/style/whist.css
@@ -3,6 +3,10 @@ svg {
     height: 100%;
 }
 
+.game-error {
+    fill: red;
+}
+
 .my-card {
     transform: none;
     transition: transform 0.5s;