Everyone starts with same animation seeds for tiles

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>

client/src/Board.js

@@ -41,6 +41,7 @@ const Board = () => {
   const [ pipOrder, setPipOrder ] = useState();
   const [ borders, setBorders ] = useState();
   const [ borderOrder, setBorderOrder ] = useState();
+  const [animationSeeds, setAnimationSeeds] = useState();
   const [ tiles, setTiles ] = useState();
   const [ tileOrder, setTileOrder ] = useState([]);
   const [ placements, setPlacements ] = useState(undefined);
@@ -53,7 +54,7 @@ const Board = () => {
     'signature', 'robber', 'robberName',
     'pips', 'pipOrder', 'borders', 'borderOrder', 'tiles', 'tileOrder',
     'placements', 'turn', 'state', 'color', 'longestRoadLength',
-    'rules'
+    'rules', 'animationSeeds'
   ], []);
 
   console.log(`board - ws`, ws);
@@ -118,6 +119,10 @@ const Board = () => {
         setBorderOrder(data.update.borderOrder);
       }
       
+        if ('animationSeeds' in data.update && !equal(data.update.animationSeeds, animationSeeds)) {
+          console.log(`board - setting new animationSeeds`);
+          setAnimationSeeds(data.update.animationSeeds);
+        }
       if ('tileOrder' in data.update && !equal(data.update.tileOrder, tileOrder)) {
         console.log(`board - setting new tileOrder`);
         setTileOrder(data.update.tileOrder);
@@ -501,7 +506,7 @@ const Board = () => {
       ><div className="Tile-Shape"/></div>;
     };
 
-    const generateTiles = function (tileOrder) {
+    const generateTiles = function (tileOrder, animationSeeds) {
       let row = 0, rowCount = 0;
       let y = tileHalfWidth - (rows.length - 1) * 0.5 * tileWidth,
         x = -(rows[row] - 1) * 0.5 * tileHeight;
@@ -531,7 +536,7 @@ const Board = () => {
         
         if (tile.type === 'wheat') {
           div = <div key={`tile-${order}`}>
-            <Flock count={Math.floor(Math.random() * 4)}
+            <Flock count={Math.floor(1 + animationSeeds[index] * 4)}
           style={{
             top: `${tile.top - tileImageHeight * 0.5}px`,
             left: `${tile.left - tileImageWidth * 0.5}px`,
@@ -651,9 +656,9 @@ const Board = () => {
       setBorderElements(generateBorders(borderOrder));
     }
       
-    if (tiles && tileOrder) {
+    if (tiles && tileOrder && animationSeeds) {
       console.log(`board - Generate board - tiles`);
-      setTileElements(generateTiles(tileOrder));
+      setTileElements(generateTiles(tileOrder, animationSeeds));
     }
     
     /* Regenerate pips every time; it uses ws */
@@ -669,6 +674,7 @@ const Board = () => {
   }, [
     signature, generated,
     pips, pipOrder, borders, borderOrder, tiles, tileOrder,
+    animationSeeds,
     ws, state, rules
   ]);
  

server/routes/games.js

@@ -2119,7 +2119,8 @@ const shuffle = (game, session) => {
     borderOrder: game.borderOrder,
     robber: game.robber,
     robberName: game.robberName,
-    signature: game.signature
+    signature: game.signature,
+    animationSeeds: game.animationSeeds
   });
 }
 
@@ -4757,6 +4758,7 @@ const shuffleBoard = (game) => {
   ]
   const sequence = order[Math.floor(Math.random() * order.length)];
   game.pipOrder = [];
+  game.animationSeeds = [];
   for (let i = 0, p = 0; i < sequence.length; i++) {
     const target = sequence[i];
     /* If the target tile is the desert (18), then set the
@@ -4769,6 +4771,7 @@ const shuffleBoard = (game) => {
     } else {
       game.pipOrder[target] = p++;
     }
+    game.animationSeeds.push(Math.random());
   }
 
   shuffleArray(game.developmentCards);