jketreno/peddlers-of-ketran
1
0
Fork 0
Code Issues 42 Activity

Fix send of private data

Browse Source 
Fix load resize callbackk issue

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-03-13 15:15:16 -07:00
parent e0919537a1
commit 95838be35e
8 changed files with 73 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
client/src/Actions.js
View File

@ -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) => {
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) {

6
client/src/App.js
View File

@ -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);

7
client/src/Board.js
View File

@ -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);
}

41
client/src/Chat.js
View File

@ -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 }
</List>
<TextField className="ChatInput"
disabled={!global.name}
disabled={!name}
onKeyPress={chatKeyPress}
label={startTime !== 0 && <Moment tz={"Etc/GMT"}
format="h:mm:ss"

22
client/src/MediaControl.js
View File

@ -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 <></>;

13
client/src/Placard.js
View File

@ -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);
};

6
client/src/SelectPlayer.js
View File

@ -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 (<></>);

18
server/routes/games.js
View File

@ -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,