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

Tiles are all correctly referencing roads and corners

Browse Source 
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-02-05 15:07:32 -08:00
parent ac961b7a55
commit 0c821fe422
2 changed files with 69 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
client/src/Board.js
View File

@ -32,6 +32,65 @@ const Board = ({ game }) => {
borderImageWidth = (2 + 2/3) * tileImageWidth, /* 2.667 * .Tile.width */
borderImageHeight = borderImageWidth * 0.29; /* 0.29 * .Border.height */
const Tile = ({tile}) => {
const onClick = (event) => {
console.log(`Tile clicked: ${tile.index}`);
let nodes = document.querySelectorAll('.Tile.Selected');
for (let i = 0; i < nodes.length; i++) {
const el = nodes[i];
if (el !== event.target) {
el.classList.remove('Selected');
}
}
nodes = document.querySelectorAll('.Corner.Selected');
for (let i = 0; i < nodes.length; i++) {
const el = nodes[i];
if (el !== event.target) {
el.classList.remove('Selected');
}
}
nodes = document.querySelectorAll('.Road.Selected');
for (let i = 0; i < nodes.length; i++) {
const el = nodes[i];
if (el !== event.target) {
el.classList.remove('Selected');
}
}
game.layout.tiles[tile.index].corners.forEach(index => {
const el = document.querySelector(`.Corner[data-index="${index}"]`);
if (!el) {
console.log(`Unable to find corner[${index}]`);
} else {
el.classList.add('Selected');
}
});
game.layout.tiles[tile.index].roads.forEach(index => {
const el = document.querySelector(`.Road[data-index="${index}"]`);
if (!el) {
console.log(`Unable to find corner[${index}]`);
} else {
el.classList.add('Selected');
}
});
event.target.setAttribute("data-color", game.color);
event.target.classList.toggle('Selected');
};
return <div className="Tile"
onClick={onClick}
data-index={tile.index}
style={{
top: `${tile.top}px`,
left: `${tile.left}px`,
width: `${tileImageWidth}px`,
height: `${tileImageHeight}px`,
backgroundImage: `url(${assetsPath}/gfx/tiles-${tile.type}.png)`,
backgroundPositionY: `-${tile.card*tileHeight}px`
}}
>{tile.index}</div>;
};
const Road = ({road}) => {
const onClick = (event) => {
console.log(`Road clicked: ${road.index}`);
@ -70,7 +129,7 @@ const Board = ({ game }) => {
top: `${road.top}px`,
left: `${road.left}px`
}}
>{road.index}</div>;
></div>;
};
const Corner = ({corner}) => {
@ -291,19 +350,14 @@ const Board = ({ game }) => {
x = -(rows[row] - 1) * 0.5 * tileHeight;
let index = 0;
return game.tileOrder.map(order => {
const tile = game.tiles[order];
let div = <div
const tile = Object.assign({},
game.tiles[order],
{ index: index++, left: x, top: y});
let div = <Tile
key={`${tile.type}-${tile.card}`}
className="Tile"
style={{
width: `${tileImageWidth}px`,
height: `${tileImageHeight}px`,
top: `${y}px`,
left: `${x}px`,
backgroundImage: `url(${assetsPath}/gfx/tiles-${tile.type}.png)`,
backgroundPositionY: `-${tile.card*tileHeight}px`
}}
></div>;
tile={tile}
/>;
if (++rowCount === rows[row]) {
row++;
@ -394,7 +448,7 @@ const Board = ({ game }) => {
<div className="Corners" disabled={true || game.state !== 'active'}>
{ corners }
</div>
<div className="Roads" disabled={game.state !== 'active'}>
<div className="Roads" disabled={true || game.state !== 'active'}>
{ roads }
</div>
</> }

2
server/routes/games.js
View File

@ -134,7 +134,7 @@ const layout = {
Tile([ 11, 12, 13, 23, 22, 21], [ 16, 17, 21, 32, 30, 18]),
Tile([ 13, 14, 15, 25, 24, 23], [ 19, 20, 22, 35, 33, 21]),
Tile([ 16, 17, 18, 29, 28, 27], [ 23, 24, 18, 40, 39, 25]),
Tile([ 16, 17, 18, 29, 28, 27], [ 23, 24, 28, 40, 39, 25]),
Tile([ 18, 19, 20, 31, 30, 29], [ 26, 27, 31, 43, 41, 28]),
Tile([ 20, 21, 22, 33, 32, 31], [ 29, 30, 34, 46, 44, 31]),
Tile([ 22, 23, 24, 35, 34, 33], [ 32, 33, 37, 49, 47, 34]),