From 945e8858dbcd9e51dd2c99c438eeb96261088793 Mon Sep 17 00:00:00 2001 From: Geoffrey Allott Date: Sat, 20 May 2023 22:04:53 +0100 Subject: [PATCH] relocate betting controls to bottom --- site/modules/poker.js | 139 ++++++++++++++++-------------------------- 1 file changed, 51 insertions(+), 88 deletions(-) diff --git a/site/modules/poker.js b/site/modules/poker.js index f3058f1..f66875b 100644 --- a/site/modules/poker.js +++ b/site/modules/poker.js @@ -10,13 +10,13 @@ function set_element_attributes(element, attributes) { } } -function create_svg_element(svg, name, class_list, attributes) { +function create_svg_element(parent, name, class_list, attributes) { const element = document.createElementNS(svgns, name); set_element_attributes(element, attributes); for (const cls of class_list) { element.classList.add(cls); } - svg.append(element); + parent.append(element); return element; } @@ -27,20 +27,28 @@ export class BetControls { document.addEventListener("mousedown", () => this.mouse_clicked = true); document.addEventListener("mouseup", () => this.mouse_clicked = false); - this.background = create_svg_element(this.game.svg, "rect", ["controls"], [["x", "310"], ["y", "410"], ["width", "185"], ["height", "85"], ["rx", "15"]]) - this.bet_size_area = create_svg_element(this.game.svg, "rect", ["bet-size-area"], [["x", "317"], ["y", "417"], ["width", "38"], ["height", "16"]]) + //this.slider_min = 360; + //this.slider_max = 475; + this.slider_min = 120; + this.slider_max = 430; + + //this.background = create_svg_element(this.game.svg, "rect", ["controls"], [["x", "310"], ["y", "410"], ["width", "185"], ["height", "85"], ["rx", "15"]]) + this.background = create_svg_element(this.game.svg, "rect", ["controls"], [["x", "50"], ["y", "500"], ["width", "400"], ["height", "90"], ["rx", "15"]]) + //this.bet_size_area = create_svg_element(this.game.svg, "rect", ["bet-size-area"], [["x", "317"], ["y", "417"], ["width", "38"], ["height", "16"]]) + this.bet_size_area = create_svg_element(this.game.svg, "rect", ["bet-size-area"], [["x", "57"], ["y", "507"], ["width", "58"], ["height", "16"]]) this.bet_size_area.onclick = () => { const chips = prompt("Chips to bet", this.bet_size_text.textContent); if (chips !== null && !isNaN(Number(chips))) { const bet = Math.max(this.game.min_bet(), Math.min(this.game.all_in_bet(), Number(chips))); this.bet_size_text.textContent = Number(chips); const p = (bet - this.game.min_bet()) / (this.game.all_in_bet() - this.game.min_bet()); - const x = Math.max(360, Math.min(475, Math.sqrt(p) * 115 + 360)); + const x = Math.max(this.slider_min, Math.min(this.slider_max, Math.sqrt(p) * (this.slider_max - this.slider_min) + this.slider_min)); this.bet_slider_thumb.setAttribute("x", x); } }; - this.bet_size = create_svg_element(this.game.svg, "text", ["bet-size"], [["x", "336"], ["y", "429"]]) + //this.bet_size = create_svg_element(this.game.svg, "text", ["bet-size"], [["x", "336"], ["y", "429"]]) + this.bet_size = create_svg_element(this.game.svg, "text", ["bet-size"], [["x", "86"], ["y", "519"]]) this.bet_size_text = document.createTextNode("150"); this.bet_size.append(this.bet_size_text); @@ -49,36 +57,44 @@ export class BetControls { point.x = e.clientX; point.y = e.clientY; const coords = point.matrixTransform(this.game.svg.getScreenCTM().inverse()); - const x = Math.max(360, Math.min(475, coords.x - 5)); - const p = Math.pow((x - 360) / 115, 2); + const x = Math.max(this.slider_min, Math.min(this.slider_max, coords.x - 5)); + const p = Math.pow((x - this.slider_min) / (this.slider_max - this.slider_min), 2); const bet = Math.round(this.game.min_bet() * (1 - p) + this.game.all_in_bet() * p); this.bet_size_text.textContent = bet; this.bet_slider_thumb.setAttribute("x", x); }; this.bet_slider = create_svg_element(this.game.svg, "g", ["bet-slider"], []); - this.bet_slider_area = create_svg_element(this.bet_slider, "rect", ["bet-slider-area"], [["x", "360"], ["y", "417"], ["width", "125"], ["height", "16"]]) - this.bet_slider_track = create_svg_element(this.bet_slider, "rect", ["bet-slider-track"], [["x", "360"], ["y", "422"], ["width", "125"], ["height", "6"]]) - this.bet_slider_thumb = create_svg_element(this.bet_slider, "rect", ["bet-slider-thumb"], [["x", "360"], ["y", "419"], ["width", "10"], ["height", "12"]]) + //this.bet_slider_area = create_svg_element(this.bet_slider, "rect", ["bet-slider-area"], [["x", String(this.slider_min)], ["y", "417"], ["width", String(this.slider_max - this.slider_min)], ["height", "16"]]) + //this.bet_slider_track = create_svg_element(this.bet_slider, "rect", ["bet-slider-track"], [["x", String(this.slider_min)], ["y", "422"], ["width", String(this.slider_max - this.slider_min)], ["height", "6"]]) + //this.bet_slider_thumb = create_svg_element(this.bet_slider, "rect", ["bet-slider-thumb"], [["x", String(this.slider_min)], ["y", "419"], ["width", "10"], ["height", "12"]]) + this.bet_slider_area = create_svg_element(this.bet_slider, "rect", ["bet-slider-area"], [["x", String(this.slider_min)], ["y", "507"], ["width", String(this.slider_max - this.slider_min)], ["height", "16"]]) + this.bet_slider_track = create_svg_element(this.bet_slider, "rect", ["bet-slider-track"], [["x", String(this.slider_min)], ["y", "512"], ["width", String(this.slider_max - this.slider_min)], ["height", "6"]]) + this.bet_slider_thumb = create_svg_element(this.bet_slider, "rect", ["bet-slider-thumb"], [["x", String(this.slider_min)], ["y", "509"], ["width", "10"], ["height", "12"]]) this.bet_slider_area.onmousedown = this.bet_slider_track.onmousedown = this.bet_slider_thumb.onmousedown = move_slider; this.bet_slider_area.onmousemove = this.bet_slider_track.onmousemove = this.bet_slider_thumb.onmousemove = e => { if (this.mouse_clicked) move_slider(e); }; this.bet_slider_area.ontouchmove = this.bet_slider_track.ontouchmove = this.bet_slider_thumb.ontouchmove = e => move_slider(e.touches.item(0)); - this.fold_control = create_svg_element(this.game.svg, "rect", ["fold-control"], [["x", "315"], ["y", "440"], ["width", "55"], ["height", "50"], ["rx", "10"]]) + //this.fold_control = create_svg_element(this.game.svg, "rect", ["fold-control"], [["x", "315"], ["y", "440"], ["width", "55"], ["height", "50"], ["rx", "10"]]) + this.fold_control = create_svg_element(this.game.svg, "rect", ["fold-control"], [["x", "60"], ["y", "530"], ["width", "120"], ["height", "50"], ["rx", "10"]]) this.fold_control.onclick = () => this.game.send({type: "TakeAction", action: {action: "Fold"}}); - this.fold_control_label = create_svg_element(this.game.svg, "text", ["fold-control-label"], [["x", "342.5"], ["y", "470"]]) + //this.fold_control_label = create_svg_element(this.game.svg, "text", ["fold-control-label"], [["x", "342.5"], ["y", "470"]]) + this.fold_control_label = create_svg_element(this.game.svg, "text", ["fold-control-label"], [["x", "120"], ["y", "560"]]) this.fold_control_text = document.createTextNode("Fold"); this.fold_control_label.append(this.fold_control_text); - this.call_control = create_svg_element(this.game.svg, "rect", ["call-control"], [["x", "375"], ["y", "440"], ["width", "55"], ["height", "50"], ["rx", "10"]]) + //this.call_control = create_svg_element(this.game.svg, "rect", ["call-control"], [["x", "375"], ["y", "440"], ["width", "55"], ["height", "50"], ["rx", "10"]]) + this.call_control = create_svg_element(this.game.svg, "rect", ["call-control"], [["x", "190"], ["y", "530"], ["width", "120"], ["height", "50"], ["rx", "10"]]) this.call_control.onclick = () => this.game.send({type: "TakeAction", action: {action: "Bet", chips: this.game.chips_to_call()}}); - this.call_control_label = create_svg_element(this.game.svg, "text", ["call-control-label"], [["x", "402.5"], ["y", "470"]]); + //this.call_control_label = create_svg_element(this.game.svg, "text", ["call-control-label"], [["x", "402.5"], ["y", "470"]]); + this.call_control_label = create_svg_element(this.game.svg, "text", ["call-control-label"], [["x", "250"], ["y", "560"]]); this.call_control_text = document.createTextNode("Call"); this.call_control_label.append(this.call_control_text); - this.bet_control = create_svg_element(this.game.svg, "rect", ["bet-control"], [["x", "435"], ["y", "440"], ["width", "55"], ["height", "50"], ["rx", "10"]]) + //this.bet_control = create_svg_element(this.game.svg, "rect", ["bet-control"], [["x", "435"], ["y", "440"], ["width", "55"], ["height", "50"], ["rx", "10"]]) + this.bet_control = create_svg_element(this.game.svg, "rect", ["bet-control"], [["x", "320"], ["y", "530"], ["width", "120"], ["height", "50"], ["rx", "10"]]) this.bet_control.onclick = () => { const chips = +this.bet_size_text.textContent; if (chips !== null && !isNaN(Number(chips))) { @@ -86,7 +102,8 @@ export class BetControls { } } - this.bet_control_label = create_svg_element(this.game.svg, "text", ["bet-control-label"], [["x", "462.5"], ["y", "470"]]) + //this.bet_control_label = create_svg_element(this.game.svg, "text", ["bet-control-label"], [["x", "462.5"], ["y", "470"]]); + this.bet_control_label = create_svg_element(this.game.svg, "text", ["bet-control-label"], [["x", "380"], ["y", "560"]]); this.bet_control_text = document.createTextNode("Bet"); this.bet_control_label.append(this.bet_control_text); } @@ -100,7 +117,7 @@ export class BetControls { this.bet_size_area.classList.toggle("active", can_bet); this.bet_slider.classList.toggle("active", can_bet); this.bet_size_text.textContent = this.game.min_bet(); - this.bet_slider_thumb.setAttribute("x", 360); + this.bet_slider_thumb.setAttribute("x", this.slider_min); } }; @@ -123,20 +140,14 @@ export class TexasHoldEm { this.big_blind = this.small_blind * 2; this.error_text_timeout = null; - this.svg = document.createElementNS(svgns, "svg"); - this.svg.classList.add("texas-hold-em"); - this.svg.setAttribute("viewBox", "0 0 500 500"); + //this.svg = create_svg_element(this.container, "svg", ["texas-hold-em"], [["viewBox", "0 0 500 500"]]) + this.svg = create_svg_element(this.container, "svg", ["texas-hold-em"], [["viewBox", "0 0 500 600"]]) + + //const background = create_svg_element(this.svg, "rect", [], [["width", "500"], ["height", "500"], ["fill", ["#404040"]]]); + const background = create_svg_element(this.svg, "rect", [], [["width", "500"], ["height", "600"], ["fill", ["#404040"]]]); - const background = document.createElementNS(svgns, "rect"); - background.setAttribute("width", "500"); - background.setAttribute("height", "500"); - background.setAttribute("fill", "#404040"); - this.svg.append(background); + this.error = create_svg_element(this.svg, "text", ["game-error"], [["x", "20"], ["y", "450"]]); - this.error = document.createElementNS(svgns, "text"); - this.error.setAttribute("x", "20"); - this.error.setAttribute("y", "450"); - this.error.classList.add("game-error"); this.error_lines = []; this.error_text = []; const num_error_lines = 2; @@ -150,71 +161,23 @@ export class TexasHoldEm { this.error_lines.push(line); this.error_text.push(text); } - this.svg.append(this.error); - - const table = document.createElementNS(svgns, "ellipse"); - table.setAttribute("cx", "250"); - table.setAttribute("cy", "253"); - table.setAttribute("rx", "250"); - table.setAttribute("ry", "110"); - table.setAttribute("fill", "#604010"); - this.svg.append(table); - - const felt = document.createElementNS(svgns, "ellipse"); - felt.setAttribute("cx", "250"); - felt.setAttribute("cy", "250"); - felt.setAttribute("rx", "240"); - felt.setAttribute("ry", "100"); - felt.setAttribute("fill", "green"); - this.svg.append(felt); - - const pot_size = document.createElementNS(svgns, "text"); - pot_size.setAttribute("x", "400"); - pot_size.setAttribute("y", "250"); - pot_size.classList.add("pot-size"); + + const table = create_svg_element(this.svg, "ellipse", [], [["cx", "250"], ["cy", "253"], ["rx", "250"], ["ry", "110"], ["fill", "#604010"]]); + const felt = create_svg_element(this.svg, "ellipse", [], [["cx", "250"], ["cy", "250"], ["rx", "240"], ["ry", "100"], ["fill", "green"]]); + + const pot_size = create_svg_element(this.svg, "text", ["pot-size"], [["x", "400"], ["y", "250"]]); this.pot_size_text = document.createTextNode(""); pot_size.append(this.pot_size_text); - this.svg.append(pot_size); this.bet_controls = new BetControls(this) - 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 = create_svg_element(this.svg, "rect", ["close-control"], [["x", "460"], ["y", "5"], ["width", "35"], ["height", "35"], ["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.close_image = create_svg_element(this.svg, "image", ["close-image"], [["x", "465"], ["y", "10"], ["width", "25"], ["height", "25"], ["href", "img/close.svg"]]) + + this.chat_control = create_svg_element(this.svg, "rect", ["chat-control"], [["x", "420"], ["y", "5"], ["width", "35"], ["height", "35"], ["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.chat_image = create_svg_element(this.svg, "image", ["chat-image"], [["x", "425"], ["y", "10"], ["width", "25"], ["height", "25"], ["href", "img/chat.svg"]]) this.chatroom_container = document.createElement("div"); this.chatroom_container.classList.add("embedded-chatroom"); -- 2.34.1