From 2182d9b0c10beb7cd8983bd4ad7078f8fae195d5 Mon Sep 17 00:00:00 2001 From: James Ketrenos Date: Mon, 14 Mar 2022 15:36:56 -0700 Subject: [PATCH] Minor tweaks to UI gameplay Signed-off-by: James Ketrenos --- client/src/App.css | 9 ++++++- client/src/App.js | 5 +++- client/src/Board.css | 53 +++++++++++++++++++++++++++++++------ client/src/Board.js | 4 +++ client/src/Hand.js | 2 +- client/src/PlayersStatus.js | 22 +++++++++------ client/src/Winner.js | 2 ++ server/routes/games.js | 7 ++--- 8 files changed, 82 insertions(+), 22 deletions(-) diff --git a/client/src/App.css b/client/src/App.css index 06bc91e..2ca1d29 100755 --- a/client/src/App.css +++ b/client/src/App.css @@ -57,11 +57,18 @@ body { } .Table .WarningDialog .Warning { + display: flex; + flex-direction: column; + padding: 0.25rem; +} + +.Table .WarningDialog .Warning > div { display: flex; padding: 1rem; } + .Table .PlayersStatus { z-index: 5000; } @@ -153,4 +160,4 @@ body { left: 0; right: 0; bottom: 0; -} \ No newline at end of file +} diff --git a/client/src/App.js b/client/src/App.js index 7c18a05..61318bb 100755 --- a/client/src/App.js +++ b/client/src/App.js @@ -304,7 +304,10 @@ const Table = () => { } { warning &&
- { warning } + +
{ warning }
+ +
} { state === 'normal' && } { color && state === 'game-order' && } diff --git a/client/src/Board.css b/client/src/Board.css index 03b1c21..7d0f477 100644 --- a/client/src/Board.css +++ b/client/src/Board.css @@ -162,13 +162,13 @@ .Board .Option .Tile-Shape, .Board .Option .Corner-Shape, .Board .Option .Road-Shape { - background-color: rgba(255, 255, 255, 0.5) !important; +/* background-color: rgba(255, 255, 255, 0.5) !important;*/ } .Board .Option .Tile-Shape:hover, .Board .Option .Corner-Shape:hover, .Board .Option .Road-Shape :hover{ - background-color: rgba(255, 255, 255, 0.75) !important; + /* background-color: rgba(255, 255, 255, 0.75) !important; */ } .Robber .Pip-Shape { @@ -217,19 +217,19 @@ } .Road[data-longest="5"] { - filter: drop-shadow(0px 0px 5px black); + filter: brightness(110%) drop-shadow(0px 0px 5px black); } .Road[data-longest="6"] { - filter: drop-shadow(0px 0px 6px black); + filter: brightness(120%) drop-shadow(0px 0px 6px black); } .Road[data-longest="7"] { - filter: drop-shadow(0px 0px 7px black); + filter: brightness(130%) drop-shadow(0px 0px 7px black); } .Road[data-longest="8"] { - filter: drop-shadow(0px 0px 8px black); + filter: brightness(140%) drop-shadow(0px 0px 8px black); } .Road[data-longest="9"] { - filter: drop-shadow(0px 0px 9px black); + filter: brightness(150%) drop-shadow(0px 0px 9px black); } .Road[data-longest="10"], .Road[data-longest="11"], @@ -237,7 +237,7 @@ .Road[data-longest="13"], .Road[data-longest="14"], .Road[data-longest="15"] { - filter: drop-shadow(0px 0px 10px black); + filter: brightness(160%) drop-shadow(0px 0px 10px black); } .Board .Selected { @@ -263,4 +263,41 @@ [data-color='B'] > .Corner-Shape, [data-color='B'] > .Road-Shape { background-color: rgba(0, 0, 255, 1); +} + +/* +@keyframes blink { + from { + filter: brightness(90%); + opacity: 1; + } + + 50% { + filter: brightness(150%); + } + + to { + filter: brightness(150%); + opacity: 0.5; + } +} +*/ +.Board .Option:hover { + filter: brightness(100%) drop-shadow(0 0 2px black); + opacity: 1; + /* + animation-play-state: paused; + */ +} + +.Board .Option { + filter: brightness(200%) drop-shadow(0 0 3px rgba(255, 0, 255, 1)); + opacity: 1; + /* + transition-timing-function: ease-in-out; + animation-duration: 0.5s; + animation-name: blink; + animation-iteration-count: infinite; + animation-direction: alternate; + */ } \ No newline at end of file diff --git a/client/src/Board.js b/client/src/Board.js index 7497646..c94c7ef 100644 --- a/client/src/Board.js +++ b/client/src/Board.js @@ -54,6 +54,8 @@ const Board = () => { 'placements', 'turn', 'state', 'color', 'longestRoadLength' ], []); + console.log(`board - render ws is ${!ws ? 'NULL' : (ws.readyState === ws.OPEN ? 'OPEN' : '!OPEN')}`); + const onWsMessage = (event) => { const data = JSON.parse(event.data); switch (data.type) { @@ -608,6 +610,7 @@ const Board = () => { return; } el.classList.add('Option'); + el.setAttribute('data-color', turn.color); }); } if (turn.limits['corners']) { @@ -617,6 +620,7 @@ const Board = () => { return; } el.classList.add('Option'); + el.setAttribute('data-color', turn.color); }); } if (turn.limits['tiles']) { diff --git a/client/src/Hand.js b/client/src/Hand.js index 7b49d42..304c758 100644 --- a/client/src/Hand.js +++ b/client/src/Hand.js @@ -95,7 +95,7 @@ const Hand = ({buildActive, setBuildActive, setCardActive}) => { if (B.played) { return +1; } - return 0; + return B.turn - A.turn; /* Put playable cards on top */ }).map(card => cardClicked(card)} card={card} diff --git a/client/src/PlayersStatus.js b/client/src/PlayersStatus.js index c26a3ed..0818fd3 100644 --- a/client/src/PlayersStatus.js +++ b/client/src/PlayersStatus.js @@ -18,6 +18,10 @@ const Player = ({ player, onClick, reverse, color, ? : undefined; + const resourceCards = player.resources + ? + : undefined; const armyCards = player.army ? : undefined; @@ -38,14 +42,14 @@ const Player = ({ player, onClick, reverse, color, count={player.longestRoad} /> : undefined; - const largestArmyPlacard = largestArmy && largestArmy === color ? - : undefined; - + const largestArmyPlacard = largestArmy && largestArmy === color ? + : undefined; + return
{player.name} @@ -64,8 +68,10 @@ const Player = ({ player, onClick, reverse, color, { longestRoadPlacard } { !largestArmyPlacard && armyCards } { developmentCards } + { resourceCards } } { reverse && <> + { resourceCards } { developmentCards } { !largestArmyPlacard && armyCards } { longestRoadPlacard } diff --git a/client/src/Winner.js b/client/src/Winner.js index 3976dd3..89ab446 100644 --- a/client/src/Winner.js +++ b/client/src/Winner.js @@ -101,6 +101,8 @@ const Winner = () => { Throughout the game, the robber stole {winner.robberStole} resources:
{stolen}
; + } else { + robber =
The robber never stole any resources from anyone!
; } const averageSeconds = Math.floor(winner.totalTime / turnCount / 1000), diff --git a/server/routes/games.js b/server/routes/games.js index 3af2215..b48f44d 100755 --- a/server/routes/games.js +++ b/server/routes/games.js @@ -2054,14 +2054,15 @@ const buyDevelopment = (game, session) => { card.turn = game.turns; player.development.push(card); + sendUpdateToPlayer(game, session, { + private: session.player + }); + sendUpdateToPlayers(game, { chat: game.chat, activities: game.activities, players: getFilteredPlayers(game) }); - sendUpdateToPlayer(game, session, { - private: session.player - }); } const playCard = (game, session, card) => {