From a403f38f1cf78ef9ea8e13d1d70116e8adc69701 Mon Sep 17 00:00:00 2001 From: James Ketrenos Date: Thu, 27 Jan 2022 20:41:59 -0800 Subject: [PATCH] Selection of players working better Signed-off-by: James Ketrenos --- client/src/Board.css | 4 + client/src/Board.js | 172 ++++++++++++++++++++++++++--------------- server/routes/games.js | 93 ++++++++++++++++------ 3 files changed, 181 insertions(+), 88 deletions(-) diff --git a/client/src/Board.css b/client/src/Board.css index c7050ba..3f4567d 100755 --- a/client/src/Board.css +++ b/client/src/Board.css @@ -72,6 +72,10 @@ padding: 0.5em; } +.PlayerName { + padding: 0.5em; +} + #ChatList { scroll-behavior: smooth; } diff --git a/client/src/Board.js b/client/src/Board.js index a5ea5f5..7fb23de 100755 --- a/client/src/Board.js +++ b/client/src/Board.js @@ -225,7 +225,6 @@ const Chat = ({ board, promoteGameState }) => { }) //const timeDelta = game.timestamp - Date.now(); - const messages = board.game.chat.map((item, index) => { return ( @@ -237,10 +236,7 @@ const Chat = ({ board, promoteGameState }) => { ); }); - useEffect(() => { - document.querySelector(".chatInput").focus(); - }); - + console.log(board.game); return ( @@ -248,7 +244,6 @@ const Chat = ({ board, promoteGameState }) => { input && input.focus()} onChange={chatInput} onKeyPress={chatKeyPress} label={()} variant="outlined"/> @@ -284,58 +279,48 @@ const Action = ({ board }) => { ); } -/* This needs to take in a mechanism to declare the - * player's active item in the game */ -const Players = ({ board, promoteGameState }) => { - const [selected, setSelected] = useState(""); - const [name, setName] = useState(""); +const PlayerName = ({board}) => { + const [name, setName] = useState((board && board.game && board.game.activePlayerName) ? board.game.activePlayerName : ""); - const nameInput = (event) => { - console.log(event.target.value); - }; + const nameChange = (event) => { + setName(event.target.value); + } const nameKeyPress = (event) => { if (event.key === "Enter") { - console.log(`Send: ${event.target.value}`); - setName(event.target.value); + console.log(`Send: ${name}`); + if (name && name != board.game.activePlayerName) { + board.setPlayerName(name); + } } } - useEffect(() => { - const change = { players: {} }; + return ( + + + + ); +}; - /* Joining: selected != "" and name != "" */ - if (selected && name && !board.game.activePlayer) { - change.players[selected] = { name: name } - promoteGameState(change) - return; - } - - /* Leaving: selected = "", name = "" */ - if (!selected && board.game.activePlayer) { - change.players[board.game.activePlayer] = { name: "" } - promoteGameState(change) - return; - } - - /* Updating name: selected != "", name != "", name != board.name*/ - if (selected && - board.player && - name && - board.game.players[board.game.activePlayer].name !== name) { - change.players[board.game.activePlayer] = { name: name } - promoteGameState(change) - return; - } - }); +/* This needs to take in a mechanism to declare the + * player's active item in the game */ +const Players = ({ board }) => { + const [selected, setSelected] = useState(board.game && board.game.activePlayer ? board.game.activePlayer : ""); const toggleSelected = (key) => { if (selected === key) { setSelected(""); - setName(""); } else { setSelected(key); } + board.setSelected(selected === key ? "" : key); } const classes = useStyles(); @@ -343,7 +328,6 @@ const Players = ({ board, promoteGameState }) => { const players = []; for (let key in board.game.players) { const item = board.game.players[key]; - console.log(item); if (board.game.state != "lobby" && item.status == 'Not active') { continue; } @@ -352,23 +336,12 @@ const Players = ({ board, promoteGameState }) => { {key} - <> { /* so flex-grow works we put in a fragment */ } - { selected === key && item.name === "" && - input && input.focus()} - disabled={(name !== item.name) ? true: false} - label="Name" - variant="outlined" autoFocus/> - } - { (selected !== key || item.name !== "") && - - } - - toggleSelected(key)}/> + + { (!selected || selected === key) && + toggleSelected(key)}/> + } )); } @@ -413,6 +386,8 @@ class Board extends React.Component { this.updateGame = this.updateGame.bind(this); this.imageLoadError = this.imageLoadError.bind(this); this.imageLoaded = this.imageLoaded.bind(this); + this.setPlayerName = this.setPlayerName.bind(this); + this.setSelected = this.setSelected.bind(this); this.mouse = { x: 0, y: 0 }; this.radius = 0.317; @@ -443,7 +418,75 @@ class Board extends React.Component { imageLoadError(event) { this.setState({message: `Error loading ${event.target.src}`}); } - + + setSelected(key) { + if (this.loadTimer) { + window.clearTimeout(this.loadTimer); + this.loadTimer = null; + } + + return window.fetch(`${base}/api/v1/games/${this.state.game.id}/player-selected/${key}`, { + method: "PUT", + cache: 'no-cache', + credentials: 'same-origin', + headers: { + 'Content-Type': 'application/json' + } + }).then((res) => { + if (res.status >= 400) { + throw new Error(`Unable to set selected player!`); + } + return res.json(); + }).then((game) => { + let message; + if (key) { + message = `Player selected ${key}!`; + } else { + message = `Player deselected ${game.activePlayer}!`; + } + console.log (message); + this.updateGame(game); + this.setState({ game: game, message: message }); + }).catch((error) => { + console.error(error); + this.setState({message: error.message}); + }).then(() => { + this.resetGameLoad(); + window.requestAnimationFrame(this.drawFrame); + }); + } + + setPlayerName(name) { + if (this.loadTimer) { + window.clearTimeout(this.loadTimer); + this.loadTimer = null; + } + + return window.fetch(`${base}/api/v1/games/${this.state.game.id}/player-name/${name}`, { + method: "PUT", + cache: 'no-cache', + credentials: 'same-origin', + headers: { + 'Content-Type': 'application/json' + } + }).then((res) => { + if (res.status >= 400) { + throw new Error(`Unable to set player name!`); + } + return res.json(); + }).then((game) => { + console.log (`Player name set to ${name}!`); + this.updateGame(game); + this.setState({ game: game, message: `Player name set to ${name}!`}); + }).catch((error) => { + console.error(error); + this.setState({message: error.message}); + }).then(() => { + this.resetGameLoad(); + window.requestAnimationFrame(this.drawFrame); + }); + } + shuffleBoard() { if (this.loadTimer) { window.clearTimeout(this.loadTimer); @@ -1244,8 +1287,8 @@ class Board extends React.Component { } for (let image in images) { - image.removeEventListener("load", this.imageLoaded); - image.removeEventListener("error", this.imageLoadError); + images[image].removeEventListener("load", this.imageLoaded); + images[image].removeEventListener("error", this.imageLoadError); delete images[image]; } @@ -1263,6 +1306,7 @@ class Board extends React.Component {
this.cards = el}> { game &&
+ diff --git a/server/routes/games.js b/server/routes/games.js index 5b3bd05..b920b50 100755 --- a/server/routes/games.js +++ b/server/routes/games.js @@ -140,13 +140,66 @@ router.put("/:id/:action/:value?", (req, res) => { let error; - if (!req.session.activePlayer || !(req.session.activePlayer in game.players)) { - error = `Invalid player: ${req.session.activePlayer}`; + if (req.params.action == "player-name") { + if (!req.params.value) { + error = `No name provided`; + } else { + req.session.playerName = req.params.value; + const color = req.session.playerColor; + if (color && game && color in game.players) { + game.players[color].name = req.session.playerName; + game.chat.push({ date: Date.now(), message: `${color} is no known as ${req.session.playerName}.` }); + } + } + return sendGame(res, req, game, error); } - const player = game.players[req.session.activePlayer], - name = player.name; + if (req.params.action == "player-selected") { + if (!game) { + error = `No game found`; + return sendGame(res, req, game, error); + } + + const selected = req.params.value; + let player; + + console.log(`player-selected: ${selected}`); + + /* Deselect currentlyi active player for this session */ + for (let key in game.players) { + if (key == req.session.playerColor && selected != key) { + player = game.players[key]; + if (player.session == req.session.id) { + player.session = ''; + player.name = ''; + player.status = 'Not active'; + req.session.playerColor = ''; + game.chat.push({ date: Date.now(), message: `${key} is no longer claimed.` }); + break; + } + } + } + + if (selected in game.players) { + player = game.players[selected]; + player.session = req.session.id; + player.name = req.session.playerName; + player.status = `Just joined`; + req.session.playerColor = selected; + game.chat.push({ date: Date.now(), message: `${selected} is now '${player.name}'.` }); + } + + return sendGame(res, req, game, error); + } + + if (!req.session.playerColor || !(req.session.playerColor in game.players)) { + error = `Invalid player: ${req.session.playerColor}`; + return sendGame(res, req, game, error); + } + + player = game.players[req.session.playerColor]; + const name = player.name; switch (req.params.action) { case "roll": @@ -212,26 +265,12 @@ router.put("/:id", (req, res/*, next*/) => { const game = games[req.params.id], changes = req.body; - console.log(req.session.id, req.session.activePlayer); + console.log(req.session.id, req.session.playerColor); console.log(JSON.stringify(changes, null, 2)); for (let change in changes) { switch (change) { case "players": - console.log("Player change."); - for (let player in changes.players) { - const playerChange = changes.players[player]; - if (playerChange.name != "") { - game.chat.push({ from: player, date: Date.now(), message: `${player} is now '${playerChange.name}'.` }); - req.session.activePlayer = player; - game.players[player].status = `Just joined`; - } else { - game.chat.push({ from: player, date: Date.now(), message: `${player} is no longer claimed.` }); - req.session.activePlayer = ""; - game.players[player].status = `Not active`; - } - game.players[player].name = playerChange.name; - } break; case "chat": console.log("Chat change."); @@ -271,12 +310,18 @@ const sendGame = async (res, req, game, error) => { console.error(error); }); - return res.status(200).send(Object.assign({}, game, { + const playerGame = Object.assign({}, game, { timestamp: Date.now(), status: error ? error : "success", - activePlayer: (req.session && req.session.activePlayer) ? - req.session.activePlayer : null - })); + activePlayerName: (req.session && req.session.playerName) ? + req.session.playerName : "", + activePlayer: (req.session && req.session.playerColor) ? + req.session.playerColor : null + }); + if (game.id == 'b3c4bd15efe212a2') { +// console.log(req.session); + } + return res.status(200).send(playerGame); } router.post("/:id?", (req, res/*, next*/) => { @@ -315,7 +360,7 @@ router.post("/:id?", (req, res/*, next*/) => { }; games[game.id] = game; - req.session.activePlayer = null; + req.session.playerColor = null; shuffleBoard(game); console.log(`New game created: ${game.id}`); return sendGame(res, req, game);