make bet slider work on touch devices

diff --git a/site/modules/poker.js b/site/modules/poker.js
index 60fbb28ec826b65c4753cf605f661b3d1d7a5243..560b93e5604864d96334ea696177532a74d11e0d 100644 (file)
--- a/site/modules/poker.js
+++ b/site/modules/poker.js
@@ -21,12 +21,13 @@ export class TexasHoldEm {
         this.small_blind = this.summary.settings.small_blind;
         this.big_blind = this.small_blind * 2;
 
+        this.mouse_clicked = false;
+        document.addEventListener("mousedown", () => this.mouse_clicked = true);
+        document.addEventListener("mouseup", () => this.mouse_clicked = false);
+
         this.svg = document.createElementNS(svgns, "svg");
         this.svg.classList.add("knock-out-whist");
         this.svg.setAttribute("viewBox", "0 0 500 500");
-        this.mouse_clicked = false;
-        this.svg.onmousedown = () => this.mouse_clicked = true;
-        this.svg.onmouseup = () => this.mouse_clicked = false;
 
         const background = document.createElementNS(svgns, "rect");
         background.setAttribute("width", "500");
@@ -75,9 +76,31 @@ export class TexasHoldEm {
         this.bet_size.append(this.bet_size_text);
         this.svg.append(this.bet_size);
 
+        const move_slider = e => {
+            point.x = e.clientX;
+            point.y = e.clientY;
+            const coords = point.matrixTransform(this.svg.getScreenCTM().inverse());
+            const x = Math.max(360, Math.min(475, coords.x - 5));
+            const p = Math.pow((x - 360) / 115, 2);
+            const bet = Math.round(this.min_bet() * (1 - p) + this.all_in_bet() * p);
+            this.bet_size_text.textContent = bet;
+            this.bet_slider_thumb.setAttribute("x", x);
+        };
+
         this.bet_slider = document.createElementNS(svgns, "g");
         this.bet_slider.classList.add("bet-slider");
 
+        this.bet_slider_area = document.createElementNS(svgns, "rect");
+        this.bet_slider_area.setAttribute("x", "360");
+        this.bet_slider_area.setAttribute("y", "417");
+        this.bet_slider_area.setAttribute("width", "125");
+        this.bet_slider_area.setAttribute("height", "16");
+        this.bet_slider_area.onmousedown = move_slider;
+        this.bet_slider_area.onmousemove = e => { if (this.mouse_clicked) move_slider(e); };
+        this.bet_slider_area.ontouchmove = e => move_slider(e.touches.item(0));
+        this.bet_slider_area.classList.add("bet-slider-area");
+        this.bet_slider.append(this.bet_slider_area);
+
         this.bet_slider_track = document.createElementNS(svgns, "rect");
         this.bet_slider_track.setAttribute("x", "360");
         this.bet_slider_track.setAttribute("y", "422");
@@ -85,28 +108,9 @@ export class TexasHoldEm {
         this.bet_slider_track.setAttribute("height", "6");
         this.bet_slider_track.classList.add("bet-slider-track");
         const point = this.svg.createSVGPoint();
-        this.bet_slider_track.onmousemove = e => {
-            if (this.mouse_clicked) {
-                point.x = e.clientX;
-                point.y = e.clientY;
-                const coords = point.matrixTransform(this.svg.getScreenCTM().inverse());
-                const x = Math.max(360, Math.min(475, coords.x - 5));
-                const p = Math.pow((x - 360) / 115, 2);
-                const bet = Math.round(this.min_bet() * (1 - p) + this.all_in_bet() * p);
-                this.bet_size_text.textContent = bet;
-                this.bet_slider_thumb.setAttribute("x", x);
-            }
-        };
-        this.bet_slider_track.onclick = e => {
-            point.x = e.clientX;
-            point.y = e.clientY;
-            const coords = point.matrixTransform(this.svg.getScreenCTM().inverse());
-            const x = Math.max(360, Math.min(475, coords.x - 5));
-            const p = Math.pow((x - 360) / 115, 2);
-            const bet = Math.round(this.min_bet() * (1 - p) + this.all_in_bet() * p);
-            this.bet_size_text.textContent = bet;
-            this.bet_slider_thumb.setAttribute("x", x);
-        };
+        this.bet_slider_track.onmousedown = move_slider;
+        this.bet_slider_track.onmousemove = e => { if (this.mouse_clicked) move_slider(e); };
+        this.bet_slider_track.ontouchmove = e => move_slider(e.touches.item(0));
         this.bet_slider.append(this.bet_slider_track);
 
         this.bet_slider_thumb = document.createElementNS(svgns, "rect");
@@ -115,8 +119,9 @@ export class TexasHoldEm {
         this.bet_slider_thumb.setAttribute("width", "10");
         this.bet_slider_thumb.setAttribute("height", "12");
         this.bet_slider_thumb.classList.add("bet-slider-thumb");
-        this.bet_slider_thumb.onmousemove = this.bet_slider_track.onmousemove;
-        this.bet_slider_thumb.onclick = this.bet_slider_track.onclick;
+        this.bet_slider_thumb.onmousedown = move_slider;
+        this.bet_slider_thumb.onmousemove = e => { if (this.mouse_clicked) move_slider(e); };
+        this.bet_slider_thumb.ontouchmove = e => move_slider(e.touches.item(0));
         this.bet_slider.append(this.bet_slider_thumb);
 
         this.svg.append(this.bet_slider);

diff --git a/site/style/poker.css b/site/style/poker.css
index fb69b7d29de03b878b5604a938aa5b4b0984246a..56a729ffbbf4ebdcec0100671c39e93f8def32ab 100644 (file)
--- a/site/style/poker.css
+++ b/site/style/poker.css
@@ -44,6 +44,10 @@
     fill: #ffffff;
 }
 
+.bet-slider-area {
+    fill: transparent;
+}
+
 .bet-slider-track {
     fill: black;
     stroke: #808080;