relocate betting controls to bottom

diff --git a/site/modules/poker.js b/site/modules/poker.js
index f3058f107b843d2eec701aa1d1ddf7bef23001ee..f66875bb0a458d0e5916c74a2226fb57c8bab3e6 100644 (file)
--- 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");