Update board on transition from nameless -> named

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

client/src/Board.js

@@ -94,42 +94,46 @@ const Board = () => {
         }
       }
 
-      if ('placements' in data.update) {
+      if ('placements' in data.update && !equal(data.update.placements, placements)) {
-        if (!equal(data.update.placements, placements)) {
+        console.log(`board - placements`, data.update.placements);
-          console.log(`board - placements`, data.update.placements);
+        setPlacements(data.update.placements);
-          setPlacements(data.update.placements);
-        }
       }
 
-      if ('signature' in data.update && data.update.signature !== signature) {
+      /* The following are only updated if there is a new game 
-        /* The following are only updated if there is a new game 
+        * signature */
-         * signature */
       
-        if ('pipOrder' in data.update) {
+      if ('pipOrder' in data.update && !equal(data.update.pipOrder, pipOrder)) {
-          setPipOrder(data.update.pipOrder);
+        console.log(`board - setting new pipOrder`);
-        }
+        setPipOrder(data.update.pipOrder);
+      }
 
-        if ('borderOrder' in data.update) {
+      if ('borderOrder' in data.update && !equal(data.update.borderOrder, borderOrder)) {
-          setBorderOrder(data.update.borderOrder);
+        console.log(`board - setting new borderOrder`);
-        }
+        setBorderOrder(data.update.borderOrder);
+      }
       
-        if ('tileOrder' in data.update) {
+      if ('tileOrder' in data.update && !equal(data.update.tileOrder, tileOrder)) {
-          setTileOrder(data.update.tileOrder);
+        console.log(`board - setting new tileOrder`);
-        }
+        setTileOrder(data.update.tileOrder);
+      }
 
-        console.log(`Triggering new board layout`);
+      if (data.update.signature !== signature) {
+        console.log(`board - setting new signature`);
         setSignature(data.update.signature);
       }
 
       /* This is permanent static data from the server -- do not update
        * once set */
       if ('pips' in data.update && !pips) {
+        console.log(`board - setting new static pips`);
         setPips(data.update.pips);
       }
       if ('tiles' in data.update && !tiles) {
+        console.log(`board - setting new static tiles`);
         setTiles(data.update.tiles);
       }
       if ('borders' in data.update && !borders) {
+        console.log(`board - setting new static borders`);
         setBorders(data.update.borders);
       }
       break;
@@ -205,96 +209,104 @@ const Board = () => {
   onResize();
 
   useEffect(() => {
-    console.log(`Generating static corner data... should only occur once per reload.`);
+    if (!ws) {
-  const onCornerClicked = (event, corner) => {
+      return;
-    let type;
-    if (event.currentTarget.getAttribute('data-type') === 'settlement') {
-      type = 'place-city';
-    } else {
-      type = 'place-settlement';
     }
-    if (!hack) { console.error(`board - onCornerClicked - ws is NULL`); return; }
-    ws.send(JSON.stringify({
-      type, index: corner.index
-    }));
-  };
 
-  const Corner = ({corner}) => {
+    console.log(`Generating static corner data... should only occur once per reload or socket reconnect.`);
-    return <div className="Corner"
+    const onCornerClicked = (event, corner) => {
-      onClick={(event) => { onCornerClicked(event, corner) }}
+      let type;
-      data-index={corner.index}
+      if (event.currentTarget.getAttribute('data-type') === 'settlement') {
-      style={{
+        type = 'place-city';
-        top: `${corner.top}px`,
+      } else {
-        left: `${corner.left}px`
+        type = 'place-settlement';
-      }}
-    ><div className="Corner-Shape"/></div>;
-  };
-
-  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++,
-          top: y-0.5*tileHalfHeight,
-          left: x-tileHalfHeight
-        };
-        corners.push(<Corner key={`corner-${index}}`} corner={corner}/>);
       }
+      if (!hack) { console.error(`board - onCornerClicked - ws is NULL`); return; }
+      ws.send(JSON.stringify({
+        type, index: corner.index
+      }));
+    };
 
-      corner = {
+    const Corner = ({corner}) => {
-        index: index++,
+      return <div className="Corner"
-        top: y,
+        onClick={(event) => { onCornerClicked(event, corner) }}
-        left: x
+        data-index={corner.index}
-      };
+        style={{
-      corners.push(<Corner key={`corner-${index}}`} corner={corner}/>);
+          top: `${corner.top}px`,
+          left: `${corner.left}px`
+        }}
+        ><div className="Corner-Shape"/></div>;
+    };
 
-      corner = {
+    const generateCorners = () => {
-        index: index++,
+      let row = 0, rowCount = 0;
-        top: y-0.5*tileHalfHeight,
+      let y = -8 + 0.5 * tileHalfWidth - (rows.length - 1) * 0.5 * tileWidth,
-        left: x+tileHalfHeight
+        x = -tileHalfHeight -(rows[row] - 1) * 0.5 * tileHeight;
-      };
+      let index = 0;
-      corners.push(<Corner key={`corner-${index}}`} corner={corner}/>);
+      const corners = [];
+      let corner;
 
-      if (++rowCount === rows[row]) {
+      for (let i = 0; i < 21; i++) {
-        corner = {
+        if (row > 2 && rowCount === 0) {
-          index: index++,
-          top: y,
-          left: x+2.*tileHalfHeight
-        };
-        corners.push(<Corner key={`corner-${index}}`} corner={corner}/>);
-        
-        if (row > 2) {
           corner = {
             index: index++,
             top: y-0.5*tileHalfHeight,
-            left: x+3.*tileHalfHeight
+            left: x-tileHalfHeight
           };
           corners.push(<Corner key={`corner-${index}}`} corner={corner}/>);
         }
 
-        row++;
+        corner = {
-        rowCount = 0;
+          index: index++,
-        y += tileHeight - 10.5;
+          top: y,
-        x = -tileHalfHeight - (rows[row] - 1) * 0.5 * tileHeight;
+          left: x
-      } else {
+        };
-        x += tileHeight;
+        corners.push(<Corner key={`corner-${index}}`} corner={corner}/>);
-      }
-    }
-    return corners;
-  };
 
+        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 (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;
+        }
+      }
+      return corners;
+    };
 
     setCornerElements(generateCorners());
   }, [ws, setCornerElements]);
 
   useEffect(() => {
+    if (!ws) {
+      return;
+    }
+
+    console.log(`Generating static road data... should only occur once per reload or socket reconnect.`);
     const Road = ({road}) => {
       const onRoadClicked = (road) => {
         console.log(`Road clicked: ${road.index}`);
@@ -399,6 +411,10 @@ const Board = () => {
     
   /* Generate Pip, Tile, and Border elements */
   useEffect(() => {
+    if (!ws) {
+      return;
+    }
+    console.log(`board - Generate pip, border, and tile elements`);
     const Pip = ({pip}) => {
       const onPipClicked = (pip) => {
         if (!ws) { console.error(`board - sendPlacement - ws is NULL`); return; }
@@ -676,6 +692,7 @@ const Board = () => {
     && turn.color === color 
     && (state === 'initial-placement' || state === 'normal'));
           
+  console.log(`board - tile elements`, tileElements);
   return (
     <div className="Board" ref={board}>
       <div className="BoardBox">

server/routes/games.js

@@ -883,6 +883,8 @@ const setPlayerName = (game, session, name) => {
     unselected: getFilteredUnselected(game),
     chat: game.chat
   });
+  /* Now that a name is set, send the full game to the player */
+  sendGameToPlayer(game, session);
 }
 
 const colorToWord = (color) => {