add better icons and integrate with whist as well

diff --git a/site/img/chat.svg b/site/img/chat.svg
new file mode 100644 (file)
index 0000000..60bc366
--- /dev/null
+++ b/site/img/chat.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25">
+    <path d="M 2 2 A 1 1 0 0 0 2 5 H 3 A 1 1 0 0 0 3 2 Z M 2 11 A 1 1 0 0 0 2 14 H 3 A 1 1 0 0 0 3 11 Z M 2 20 A 1 1 0 0 0 2 23 H 3 A 1 1 0 0 0 3 20 Z M 8 2 A 1 1 0 0 0 8 5 H 23 A 1 1 0 0 0 23 2 Z M 8 11 A 1 1 0 0 0 8 14 H 23 A 1 1 0 0 0 23 11 Z M 8 20 A 1 1 0 0 0 8 23 H 23 A 1 1 0 0 0 23 20 Z" fill="black" />
+</svg>

diff --git a/site/img/close.svg b/site/img/close.svg
new file mode 100644 (file)
index 0000000..fc95416
--- /dev/null
+++ b/site/img/close.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+    <path d="M 2 0 L 0 2 L 10 12 L 0 22 L 2 24 L 12 14 L 22 24 L 24 22 L 14 12 L 24 2 L 22 0 L 12 10 Z" fill="black" />
+</svg>

