layout improvements

diff --git a/site/modules/poker.js b/site/modules/poker.js
index 7070544e4dde3732d9371e0ff412b23b5c3c8959..b496722e7a4858033b1cbd91fd4d0aa154d7a85a 100644 (file)
--- a/site/modules/poker.js
+++ b/site/modules/poker.js
@@ -30,8 +30,8 @@ export class BetControls {
         this.slider_min = 120;
         this.slider_max = 430;
 
-        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", "57"], ["y", "507"], ["width", "58"], ["height", "16"]])
+        this.background = create_svg_element(this.game.svg, "rect", ["controls"], [["x", "50"], ["y", "500"], ["width", "400"], ["height", "96"], ["rx", "15"]])
+        this.bet_size_area = create_svg_element(this.game.svg, "rect", ["bet-size-area"], [["x", "57"], ["y", "507"], ["width", "58"], ["height", "22"]])
         this.bet_size_area.onclick = () => {
             const chips = prompt("Chips to bet", this.bet_size_text.textContent);
             if (chips !== null && !isNaN(Number(chips))) {
@@ -43,7 +43,7 @@ export class BetControls {
             }
         };
 
-        this.bet_size = create_svg_element(this.game.svg, "text", ["bet-size"], [["x", "86"], ["y", "519"]])
+        this.bet_size = create_svg_element(this.game.svg, "text", ["bet-size"], [["x", "86"], ["y", "522"]])
         this.bet_size_text = document.createTextNode("150");
         this.bet_size.append(this.bet_size_text);
 
@@ -60,28 +60,28 @@ export class BetControls {
         };
 
         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", 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 = 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", "22"]])
+        this.bet_slider_track = create_svg_element(this.bet_slider, "rect", ["bet-slider-track"], [["x", String(this.slider_min)], ["y", "515"], ["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", "18"]])
         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", "60"], ["y", "530"], ["width", "120"], ["height", "50"], ["rx", "10"]])
+        this.fold_control = create_svg_element(this.game.svg, "rect", ["fold-control"], [["x", "60"], ["y", "536"], ["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", "120"], ["y", "560"]])
+        this.fold_control_label = create_svg_element(this.game.svg, "text", ["fold-control-label"], [["x", "120"], ["y", "566"]])
         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", "190"], ["y", "530"], ["width", "120"], ["height", "50"], ["rx", "10"]])
+        this.call_control = create_svg_element(this.game.svg, "rect", ["call-control"], [["x", "190"], ["y", "536"], ["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", "250"], ["y", "560"]]);
+        this.call_control_label = create_svg_element(this.game.svg, "text", ["call-control-label"], [["x", "250"], ["y", "566"]]);
         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", "320"], ["y", "530"], ["width", "120"], ["height", "50"], ["rx", "10"]])
+        this.bet_control = create_svg_element(this.game.svg, "rect", ["bet-control"], [["x", "320"], ["y", "536"], ["width", "120"], ["height", "50"], ["rx", "10"]])
         this.bet_control.onclick = () => {
             const chips = +this.bet_size_text.textContent;
             if (chips !== null && !isNaN(Number(chips))) {
@@ -89,7 +89,7 @@ export class BetControls {
             }
         }
 
-        this.bet_control_label = create_svg_element(this.game.svg, "text", ["bet-control-label"], [["x", "380"], ["y", "560"]]);
+        this.bet_control_label = create_svg_element(this.game.svg, "text", ["bet-control-label"], [["x", "380"], ["y", "566"]]);
         this.bet_control_text = document.createTextNode("Bet");
         this.bet_control_label.append(this.bet_control_text);
     }

diff --git a/site/style/game.css b/site/style/game.css
index 320305419f66e5bc71e4975be505e8b4e138c1a3..720d6ef2240b1221b9b27fb02d87274fe02e1972 100644 (file)
--- a/site/style/game.css
+++ b/site/style/game.css
@@ -35,20 +35,20 @@
     fill: #ffffff;
 }
 
-@media (max-aspect-ratio: 1/1) {
+@media (max-aspect-ratio: 3/2) {
     .embedded-chatroom {
         grid-row: 2;
         grid-column: 1;
         width: 100vw;
-        height: calc(100vh - 100vw);
+        height: 40vh;
     }
 }
 
-@media (min-aspect-ratio: 1/1) {
+@media (min-aspect-ratio: 3/2) {
     .embedded-chatroom {
         grid-row: 1;
         grid-column: 2;
-        width: calc(100vw - 100vh);
+        width: 40vw;
         height: 100vh;
     }
 }