Update board on transition from nameless -> named
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos
parent
03b34f6677
commit
e6ad81502f
@ -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 */
|
||||
/* The following are only updated if there is a new game
|
||||
* signature */
|
||||
|
||||
if ('pipOrder' in data.update) {
|
||||
setPipOrder(data.update.pipOrder);
|
||||
}
|
||||
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 ('borderOrder' in data.update && !equal(data.update.borderOrder, borderOrder)) {
|
||||
console.log(`board - setting new borderOrder`);
|
||||
setBorderOrder(data.update.borderOrder);
|
||||
}
|
||||
|
||||
if ('tileOrder' in data.update) {
|
||||
setTileOrder(data.update.tileOrder);
|
||||
}
|
||||
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 <div className="Corner"
|
||||
onClick={(event) => { onCornerClicked(event, corner) }}
|
||||
data-index={corner.index}
|
||||
style={{
|
||||
top: `${corner.top}px`,
|
||||
left: `${corner.left}px`
|
||||
}}
|
||||
><div className="Corner-Shape"/></div>;
|
||||
};
|
||||
|
||||
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(<Corner key={`corner-${index}}`} corner={corner}/>);
|
||||
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(<Corner key={`corner-${index}}`} corner={corner}/>);
|
||||
const Corner = ({corner}) => {
|
||||
return <div className="Corner"
|
||||
onClick={(event) => { onCornerClicked(event, corner) }}
|
||||
data-index={corner.index}
|
||||
style={{
|
||||
top: `${corner.top}px`,
|
||||
left: `${corner.left}px`
|
||||
}}
|
||||
><div className="Corner-Shape"/></div>;
|
||||
};
|
||||
|
||||
corner = {
|
||||
index: index++,
|
||||
top: y-0.5*tileHalfHeight,
|
||||
left: x+tileHalfHeight
|
||||
};
|
||||
corners.push(<Corner key={`corner-${index}}`} corner={corner}/>);
|
||||
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;
|
||||
|
||||
if (++rowCount === rows[row]) {
|
||||
corner = {
|
||||
index: index++,
|
||||
top: y,
|
||||
left: x+2.*tileHalfHeight
|
||||
};
|
||||
corners.push(<Corner key={`corner-${index}}`} corner={corner}/>);
|
||||
|
||||
if (row > 2) {
|
||||
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(<Corner key={`corner-${index}}`} corner={corner}/>);
|
||||
}
|
||||
|
||||
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 key={`corner-${index}}`} corner={corner}/>);
|
||||
|
||||
corner = {
|
||||
index: index++,
|
||||
top: y-0.5*tileHalfHeight,
|
||||
left: x+tileHalfHeight
|
||||
};
|
||||
corners.push(<Corner key={`corner-${index}}`} corner={corner}/>);
|
||||
|
||||
if (++rowCount === rows[row]) {
|
||||
corner = {
|
||||
index: index++,
|
||||
top: y,
|
||||
left: x+2.*tileHalfHeight
|
||||
};
|
||||
corners.push(<Corner key={`corner-${index}}`} corner={corner}/>);
|
||||
|
||||
if (row > 2) {
|
||||
corner = {
|
||||
index: index++,
|
||||
top: y-0.5*tileHalfHeight,
|
||||
left: x+3.*tileHalfHeight
|
||||
};
|
||||
corners.push(<Corner key={`corner-${index}}`} corner={corner}/>);
|
||||
}
|
||||
|
||||
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; }
|
||||
@ -676,6 +692,7 @@ const Board = () => {
|
||||
&& turn.color === color
|
||||
&& (state === 'initial-placement' || state === 'normal'));
|
||||
|
||||
console.log(`board - tile elements`, tileElements);
|
||||
return (
|
||||
<div className="Board" ref={board}>
|
||||
<div className="BoardBox">
|
||||
|
||||
@ -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) => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user