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,263 +317,257 @@ useRef didn't work...
         backgroundPositionY: `${ 100 * Math.floor(pip.order / 6) / 5. }%`
       }}
     ><div className="Pip-Shape"/></div>;
-  };
+  }, [onPipClicked]);
     
-  useEffect(() => {
+  const generateRoads = useCallback(() => {
-    if (!signature) {
+    let row = 0, rowCount = 0;
-      return;
+    let y = -2.5 + tileHalfWidth - (rows.length - 1) * 0.5 * tileWidth,
-    }
+      x = -tileHalfHeight -(rows[row] - 1) * 0.5 * tileHeight;
 
-    if (signature === generated) {
+    let index = 0;
-      return;
+    let road;
-    }
 
-    if (!pips || !pipOrder || !borders || !borderOrder 
+    const corners = [];
-    || !tiles || !tileOrder) {
-      return;
-    }
-
-    console.log(`board - Generate board - ${signature}`);
-    
-    const generateRoads = () => {
-      let row = 0, rowCount = 0;
-      let y = -2.5 + tileHalfWidth - (rows.length - 1) * 0.5 * tileWidth,
-        x = -tileHalfHeight -(rows[row] - 1) * 0.5 * tileHeight;
-
-      let index = 0;
-      let road;
-
-      const corners = [];
-      
-      for (let i = 0; i < 21; i++) {
-        const lastRow = row === rows.length - 1;
-        if (row > 2 && rowCount === 0) {
-          road = {
-            index: index++,
-            angle: -60,
-            top: y-0.5*tileHalfHeight,
-            left: x-tileHalfHeight
-          };
-          corners.push(<Road key={`road-${index}}`} road={road}/>);
-        }
-
-        road = {
-          index: index++,
-          angle: 240,
-          top: y,
-          left: x
-        };
-        corners.push(<Road key={`road-${index}}`} road={road}/>);
     
+    for (let i = 0; i < 21; i++) {
+      const lastRow = row === rows.length - 1;
+      if (row > 2 && rowCount === 0) {
         road = {
           index: index++,
           angle: -60,
           top: y-0.5*tileHalfHeight,
-          left: x+tileHalfHeight
+          left: x-tileHalfHeight
         };
         corners.push(<Road key={`road-${index}}`} road={road}/>);
+      }
 
+      road = {
+        index: index++,
+        angle: 240,
+        top: y,
+        left: x
+      };
+      corners.push(<Road key={`road-${index}}`} road={road}/>);
+
+      road = {
+        index: index++,
+        angle: -60,
+        top: y-0.5*tileHalfHeight,
+        left: x+tileHalfHeight
+      };
+      corners.push(<Road key={`road-${index}}`} road={road}/>);
+
+      if (!lastRow) {
+        road = {
+          index: index++,
+          angle: 0,
+          top: y,
+          left: x
+        };
+        corners.push(<Road key={`road-${index}}`} road={road}/>);
+      }
+
+      if (++rowCount === rows[row]) {
         if (!lastRow) {
           road = {
             index: index++,
             angle: 0,
             top: y,
-            left: x
+            left: x+2.*tileHalfHeight
           };
           corners.push(<Road key={`road-${index}}`} road={road}/>);
         }
 
-        if (++rowCount === rows[row]) {
+        if (row > 2) {
-          if (!lastRow) {
+          road = {
-            road = {
-              index: index++,
-              angle: 0,
-              top: y,
-              left: x+2.*tileHalfHeight
-            };
-            corners.push(<Road key={`road-${index}}`} road={road}/>);
-          }
-
-          if (row > 2) {
-            road = {
-              index: index++,
-              angle: 60,
-              top: y-0.5*tileHalfHeight,
-              left: x+3.*tileHalfHeight
-            };
-            corners.push(<Road key={`road-${index}}`} road={road}/>);
-          }
-    
-          row++;
-          rowCount = 0;
-          y += tileHeight - 10.5;
-          x = -tileHalfHeight - (rows[row] - 1) * 0.5 * tileHeight;
-        } else {
-          x += tileHeight;
-        }
-      }
-      return corners;
-    }
-    
-    const generateCorners = () => {
-      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;
-      let index = 0;
-      const corners = [];
-      let corner;
-
-      for (let i = 0; i < 21; i++) {
-        if (row > 2 && rowCount === 0) {
-          corner = {
             index: index++,
+            angle: 60,
             top: y-0.5*tileHalfHeight,
-            left: x-tileHalfHeight
+            left: x+3.*tileHalfHeight
           };
-          corners.push(<Corner key={`corner-${index}}`} corner={corner}/>);
+          corners.push(<Road key={`road-${index}}`} road={road}/>);
         }
   
-        corner = {
+        row++;
-          index: index++,
+        rowCount = 0;
-          top: y,
+        y += tileHeight - 10.5;
-          left: x
+        x = -tileHalfHeight - (rows[row] - 1) * 0.5 * tileHeight;
-        };
+      } else {
-        corners.push(<Corner key={`corner-${index}}`} corner={corner}/>);
+        x += tileHeight;
+      }
+    }
+    return corners;
+  }, []);
   
+  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;
+    let index = 0;
+    const corners = [];
+    let corner;
+
+    for (let i = 0; i < 21; i++) {
+      if (row > 2 && rowCount === 0) {
         corner = {
           index: index++,
           top: y-0.5*tileHalfHeight,
-          left: x+tileHalfHeight
+          left: x-tileHalfHeight
+        };
+        corners.push(<Corner key={`corner-${index}}`} corner={corner}/>);
+      }
+
+      corner = {
+        index: index++,
+        top: y,
+        left: x
+      };
+      corners.push(<Corner key={`corner-${index}}`} corner={corner}/>);
+
+      corner = {
+        index: index++,
+        top: y-0.5*tileHalfHeight,
+        left: x+tileHalfHeight
+      };
+      corners.push(<Corner key={`corner-${index}}`} corner={corner}/>);
+        
+      if (++rowCount === rows[row]) {
+        corner = {
+          index: index++,
+          top: y,
+          left: x+2.*tileHalfHeight
         };
         corners.push(<Corner key={`corner-${index}}`} corner={corner}/>);
         
-        if (++rowCount === rows[row]) {
+        if (row > 2) {
           corner = {
             index: index++,
-            top: y,
+            top: y-0.5*tileHalfHeight,
-            left: x+2.*tileHalfHeight
+            left: x+3.*tileHalfHeight
           };
           corners.push(<Corner key={`corner-${index}}`} corner={corner}/>);
-          
-          if (row > 2) {
-            corner = {
-              index: index++,
-              top: y-0.5*tileHalfHeight,
-              left: x+3.*tileHalfHeight
-            };
-            corners.push(<Corner key={`corner-${index}}`} corner={corner}/>);
-          }
-    
-          row++;
-          rowCount = 0;
-          y += tileHeight - 10.5;
-          x = -tileHalfHeight - (rows[row] - 1) * 0.5 * tileHeight;
-        } else {
-          x += tileHeight;
         }
+  
+        row++;
+        rowCount = 0;
+        y += tileHeight - 10.5;
+        x = -tileHalfHeight - (rows[row] - 1) * 0.5 * tileHeight;
+      } else {
+        x += tileHeight;
       }
-      return corners;
     }
+    return corners;
+  }, []);
 
-    const generatePips = () => {
+  const generatePips = function (pipOrder) {
-      let row = 0, rowCount = 0;
+    let row = 0, rowCount = 0;
-      let y = tileHalfWidth - (rows.length - 1) * 0.5 * tileWidth,
+    let y = tileHalfWidth - (rows.length - 1) * 0.5 * tileWidth,
-        x = -(rows[row] - 1) * 0.5 * tileHeight;
+      x = -(rows[row] - 1) * 0.5 * tileHeight;
-      let index = 0;
+    let index = 0;
-      let pip;
+    let pip;
-      return pipOrder.map(order => {
+    return pipOrder.map(order => {
-        pip = {
+      pip = {
-          roll: pips[order].roll,
+        roll: pips[order].roll,
-          index: index++,
+        index: index++,
-          top: y,
+        top: y,
-          left: x,
+        left: x,
-          order: order
+        order: order
-        };
+      };
-        const div = <Pip
+      const div = <Pip
-          pip={pip}
+        pip={pip}
-          key={`pip-${order}`}
+        key={`pip-${order}`}
-        />;
+      />;
         
-        if (++rowCount === rows[row]) {
+      if (++rowCount === rows[row]) {
-          row++;
+        row++;
-          rowCount = 0;
+        rowCount = 0;
-          y += tileWidth;
+        y += tileWidth;
-          x = - (rows[row] - 1) * 0.5 * tileHeight;
+        x = - (rows[row] - 1) * 0.5 * tileHeight;
-        } else {
+      } else {
-          x += tileHeight;
+        x += tileHeight;
-        }
+      }
 
-        return div;
+      return div;
-      });
+    });
-    };
+  };
 
-    const generateTiles = () => {
+  useEffect(() => {
-      let row = 0, rowCount = 0;
-      let y = tileHalfWidth - (rows.length - 1) * 0.5 * tileWidth,
-        x = -(rows[row] - 1) * 0.5 * tileHeight;
-      let index = 0;
-      return tileOrder.map(order => {
-        const tile = Object.assign({},
-          tiles[order],
-          { index: index++, left: x, top: y});
-
-        let div = <Tile
-          key={`${tile.type}-${tile.card}`}
-          tile={tile}
-          />;
-      
-        if (++rowCount === rows[row]) {
-          row++;
-          rowCount = 0;
-          y += tileWidth;
-          x = - (rows[row] - 1) * 0.5 * tileHeight;
-        } else {
-          x += tileHeight;
-        }
-      
-        return div;
-      });
-    };
-
-    const generateBorders = () => {
-      const sides = 6;
-      let side = -1;
-      return borderOrder.map(order => {
-        const border = borders[order];
-        side++;
-        let x =  + Math.sin(Math.PI - side / sides * 2. * Math.PI) * radius,
-          y = Math.cos(Math.PI - side / sides * 2. * Math.PI) * radius;
-        let prev = (order === 0) ? 6 : order;
-        const file = `borders-${order+1}.${prev}.png`;
-        return <div
-          key={`border-${order}`}
-          className="Border"
-          border={border}
-          style={{
-            width: `${borderImageWidth}px`,
-            height: `${borderImageHeight}px`,
-            top: `${y}px`,
-            left: `${x}px`,
-            transform: `rotate(${side*(360/sides)}deg) translate(${borderOffsetX}px, ${borderOffsetY}px) scale(-1, -1)`,
-            backgroundImage: `url(${assetsPath}/gfx/${file} )`
-          }}
-        />;
-      });
-    };
-
-    setPipElements(generatePips());
-    setBorderElements(generateBorders());
-    setTileElements(generateTiles());
     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;
+    let index = 0;
+    return tileOrder.map(order => {
+      const tile = Object.assign({},
+        tiles[order],
+        { index: index++, left: x, top: y});
+
+      let div = <Tile
+        key={`${tile.type}-${tile.card}`}
+        tile={tile}
+        />;
+    
+      if (++rowCount === rows[row]) {
+        row++;
+        rowCount = 0;
+        y += tileWidth;
+        x = - (rows[row] - 1) * 0.5 * tileHeight;
+      } else {
+        x += tileHeight;
+      }
+    
+      return div;
+    });
+  };
+
+  const generateBorders = function(borderOrder) {
+    const sides = 6;
+    let side = -1;
+    return borderOrder.map(order => {
+      const border = borders[order];
+      side++;
+      let x =  + Math.sin(Math.PI - side / sides * 2. * Math.PI) * radius,
+        y = Math.cos(Math.PI - side / sides * 2. * Math.PI) * radius;
+      let prev = (order === 0) ? 6 : order;
+      const file = `borders-${order+1}.${prev}.png`;
+      return <div
+        key={`border-${order}`}
+        className="Border"
+        border={border}
+        style={{
+          width: `${borderImageWidth}px`,
+          height: `${borderImageHeight}px`,
+          top: `${y}px`,
+          left: `${x}px`,
+          transform: `rotate(${side*(360/sides)}deg) translate(${borderOffsetX}px, ${borderOffsetY}px) scale(-1, -1)`,
+          backgroundImage: `url(${assetsPath}/gfx/${file} )`
+        }}
+      />;
+    });
+  };
+
+  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,21 +676,24 @@ useRef didn't work...
     }
   }
 
-  let nodes = document.querySelectorAll(`.Pip.Robber`);
+  useEffect(() => {
-  for (let i = 0; i < nodes.length; i++) {
+    let nodes = document.querySelectorAll(`.Pip.Robber`);
-    nodes[i].classList.remove('Robber');
+    for (let i = 0; i < nodes.length; i++) {
-    [ 'Robert', 'Roberta', 'Velocirobber' ].forEach(robberName => 
+      nodes[i].classList.remove('Robber');
-      nodes[i].classList.remove(robberName)
+      [ 'Robert', 'Roberta', 'Velocirobber' ].forEach(robberName => 
-    );
+        nodes[i].classList.remove(robberName)
-  }
+      );
-
-  if (robber !== undefined) {
-    const el = document.querySelector(`.Pip[data-index="${robber}"]`);
-    if (el) {
-      el.classList.add('Robber');
-      el.classList.add(robberName);
     }
-  }
+ 
+    if (robber !== undefined) {
+      const el = document.querySelector(`.Pip[data-index="${robber}"]`);
+      if (el) {
+        el.classList.add('Robber');
+        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}.`;
+  console.log(`${session.id}: Shuffled to new signature: ${game.signature}`);
-  addChatMessage(game, null, message);
+
-  sendGameToPlayers(game);
+  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
   }));
 };