Relayout on shuffle working again

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

client/src/Board.css

@@ -49,7 +49,6 @@
   filter: drop-shadow(0px 0px 10px rgba(255, 0, 255, 1));
 }
 
-
 .Pip.Option:hover,
 .Pip:hover {
   filter: brightness(100%);
@@ -64,7 +63,6 @@
   filter: brightness(150%) drop-shadow(0px 0px 10px rgba(255, 0, 255, 1));
 }
 
-
 .Pips[disabled],
 .Tiles[disabled],
 .Roads[disabled],
@@ -114,6 +112,7 @@
   height: 50px;
   transform-origin: 50% 0;
   z-index: 11; /* Above Tile, below Corner */
+  pointer-events: none;
 }
 
 .Road-Shape {
@@ -167,6 +166,7 @@
 .Board .Option {
   cursor: pointer;
   pointer-events: all;
+
   filter: brightness(150%) drop-shadow(0 0 10px black);
   
   transition-timing-function: ease-in-out;

client/src/Board.js

@@ -106,8 +106,6 @@ const Board = () => {
       }
 
       if ('signature' in data.update && data.update.signature !== signature) {
-        setSignature(data.update.signature);
-
         /* The following are only updated if there is a new game 
          * signature */
         
@@ -122,6 +120,9 @@ const Board = () => {
         if ('tileOrder' in data.update) {
           setTileOrder(data.update.tileOrder);
         }
+
+        console.log(`Triggering new board layout`);
+        setSignature(data.update.signature);
       }
 
       /* This is permanent static data from the server -- do not update
@@ -288,7 +289,7 @@ useRef didn't work...
     sendPlacement(type, corner.index);
   }, [sendPlacement]);
 
-  const Corner = ({corner}) => {
+  const Corner = useCallback(({corner}) => {
     return <div className="Corner"
       onClick={(event) => { onCornerClicked(event, corner) }}
       data-index={corner.index}
@@ -297,13 +298,13 @@ useRef didn't work...
         left: `${corner.left}px`
       }}
     ><div className="Corner-Shape"/></div>;
-  };
+  }, [onCornerClicked]);
 
   const onPipClicked = useCallback((pip) => {
     sendPlacement('place-robber', pip.index);
   }, [sendPlacement]);
 
-  const Pip = ({pip}) => {
+  const Pip = useCallback(({pip}) => {
     return <div className="Pip"
       onClick={() => { onPipClicked(pip) }}
       data-roll={pip.roll}
@@ -316,25 +317,9 @@ useRef didn't work...
         backgroundPositionY: `${ 100 * Math.floor(pip.order / 6) / 5. }%`
       }}
     ><div className="Pip-Shape"/></div>;
-  };
+  }, [onPipClicked]);
     
-  useEffect(() => {
-    if (!signature) {
-      return;
-    }
-
-    if (signature === generated) {
-      return;
-    }
-
-    if (!pips || !pipOrder || !borders || !borderOrder 
-    || !tiles || !tileOrder) {
-      return;
-    }
-
-    console.log(`board - Generate board - ${signature}`);
-    
-    const generateRoads = () => {
+  const generateRoads = useCallback(() => {
     let row = 0, rowCount = 0;
     let y = -2.5 + tileHalfWidth - (rows.length - 1) * 0.5 * tileWidth,
       x = -tileHalfHeight -(rows[row] - 1) * 0.5 * tileHeight;
@@ -412,9 +397,9 @@ useRef didn't work...
       }
     }
     return corners;
-    }
+  }, []);
   
-    const generateCorners = () => {
+  const generateCorners = useCallback(() => {
     let row = 0, rowCount = 0;
     let y = -8 + 0.5 * tileHalfWidth - (rows.length - 1) * 0.5 * tileWidth,
       x = -tileHalfHeight -(rows[row] - 1) * 0.5 * tileHeight;
@@ -472,9 +457,9 @@ useRef didn't work...
       }
     }
     return corners;
-    }
+  }, []);
 
-    const generatePips = () => {
+  const generatePips = function (pipOrder) {
     let row = 0, rowCount = 0;
     let y = tileHalfWidth - (rows.length - 1) * 0.5 * tileWidth,
       x = -(rows[row] - 1) * 0.5 * tileHeight;
@@ -506,7 +491,15 @@ useRef didn't work...
     });
   };
 
-    const generateTiles = () => {
+  useEffect(() => {
+    setCornerElements(generateCorners());
+    setRoadElements(generateRoads());
+  }, []);
+
+  console.log(`board - Generate board - ${signature}`);
+  console.log(`board - tileOrder - `, tileOrder);
+  
+  const generateTiles = function (tileOrder) {
     let row = 0, rowCount = 0;
     let y = tileHalfWidth - (rows.length - 1) * 0.5 * tileWidth,
       x = -(rows[row] - 1) * 0.5 * tileHeight;
@@ -534,7 +527,7 @@ useRef didn't work...
     });
   };
 
-    const generateBorders = () => {
+  const generateBorders = function(borderOrder) {
     const sides = 6;
     let side = -1;
     return borderOrder.map(order => {
@@ -560,19 +553,21 @@ useRef didn't work...
     });
   };
 
-    setPipElements(generatePips());
-    setBorderElements(generateBorders());
-    setTileElements(generateTiles());
-    setCornerElements(generateCorners());
-    setRoadElements(generateRoads());
+  if ((signature && signature !== generated) 
+  && (pips && pipOrder && borders && borderOrder 
+  && tiles && tileOrder)) {
+    setPipElements(generatePips(pipOrder));
+    setBorderElements(generateBorders(borderOrder));
+    setTileElements(generateTiles(tileOrder));
    
     setGenerated(signature);
-  }, [
+  }/*, [
     signature, generated,
     setPipElements, setBorderElements, setTileElements,
-    setCornerElements, setRoadElements,
     borderOrder, borders, pipOrder, pips, tileOrder, tiles
-  ]);
+  ]);*/
+  
+  console.log(`board - rendering tileOrder - `, tileOrder);
   
   console.log(`board - todo - look into debouncing the direct DOM update`);
   if (turn) {
@@ -681,6 +676,7 @@ useRef didn't work...
     }
   }
 
+  useEffect(() => {
     let nodes = document.querySelectorAll(`.Pip.Robber`);
     for (let i = 0; i < nodes.length; i++) {
       nodes[i].classList.remove('Robber');
@@ -696,6 +692,8 @@ useRef didn't work...
         el.classList.add(robberName);
       } 
     }
+  });
+
 
   const canAction = (action) => {
     return (turn && Array.isArray(turn.actions) && turn.actions.indexOf(action) !== -1);

client/src/PlayerList.js

@@ -110,7 +110,7 @@ const PlayerList = () => {
       <div>{ player }</div>
       <MediaControl peer={player} isSelf={name === player}/>
     </div>
-  })
+  });
 
   return (
     <Paper className="PlayerList">

server/routes/games.js

@@ -1877,8 +1877,6 @@ const stopTurnTimer = (game) => {
 }
 
 const shuffle = (game, session) => {
-  const name = session.name;
-
   if (game.state !== "lobby") {
     return `Game no longer in lobby (${game.state}). Can not shuffle board.`;
   }
@@ -1886,9 +1884,16 @@ const shuffle = (game, session) => {
     return `Game already in progress (${game.turns} so far!) and cannot be shuffled.`;
   }
   shuffleBoard(game);
-  const message = `${name} requested a new board. New board signature: ${game.signature}.`;
-  addChatMessage(game, null, message);
-  sendGameToPlayers(game);
+  console.log(`${session.id}: Shuffled to new signature: ${game.signature}`);
+
+  sendUpdateToPlayers(game, {
+    pipOrder: game.pipOrder,
+    tileOrder: game.tileOrder,
+    borderOrder: game.borderOrder,
+    robber: game.robber,
+    robberName: game.robberName,
+    signature: game.signature
+  });
 }
 
 const pass = (game, session) => {
@@ -3087,12 +3092,12 @@ const sendGameToPlayer = (game, session) => {
     console.log(`${session.id}: -> sendGamePlayer:${getName(session)} - only sending empty name`);
     update = { name: "" };
   } else {
-    update - getFilteredGameForPlayer(game, session);
+    update = getFilteredGameForPlayer(game, session);
   }
     
   session.ws.send(JSON.stringify({
     type: 'game-update', 
-    update: getFilteredGameForPlayer(game, session)
+    update: update
   }));
 };