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

Corner roads are correct. Have not tested corner banks

Browse Source 
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-02-05 14:54:19 -08:00
parent 4275682b7d
commit 5cd124b24f
2 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
client/src/Board.js
View File

@ -47,6 +47,7 @@ const Board = ({ game }) => {
}; };
return <div className="Road" return <div className="Road"
onClick={onClick} onClick={onClick}
data-index={road.index}
style={{ style={{
transform: `translate(-50%, -50%) rotate(${road.angle}deg)`, transform: `translate(-50%, -50%) rotate(${road.angle}deg)`,
top: `${road.top}px`, top: `${road.top}px`,
@ -57,19 +58,37 @@ const Board = ({ game }) => {
const Corner = ({corner}) => { const Corner = ({corner}) => {
const onClick = (event) => { const onClick = (event) => {
console.log(`Corner clicked: ${corner.index}`); console.log(`Corner ${corner.index}:`, game.layout.corners[corner.index]);
const nodes = document.querySelectorAll('.Corner.Selected'); let nodes = document.querySelectorAll('.Corner.Selected');
for (let i = 0; i < nodes.length; i++) { for (let i = 0; i < nodes.length; i++) {
const el = nodes[i]; const el = nodes[i];
if (el !== event.target) { if (el !== event.target) {
el.classList.remove('Selected'); 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.corners[corner.index].roads.forEach(index => {
const el = document.querySelector(`.Road[data-index="${index}"]`);
if (!el) {
console.log(`Unable to find road[${index}]`);
} else {
el.classList.add('Selected');
}
});
event.target.classList.toggle('Selected'); event.target.classList.toggle('Selected');
event.target.setAttribute("data-color", game.color); event.target.setAttribute("data-color", game.color);
}; };
return <div className="Corner" return <div className="Corner"
onClick={onClick} onClick={onClick}
data-index={corner.index}
style={{ style={{
top: `${corner.top}px`, top: `${corner.top}px`,
left: `${corner.left}px` left: `${corner.left}px`

9
server/routes/games.js
View File

@ -121,7 +121,7 @@ const Road = (corners) => {
corners: corners, /* 2 */ corners: corners, /* 2 */
data: undefined data: undefined
} }
} };
const layout = { const layout = {
tiles: [ tiles: [
@ -269,7 +269,7 @@ const layout = {
/* 30 */ Corner([41,43,45],[]), /* 30 */ Corner([41,43,45],[]),
/* 31 */ Corner([31,43,44],[]), /* 31 */ Corner([31,43,44],[]),
/* 32 */ Corner([44,46,48],[]), /* 32 */ Corner([44,46,48],[]),
/* 33 */ Corner([43,46,47],[]), /* 33 */ Corner([34,46,47],[]),
/* 34 */ Corner([47,49,51],[]), /* 34 */ Corner([47,49,51],[]),
/* 35 */ Corner([37,49,50],[]), /* 35 */ Corner([37,49,50],[]),
/* 36 */ Corner([50,53,52],[7]), /* 36 */ Corner([50,53,52],[7]),
@ -280,7 +280,7 @@ const layout = {
/* 40 */ Corner([45,55,56],[]), /* 40 */ Corner([45,55,56],[]),
/* 41 */ Corner([56,58,60],[]), /* 41 */ Corner([56,58,60],[]),
/* 42 */ Corner([48,58,59],[]), /* 42 */ Corner([48,58,59],[]),
/* 43 */ Corner([59,61,43],[]), /* 43 */ Corner([59,61,63],[]),
/* 44 */ Corner([51,61,62],[]), /* 44 */ Corner([51,61,62],[]),
/* 45 */ Corner([62,65,64],[8]), /* 45 */ Corner([62,65,64],[8]),
/* 46 */ Corner([52,65],[7,8]), /* 46 */ Corner([52,65],[7,8]),
@ -1009,7 +1009,8 @@ const sendGame = async (req, res, game, error) => {
name: session.name, name: session.name,
color: session.color, color: session.color,
order: (session.color in game.players) ? game.players[session.color].order : 0, order: (session.color in game.players) ? game.players[session.color].order : 0,
sessions: reducedSessions sessions: reducedSessions,
layout: layout
}); });
return res.status(200).send(playerGame); return res.status(200).send(playerGame);