diff --git a/client/src/Board.css b/client/src/Board.css index 3b7be23..80a4dc6 100644 --- a/client/src/Board.css +++ b/client/src/Board.css @@ -25,7 +25,7 @@ .Tile.Active { z-index: 10; /* Above non-Active Tile, below Road and Corner */ - filter: drop-shadow(8px 8px 12px black); + filter: drop-shadow(0px 0px 12px black); } .Border { @@ -59,7 +59,7 @@ } .Corner { - filter: drop-shadow(2.5px 2.5px 1.5px rgba(0, 0, 0, 0.75)); + filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.75)); z-index: 20; /* Above Tile, below Road */ position: absolute; display: flex; @@ -167,7 +167,42 @@ .Road-Shape:hover { background-color: white; filter: brightness(150%); +} +.Road.LongestRoad .Road-Shape { + filter: brightness(135%); + transform: scale(1.05); +} + +.Road[data-longest="1"], +.Road[data-longest="2"], +.Road[data-longest="3"], +.Road[data-longest="4"] { + filter: drop-shadow(0px 0px 2.5px black); +} + +.Road[data-longest="5"] { + filter: drop-shadow(0px 0px 5px black); +} +.Road[data-longest="6"] { + filter: drop-shadow(0px 0px 6px black); +} +.Road[data-longest="7"] { + filter: drop-shadow(0px 0px 7px black); +} +.Road[data-longest="8"] { + filter: drop-shadow(0px 0px 8px black); +} +.Road[data-longest="9"] { + filter: drop-shadow(0px 0px 9px black); +} +.Road[data-longest="10"], +.Road[data-longest="11"], +.Road[data-longest="12"], +.Road[data-longest="13"], +.Road[data-longest="14"], +.Road[data-longest="15"] { + filter: drop-shadow(0px 0px 10px black); } .Board .Selected { diff --git a/client/src/Board.js b/client/src/Board.js index 28bd03d..a4957bc 100644 --- a/client/src/Board.js +++ b/client/src/Board.js @@ -420,6 +420,16 @@ const Board = ({ table, game }) => { if (!road.color) { el.removeAttribute('data-color'); } else { + if (road.longestRoad) { + if (road.longestRoad === game.longestRoadLength) { + el.classList.add('LongestRoad'); + } else { + el.classList.remove('LongestRoad'); + } + el.setAttribute('data-longest', road.longestRoad); + } else { + el.removeAttribute('data-longest'); + } el.setAttribute('data-color', road.color); } }); @@ -494,7 +504,9 @@ const Board = ({ table, game }) => { return (
You only reveal your victory point cards when the game is over, either when you or an opponent reaches 10+ victory points on their turn and declares - victory!
> + victory!>, + 'progress-road-2': <> +Play 2 new roads as if you had just built them.
+This is still limited by the number of roads you have (a maximum of 15.)
+NOTE: This card is not yet implemented. The server will give you 2 wood + and 2 brick and we trust you will use them to build 2 roads.
+If + you do not have enough roads remaining, you may end up with extra resources... + but the game is in beta, so... be happy :) +
+As an FYI, you currently have {15 - table.game.player.roads} roads remaining.
+ > }; - let description = descriptions[card.type]; + let description; + if (card.type == 'progress') { + description = descriptions[`${card.type}-${card.card}`]; + } else { + description = descriptions[card.type]; + } + + if (description === undefined) { + console.log('No description for ', card); + } let canPlay = false; if (card.type === 'vp') { diff --git a/client/src/Winner.js b/client/src/Winner.js index d830b5b..6191fbb 100644 --- a/client/src/Winner.js +++ b/client/src/Winner.js @@ -16,8 +16,17 @@ const Winner = ({table, color}) => { const name = getPlayerName(table.game.sessions, color), player = table.game.players[color]; + let playerCount = 0; + for (let key in table.game.players) { + if (table.game.players[key].status !== 'Not active') { + playerCount++; + } + } - let description = <>Congratulations, {name}!>; + let description = <>Congratulations, {name}! + They have won the game! The game played + for {Math.floor(table.game.turns / playerCount)} turns. + >; for (let key in table.game.players) { if (key === color) { continue; @@ -30,6 +39,8 @@ const Winner = ({table, color}) => { description = <>{description}{line}
>; } + description = <>{description}If everyone goes back to the Lobby, you can play again.
>; + return (