From b9fd949035192f5822165c444301331f38dfc54c Mon Sep 17 00:00:00 2001 From: Geoffrey Allott Date: Wed, 17 Mar 2021 22:54:43 +0000 Subject: [PATCH] add error text display --- site/modules/poker.js | 19 +++++++++++++++++++ site/modules/socket.js | 2 ++ site/modules/whist.js | 26 ++++++++++++++++++++++++-- site/style/whist.css | 4 ++++ 4 files changed, 49 insertions(+), 2 deletions(-) diff --git a/site/modules/poker.js b/site/modules/poker.js index e9dc703..6891836 100644 --- 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 5edded5..42e7553 100644 --- 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 6a20745..276dc9c 100644 --- 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 43b41cd..faba26e 100644 --- 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; -- 2.34.1