From: Geoffrey Allott <geoffrey@allott.email>
Date: Sat, 17 Jun 2023 18:34:56 +0000 (+0100)
Subject: make suit transform cleaner and add animation
X-Git-Url: https://git.pointlesshacks.com/?a=commitdiff_plain;h=e870a21a0ae77d1b0ff02ecb9ce97c596846803a;p=pokerwave.git

make suit transform cleaner and add animation
---

diff --git a/site/modules/whist.js b/site/modules/whist.js
index a299115..7ef3e8d 100644
--- a/site/modules/whist.js
+++ b/site/modules/whist.js
@@ -14,7 +14,7 @@ export class KnockOutWhist extends GameWithChat {
         this.trick = [];
         this.user_icons = new Map();
 
-        this.suits_background = 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", ["suit-background"], [["x", "340"], ["y", "235"], ["width", "100"], ["height", "30"], ["rx", "10"], ["fill", "darkgreen"]]);
 
         this.glyphs = new Map();
         this.glyph_highlights = new Map();
@@ -128,13 +128,12 @@ export class KnockOutWhist extends GameWithChat {
             highlight.classList.toggle("trumps", suit === this.trumps);
         }
         const is_choosing_trumps = this.call === this.username && this.trumps === null;
-        const transform = is_choosing_trumps ? "translate(-160 250) scale(3 3) translate(-250 -250)" : "";
-        this.suits_background.setAttribute("transform", transform);
+        this.suits_background.classList.toggle("suit-expand", is_choosing_trumps);
         for (const [suit, glyph] of this.glyphs) {
-            glyph.setAttribute("transform", transform);
+            glyph.classList.toggle("suit-expand", is_choosing_trumps);
         }
         for (const [suit, highlight] of this.glyph_highlights) {
-            highlight.setAttribute("transform", transform);
+            highlight.classList.toggle("suit-expand", is_choosing_trumps);
         }
     }
 
diff --git a/site/style/whist.css b/site/style/whist.css
index 43b41cd..95a6e14 100644
--- a/site/style/whist.css
+++ b/site/style/whist.css
@@ -12,6 +12,10 @@ svg {
     transform: translateY(-20px);
 }
 
+.suit-background, .suit-glyph, .suit-highlight {
+    transition: transform 0.5s;
+}
+
 .suit-glyph {
     pointer-events: none;
 }
@@ -40,3 +44,7 @@ svg {
 .active-indicator.active {
     fill: #2020ff;
 }
+
+.suit-expand {
+    transform: matrix(3, 0, 0, 3, -910, -500);
+}