From 95838be35eed17dfb52a38f84d1ea32e88f00cd2 Mon Sep 17 00:00:00 2001 From: James Ketrenos Date: Sun, 13 Mar 2022 15:15:16 -0700 Subject: [PATCH] Fix send of private data Fix load resize callbackk issue Signed-off-by: James Ketrenos --- client/src/Actions.js | 20 +++++++++++++++---- client/src/App.js | 6 ++++-- client/src/Board.js | 7 +++---- client/src/Chat.js | 41 ++++++++++++++++---------------------- client/src/MediaControl.js | 22 +++++++++++--------- client/src/Placard.js | 13 +++++++----- client/src/SelectPlayer.js | 6 +++--- server/routes/games.js | 18 ++++++++--------- 8 files changed, 73 insertions(+), 60 deletions(-) diff --git a/client/src/Actions.js b/client/src/Actions.js index 8b3f4dc..d9b3882 100644 --- a/client/src/Actions.js +++ b/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) => { - ws.send(JSON.stringify(data)); - } + const sendMessage = useCallback((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) { diff --git a/client/src/App.js b/client/src/App.js index 450a19e..1a5d13e 100755 --- a/client/src/App.js +++ b/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); diff --git a/client/src/Board.js b/client/src/Board.js index 223382b..6936603 100644 --- a/client/src/Board.js +++ b/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); } diff --git a/client/src/Chat.js b/client/src/Chat.js index db18fd9..1aec829 100644 --- a/client/src/Chat.js +++ b/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) { - return; - } + if (!ws) { 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) { - return; - } - global.ws.send(JSON.stringify({ + if (!ws) { return; } + 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 } { }, [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 <>; diff --git a/client/src/Placard.js b/client/src/Placard.js index 8b6c36e..34930be 100644 --- a/client/src/Placard.js +++ b/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); }; diff --git a/client/src/SelectPlayer.js b/client/src/SelectPlayer.js index b57eb25..d8e290c 100644 --- a/client/src/SelectPlayer.js +++ b/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 (<>); diff --git a/server/routes/games.js b/server/routes/games.js index 10995b7..b236dc2 100755 --- a/server/routes/games.js +++ b/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,