make animation a bit smoother

diff --git a/site/modules/splash.js b/site/modules/splash.js
index e88bbac9644360fcdc0f49409d6d6038dceac1cd..19f5f3b77b8fb4e65ded84e5bab8639fe8559ad5 100644 (file)
--- a/site/modules/splash.js
+++ b/site/modules/splash.js
@@ -5,12 +5,13 @@ import { random_float, random_bool, random_sign } from "./random.js";
 class CardWave {
     constructor(svg, speed, height, slope, card_backs, initial_time) {
         this.svg = svg;
-        this.timestep = 10;
+        this.timestep = 33;
         this.speed = speed;
         this.height = height;
         this.slope = slope;
         this.completed = false;
         this.initial_offset = this.speed > 0 ? (2000 - window.innerWidth) / 2 - 100 : (2000 + window.innerWidth) / 2 + 100;
+        this.group = create_svg_element(this.svg, "g", [], []);
 
         if (card_backs) {
             this.cards = [...FIFTY_TWO_CARD_DECK].map(card => this.card_image(null));
@@ -23,14 +24,14 @@ class CardWave {
     }
 
     card_image(card) {
-        return create_svg_element(this.svg, card === null ? "image" : "use", [], [["width", "45"], ["height", "70"], ["x", "-100"], ["y", "215"], ["href", card_href(card)]]);
+        return create_svg_element(this.group, card === null ? "image" : "use", [], [["width", "45"], ["height", "70"], ["x", "-100"], ["y", "215"], ["href", card_href(card)]]);
     }
 
     schedule_frame(time) {
         this.render(time - this.start_timestamp);
         if (!this.completed) {
             const now = new Date().getTime();
-            const next_time = (Math.floor(now / this.timestep) + 1) * this.timestep;
+            const next_time = now + this.timestep;
             setTimeout(() => this.schedule_frame(next_time), next_time - now);
         }
     }
@@ -44,9 +45,7 @@ class CardWave {
         }
         if (x > 2200 / Math.abs(this.speed)) {
             this.completed = true;
-            for (const card of this.cards) {
-                this.svg.removeChild(card);
-            }
+            this.svg.removeChild(this.group);
         }
     }
 }