From: Geoffrey Allott Date: Sun, 21 Mar 2021 16:37:30 +0000 (+0000) Subject: add better icons and integrate with whist as well X-Git-Url: https://git.pointlesshacks.com/?a=commitdiff_plain;h=39b2f95f1d3ded898f7950ba9ce95d2736a795bc;p=pokerwave.git 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 index 0000000..60bc366 --- /dev/null +++ b/site/img/chat.svg @@ -0,0 +1,3 @@ + + + diff --git a/site/img/close.svg b/site/img/close.svg new file mode 100644 index 0000000..fc95416 --- /dev/null +++ b/site/img/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/site/modules/chatroom.js b/site/modules/chatroom.js index 4046da2..0d5c31b 100644 --- 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 a6c88b5..812d051 100644 --- 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 dff9571..270c2f2 100644 --- 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 abe0f92..543821c 100644 --- 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 d925c5b..0c86456 100644 --- 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 2d2c418..7c7246c 100644 --- 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 7bec45e..90145c1 100644 --- 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 deb73af..1e44caa 100644 --- 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 f0446b9..beb9a58 100644 --- 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;