Relayout on shuffle working again
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos
parent
54f67417d7
commit
446a581e94
@ -49,7 +49,6 @@
|
||||
filter: drop-shadow(0px 0px 10px rgba(255, 0, 255, 1));
|
||||
}
|
||||
|
||||
|
||||
.Pip.Option:hover,
|
||||
.Pip:hover {
|
||||
filter: brightness(100%);
|
||||
@ -64,7 +63,6 @@
|
||||
filter: brightness(150%) drop-shadow(0px 0px 10px rgba(255, 0, 255, 1));
|
||||
}
|
||||
|
||||
|
||||
.Pips[disabled],
|
||||
.Tiles[disabled],
|
||||
.Roads[disabled],
|
||||
@ -114,6 +112,7 @@
|
||||
height: 50px;
|
||||
transform-origin: 50% 0;
|
||||
z-index: 11; /* Above Tile, below Corner */
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.Road-Shape {
|
||||
@ -167,6 +166,7 @@
|
||||
.Board .Option {
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
|
||||
filter: brightness(150%) drop-shadow(0 0 10px black);
|
||||
|
||||
transition-timing-function: ease-in-out;
|
||||
|
||||
@ -106,8 +106,6 @@ const Board = () => {
|
||||
}
|
||||
|
||||
if ('signature' in data.update && data.update.signature !== signature) {
|
||||
setSignature(data.update.signature);
|
||||
|
||||
/* The following are only updated if there is a new game
|
||||
* signature */
|
||||
|
||||
@ -122,6 +120,9 @@ const Board = () => {
|
||||
if ('tileOrder' in data.update) {
|
||||
setTileOrder(data.update.tileOrder);
|
||||
}
|
||||
|
||||
console.log(`Triggering new board layout`);
|
||||
setSignature(data.update.signature);
|
||||
}
|
||||
|
||||
/* This is permanent static data from the server -- do not update
|
||||
@ -288,7 +289,7 @@ useRef didn't work...
|
||||
sendPlacement(type, corner.index);
|
||||
}, [sendPlacement]);
|
||||
|
||||
const Corner = ({corner}) => {
|
||||
const Corner = useCallback(({corner}) => {
|
||||
return <div className="Corner"
|
||||
onClick={(event) => { onCornerClicked(event, corner) }}
|
||||
data-index={corner.index}
|
||||
@ -297,13 +298,13 @@ useRef didn't work...
|
||||
left: `${corner.left}px`
|
||||
}}
|
||||
><div className="Corner-Shape"/></div>;
|
||||
};
|
||||
}, [onCornerClicked]);
|
||||
|
||||
const onPipClicked = useCallback((pip) => {
|
||||
sendPlacement('place-robber', pip.index);
|
||||
}, [sendPlacement]);
|
||||
|
||||
const Pip = ({pip}) => {
|
||||
const Pip = useCallback(({pip}) => {
|
||||
return <div className="Pip"
|
||||
onClick={() => { onPipClicked(pip) }}
|
||||
data-roll={pip.roll}
|
||||
@ -316,264 +317,258 @@ useRef didn't work...
|
||||
backgroundPositionY: `${ 100 * Math.floor(pip.order / 6) / 5. }%`
|
||||
}}
|
||||
><div className="Pip-Shape"/></div>;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!signature) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (signature === generated) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!pips || !pipOrder || !borders || !borderOrder
|
||||
|| !tiles || !tileOrder) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`board - Generate board - ${signature}`);
|
||||
}, [onPipClicked]);
|
||||
|
||||
const generateRoads = () => {
|
||||
let row = 0, rowCount = 0;
|
||||
let y = -2.5 + tileHalfWidth - (rows.length - 1) * 0.5 * tileWidth,
|
||||
x = -tileHalfHeight -(rows[row] - 1) * 0.5 * tileHeight;
|
||||
const generateRoads = useCallback(() => {
|
||||
let row = 0, rowCount = 0;
|
||||
let y = -2.5 + tileHalfWidth - (rows.length - 1) * 0.5 * tileWidth,
|
||||
x = -tileHalfHeight -(rows[row] - 1) * 0.5 * tileHeight;
|
||||
|
||||
let index = 0;
|
||||
let road;
|
||||
|
||||
const corners = [];
|
||||
|
||||
for (let i = 0; i < 21; i++) {
|
||||
const lastRow = row === rows.length - 1;
|
||||
if (row > 2 && rowCount === 0) {
|
||||
road = {
|
||||
index: index++,
|
||||
angle: -60,
|
||||
top: y-0.5*tileHalfHeight,
|
||||
left: x-tileHalfHeight
|
||||
};
|
||||
corners.push(<Road key={`road-${index}}`} road={road}/>);
|
||||
}
|
||||
|
||||
road = {
|
||||
index: index++,
|
||||
angle: 240,
|
||||
top: y,
|
||||
left: x
|
||||
};
|
||||
corners.push(<Road key={`road-${index}}`} road={road}/>);
|
||||
let index = 0;
|
||||
let road;
|
||||
|
||||
const corners = [];
|
||||
|
||||
for (let i = 0; i < 21; i++) {
|
||||
const lastRow = row === rows.length - 1;
|
||||
if (row > 2 && rowCount === 0) {
|
||||
road = {
|
||||
index: index++,
|
||||
angle: -60,
|
||||
top: y-0.5*tileHalfHeight,
|
||||
left: x+tileHalfHeight
|
||||
left: x-tileHalfHeight
|
||||
};
|
||||
corners.push(<Road key={`road-${index}}`} road={road}/>);
|
||||
}
|
||||
|
||||
road = {
|
||||
index: index++,
|
||||
angle: 240,
|
||||
top: y,
|
||||
left: x
|
||||
};
|
||||
corners.push(<Road key={`road-${index}}`} road={road}/>);
|
||||
|
||||
road = {
|
||||
index: index++,
|
||||
angle: -60,
|
||||
top: y-0.5*tileHalfHeight,
|
||||
left: x+tileHalfHeight
|
||||
};
|
||||
corners.push(<Road key={`road-${index}}`} road={road}/>);
|
||||
|
||||
if (!lastRow) {
|
||||
road = {
|
||||
index: index++,
|
||||
angle: 0,
|
||||
top: y,
|
||||
left: x
|
||||
};
|
||||
corners.push(<Road key={`road-${index}}`} road={road}/>);
|
||||
}
|
||||
|
||||
if (++rowCount === rows[row]) {
|
||||
if (!lastRow) {
|
||||
road = {
|
||||
index: index++,
|
||||
angle: 0,
|
||||
top: y,
|
||||
left: x
|
||||
left: x+2.*tileHalfHeight
|
||||
};
|
||||
corners.push(<Road key={`road-${index}}`} road={road}/>);
|
||||
}
|
||||
|
||||
if (++rowCount === rows[row]) {
|
||||
if (!lastRow) {
|
||||
road = {
|
||||
index: index++,
|
||||
angle: 0,
|
||||
top: y,
|
||||
left: x+2.*tileHalfHeight
|
||||
};
|
||||
corners.push(<Road key={`road-${index}}`} road={road}/>);
|
||||
}
|
||||
|
||||
if (row > 2) {
|
||||
road = {
|
||||
index: index++,
|
||||
angle: 60,
|
||||
top: y-0.5*tileHalfHeight,
|
||||
left: x+3.*tileHalfHeight
|
||||
};
|
||||
corners.push(<Road key={`road-${index}}`} road={road}/>);
|
||||
}
|
||||
|
||||
row++;
|
||||
rowCount = 0;
|
||||
y += tileHeight - 10.5;
|
||||
x = -tileHalfHeight - (rows[row] - 1) * 0.5 * tileHeight;
|
||||
} else {
|
||||
x += tileHeight;
|
||||
}
|
||||
}
|
||||
return corners;
|
||||
}
|
||||
|
||||
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 = {
|
||||
if (row > 2) {
|
||||
road = {
|
||||
index: index++,
|
||||
angle: 60,
|
||||
top: y-0.5*tileHalfHeight,
|
||||
left: x-tileHalfHeight
|
||||
left: x+3.*tileHalfHeight
|
||||
};
|
||||
corners.push(<Corner key={`corner-${index}}`} corner={corner}/>);
|
||||
corners.push(<Road key={`road-${index}}`} road={road}/>);
|
||||
}
|
||||
|
||||
row++;
|
||||
rowCount = 0;
|
||||
y += tileHeight - 10.5;
|
||||
x = -tileHalfHeight - (rows[row] - 1) * 0.5 * tileHeight;
|
||||
} else {
|
||||
x += tileHeight;
|
||||
}
|
||||
}
|
||||
return corners;
|
||||
}, []);
|
||||
|
||||
const generateCorners = useCallback(() => {
|
||||
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;
|
||||
|
||||
corner = {
|
||||
index: index++,
|
||||
top: y,
|
||||
left: x
|
||||
};
|
||||
corners.push(<Corner key={`corner-${index}}`} corner={corner}/>);
|
||||
|
||||
for (let i = 0; i < 21; i++) {
|
||||
if (row > 2 && rowCount === 0) {
|
||||
corner = {
|
||||
index: index++,
|
||||
top: y-0.5*tileHalfHeight,
|
||||
left: x+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;
|
||||
}
|
||||
|
||||
const generatePips = () => {
|
||||
let row = 0, rowCount = 0;
|
||||
let y = tileHalfWidth - (rows.length - 1) * 0.5 * tileWidth,
|
||||
x = -(rows[row] - 1) * 0.5 * tileHeight;
|
||||
let index = 0;
|
||||
let pip;
|
||||
return pipOrder.map(order => {
|
||||
pip = {
|
||||
roll: pips[order].roll,
|
||||
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,
|
||||
order: order
|
||||
left: x+2.*tileHalfHeight
|
||||
};
|
||||
const div = <Pip
|
||||
pip={pip}
|
||||
key={`pip-${order}`}
|
||||
/>;
|
||||
|
||||
if (++rowCount === rows[row]) {
|
||||
row++;
|
||||
rowCount = 0;
|
||||
y += tileWidth;
|
||||
x = - (rows[row] - 1) * 0.5 * tileHeight;
|
||||
} else {
|
||||
x += tileHeight;
|
||||
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;
|
||||
}, []);
|
||||
|
||||
return div;
|
||||
});
|
||||
};
|
||||
const generatePips = function (pipOrder) {
|
||||
let row = 0, rowCount = 0;
|
||||
let y = tileHalfWidth - (rows.length - 1) * 0.5 * tileWidth,
|
||||
x = -(rows[row] - 1) * 0.5 * tileHeight;
|
||||
let index = 0;
|
||||
let pip;
|
||||
return pipOrder.map(order => {
|
||||
pip = {
|
||||
roll: pips[order].roll,
|
||||
index: index++,
|
||||
top: y,
|
||||
left: x,
|
||||
order: order
|
||||
};
|
||||
const div = <Pip
|
||||
pip={pip}
|
||||
key={`pip-${order}`}
|
||||
/>;
|
||||
|
||||
if (++rowCount === rows[row]) {
|
||||
row++;
|
||||
rowCount = 0;
|
||||
y += tileWidth;
|
||||
x = - (rows[row] - 1) * 0.5 * tileHeight;
|
||||
} else {
|
||||
x += tileHeight;
|
||||
}
|
||||
|
||||
const generateTiles = () => {
|
||||
let row = 0, rowCount = 0;
|
||||
let y = tileHalfWidth - (rows.length - 1) * 0.5 * tileWidth,
|
||||
x = -(rows[row] - 1) * 0.5 * tileHeight;
|
||||
let index = 0;
|
||||
return tileOrder.map(order => {
|
||||
const tile = Object.assign({},
|
||||
tiles[order],
|
||||
{ index: index++, left: x, top: y});
|
||||
return div;
|
||||
});
|
||||
};
|
||||
|
||||
let div = <Tile
|
||||
key={`${tile.type}-${tile.card}`}
|
||||
tile={tile}
|
||||
/>;
|
||||
|
||||
if (++rowCount === rows[row]) {
|
||||
row++;
|
||||
rowCount = 0;
|
||||
y += tileWidth;
|
||||
x = - (rows[row] - 1) * 0.5 * tileHeight;
|
||||
} else {
|
||||
x += tileHeight;
|
||||
}
|
||||
|
||||
return div;
|
||||
});
|
||||
};
|
||||
|
||||
const generateBorders = () => {
|
||||
const sides = 6;
|
||||
let side = -1;
|
||||
return borderOrder.map(order => {
|
||||
const border = borders[order];
|
||||
side++;
|
||||
let x = + Math.sin(Math.PI - side / sides * 2. * Math.PI) * radius,
|
||||
y = Math.cos(Math.PI - side / sides * 2. * Math.PI) * radius;
|
||||
let prev = (order === 0) ? 6 : order;
|
||||
const file = `borders-${order+1}.${prev}.png`;
|
||||
return <div
|
||||
key={`border-${order}`}
|
||||
className="Border"
|
||||
border={border}
|
||||
style={{
|
||||
width: `${borderImageWidth}px`,
|
||||
height: `${borderImageHeight}px`,
|
||||
top: `${y}px`,
|
||||
left: `${x}px`,
|
||||
transform: `rotate(${side*(360/sides)}deg) translate(${borderOffsetX}px, ${borderOffsetY}px) scale(-1, -1)`,
|
||||
backgroundImage: `url(${assetsPath}/gfx/${file} )`
|
||||
}}
|
||||
/>;
|
||||
});
|
||||
};
|
||||
|
||||
setPipElements(generatePips());
|
||||
setBorderElements(generateBorders());
|
||||
setTileElements(generateTiles());
|
||||
useEffect(() => {
|
||||
setCornerElements(generateCorners());
|
||||
setRoadElements(generateRoads());
|
||||
}, []);
|
||||
|
||||
console.log(`board - Generate board - ${signature}`);
|
||||
console.log(`board - tileOrder - `, tileOrder);
|
||||
|
||||
const generateTiles = function (tileOrder) {
|
||||
let row = 0, rowCount = 0;
|
||||
let y = tileHalfWidth - (rows.length - 1) * 0.5 * tileWidth,
|
||||
x = -(rows[row] - 1) * 0.5 * tileHeight;
|
||||
let index = 0;
|
||||
return tileOrder.map(order => {
|
||||
const tile = Object.assign({},
|
||||
tiles[order],
|
||||
{ index: index++, left: x, top: y});
|
||||
|
||||
let div = <Tile
|
||||
key={`${tile.type}-${tile.card}`}
|
||||
tile={tile}
|
||||
/>;
|
||||
|
||||
if (++rowCount === rows[row]) {
|
||||
row++;
|
||||
rowCount = 0;
|
||||
y += tileWidth;
|
||||
x = - (rows[row] - 1) * 0.5 * tileHeight;
|
||||
} else {
|
||||
x += tileHeight;
|
||||
}
|
||||
|
||||
return div;
|
||||
});
|
||||
};
|
||||
|
||||
const generateBorders = function(borderOrder) {
|
||||
const sides = 6;
|
||||
let side = -1;
|
||||
return borderOrder.map(order => {
|
||||
const border = borders[order];
|
||||
side++;
|
||||
let x = + Math.sin(Math.PI - side / sides * 2. * Math.PI) * radius,
|
||||
y = Math.cos(Math.PI - side / sides * 2. * Math.PI) * radius;
|
||||
let prev = (order === 0) ? 6 : order;
|
||||
const file = `borders-${order+1}.${prev}.png`;
|
||||
return <div
|
||||
key={`border-${order}`}
|
||||
className="Border"
|
||||
border={border}
|
||||
style={{
|
||||
width: `${borderImageWidth}px`,
|
||||
height: `${borderImageHeight}px`,
|
||||
top: `${y}px`,
|
||||
left: `${x}px`,
|
||||
transform: `rotate(${side*(360/sides)}deg) translate(${borderOffsetX}px, ${borderOffsetY}px) scale(-1, -1)`,
|
||||
backgroundImage: `url(${assetsPath}/gfx/${file} )`
|
||||
}}
|
||||
/>;
|
||||
});
|
||||
};
|
||||
|
||||
if ((signature && signature !== generated)
|
||||
&& (pips && pipOrder && borders && borderOrder
|
||||
&& tiles && tileOrder)) {
|
||||
setPipElements(generatePips(pipOrder));
|
||||
setBorderElements(generateBorders(borderOrder));
|
||||
setTileElements(generateTiles(tileOrder));
|
||||
|
||||
setGenerated(signature);
|
||||
}, [
|
||||
}/*, [
|
||||
signature, generated,
|
||||
setPipElements, setBorderElements, setTileElements,
|
||||
setCornerElements, setRoadElements,
|
||||
borderOrder, borders, pipOrder, pips, tileOrder, tiles
|
||||
]);
|
||||
|
||||
]);*/
|
||||
|
||||
console.log(`board - rendering tileOrder - `, tileOrder);
|
||||
|
||||
console.log(`board - todo - look into debouncing the direct DOM update`);
|
||||
if (turn) {
|
||||
let nodes = document.querySelectorAll('.Active');
|
||||
@ -681,21 +676,24 @@ useRef didn't work...
|
||||
}
|
||||
}
|
||||
|
||||
let nodes = document.querySelectorAll(`.Pip.Robber`);
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
nodes[i].classList.remove('Robber');
|
||||
[ 'Robert', 'Roberta', 'Velocirobber' ].forEach(robberName =>
|
||||
nodes[i].classList.remove(robberName)
|
||||
);
|
||||
}
|
||||
useEffect(() => {
|
||||
let nodes = document.querySelectorAll(`.Pip.Robber`);
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
nodes[i].classList.remove('Robber');
|
||||
[ 'Robert', 'Roberta', 'Velocirobber' ].forEach(robberName =>
|
||||
nodes[i].classList.remove(robberName)
|
||||
);
|
||||
}
|
||||
|
||||
if (robber !== undefined) {
|
||||
const el = document.querySelector(`.Pip[data-index="${robber}"]`);
|
||||
if (el) {
|
||||
el.classList.add('Robber');
|
||||
el.classList.add(robberName);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (robber !== undefined) {
|
||||
const el = document.querySelector(`.Pip[data-index="${robber}"]`);
|
||||
if (el) {
|
||||
el.classList.add('Robber');
|
||||
el.classList.add(robberName);
|
||||
}
|
||||
}
|
||||
|
||||
const canAction = (action) => {
|
||||
return (turn && Array.isArray(turn.actions) && turn.actions.indexOf(action) !== -1);
|
||||
|
||||
@ -110,7 +110,7 @@ const PlayerList = () => {
|
||||
<div>{ player }</div>
|
||||
<MediaControl peer={player} isSelf={name === player}/>
|
||||
</div>
|
||||
})
|
||||
});
|
||||
|
||||
return (
|
||||
<Paper className="PlayerList">
|
||||
|
||||
@ -1877,8 +1877,6 @@ const stopTurnTimer = (game) => {
|
||||
}
|
||||
|
||||
const shuffle = (game, session) => {
|
||||
const name = session.name;
|
||||
|
||||
if (game.state !== "lobby") {
|
||||
return `Game no longer in lobby (${game.state}). Can not shuffle board.`;
|
||||
}
|
||||
@ -1886,9 +1884,16 @@ const shuffle = (game, session) => {
|
||||
return `Game already in progress (${game.turns} so far!) and cannot be shuffled.`;
|
||||
}
|
||||
shuffleBoard(game);
|
||||
const message = `${name} requested a new board. New board signature: ${game.signature}.`;
|
||||
addChatMessage(game, null, message);
|
||||
sendGameToPlayers(game);
|
||||
console.log(`${session.id}: Shuffled to new signature: ${game.signature}`);
|
||||
|
||||
sendUpdateToPlayers(game, {
|
||||
pipOrder: game.pipOrder,
|
||||
tileOrder: game.tileOrder,
|
||||
borderOrder: game.borderOrder,
|
||||
robber: game.robber,
|
||||
robberName: game.robberName,
|
||||
signature: game.signature
|
||||
});
|
||||
}
|
||||
|
||||
const pass = (game, session) => {
|
||||
@ -3087,12 +3092,12 @@ const sendGameToPlayer = (game, session) => {
|
||||
console.log(`${session.id}: -> sendGamePlayer:${getName(session)} - only sending empty name`);
|
||||
update = { name: "" };
|
||||
} else {
|
||||
update - getFilteredGameForPlayer(game, session);
|
||||
update = getFilteredGameForPlayer(game, session);
|
||||
}
|
||||
|
||||
session.ws.send(JSON.stringify({
|
||||
type: 'game-update',
|
||||
update: getFilteredGameForPlayer(game, session)
|
||||
update: update
|
||||
}));
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user