Fix tile dealing animation

It was previously showing only a "3" instead of "3", "2", "1", and it
was fading the whole tile instead of just the number. Both issues are
fixed in this commit.

diff --git a/anagrams/anagrams.css b/anagrams/anagrams.css
index 4159125b7b9b14ac307bde612dc14895d7a4db39..91268c163f7ce6a86dd468cf6827fb4f88325b8b 100644 (file)
--- a/anagrams/anagrams.css
+++ b/anagrams/anagrams.css
@@ -106,7 +106,6 @@
 .center-pool .tile {
   position: absolute;
   cursor: grab;
-  transition: opacity 0.3s;
 }
 
 .center-pool .tile.revealing {

diff --git a/anagrams/anagrams.jsx b/anagrams/anagrams.jsx
index caaf382ed5a877a3ea33dbdc89a51cf3b1f99156..baf63da70f5722ccb15b181f9169c7c014dfbaec 100644 (file)
--- a/anagrams/anagrams.jsx
+++ b/anagrams/anagrams.jsx
@@ -204,35 +204,32 @@ class Game extends React.Component {
 
     /* Animate: each second, show the number with a fade from full
      * opacity to transparent, then switch to the next number. */
-    const animate = () => {
-      const start = Date.now();
-      const step = () => {
-        this.setState(prev => {
-          const r = { ...prev.revealing };
-          const entry = r[tile.id];
-          if (!entry) return { revealing: r };
-
-          const elapsed = Date.now() - start;
-
-          if (elapsed >= entry.seconds * 1000) {
-            /* Countdown complete — reveal the letter. */
-            delete r[tile.id];
-            return { revealing: r };
-          }
-
-          const current_second = entry.seconds - Math.floor(elapsed / 1000);
-          const frac = (elapsed % 1000) / 1000;
-          r[tile.id] = { seconds: current_second, opacity: 1 - frac };
+    const total_ms = seconds * 1000;
+    const start = Date.now();
+    const step = () => {
+      this.setState(prev => {
+        const r = { ...prev.revealing };
+        const entry = r[tile.id];
+        if (!entry) return { revealing: r };
+
+        const elapsed = Date.now() - start;
+
+        if (elapsed >= total_ms) {
+          delete r[tile.id];
           return { revealing: r };
-        });
-
-        if (this.state.revealing[tile.id]) {
-          requestAnimationFrame(step);
         }
-      };
-      requestAnimationFrame(step);
+
+        const current_second = seconds - Math.floor(elapsed / 1000);
+        const frac = (elapsed % 1000) / 1000;
+        r[tile.id] = { seconds: current_second, opacity: 1 - frac };
+        return { revealing: r };
+      });
+
+      if (this.state.revealing[tile.id]) {
+        requestAnimationFrame(step);
+      }
     };
-    animate();
+    requestAnimationFrame(step);
   }
 
   receive_bag_count(data) {
@@ -767,13 +764,9 @@ class Game extends React.Component {
                     !claim_active && !is_revealing ? "grab" : "default"
           };
 
-          let letter, className = "";
+          let className = "";
           if (is_revealing) {
-            letter = rev.seconds;
             className = "revealing";
-            style.opacity = rev.opacity;
-          } else {
-            letter = tile.letter;
           }
 
           return (
@@ -786,7 +779,9 @@ class Game extends React.Component {
                    ? (e) => this.on_center_touch_start(e, tile) : null}
                  onClick={claim_active && !is_revealing
                    ? () => this.take_letter(tile) : null}>
-              {letter}
+              {is_revealing
+                ? <span style={{opacity: rev.opacity}}>{rev.seconds}</span>
+                : tile.letter}
             </div>
           );
         })}