Placement enforcement for settlement working
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
parent
325321de3c
commit
9e8ef7ac04
@ -54,6 +54,7 @@
|
|||||||
height: 1.5em;
|
height: 1.5em;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Corner-Shape {
|
.Corner-Shape {
|
||||||
@ -66,14 +67,6 @@
|
|||||||
clip-path: polygon(50% 0%,70% 15%,70% 2%,90% 2%,90% 30%,100% 40%,100% 100%,65% 100%,65% 65%,35% 65%,35% 100%,0% 100%,0% 40%);
|
clip-path: polygon(50% 0%,70% 15%,70% 2%,90% 2%,90% 30%,100% 40%,100% 100%,65% 100%,65% 65%,35% 65%,35% 100%,0% 100%,0% 40%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.Corner .Option {
|
|
||||||
background-color: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.Corner-Shape:hover {
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Road {
|
.Road {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -84,6 +77,7 @@
|
|||||||
width: 0.5em;
|
width: 0.5em;
|
||||||
height: 2.5em;
|
height: 2.5em;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Road-Shape {
|
.Road-Shape {
|
||||||
@ -97,10 +91,16 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.Road .Option {
|
.Option {
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Option .Corner-Shape,
|
||||||
|
.Option .Road-Shape {
|
||||||
background-color: rgba(255, 255, 255, 0.5);
|
background-color: rgba(255, 255, 255, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Corner-Shape:hover,
|
||||||
.Road-Shape:hover {
|
.Road-Shape:hover {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
@ -112,12 +112,12 @@
|
|||||||
|
|
||||||
[data-color='R'] > .Corner-Shape,
|
[data-color='R'] > .Corner-Shape,
|
||||||
[data-color='R'] > .Road-Shape {
|
[data-color='R'] > .Road-Shape {
|
||||||
background-color: rgba(255, 0, 0, 1);
|
background-color: rgba(255, 0, 0, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-color='O'] > .Corner-Shape,
|
[data-color='O'] > .Corner-Shape,
|
||||||
[data-color='O'] > .Road-Shape {
|
[data-color='O'] > .Road-Shape {
|
||||||
background-color: rgba(255, 196, 0, 1);
|
background-color: rgba(255, 196, 0, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-color='W'] > .Corner-Shape,
|
[data-color='W'] > .Corner-Shape,
|
||||||
@ -127,5 +127,5 @@
|
|||||||
|
|
||||||
[data-color='B'] > .Corner-Shape,
|
[data-color='B'] > .Corner-Shape,
|
||||||
[data-color='B'] > .Road-Shape {
|
[data-color='B'] > .Road-Shape {
|
||||||
background-color: rgba(0, 0, 255, 1);
|
background-color: rgba(0, 0, 255, 1);
|
||||||
}
|
}
|
@ -352,6 +352,7 @@ const Board = ({ table, game }) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (game && game.placements) {
|
if (game && game.placements) {
|
||||||
|
/* Set color and type based on placement data from the server */
|
||||||
game.placements.corners.forEach((corner, index) => {
|
game.placements.corners.forEach((corner, index) => {
|
||||||
const el = document.querySelector(`.Corner[data-index="${index}"]`);
|
const el = document.querySelector(`.Corner[data-index="${index}"]`);
|
||||||
if (!el) {
|
if (!el) {
|
||||||
@ -376,6 +377,32 @@ const Board = ({ table, game }) => {
|
|||||||
el.setAttribute('data-color', road.color);
|
el.setAttribute('data-color', road.color);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
/* Clear all 'Option' targets */
|
||||||
|
const nodes = document.querySelectorAll(`.Option`);
|
||||||
|
for (let i = 0; i < nodes.length; i++) {
|
||||||
|
nodes[i].classList.remove('Option');
|
||||||
|
}
|
||||||
|
/* Add 'Option' based on game.turn.limits */
|
||||||
|
if (game.turn && game.turn.limits) {
|
||||||
|
if (game.turn.limits['roads']) {
|
||||||
|
game.turn.limits['roads'].forEach(index => {
|
||||||
|
const el = document.querySelector(`.Road[data-index="${index}"]`);
|
||||||
|
if (!el) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
el.classList.add('Option');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (game.turn.limits['corners']) {
|
||||||
|
game.turn.limits['corners'].forEach(index => {
|
||||||
|
const el = document.querySelector(`.Corner[data-index="${index}"]`);
|
||||||
|
if (!el) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
el.classList.add('Option');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const canAction = (action) => {
|
const canAction = (action) => {
|
||||||
|
@ -205,8 +205,10 @@ const processGameOrder = (game, player, dice) => {
|
|||||||
game.playerOrder = players.map(player => getPlayerColor(game, player));
|
game.playerOrder = players.map(player => getPlayerColor(game, player));
|
||||||
game.state = 'initial-placement';
|
game.state = 'initial-placement';
|
||||||
message = `Initial settlement placement has started!`;
|
message = `Initial settlement placement has started!`;
|
||||||
|
|
||||||
game.turn = {
|
game.turn = {
|
||||||
actions: ['place-settlement'],
|
actions: ['place-settlement'],
|
||||||
|
limits: { corners: getValidCorners(game) },
|
||||||
name: getPlayerName(game, players[0]),
|
name: getPlayerName(game, players[0]),
|
||||||
color: getPlayerColor(game, players[0])
|
color: getPlayerColor(game, players[0])
|
||||||
};
|
};
|
||||||
@ -583,6 +585,41 @@ const getNextPlayer = (game, name) => {
|
|||||||
return name;
|
return name;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const getValidCorners = (game) => {
|
||||||
|
const limits = [];
|
||||||
|
|
||||||
|
/* For each corner, if the corner already has a color set, skip it
|
||||||
|
* If no color is set, walk each road that leaves that corner and
|
||||||
|
* check to see if there is a settlement placed at the end of that road
|
||||||
|
* If so, this location cannot have a settlement.
|
||||||
|
*/
|
||||||
|
layout.corners.forEach((corner, cornerIndex) => {
|
||||||
|
if (game.placements.corners[cornerIndex].color) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let valid = true;
|
||||||
|
for (let r = 0; valid && r < corner.roads.length; r++) {
|
||||||
|
const road = layout.roads[corner.roads[r]];
|
||||||
|
for (let c = 0; valid && c < road.corners.length; c++) {
|
||||||
|
/* This side of the road is pointing to the corner being validated. Skip it. */
|
||||||
|
if (road.corners[c] === cornerIndex) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
/* There is a settlement within one segment from this
|
||||||
|
* corner, so it is invalid for settlement placement */
|
||||||
|
if (game.placements.corners[road.corners[c]].color) {
|
||||||
|
valid = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (valid) {
|
||||||
|
limits.push(cornerIndex);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return limits;
|
||||||
|
}
|
||||||
|
|
||||||
router.put("/:id/:action/:value?", async (req, res) => {
|
router.put("/:id/:action/:value?", async (req, res) => {
|
||||||
const { action, id } = req.params,
|
const { action, id } = req.params,
|
||||||
value = req.params.value ? req.params.value : "";
|
value = req.params.value ? req.params.value : "";
|
||||||
@ -683,7 +720,7 @@ router.put("/:id/:action/:value?", async (req, res) => {
|
|||||||
corner.type = 'settlement';
|
corner.type = 'settlement';
|
||||||
if (game.state === 'initial-placement') {
|
if (game.state === 'initial-placement') {
|
||||||
game.turn.actions = ['place-road'];
|
game.turn.actions = ['place-road'];
|
||||||
game.turn.limits = { corner: index }; /* road placement is limited to be near this corner index */
|
game.turn.limits = { roads: layout.corners[index].roads }; /* road placement is limited to be near this corner */
|
||||||
addChatMessage(game, session, `Placed a settlement. Next, they need to place a road.`);
|
addChatMessage(game, session, `Placed a settlement. Next, they need to place a road.`);
|
||||||
} else {
|
} else {
|
||||||
error = `Settlement placement not enabled for normal game play.`;
|
error = `Settlement placement not enabled for normal game play.`;
|
||||||
@ -715,6 +752,7 @@ router.put("/:id/:action/:value?", async (req, res) => {
|
|||||||
const next = getNextPlayer(game, name);
|
const next = getNextPlayer(game, name);
|
||||||
game.turn = {
|
game.turn = {
|
||||||
actions: ['place-settlement'],
|
actions: ['place-settlement'],
|
||||||
|
limits: { corners: getValidCorners(game) },
|
||||||
name: next,
|
name: next,
|
||||||
color: getColorFromName(game, next)
|
color: getColorFromName(game, next)
|
||||||
};
|
};
|
||||||
|
Loading…
x
Reference in New Issue
Block a user