rendering tweaks

diff --git a/site/modules/splash.js b/site/modules/splash.js
index 87ad01f293bfb8d99fdf1db06e40888131dbb902..b812af7fbdbd3dc1d77044015ec9b7db361334fd 100644 (file)
--- a/site/modules/splash.js
+++ b/site/modules/splash.js
@@ -10,6 +10,7 @@ class CardWave {
         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;
 
         if (card_backs) {
             this.cards = [...FIFTY_TWO_CARD_DECK].map(card => this.card_image(null));
@@ -17,7 +18,8 @@ class CardWave {
             this.cards = [...FIFTY_TWO_CARD_DECK].map(card => this.card_image(card));
         }
 
-        this.schedule_frame(initial_time);
+        this.start_timestamp = new Date().getTime();
+        this.schedule_frame(this.start_timestamp + initial_time);
     }
 
     card_image(card) {
@@ -25,17 +27,18 @@ class CardWave {
     }
 
     schedule_frame(time) {
-        this.render(time);
+        this.render(time - this.start_timestamp);
         if (!this.completed) {
-            setTimeout(() => this.schedule_frame(time + this.timestep), this.timestep);
+            const now = new Date().getTime();
+            const next_time = (Math.floor(now / this.timestep) + 1) * this.timestep;
+            setTimeout(() => this.schedule_frame(next_time), next_time - now);
         }
     }
 
     render(time) {
         let x = time;
-        const initial_offset = this.speed > 0 ? -100 : 2100;
         for (const card of this.cards) {
-            card.setAttribute("x", x * this.speed + initial_offset);
+            card.setAttribute("x", x * this.speed + this.initial_offset);
             card.setAttribute("y", Math.sin(x * this.speed / this.slope) * this.height + 215);
             x -= 40;
         }

diff --git a/site/style/splash.css b/site/style/splash.css
index 2148a312852792ef419eea92b33d73326b840c25..62d2dc8aa0105343e6be287b8542bb747c3bc4bd 100644 (file)
--- a/site/style/splash.css
+++ b/site/style/splash.css
@@ -14,6 +14,10 @@
     src: url("../fonts/VegapunkFree-2O8WX.otf");
 }
 
+.splash-screen {
+    cursor: pointer;
+}
+
 .splash-logo {
     animation: fade-in 3s;
     opacity: 99%;
@@ -23,6 +27,7 @@
     font-family: vegapunk;
     text-shadow: 5px 5px red;
     fill: purple;
+    cursor-events: none;
 }
 
 .splash-upper-bar {