diff --git a/site/modules/chatroom.js b/site/modules/chatroom.js
index 4046da22f646601e586326bc9b4681bb9892fdd9..0d5c31b0b9843092ba7eda0944577098fef2e1de 100644 (file)
--- a/site/modules/chatroom.js
+++ b/site/modules/chatroom.js
@@ -1,7 +1,7 @@
 import { card_name, pretty_suit } from "./card.js";
 
 export class Chatroom {
-    constructor(container, summary, actions, username, send) {
+    constructor(container, summary, actions, username, send, close) {
         this.container = container;
         this.summary = summary;
         this.actions = actions;
@@ -22,6 +22,14 @@ export class Chatroom {
         this.chatroom.append(this.chatroom_input);
         this.container.append(this.chatroom);
 
+        if (close) {
+            const close_button = document.createElement("button");
+            close_button.classList.add("game-close");
+            close_button.innerText = "✗";
+            close_button.onclick = close;
+            this.container.append(close_button);
+        }
+
         for (const user_action of this.actions) {
             this.take_action(user_action, true);
         }
@@ -32,7 +40,14 @@ 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) {
+            this.chat.scrollTo({
+                top: this.chat.scrollHeight - this.chat.clientHeight,
+                behavior: "smooth"
+            });
+        }
     }
 
     take_action(user_action, initialising) {

diff --git a/site/modules/poker.js b/site/modules/poker.js
index a6c88b583aaf6b48d444fe49992b63584535ef31..812d051a995c6bb83c347b7eeb12247ab992533e 100644 (file)
--- a/site/modules/poker.js
+++ b/site/modules/poker.js
@@ -5,7 +5,7 @@ import { Chatroom } from "./chatroom.js";
 import { CongratulateWinner } from "./winner.js";
 
 export class TexasHoldEm {
-    constructor(container, summary, actions, username, send) {
+    constructor(container, summary, actions, username, send, close) {
         this.container = container;
         this.summary = summary;
         this.actions = actions;
@@ -216,28 +216,58 @@ export class TexasHoldEm {
         bet_control_label.classList.add("bet-control-label");
         this.svg.append(bet_control_label);
 
+        this.close_control = document.createElementNS(svgns, "rect");
+        this.close_control.setAttribute("x", "460");
+        this.close_control.setAttribute("y", "5");
+        this.close_control.setAttribute("width", "35");
+        this.close_control.setAttribute("height", "35");
+        this.close_control.setAttribute("rx", "2");
+        this.close_control.onclick = close;
+        this.close_control.classList.add("close-control");
+        this.svg.append(this.close_control);
+        this.close_image = document.createElementNS(svgns, "image");
+        this.close_image.setAttribute("x", "465");
+        this.close_image.setAttribute("y", "10");
+        this.close_image.setAttribute("width", "25");
+        this.close_image.setAttribute("height", "25");
+        this.close_image.setAttribute("href", "img/close.svg");
+        this.close_image.classList.add("close-image");
+        this.svg.append(this.close_image);
+
         this.chat_control = document.createElementNS(svgns, "rect");
-        this.chat_control.setAttribute("x", "5");
-        this.chat_control.setAttribute("y", "470");
-        this.chat_control.setAttribute("width", "25");
-        this.chat_control.setAttribute("height", "25");
+        this.chat_control.setAttribute("x", "420");
+        this.chat_control.setAttribute("y", "5");
+        this.chat_control.setAttribute("width", "35");
+        this.chat_control.setAttribute("height", "35");
         this.chat_control.setAttribute("rx", "2");
         this.chat_control.onclick = () => this.chatroom_container.classList.toggle("hidden");
         this.chat_control.classList.add("chat-control");
         this.svg.append(this.chat_control);
+        this.chat_image = document.createElementNS(svgns, "image");
+        this.chat_image.setAttribute("x", "425");
+        this.chat_image.setAttribute("y", "10");
+        this.chat_image.setAttribute("width", "25");
+        this.chat_image.setAttribute("height", "25");
+        this.chat_image.setAttribute("href", "img/chat.svg");
+        this.chat_image.classList.add("chat-image");
+        this.svg.append(this.chat_image);
 
         this.container.append(this.svg);
 
         this.chatroom_container = document.createElement("div");
         this.chatroom_container.classList.add("embedded-chatroom");
-        this.chatroom = new Chatroom(this.chatroom_container, summary, [], username, send);
+        const send_chat_messages_only = message => {
+            if (message.type === "TakeAction" && message.action.action === "Message") {
+                send(message);
+            }
+        };
+        this.chatroom = new Chatroom(this.chatroom_container, summary, [], username, send_chat_messages_only, null);
+        this.container.append(this.chatroom_container);
 
         for (const user_action of this.actions) {
             this.take_action(user_action);
         }
 
-        this.container.append(this.chatroom_container);
-
         if (!this.seats.has(this.username)) {
             this.send({type: "TakeAction", action: {action: "Join", seat: 0, chips: this.summary.settings.starting_stack}});
         }
@@ -266,7 +296,6 @@ export class TexasHoldEm {
     }
 
     set_error_text(text) {
-        this.chatroom.set_error_text(text);
         this.set_text("game-error", text);
     }
 

diff --git a/site/modules/socket.js b/site/modules/socket.js
index dff95718b4534a2adf417d5d7199481cc4715bc7..270c2f272c192d41a5d94ee197522dab8bb1f7aa 100644 (file)
--- a/site/modules/socket.js
+++ b/site/modules/socket.js
@@ -227,25 +227,27 @@ export class Socket {
         };
     }
 
+    close() {
+        switch (this.state) {
+            case "LoggedIn":
+                this.send({type: "Logout"});
+                break;
+            case "InLobby":
+                this.send({type: "LeaveLobby"});
+                break;
+            case "InGame":
+                this.send({type: "TakeAction", action: {action: "Leave"}});
+                this.send({type: "LeaveGame"});
+                this.send({type: "JoinLobby", filter: this.last_filter});
+                break;
+        }
+    }
+
     close_button() {
         const close = document.createElement("button");
         close.classList.add("game-close");
         close.innerText = "✗";
-        close.onclick = () => {
-            switch (this.state) {
-                case "LoggedIn":
-                    this.send({type: "Logout"});
-                    break;
-                case "InLobby":
-                    this.send({type: "LeaveLobby"});
-                    break;
-                case "InGame":
-                    this.send({type: "TakeAction", action: {action: "Leave"}});
-                    this.send({type: "LeaveGame"});
-                    this.send({type: "JoinLobby", filter: this.last_filter});
-                    break;
-            }
-        };
+        close.onclick = () => this.close();
         return close;
     }
 
@@ -260,8 +262,7 @@ export class Socket {
                 console.error("Unknown format: ", this.game.summary.settings.format);
                 return;
         }
-        this.game = new Format(this.container, summary, actions, this.auth.username, message => this.send(message));
-        this.container.append(this.close_button());
+        this.game = new Format(this.container, summary, actions, this.auth.username, message => this.send(message), () => this.close());
     }
 
     onclose() {

diff --git a/site/modules/whist.js b/site/modules/whist.js
index abe0f9250a6bdedf457d1fd5538e257fdcd75df8..543821ca10230851661243c214fe108d96c59239 100644 (file)
--- a/site/modules/whist.js
+++ b/site/modules/whist.js
@@ -1,10 +1,11 @@
 const svgns = "http://www.w3.org/2000/svg";
 
 import { card_href, suit_href } from "./card.js";
+import { Chatroom } from "./chatroom.js";
 import { CongratulateWinner } from "./winner.js";
 
 export class KnockOutWhist {
-    constructor(container, summary, actions, username, send) {
+    constructor(container, summary, actions, username, send, close) {
         this.container = container;
         this.summary = summary;
         this.username = username;
@@ -93,7 +94,54 @@ export class KnockOutWhist {
             x += 25;
         }
 
+        this.close_control = document.createElementNS(svgns, "rect");
+        this.close_control.setAttribute("x", "460");
+        this.close_control.setAttribute("y", "5");
+        this.close_control.setAttribute("width", "35");
+        this.close_control.setAttribute("height", "35");
+        this.close_control.setAttribute("rx", "2");
+        this.close_control.onclick = close;
+        this.close_control.classList.add("close-control");
+        this.svg.append(this.close_control);
+        this.close_image = document.createElementNS(svgns, "image");
+        this.close_image.setAttribute("x", "465");
+        this.close_image.setAttribute("y", "10");
+        this.close_image.setAttribute("width", "25");
+        this.close_image.setAttribute("height", "25");
+        this.close_image.setAttribute("href", "img/close.svg");
+        this.close_image.classList.add("close-image");
+        this.svg.append(this.close_image);
+
+        this.chat_control = document.createElementNS(svgns, "rect");
+        this.chat_control.setAttribute("x", "420");
+        this.chat_control.setAttribute("y", "5");
+        this.chat_control.setAttribute("width", "35");
+        this.chat_control.setAttribute("height", "35");
+        this.chat_control.setAttribute("rx", "2");
+        this.chat_control.onclick = () => this.chatroom_container.classList.toggle("hidden");
+        this.chat_control.classList.add("chat-control");
+        this.svg.append(this.chat_control);
+        this.chat_image = document.createElementNS(svgns, "image");
+        this.chat_image.setAttribute("x", "425");
+        this.chat_image.setAttribute("y", "10");
+        this.chat_image.setAttribute("width", "25");
+        this.chat_image.setAttribute("height", "25");
+        this.chat_image.setAttribute("href", "img/chat.svg");
+        this.chat_image.classList.add("chat-image");
+        this.svg.append(this.chat_image);
+
         this.container.append(this.svg);
+
+        this.chatroom_container = document.createElement("div");
+        this.chatroom_container.classList.add("embedded-chatroom");
+        const send_chat_messages_only = message => {
+            if (message.type === "TakeAction" && message.action.action === "Message") {
+                send(message);
+            }
+        };
+        this.chatroom = new Chatroom(this.chatroom_container, summary, [], username, send_chat_messages_only, null);
+        this.container.append(this.chatroom_container);
+
         for (const user_action of actions) {
             this.take_action(user_action);
         }
@@ -251,6 +299,7 @@ export class KnockOutWhist {
     }
 
     take_action(user_action) {
+        this.chatroom.take_action(user_action);
         switch (user_action.action.action) {
             case "Join":
                 this.seats.set(user_action.username, user_action.action.seat);
@@ -364,6 +413,7 @@ export class KnockOutWhist {
             case "WinGame":
                 this.trumps = null;
                 this.active = null;
+                this.tricks_won.clear();
                 this.redraw_trumps();
                 this.redraw_players();
                 new CongratulateWinner(this.svg, user_action.username);

diff --git a/site/style.css b/site/style.css
index d925c5b085249d432fe4e2312867780752330fa4..0c8645624c6d21843e01d39b529bd016302ead90 100644 (file)
--- a/site/style.css
+++ b/site/style.css
@@ -24,4 +24,5 @@ html, body {
     display: grid;
     grid: 1fr / 1fr;
     overflow: clip;
+    background-color: #404040;
 }

diff --git a/site/style/chatroom.css b/site/style/chatroom.css
index 2d2c41835a5008f1a27eb6eb9ec8f73c87a3d7f7..7c7246c1947c4b5ade2db6928b1b61a16f353dd9 100644 (file)
--- a/site/style/chatroom.css
+++ b/site/style/chatroom.css
@@ -16,7 +16,7 @@
 
 .chatroom > input {
     width: 100%;
-    height: 10vmin;
+    height: 8vmin;
     font-size: inherit;
     align-self: end;
 }

diff --git a/site/style/game-list.css b/site/style/game-list.css
index 7bec45e39c9588867f07f42c715f4ae2a7f470d3..90145c1bfa839f27e118f4572fcbd8d48c928aef 100644 (file)
--- a/site/style/game-list.css
+++ b/site/style/game-list.css
@@ -132,6 +132,7 @@
     border-top: none;
     font-family: sans;
     cursor: pointer;
+    background-color: #ffffff;
 }
 
 .game-summary:hover {

diff --git a/site/style/game.css b/site/style/game.css
index deb73aff8bde68890504368464b35398aa0b9e1f..1e44caaf10ca999f4c32e35563a017c752ce1d01 100644 (file)
--- a/site/style/game.css
+++ b/site/style/game.css
@@ -14,6 +14,21 @@
     font-size: 5vw;
 }
 
+.chat-control, .close-control {
+    fill: #e0e0e0;
+    stroke: black;
+    stroke-width: 1px;
+    transition: fill 0.5s;
+}
+
+.chat-image, .close-image {
+    pointer-events: none;
+}
+
+.chat-control:hover, .close-control:hover {
+    fill: #ffffff;
+}
+
 @media (max-aspect-ratio: 1/1) {
     .embedded-chatroom {
         grid-row: 2;
@@ -31,6 +46,3 @@
         height: 100vh;
     }
 }
-
-.embedded-chatroom
-    grid-column: 2;

diff --git a/site/style/poker.css b/site/style/poker.css
index f0446b9626f346e7ae9a210d240474eb22d9f702..beb9a58d3e271687a847c1460652334cb11e0088 100644 (file)
--- a/site/style/poker.css
+++ b/site/style/poker.css
@@ -9,17 +9,6 @@
     stroke-width: 2px;
 }
 
-.chat-control {
-    fill: #e0e0e0;
-    stroke: black;
-    stroke-width: 1px;
-    transition: fill 0.5s;
-}
-
-.chat-control:hover {
-    fill: #ffffff;
-}
-
 .fold-control, .call-control, .bet-control {
     fill: #808080;
     stroke: black;