make trumps selection much larger when needed to make it easier to click

diff --git a/site/modules/whist.js b/site/modules/whist.js
index 1f5944d4767dd00360f88e26b4993ceba972b05b..8807ea4736a4507442919e0ea6c93c96c97ed1fc 100644 (file)
--- a/site/modules/whist.js
+++ b/site/modules/whist.js
@@ -14,15 +14,17 @@ export class KnockOutWhist extends GameWithChat {
         this.trick = [];
         this.user_icons = new Map();
 
-        const suits = create_svg_element(this.svg, "rect", [], [["x", "340"], ["y", "235"], ["width", "100"], ["height", "30"], ["rx", "10"], ["fill", "darkgreen"]]);
+        this.suits_background = create_svg_element(this.svg, "rect", [], [["x", "340"], ["y", "235"], ["width", "100"], ["height", "30"], ["rx", "10"], ["fill", "darkgreen"]]);
 
         this.glyphs = new Map();
+        this.glyph_highlights = new Map();
         let x = 340;
         for (const suit of ["Clubs", "Diamonds", "Hearts", "Spades"]) {
             const highlight = create_svg_element(this.svg, "circle", ["suit-highlight"], [["cx", x + 12.5], ["cy", "250"], ["r", "10"]]);
             highlight.onclick = () => this.send({type: "TakeAction", action: {action: "ChooseTrumps", suit: suit}});
-            this.glyphs.set(suit, highlight);
+            this.glyph_highlights.set(suit, highlight);
             const glyph = create_svg_element(this.svg, "use", ["suit-glyph"], [["x", x], ["y", "235"], ["width", "25"], ["height", "30"], ["href", suit_href(suit)]]);
+            this.glyphs.set(suit, glyph);
             x += 25;
         }
 
@@ -122,8 +124,20 @@ export class KnockOutWhist extends GameWithChat {
     }
 
     redraw_trumps() {
+        for (const [suit, highlight] of this.glyph_highlights) {
+            highlight.classList.toggle("trumps", suit === this.trumps);
+        }
+        const is_choosing_trumps = this.call === this.username && this.trumps === null;
+        console.log("is_choosing_trumps", is_choosing_trumps);
+        console.log("this.active", this.active);
+        console.log("this.trumps", this.trumps);
+        const transform = is_choosing_trumps ? "translate(-160 250) scale(3 3) translate(-250 -250)" : "";
+        this.suits_background.setAttribute("transform", transform);
         for (const [suit, glyph] of this.glyphs) {
-            glyph.classList.toggle("trumps", suit === this.trumps);
+            glyph.setAttribute("transform", transform);
+        }
+        for (const [suit, highlight] of this.glyph_highlights) {
+            highlight.setAttribute("transform", transform);
         }
     }
 
@@ -241,6 +255,7 @@ export class KnockOutWhist extends GameWithChat {
                 break;
             case "EndDeal":
                 this.active = this.player_after(user_action.username, _ => true);
+                this.redraw_trumps();
                 this.redraw_players();
                 break;
             case "WinGame":