Arrange tiles neatly when reloading the game

The random positioning (which we use for one-at-a-time dealing of
tiles) was failing here, because each tile's random position was being
chosen against an empty playfield, (the tiles are being added in bulk
and the state isn't being updated between tiles). So the letters ended
up piling on top of each other.

We have a nice way to arrange non-overlapping tiles with the
shuff_tiles() function, so just call that once when doing a bulk
receive of tiles.

diff --git a/anagrams/anagrams.jsx b/anagrams/anagrams.jsx
index ede6c2e724ff34a64d72185256da30cce047a546..631b91374c0f879dce1c31b97faea762d671eebf 100644 (file)
--- a/anagrams/anagrams.jsx
+++ b/anagrams/anagrams.jsx
@@ -170,12 +170,17 @@ class Game extends React.Component {
 
   receive_center(tiles) {
     const positions = { ...this.state.tile_positions };
+    let new_count = 0;
     for (const tile of tiles) {
       if (!positions[tile.id]) {
-        positions[tile.id] = this._random_position();
+        positions[tile.id] = { x: 50, y: 50 }; /* placeholder */
+        new_count++;
       }
     }
-    this.setState({ center: tiles, tile_positions: positions });
+    this.setState({ center: tiles, tile_positions: positions }, () => {
+      /* On bulk load (reconnection), arrange tiles in a grid. */
+      if (new_count > 1) this.shuffle_tiles();
+    });
   }
 
   receive_letter_reveal(data) {