update site to specify blind structure
authorGeoffrey Allott <geoffrey@allott.email>
Sat, 20 Mar 2021 17:59:57 +0000 (17:59 +0000)
committerGeoffrey Allott <geoffrey@allott.email>
Sat, 20 Mar 2021 17:59:57 +0000 (17:59 +0000)
site/modules/chatroom.js
site/modules/gamelist.js
site/modules/poker.js
site/modules/socket.js
site/modules/whist.js
site/style.css
site/style/chatroom.css
site/style/game-list.css
site/style/game.css [new file with mode: 0644]
site/style/whist.css

index 0137fd623ba7d87a16573a36bbbec373588a319a..242ac19f9a6827352e681fda16a2c59d7bdf68f9 100644 (file)
@@ -32,7 +32,7 @@ export class Chatroom {
     }
 
     set_error_text(text) {
-        // TODO
+        this.chat.append(this.chat_element("chatroom-error", "«error»", message));
     }
 
     take_action(user_action, initialising) {
index ca0ca9972c9019828deca490271357e31374e23a..9237549d45e055c4f372a66c0e5526094181a108 100644 (file)
@@ -188,6 +188,8 @@ export class GameList {
             { name: "max_players", display: "Max Players", value: 2, formats: ["TexasHoldEm", "KnockOutWhist"] },
             { name: "small_blind", display: "Small Blind", value: 25, formats: ["TexasHoldEm"] },
             { name: "starting_stack", display: "Starting Stack", value: 1000, formats: ["TexasHoldEm"] },
+            { name: "round_length", display: "Round Length", value: 60000, formats: ["TexasHoldEm"] },
+            { name: "tournament_length", display: "Tournament Length", value: 600000, formats: ["TexasHoldEm"] },
             { name: "action_timeout", display: "Action Timeout", value: 30000, formats: ["TexasHoldEm"] },
         ];
 
index 05fd2df22958ad4df26a23357fa2fa0e332b9f03..72c6b54782ae8b4207c7f4199092b9c9e09be32d 100644 (file)
@@ -38,10 +38,21 @@ export class TexasHoldEm {
 
         this.error = document.createElementNS(svgns, "text");
         this.error.setAttribute("x", "20");
-        this.error.setAttribute("y", "480");
+        this.error.setAttribute("y", "450");
         this.error.classList.add("game-error");
-        this.error_text = document.createTextNode("");
-        this.error.append(this.error_text);
+        this.error_lines = [];
+        this.error_text = [];
+        const num_error_lines = 2;
+        for (let i = 0; i < num_error_lines; i++) {
+            const line = document.createElementNS(svgns, "tspan");
+            const text = document.createTextNode("");
+            line.setAttribute("x", "20");
+            line.setAttribute("dy", "20");
+            line.append(text);
+            this.error.append(line);
+            this.error_lines.push(line);
+            this.error_text.push(text);
+        }
         this.svg.append(this.error);
 
         const table = document.createElementNS(svgns, "ellipse");
@@ -214,15 +225,32 @@ export class TexasHoldEm {
         }
     }
 
-    set_error_text(text) {
-        this.error_text.textContent = text;
+    set_text(style, text) {
+        this.error.setAttribute("class", style);
+        const lines = text.split("\n", this.error_text.length);
+        for (const text of this.error_text) {
+            text.textContent = "";
+        }
+        for (let i = 0; i < lines.length; i++) {
+            this.error_text[i + this.error_text.length - lines.length].textContent = lines[i];
+        }
         if (this.error_text_timeout !== null) clearTimeout(this.error_text_timeout);
         this.error_text_timeout = setTimeout(() => {
-            this.error_text.textContent = "";
+            for (const text of this.error_text) {
+                text.textContent = "";
+            }
             this.error_text_timeout = null;
         }, 5000);
     }
 
+    set_info_text(text) {
+        this.set_text("game-info", text);
+    }
+
+    set_error_text(text) {
+        this.set_text("game-error", text);
+    }
+
     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);
@@ -427,6 +455,13 @@ export class TexasHoldEm {
                 this.redraw_cards();
                 this.redraw_players();
                 break;
+            case "NewBlinds":
+                this.small_blind = user_action.action.small_blind;
+                this.big_blind = user_action.action.big_blind;
+                this.set_info_text("Blinds Up: "
+                    + "Level " + user_action.action.level
+                    + ": " + user_action.action.small_blind + "/" + user_action.action.big_blind)
+                break;
             case "NextToDeal":
                 this.remove_ghosts();
                 this.dealer = user_action.username;
@@ -494,6 +529,9 @@ export class TexasHoldEm {
                 this.bets.clear();
                 this.pot -= user_action.action.chips;
                 this.stacks.set(user_action.username, this.stacks.get(user_action.username) + user_action.action.chips);
+                this.set_info_text(user_action.username
+                    + " wins " + user_action.action.chips + " chips"
+                    + (user_action.action.hand === null ? "" : " with\n" + user_action.action.hand));
                 this.redraw_players();
             case "EndDeal":
                 this.active = this.player_after(user_action.username, username => true);
@@ -502,6 +540,16 @@ export class TexasHoldEm {
             case "WinGame":
                 this.active = null;
                 this.remove_ghosts();
+                for (const card of this.community) {
+                    this.svg.removeChild(card.image);
+                }
+                this.community = [];
+                for (const [username, hand] of this.hands) {
+                    for (const card of hand) {
+                        this.svg.removeChild(card.image);
+                    }
+                }
+                this.hands.clear();
                 this.redraw_players();
                 new CongratulateWinner(this.svg, user_action.username);
                 break;
index c63ebd483e04f72f8f25bc8d2d641330073c5e48..dff95718b4534a2adf417d5d7199481cc4715bc7 100644 (file)
@@ -147,6 +147,8 @@ export class Socket {
             case "WinCall":
             case "WinHand":
                 return 1000;
+            case "NewBlinds":
+                return 5000;
             case "PostBlind":
             case "Fold":
             case "TimeoutFold":
index 98a2e372f9467c9f0cd760c4daeeedccc5c935e3..abe0f9250a6bdedf457d1fd5538e257fdcd75df8 100644 (file)
@@ -11,6 +11,7 @@ export class KnockOutWhist {
         this.send = send;
         this.seats = new Map();
         this.hands = new Map();
+        this.tricks_won = new Map();
         this.community = [];
         this.trick = [];
         this.user_icons = new Map();
@@ -28,10 +29,21 @@ export class KnockOutWhist {
 
         this.error = document.createElementNS(svgns, "text");
         this.error.setAttribute("x", "20");
-        this.error.setAttribute("y", "480");
+        this.error.setAttribute("y", "450");
         this.error.classList.add("game-error");
-        this.error_text = document.createTextNode("");
-        this.error.append(this.error_text);
+        this.error_lines = [];
+        this.error_text = [];
+        const num_error_lines = 2;
+        for (let i = 0; i < num_error_lines; i++) {
+            const line = document.createElementNS(svgns, "tspan");
+            const text = document.createTextNode("");
+            line.setAttribute("x", "20");
+            line.setAttribute("dy", "20");
+            line.append(text);
+            this.error.append(line);
+            this.error_lines.push(line);
+            this.error_text.push(text);
+        }
         this.svg.append(this.error);
 
         const table = document.createElementNS(svgns, "ellipse");
@@ -91,20 +103,38 @@ export class KnockOutWhist {
         }
     }
 
-    set_error_text(text) {
-        this.error_text.textContent = text;
+    set_text(style, text) {
+        this.error.setAttribute("class", style);
+        const lines = text.split("\n", this.error_text.length);
+        for (const text of this.error_text) {
+            text.textContent = "";
+        }
+        for (let i = 0; i < lines.length; i++) {
+            this.error_text[i + this.error_text.length - lines.length].textContent = lines[i];
+        }
         if (this.error_text_timeout !== null) clearTimeout(this.error_text_timeout);
         this.error_text_timeout = setTimeout(() => {
-            this.error_text.textContent = "";
+            for (const text of this.error_text) {
+                text.textContent = "";
+            }
             this.error_text_timeout = null;
         }, 5000);
     }
 
+    set_info_text(text) {
+        this.set_text("game-info", text);
+    }
+
+    set_error_text(text) {
+        this.set_text("game-error", text);
+    }
+
     redraw_players() {
         const active_player = this.call || this.active;
-        for (const [username, [icon, active]] of this.user_icons) {
+        for (const [username, [icon, tricks, active]] of this.user_icons) {
             if (!this.seats.has(username)) {
                 this.svg.removeChild(icon);
+                this.svg.removeChild(tricks);
                 this.svg.removeChild(active);
                 this.user_icons.delete(username);
             } else {
@@ -114,6 +144,9 @@ export class KnockOutWhist {
                 const y = 250 + 120 * Math.cos(angle) + 50 * Math.sign(Math.cos(angle));
                 icon.setAttribute("x", x);
                 icon.setAttribute("y", y);
+                tricks.childNodes[0].nodeValue = this.tricks_won.get(username);
+                tricks.setAttribute("x", 240 - 120 * Math.sin(angle));
+                tricks.setAttribute("y", 250 + 70 * Math.cos(angle));
                 active.classList.toggle("active", active_player === username);
                 active.setAttribute("cx", x - 10);
                 active.setAttribute("cy", y - 5);
@@ -130,6 +163,14 @@ export class KnockOutWhist {
                 icon.setAttribute("x", x);
                 icon.setAttribute("y", y);
                 this.svg.append(icon);
+
+                const tricks = document.createElementNS(svgns, "text");
+                const tricks_text = document.createTextNode(this.tricks_won.get(username) || "");
+                tricks.append(tricks_text);
+                tricks.setAttribute("x", 240 - 120 * Math.sin(angle));
+                tricks.setAttribute("y", 250 + 70 * Math.cos(angle));
+                this.svg.append(tricks);
+
                 const active = document.createElementNS(svgns, "circle");
                 active.setAttribute("cx", x - 10);
                 active.setAttribute("cy", y - 5);
@@ -137,7 +178,7 @@ export class KnockOutWhist {
                 active.classList.add("active-indicator");
                 active.classList.toggle("active", active_player === username);
                 this.svg.append(active);
-                this.user_icons.set(username, [icon, active]);
+                this.user_icons.set(username, [icon, tricks, active]);
             }
         }
     }
@@ -242,6 +283,7 @@ export class KnockOutWhist {
                     }
                 }
                 this.hands.clear();
+                this.tricks_won.clear();
                 this.trumps = null;
                 this.active = this.player_after(user_action.username);
                 this.redraw_trumps();
@@ -305,11 +347,14 @@ export class KnockOutWhist {
                     this.svg.removeChild(card.image);
                 }
                 this.trick = [];
+                const tricks_won = this.tricks_won.get(user_action.username) || 0;
+                this.tricks_won.set(user_action.username, tricks_won + 1)
                 this.active = user_action.username;
                 this.redraw_players();
                 break;
             case "WinCall":
                 this.call = user_action.username;
+                this.set_info_text(user_action.username + " wins the call");
                 this.redraw_players();
                 break;
             case "EndDeal":
index 80656cfabe421720deeaaf2c738faa61cf7a2487..d925c5b085249d432fe4e2312867780752330fa4 100644 (file)
@@ -1,6 +1,7 @@
 @import url("style/login.css");
 @import url("style/mainmenu.css");
 @import url("style/game-list.css");
+@import url("style/game.css");
 @import url("style/chatroom.css");
 @import url("style/poker.css");
 @import url("style/whist.css");
index 4ff23a55f69659c07064a595bf90a0667a2f5125..fddab8de9e1129091522ee69509c7377ca712ed9 100644 (file)
@@ -21,7 +21,7 @@
     align-self: end;
 }
 
-.chatroom-join, .chatroom-message, .chatroom-info, .chatroom-leave, .chatroom-win-game {
+.chatroom-join, .chatroom-message, .chatroom-info, .chatroom-error, .chatroom-leave, .chatroom-win-game {
     display: flex;
 }
 
     border-radius: 3vw;
 }
 
+.chatroom-error > .chatroom-username {
+    background-color: red;
+}
+
 .chatroom-info > .chatroom-username {
     background-color: skyblue;
     color: black;
@@ -51,7 +55,7 @@
 }
 
 .chatroom-leave > .chatroom-username {
-    background-color: red;
+    background-color: darkgreen;
 }
 
 .chatroom-win-game > .chatroom-username {
index 4096aebc144a382cc17f333599f9445568c30ac0..8e52758318eb6badc500388965d19db2d60b64f7 100644 (file)
 .game-title {
     font-weight: bold;
 }
-
-.game-close {
-    display: block;
-    position: absolute;
-    right: 0;
-    top: 0;
-    font-size: 5vw;
-}
diff --git a/site/style/game.css b/site/style/game.css
new file mode 100644 (file)
index 0000000..6c0cc4c
--- /dev/null
@@ -0,0 +1,15 @@
+.game-error {
+    fill: red;
+}
+
+.game-info {
+    fill: white;
+}
+
+.game-close {
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 0;
+    font-size: 5vw;
+}
index faba26ebf9bc9a092746a20931ce83c3e68914a3..43b41cd22f3035453be418b0f52efe84c6d1d8a5 100644 (file)
@@ -3,10 +3,6 @@ svg {
     height: 100%;
 }
 
-.game-error {
-    fill: red;
-}
-
 .my-card {
     transform: none;
     transition: transform 0.5s;