Display 3, 2, 1 when revealing a tile (even if server uses < 3 seconds)

We recently change the server to make the tile reveal time be only 1.5
seconds. But we still want to display a "3, 2, 1" countdown.

So evenly space out those 3 numbers in whatever time the server gives us.

diff --git a/anagrams/anagrams.jsx b/anagrams/anagrams.jsx
index e150b9aa8b2c0773f0b3229b7f67f29c80ad53c2..3ad6970d10a1e0f40335c0efc9688dad66bf278d 100644 (file)
--- a/anagrams/anagrams.jsx
+++ b/anagrams/anagrams.jsx
@@ -101,7 +101,7 @@ class Game extends React.Component {
       joined: false,
       /* Center pool letters */
       center: [],
-      revealing: {},  /* letter_id -> { seconds, opacity } */
+      revealing: {},  /* letter_id -> { number, opacity } */
       /* Player words: { session_id: { name, words: [...] } } */
       player_words: {},
       /* Scores: { session_id: { name, score, words } } */
@@ -193,9 +193,8 @@ class Game extends React.Component {
     if (!positions[tile.id]) {
       positions[tile.id] = this._random_position();
     }
-    const seconds = Math.ceil(countdown_ms / 1000);
     const revealing = { ...this.state.revealing };
-    revealing[tile.id] = { seconds, opacity: 1 };
+    revealing[tile.id] = { number: 3, opacity: 1 };
 
     this.setState({
       center,
@@ -204,9 +203,9 @@ class Game extends React.Component {
       bag_remaining: remaining
     });
 
-    /* Animate: each second, show the number with a fade from full
-     * opacity to transparent, then switch to the next number. */
-    const total_ms = seconds * 1000;
+    /* Animate: show 3, 2, 1 evenly spaced within countdown_ms,
+     * each fading from full opacity to transparent. */
+    const phase_ms = countdown_ms / 3;
     const start = Date.now();
     const step = () => {
       this.setState(prev => {
@@ -216,14 +215,15 @@ class Game extends React.Component {
 
         const elapsed = Date.now() - start;
 
-        if (elapsed >= total_ms) {
+        if (elapsed >= countdown_ms) {
           delete r[tile.id];
           return { revealing: r };
         }
 
-        const current_second = seconds - Math.floor(elapsed / 1000);
-        const frac = (elapsed % 1000) / 1000;
-        r[tile.id] = { seconds: current_second, opacity: 1 - frac };
+        const phase = Math.min(2, Math.floor(elapsed / phase_ms));
+        const current_number = 3 - phase;
+        const frac = (elapsed - phase * phase_ms) / phase_ms;
+        r[tile.id] = { number: current_number, opacity: 1 - frac };
         return { revealing: r };
       });
 
@@ -928,7 +928,7 @@ class Game extends React.Component {
                  onMouseDown={(e) => this.on_center_mouse_down(e, tile)}
                  onTouchStart={(e) => this.on_center_touch_start(e, tile)}>
               {is_revealing
-                ? <span style={{opacity: rev.opacity}}>{rev.seconds}</span>
+                ? <span style={{opacity: rev.opacity}}>{rev.number}</span>
                 : tile.letter}
             </div>
           );