make suit transform cleaner and add animation

diff --git a/site/modules/whist.js b/site/modules/whist.js
index a299115595d585fbcfb97f0d4f0d8e7fe529bbbc..7ef3e8dd6da242d907674fd350076b220a309a55 100644 (file)
--- 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 43b41cd22f3035453be418b0f52efe84c6d1d8a5..95a6e14f75e86fde2b30d8da0a51b75027179490 100644 (file)
--- 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);
+}