anagrams: Add letters to the rack optimistically

Rather than waiting for a server response before displaying the letters
in the rack.

We _do_ still wait for the server response, and if it fails, then we
will revert and move the letter from the rack back to the center of
the board.

This optimistic addition guarantees that letters are added to the rack
in the order that the user typed them, (even if the responses to each
request come back in some other order). Reliable typing---what a concept!

diff --git a/anagrams/anagrams.jsx b/anagrams/anagrams.jsx
index 963087237b87915d6aea45a1f23cb24d1e7665df..45c52eb97b95f3cb661739952b9c47f7a6ddc1ac 100644 (file)
--- a/anagrams/anagrams.jsx
+++ b/anagrams/anagrams.jsx
@@ -491,17 +491,28 @@ class Game extends React.Component {
   }
 
   async take_center_letter(tile) {
+    /* Optimistically add to rack so letters appear in keystroke
+     * order regardless of HTTP response timing. */
+    this.setState(prev => ({
+      claim_rack: [...prev.claim_rack, {
+        letter: tile.letter, source: "center", tile
+      }],
+      claim_center_tiles: [...prev.claim_center_tiles, tile],
+      center: prev.center.filter(t => t.id !== tile.id),
+      claim_error: null
+    }));
+
     const response = await fetch_post_json("take-letter", {
       letter_id: tile.id
     });
-    if (response.ok) {
+    if (!response.ok) {
+      /* Revert: remove from rack and restore to center. */
       this.setState(prev => ({
-        claim_rack: [...prev.claim_rack, {
-          letter: tile.letter, source: "center", tile
-        }],
-        claim_center_tiles: [...prev.claim_center_tiles, tile],
-        center: prev.center.filter(t => t.id !== tile.id),
-        claim_error: null
+        claim_rack: prev.claim_rack.filter(
+          e => !(e.source === "center" && e.tile.id === tile.id)),
+        claim_center_tiles: prev.claim_center_tiles.filter(
+          t => t.id !== tile.id),
+        center: [...prev.center, tile]
       }));
     }
   }