Fix send of private data

Fix load resize callbackk issue

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

client/src/Actions.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext, useRef, useMemo } from "react";
+import React, { useState, useEffect, useContext, useRef, useMemo, useCallback } from "react";
 import Paper from '@material-ui/core/Paper';
 import Button from '@material-ui/core/Button';
 import equal from "fast-deep-equal";
@@ -66,9 +66,13 @@ const Actions = ({buildActive, setBuildActive}) => {
     }));
   }, [ws, fields]);
 
-  const sendMessage = (data) => {
+  const sendMessage = useCallback((data) => {
-    ws.send(JSON.stringify(data));
+    if (!ws) {
-  }
+      console.warn(`No socket`);
+    } else {
+      ws.send(JSON.stringify(data));
+    }
+  }, [ws]);
 
   const buildClicked = () => {
     setBuildActive(!buildActive);
@@ -79,10 +83,12 @@ const Actions = ({buildActive, setBuildActive}) => {
       sendMessage({ type: 'player-name', name: update });
     }
     setEdit(name);
+    if (buildActive) setBuildActive(false);
   }
 
   const changeNameClick = () => {
     setEdit("");
+    if (buildActive) setBuildActive(false);
   }
 
   const discardClick = () => {
@@ -95,22 +101,27 @@ const Actions = ({buildActive, setBuildActive}) => {
     }
     
     sendMessage({ type: 'discard', discards });
+    if (buildActive) setBuildActive(false);
   }
 
   const newTableClick = () => {
     sendMessage({ type: 'shuffle' });
+    if (buildActive) setBuildActive(false);
   };
 
   const tradeClick = () => {
     sendMessage({ type: 'trade' });
+    if (buildActive) setBuildActive(false);
   }
 
   const rollClick = () => {
     sendMessage({ type: 'roll' });
+    if (buildActive) setBuildActive(false);
   }
 
   const passClick = () => {
     sendMessage({ type: 'pass' });
+    if (buildActive) setBuildActive(false);
   }
 
   const startClick = () => {
@@ -119,6 +130,7 @@ const Actions = ({buildActive, setBuildActive}) => {
       field: 'state',
       value: 'game-order'
     });
+    if (buildActive) setBuildActive(false);
   };
 
   if (!gameId) {

client/src/App.js

@@ -141,7 +141,7 @@ const Table = () => {
     }
   };
   
-  const resetConnection = useCallback((function () {
+  const cbResetConnection = useCallback(() => {
     let timer = 0;
     function reset() {
       timer = 0;
@@ -153,7 +153,9 @@ const Table = () => {
       }
       timer = setTimeout(reset, 5000);
     };
-  })(), [setConnecting]);
+  }, [setConnecting]);
+
+  const resetConnection = cbResetConnection();
 
   const onWsError = (event) => {
     console.error(`ws: error`, event);

client/src/Board.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useContext, useRef, useMemo,
   useCallback } from "react";
 import equal from "fast-deep-equal";
-import { assetsPath, debounce } from "./Common.js";
+import { assetsPath } from "./Common.js";
 import "./Board.css";
 import { GlobalContext } from "./GlobalContext.js";
 
@@ -157,7 +157,7 @@ const Board = () => {
     }
   }, [transform]);
 
