letterrip: Don't bring up modal for selecting blank tile when first clicking it

Instead, just select the tile on first click, and then bring up the
selection modoal on the second click, (either when selecting the
destination cell for movement or deselecting it).

This is consistent behavior with what the user will have first seen
when moving the blank from the rack to the board, and now means that
the user can use click-to-select/click-to-move to move a blank tile
from one board square to another, (which was impossible prior to this
commit).

diff --git a/letterrip/letterrip.jsx b/letterrip/letterrip.jsx
index 84890062ed5c2a3fc105feaf0cfade0651a9364a..a6bc2349ffb8fc44d58414656680f67c17f5d89d 100644 (file)
--- a/letterrip/letterrip.jsx
+++ b/letterrip/letterrip.jsx
@@ -730,9 +730,15 @@ class Game extends React.Component {
     const sel = this.state.selected;
     const cell = this.state.grid[grid_key];
 
-    /* If tapping the already-selected grid tile, deselect. */
+    /* If tapping the already-selected grid tile, deselect it.
+     * For blanks, also offer to reassign the letter. */
     if (sel && sel.from === "grid" && sel.grid_key === grid_key) {
-      this.setState({ selected: null });
+      const updates = { selected: null };
+      if (cell && cell.isBlank) {
+        const [r, c] = grid_key.split(",").map(Number);
+        updates.blank_pending = { r, c, tileIndex: cell.tileIndex, reassign: true };
+      }
+      this.setState(updates);
       return;
     }
 
@@ -747,15 +753,6 @@ class Game extends React.Component {
       return;
     }
 
-    /* If a blank is tapped on the grid, allow reassigning its letter. */
-    if (cell && cell.isBlank) {
-      const [r, c] = grid_key.split(",").map(Number);
-      this.setState({
-        blank_pending: { r, c, tileIndex: cell.tileIndex, reassign: true }
-      });
-      return;
-    }
-
     /* Select this grid tile. */
     this.setState({
       selected: { from: "grid", grid_key, tile_index: cell.tileIndex }
@@ -806,8 +803,8 @@ class Game extends React.Component {
       delete new_grid[sel.grid_key];
     }
 
-    /* Blank tile that hasn't been assigned a letter — show modal. */
-    if (is_blank && !(sel.from === "grid" && this.state.grid[sel.grid_key] && this.state.grid[sel.grid_key].letter)) {
+    /* Blank tile — always show the modal so the user can pick a letter. */
+    if (is_blank) {
       this.setState({
         grid: new_grid,
         rack: new_rack,
@@ -817,12 +814,7 @@ class Game extends React.Component {
       return;
     }
 
-    /* Preserve existing letter assignment for blanks being moved. */
-    const existing = sel.from === "grid" ? this.state.grid[sel.grid_key] : null;
-    const letter = existing ? existing.letter : tile_char;
-    const isBlank = existing ? existing.isBlank : is_blank;
-
-    new_grid[grid_key] = { letter, tileIndex: tile_index, isBlank };
+    new_grid[grid_key] = { letter: tile_char, tileIndex: tile_index, isBlank: false };
 
     this.setState({
       grid: new_grid,