From e6ad81502ff69c5482e7232b2db58ae437fa5632 Mon Sep 17 00:00:00 2001 From: James Ketrenos Date: Wed, 16 Mar 2022 11:25:10 -0700 Subject: [PATCH] Update board on transition from nameless -> named Signed-off-by: James Ketrenos --- client/src/Board.js | 207 ++++++++++++++++++++++------------------- server/routes/games.js | 2 + 2 files changed, 114 insertions(+), 95 deletions(-) diff --git a/client/src/Board.js b/client/src/Board.js index 830de1e..2412a42 100644 --- a/client/src/Board.js +++ b/client/src/Board.js @@ -94,42 +94,46 @@ const Board = () => { } } - if ('placements' in data.update) { - if (!equal(data.update.placements, placements)) { - console.log(`board - placements`, data.update.placements); - setPlacements(data.update.placements); - } + if ('placements' in data.update && !equal(data.update.placements, placements)) { + console.log(`board - placements`, data.update.placements); + setPlacements(data.update.placements); } - if ('signature' in data.update && data.update.signature !== signature) { - /* The following are only updated if there is a new game - * signature */ - - if ('pipOrder' in data.update) { - setPipOrder(data.update.pipOrder); - } + /* The following are only updated if there is a new game + * signature */ + + if ('pipOrder' in data.update && !equal(data.update.pipOrder, pipOrder)) { + console.log(`board - setting new pipOrder`); + setPipOrder(data.update.pipOrder); + } - if ('borderOrder' in data.update) { - setBorderOrder(data.update.borderOrder); - } - - if ('tileOrder' in data.update) { - setTileOrder(data.update.tileOrder); - } + if ('borderOrder' in data.update && !equal(data.update.borderOrder, borderOrder)) { + console.log(`board - setting new borderOrder`); + setBorderOrder(data.update.borderOrder); + } + + if ('tileOrder' in data.update && !equal(data.update.tileOrder, tileOrder)) { + console.log(`board - setting new tileOrder`); + setTileOrder(data.update.tileOrder); + } - console.log(`Triggering new board layout`); + if (data.update.signature !== signature) { + console.log(`board - setting new signature`); setSignature(data.update.signature); } /* This is permanent static data from the server -- do not update * once set */ if ('pips' in data.update && !pips) { + console.log(`board - setting new static pips`); setPips(data.update.pips); } if ('tiles' in data.update && !tiles) { + console.log(`board - setting new static tiles`); setTiles(data.update.tiles); } if ('borders' in data.update && !borders) { + console.log(`board - setting new static borders`); setBorders(data.update.borders); } break; @@ -205,96 +209,104 @@ const Board = () => { onResize(); useEffect(() => { - console.log(`Generating static corner data... should only occur once per reload.`); - const onCornerClicked = (event, corner) => { - let type; - if (event.currentTarget.getAttribute('data-type') === 'settlement') { - type = 'place-city'; - } else { - type = 'place-settlement'; + if (!ws) { + return; } - if (!hack) { console.error(`board - onCornerClicked - ws is NULL`); return; } - ws.send(JSON.stringify({ - type, index: corner.index - })); - }; - const Corner = ({corner}) => { - return
{ onCornerClicked(event, corner) }} - data-index={corner.index} - style={{ - top: `${corner.top}px`, - left: `${corner.left}px` - }} - >
; - }; - - const generateCorners = () => { - let row = 0, rowCount = 0; - let y = -8 + 0.5 * tileHalfWidth - (rows.length - 1) * 0.5 * tileWidth, - x = -tileHalfHeight -(rows[row] - 1) * 0.5 * tileHeight; - let index = 0; - const corners = []; - let corner; - - for (let i = 0; i < 21; i++) { - if (row > 2 && rowCount === 0) { - corner = { - index: index++, - top: y-0.5*tileHalfHeight, - left: x-tileHalfHeight - }; - corners.push(); + console.log(`Generating static corner data... should only occur once per reload or socket reconnect.`); + const onCornerClicked = (event, corner) => { + let type; + if (event.currentTarget.getAttribute('data-type') === 'settlement') { + type = 'place-city'; + } else { + type = 'place-settlement'; } + if (!hack) { console.error(`board - onCornerClicked - ws is NULL`); return; } + ws.send(JSON.stringify({ + type, index: corner.index + })); + }; - corner = { - index: index++, - top: y, - left: x - }; - corners.push(); + const Corner = ({corner}) => { + return
{ onCornerClicked(event, corner) }} + data-index={corner.index} + style={{ + top: `${corner.top}px`, + left: `${corner.left}px` + }} + >
; + }; - corner = { - index: index++, - top: y-0.5*tileHalfHeight, - left: x+tileHalfHeight - }; - corners.push(); - - if (++rowCount === rows[row]) { - corner = { - index: index++, - top: y, - left: x+2.*tileHalfHeight - }; - corners.push(); - - if (row > 2) { + const generateCorners = () => { + let row = 0, rowCount = 0; + let y = -8 + 0.5 * tileHalfWidth - (rows.length - 1) * 0.5 * tileWidth, + x = -tileHalfHeight -(rows[row] - 1) * 0.5 * tileHeight; + let index = 0; + const corners = []; + let corner; + + for (let i = 0; i < 21; i++) { + if (row > 2 && rowCount === 0) { corner = { index: index++, top: y-0.5*tileHalfHeight, - left: x+3.*tileHalfHeight + left: x-tileHalfHeight }; corners.push(); } - - row++; - rowCount = 0; - y += tileHeight - 10.5; - x = -tileHalfHeight - (rows[row] - 1) * 0.5 * tileHeight; - } else { - x += tileHeight; - } - } - return corners; - }; - + corner = { + index: index++, + top: y, + left: x + }; + corners.push(); + + corner = { + index: index++, + top: y-0.5*tileHalfHeight, + left: x+tileHalfHeight + }; + corners.push(); + + if (++rowCount === rows[row]) { + corner = { + index: index++, + top: y, + left: x+2.*tileHalfHeight + }; + corners.push(); + + if (row > 2) { + corner = { + index: index++, + top: y-0.5*tileHalfHeight, + left: x+3.*tileHalfHeight + }; + corners.push(); + } + + row++; + rowCount = 0; + y += tileHeight - 10.5; + x = -tileHalfHeight - (rows[row] - 1) * 0.5 * tileHeight; + } else { + x += tileHeight; + } + } + return corners; + }; + setCornerElements(generateCorners()); }, [ws, setCornerElements]); useEffect(() => { + if (!ws) { + return; + } + + console.log(`Generating static road data... should only occur once per reload or socket reconnect.`); const Road = ({road}) => { const onRoadClicked = (road) => { console.log(`Road clicked: ${road.index}`); @@ -399,6 +411,10 @@ const Board = () => { /* Generate Pip, Tile, and Border elements */ useEffect(() => { + if (!ws) { + return; + } + console.log(`board - Generate pip, border, and tile elements`); const Pip = ({pip}) => { const onPipClicked = (pip) => { if (!ws) { console.error(`board - sendPlacement - ws is NULL`); return; } @@ -675,7 +691,8 @@ const Board = () => { const canPip = (canAction('place-robber') && turn.color === color && (state === 'initial-placement' || state === 'normal')); - + + console.log(`board - tile elements`, tileElements); return (
diff --git a/server/routes/games.js b/server/routes/games.js index 2db3128..587b629 100755 --- a/server/routes/games.js +++ b/server/routes/games.js @@ -883,6 +883,8 @@ const setPlayerName = (game, session, name) => { unselected: getFilteredUnselected(game), chat: game.chat }); + /* Now that a name is set, send the full game to the player */ + sendGameToPlayer(game, session); } const colorToWord = (color) => {