-  const onResize = debounce(() => {
+  const onResize = () => {
     if (!board.current) {
       return;
     }
@@ -178,7 +178,7 @@ const Board = () => {
     if (transform !== _transform) {
       setTransform(_transform);
     }
-  }, 250);
+  };
 
   const refOnResize = useRef(onResize);
   useEffect(() => { refOnResize.current = onResize; });
@@ -186,7 +186,6 @@ const Board = () => {
   useEffect(() => {
     const cbOnResize = e => refOnResize.current(e);
     window.addEventListener('resize', cbOnResize);
-    onResize();
     return () => {
       window.removeEventListener('resize', cbOnResize);
     } 

client/src/Chat.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext, useRef } from "react";
+import React, { useState, useEffect, useContext, useRef, useCallback } from "react";
 import Paper from '@material-ui/core/Paper';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
@@ -15,13 +15,13 @@ import { GlobalContext } from "./GlobalContext.js";
 
 const Chat = () => {
   const [lastTop, setLastTop] = useState(0);
-  const [autoScroll, setAutoscroll] = useState(true);
+  const [autoScroll, setAutoScroll] = useState(true);
   const [latest, setLatest] = useState('');
   const [scrollTime, setScrollTime] = useState(0);
   const [chat, setChat] = useState([]);
   const [startTime, setStartTime] = useState(0);
 
-  const global = useContext(GlobalContext);
+  const { ws, name } = useContext(GlobalContext);
 
   const onWsMessage = (event) => {
     const data = JSON.parse(event.data);
@@ -41,40 +41,33 @@ const Chat = () => {
     }
   };
   const refWsMessage = useRef(onWsMessage);
-
   useEffect(() => { refWsMessage.current = onWsMessage; });
-
   useEffect(() => {
-    if (!global.ws) {
+    if (!ws) { return; }
-      return;
-    }
     const cbMessage = e => refWsMessage.current(e);
-    global.ws.addEventListener('message', cbMessage);
+    ws.addEventListener('message', cbMessage);
     return () => {
-      global.ws.removeEventListener('message', cbMessage);
+      ws.removeEventListener('message', cbMessage);
     }
-  }, [global.ws, refWsMessage]);
+  }, [ws, refWsMessage]);
-
   useEffect(() => {
-    if (!global.ws) {
+    if (!ws) { return; }
-      return;
+    ws.send(JSON.stringify({ 
-    }
-    global.ws.send(JSON.stringify({ 
       type: 'get', 
       fields: ['chat', 'startTime' ]
     }));
-  }, [global.ws]);
+  }, [ws]);
 
-  const chatKeyPress = (event) => {
+  const chatKeyPress = useCallback((event) => {
     if (event.key === "Enter") {
       if (!autoScroll) {
-        setAutoscroll(true);
+        setAutoScroll(true);
       }
 
-      global.ws.send(JSON.stringify({ type: 'chat', message: event.target.value }));
+      ws.send(JSON.stringify({ type: 'chat', message: event.target.value }));
       event.target.value = "";
     }
-  };
+  }, [ws, setAutoScroll, autoScroll]);
 
   const chatScroll = (event) => {
     const chatList = event.target,
@@ -84,7 +77,7 @@ const Chat = () => {
     const shouldAutoscroll = (fromBottom < 20);
 
     if (shouldAutoscroll !== autoScroll) {
-      setAutoscroll(shouldAutoscroll);
+      setAutoScroll(shouldAutoscroll);
     }
 
     /* If the list should not auto scroll, then cache the current
@@ -171,7 +164,7 @@ const Chat = () => {
 
   if (chat.length && chat[chat.length - 1].date !== latest) {
     setLatest(chat[chat.length - 1].date);
-    setAutoscroll(true);
+    setAutoScroll(true);
   }
 
   return (
@@ -180,7 +173,7 @@ const Chat = () => {
         { messages }
       </List>
       <TextField className="ChatInput"
-        disabled={!global.name}
+        disabled={!name}
         onKeyPress={chatKeyPress}
         label={startTime !== 0 && <Moment tz={"Etc/GMT"} 
           format="h:mm:ss"

client/src/MediaControl.js

@@ -57,6 +57,10 @@ const MediaAgent = () => {
   }, [peers, setPeers]);
   const refOnTrack = useRef(onTrack);
 
+  const sendMessage = useCallback((data) => {
+    ws.send(JSON.stringify(data));
+  }, [ws]);
+
   const onWsMessage = useCallback((event) => {
      const addPeer = (config) => {
       console.log('media-agent - Signaling server said to add peer:', config);
@@ -99,7 +103,7 @@ const MediaAgent = () => {
         if (!event.candidate) {
           return;
         }
-        ws.send(JSON.stringify({
+        sendMessage({
           type: 'relayICECandidate', 
           config: {
             peer_id: peer_id, 
@@ -108,7 +112,7 @@ const MediaAgent = () => {
               candidate: event.candidate.candidate
             }
           }
-        }));
+        });
       };
     
       connection.ontrack = e => refOnTrack.current(e);;
@@ -129,13 +133,13 @@ const MediaAgent = () => {
           if (debug) console.log(`media-agent - Local offer description is: `, local_description);
           return connection.setLocalDescription(local_description)
           .then(() => { 
-            ws.send(JSON.stringify({
+            sendMessage({
               type: 'relaySessionDescription', 
               config: { 
                 'peer_id': peer_id,
                 'session_description': local_description
               }
-            }));
+            });
             if (debug) console.log(`media-agent - Offer setLocalDescription succeeded`);
           })
           .catch((error) => {
@@ -171,13 +175,13 @@ const MediaAgent = () => {
           connection.createAnswer((local_description) => {
             if (debug) console.log(`media-agent - sessionDescription - Answer description is: `, local_description);
             connection.setLocalDescription(local_description, () => { 
-              ws.send(JSON.stringify({
+              sendMessage({
                 type: 'relaySessionDescription',
                 config: {
                   peer_id, 
                   session_description: local_description
                 }
-              }));
+              });
               if (debug) console.log(`media-agent - sessionDescription - Answer setLocalDescription succeeded`);
             }, () => {
               console.error(`media-agent - sessionDescription - Answer setLocalDescription failed!`);
@@ -238,7 +242,7 @@ const MediaAgent = () => {
     case 'sessionDescription': sessionDescription(data.data); break;
     default: break;
     }
-  }, [ peers, setPeers, stream, ws, refOnTrack ]);
+  }, [ peers, setPeers, stream, refOnTrack, sendMessage ]);
   const refWsMessage = useRef(onWsMessage);
 
   const onWsClose = (event) => {
@@ -332,7 +336,7 @@ const MediaAgent = () => {
     };
   
     const join = () => {
-      ws.send(JSON.stringify({ type: 'join' }));
+      sendMessage({ type: 'join' });
     }
     
     if (debug) console.log(`media-agent - WebSocket open request. Attempting to create local media.`)
@@ -344,7 +348,7 @@ const MediaAgent = () => {
       console.error(error);
       console.log("Access denied for audio/video");
     });
-  }, [ws, setStream, name]);
+  }, [ws, setStream, name, sendMessage]);
  
   if (!ws) {
     return <></>;

client/src/Placard.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useCallback } from "react";
 
 import { assetsPath } from './Common.js';
 import { GlobalContext } from "./GlobalContext.js";
@@ -7,6 +7,9 @@ import "./Placard.css";
 
 const Placard = ({type, disabled, count, buildActive, setBuildActive}) => {
   const { ws } = useContext(GlobalContext);
+  const sendMessage = useCallback((data) => {
+    ws.send(JSON.stringify(data));
+  }, [ws]);
 
   const dismissClicked = () => {
     setBuildActive(false);
@@ -21,22 +24,22 @@ const Placard = ({type, disabled, count, buildActive, setBuildActive}) => {
   };
 
   const roadClicked = () => {
-    ws.send(JSON.stringify({ type: 'buy-road'}));
+    sendMessage({ type: 'buy-road'});
     setBuildActive(false);
   };
 
   const settlementClicked = () => {
-    ws.send(JSON.stringify({ type: 'buy-settlement'}));
+    sendMessage({ type: 'buy-settlement'});
     setBuildActive(false);
   };
 
   const cityClicked = () => {
-    ws.send(JSON.stringify({ type: 'buy-city'}));
+    sendMessage({ type: 'buy-city'});
     setBuildActive(false);
   };
 
   const developmentClicked = () => {
-    ws.send(JSON.stringify({ type: 'buy-development'}));
+    sendMessage({ type: 'buy-development'});
     setBuildActive(false);
   };
 

client/src/SelectPlayer.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext, useRef, useMemo } from "react";
+import React, { useState, useEffect, useContext, useRef, useMemo, useCallback } from "react";
 import Paper from '@material-ui/core/Paper';
 import equal from "fast-deep-equal";
 
@@ -48,12 +48,12 @@ const SelectPlayer = () => {
     }));
   }, [ws, fields]);
 
-  const playerClick = (event) => {
+  const playerClick = useCallback((event) => {
     ws.send(JSON.stringify({
       type: 'steal-resource',
       color: event.currentTarget.getAttribute('data-color')
     }));
-  }
+  }, [ws]);
 
   if (!color || !turn || turn.color !== color || !turn.limits || !turn.limits.players) {
     return (<></>);

server/routes/games.js

@@ -393,7 +393,7 @@ const processRoll = (game, session, dice) => {
     mustDiscard.forEach(player => {
       addChatMessage(game, null, `The robber was rolled and ${player.name} must discard ${player.mustDiscard} resource cards!`);
       sendUpdateToPlayer(session, {
-        private: game.player
+        private: session.player
       });
     });
   }
@@ -1836,7 +1836,7 @@ const shuffle = (game, session) => {
   shuffleBoard(game);
   const message = `${name} requested a new board. New board signature: ${game.signature}.`;
   addChatMessage(game, null, message);
-  console.log(message);
+  sendGameToPlayers(game);
 }
 
 const pass = (game, session) => {
@@ -1931,7 +1931,7 @@ const placeRobber = (game, session, robber) => {
     activities: game.activities
   });
   sendUpdateToPlayer(session, {
-    private: game.player
+    private: session.player
   });
 }
 
@@ -1980,7 +1980,7 @@ const stealResource = (game, session, color) => {
     activities: game.activities
   });
   sendUpdateToPlayer(session, {
-    private: game.player
+    private: session.player
   });
 }
 
@@ -2034,7 +2034,7 @@ const buyDevelopment = (game, session) => {
     players: getFilteredPlayers(game)
   });
   sendUpdateToPlayer(session, {
-    private: game.player
+    private: session.player
   });
 }
 
@@ -2148,7 +2148,7 @@ const playCard = (game, session, card) => {
   }
 
   sendUpdateToPlayer(session, {
-    private: game.player
+    private: session.player
   });
   sendUpdateToPlayers(game, {
     chat: game.chat,
@@ -2282,7 +2282,7 @@ const placeSettlement = (game, session, index) => {
     chat: game.chat
   });
   sendUpdateToPlayer(session, {
-    private: game.player
+    private: session.player
   });
 }
 
@@ -2431,7 +2431,7 @@ const placeRoad = (game, session, index) => {
     }
   }
   sendUpdateToPlayer(session, {
-    private: game.player
+    private: session.player
   });
   sendUpdateToPlayers(game, {
     placements: game.placements,
@@ -2624,7 +2624,7 @@ const selectResources = (game, session, cards) => {
   delete game.turn.active;
   game.turn.actions = [];
   sendUpdateToPlayer(session, {
-    private: game.player
+    private: session.player
   });
   sendUpdateToPlayers(game, {
     turn: game.turn,