Looks like it is working with correct socket setting from App to children

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

client/src/App.js

@@ -34,13 +34,15 @@ import equal from "fast-deep-equal";
 const Table = () => {
   const params = useParams();
   const [ gameId, setGameId ] = useState(params.gameId ? params.gameId : undefined);
-  const [ ws, setWs ] = useState();
+  const [ ws, setWs ] = useState(); /* tracks full websocket lifetime */
+  const [connection, setConnection] = useState(undefined); /* set after ws is in OPEN */
+  const [retryConnection, setRetryConnection] = useState(true); /* set when connection should be re-established */
   const [ name, setName ] = useState("");
   const [ error, setError ] = useState(undefined);
   const [ warning, setWarning ] = useState(undefined);
   const [ peers, setPeers ] = useState({});
   const [loaded, setLoaded] = useState(false);
-  const [connection, setConnection] = useState(undefined);
+
   const [state, setState] = useState(undefined);
   const [color, setColor] = useState(undefined);
   const [priv, setPriv] = useState(undefined);
@@ -145,7 +147,7 @@ const Table = () => {
     let timer = 0;
     function reset() {
       timer = 0;
-      setConnection(undefined);
+      setRetryConnection(true);
     };
     return _ => {
       if (timer) {
@@ -153,7 +155,7 @@ const Table = () => {
       }
       timer = setTimeout(reset, 5000);
     };
-  }, [setConnection]);
+  }, [setRetryConnection]);
 
   const resetConnection = cbResetConnection();
 
@@ -162,7 +164,8 @@ const Table = () => {
     const error = `Connection to Ketr Ketran game server failed! ` +
       `Connection attempt will be retried every 5 seconds.`;
     setError(error);
-    setWs(undefined);
+    setWs(undefined); /* clear the socket */
+    setConnection(undefined); /* clear the connection */
     resetConnection();
   };
   
@@ -171,7 +174,8 @@ const Table = () => {
       `Attempting to reconnect...`;
     console.warn(`ws: close`);
     setError(error);
-    setWs(undefined);
+    setWs(undefined); /* clear the socket */
+    setConnection(undefined); /* clear the connection */
     resetConnection();
   };
 
@@ -247,7 +251,7 @@ const Table = () => {
 
     console.log(`table - bind`);
 
-    if (!ws && !connection) {
+    if (!ws && !connection && retryConnection) {
       let loc = window.location, new_uri;
       if (loc.protocol === "https:") {
         new_uri = "wss";
@@ -258,6 +262,7 @@ const Table = () => {
       console.log(`Attempting WebSocket connection to ${new_uri}`);
       setWs(new WebSocket(new_uri));
       setConnection(undefined);
+      setRetryConnection(false);
       return unbind;
     }
 
@@ -282,7 +287,7 @@ const Table = () => {
       ws.removeEventListener('error', cbError);
       ws.removeEventListener('message', cbMessage);
     }
-  }, [ setWs, connection, setConnection, gameId, ws, refWsOpen, refWsMessage, refWsClose, refWsError ]);
+  }, [ setWs, connection, setConnection, retryConnection, setRetryConnection, gameId, ws, refWsOpen, refWsMessage, refWsClose, refWsError ]);
 
   return <GlobalContext.Provider value={{ ws: connection, name, gameId, peers, setPeers }}>
       <MediaAgent/>    

client/src/Board.js

@@ -59,13 +59,13 @@ const Board = () => {
   console.log(`board - render ws is ${!ws ? 'NULL' : (ws.readyState === ws.OPEN ? 'OPEN' : '!OPEN')}`);
 
   const onWsMessage = (event) => {
-    if (ws !== event.target) {
-      console.error(`Disconnect occur?`);
-    }
     if (hack !== ws) {
       console.error(`Setting hack`)
       hack = ws;
     }
+    if (ws && ws !== event.target) {
+      console.error(`Disconnect occur?`);
+    }
     const data = JSON.parse(event.data);
     switch (data.type) {
     case 'game-update':
@@ -148,6 +148,9 @@ const Board = () => {
     if (!ws) { return; }
     refWs.current = ws;
     console.log('board - bind');
+    if (hack !== ws) {
+      console.log(`board - ws and hack are different`);
+    }
     const cbMessage = e => refWsMessage.current(e);
     ws.addEventListener('message', cbMessage);
     return () => {
@@ -156,7 +159,12 @@ const Board = () => {
     }
   }, [ws, refWsMessage]);
   useEffect(() => {
-    if (!ws) { return; }
+    console.log(`board - initial get`);
+    if (!ws) { 
+      console.log(`board - initial get - no ws`);
+      return; 
+    }
+    console.log(`board - ws is set`);
     ws.send(JSON.stringify({ 
       type: 'get', 
       fields
@@ -196,7 +204,6 @@ const Board = () => {
 
   const refOnResize = useRef(onResize);
   useEffect(() => { refOnResize.current = onResize; });
-
   useEffect(() => {
     const cbOnResize = e => refOnResize.current(e);
     window.addEventListener('resize', cbOnResize);
@@ -248,15 +255,15 @@ useRef didn't work...
    */
   const sendPlacement = useCallback((type, index) => {
     console.log(`board - sendPlacement - ws is ${!ws ? 'NULL' : (ws.readyState === ws.OPEN ? 'OPEN' : '!OPEN')}`);
-    if (ws.readyState !== ws.OPEN) {
-      console.error(`ws is not OPEN in sendPlacement`);
-    }
     if (ws !== hack) {
       console.error(`hack and ws are different!`);
       if (refWs.current === hack) {
         console.log(`refWs is correct!`);
+      } else {
+        refWs.current = hack;
       }
     }
+
     refWs.current.send(JSON.stringify({
       type, index
     }));
@@ -494,7 +501,7 @@ useRef didn't work...
   useEffect(() => {
     setCornerElements(generateCorners());
     setRoadElements(generateRoads());
-  }, []);
+  }, [setCornerElements, setRoadElements, generateCorners, generateRoads]);
 
   console.log(`board - Generate board - ${signature}`);
   console.log(`board - tileOrder - `, tileOrder);

client/src/PlayerList.js

@@ -95,7 +95,7 @@ const PlayerList = () => {
     if (B.color === color) {
       return +1;
     }
-    return A.name.localeCompare(B.name);
+    return A.color.localeCompare(B.color);
   });
 
   sortedPlayers.forEach(item => {