From 9dd2ead4eb7d03b7645ffdd400f008a5afc6bb19 Mon Sep 17 00:00:00 2001 From: Carl Worth Date: Sun, 8 Mar 2026 22:09:05 -0400 Subject: [PATCH] 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! --- anagrams/anagrams.jsx | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/anagrams/anagrams.jsx b/anagrams/anagrams.jsx index 9630872..45c52eb 100644 --- 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] })); } } -- 2.45.2