From b66e1fb6e545237ad59699aa663b77fb12976ccc Mon Sep 17 00:00:00 2001 From: James Ketrenos Date: Wed, 16 Mar 2022 17:13:59 -0700 Subject: [PATCH] Font tweaks and Trade layout Signed-off-by: James Ketrenos --- client/src/Actions.js | 20 +++++++++++++++++--- client/src/App.js | 5 +++-- client/src/Trade.css | 23 +++++++++++++---------- client/src/Trade.js | 31 +++++++------------------------ server/routes/games.js | 5 ++++- 5 files changed, 44 insertions(+), 40 deletions(-) diff --git a/client/src/Actions.js b/client/src/Actions.js index d9b3882..88140e4 100644 --- a/client/src/Actions.js +++ b/client/src/Actions.js @@ -7,7 +7,7 @@ import "./Actions.css"; import { PlayerName } from './PlayerName.js'; import { GlobalContext } from "./GlobalContext.js"; -const Actions = ({buildActive, setBuildActive}) => { +const Actions = ({tradeActive, setTradeActive, buildActive, setBuildActive}) => { const { ws, gameId, name } = useContext(GlobalContext); const [state, setState] = useState('lobby'); const [color, setColor] = useState(undefined); @@ -110,7 +110,13 @@ const Actions = ({buildActive, setBuildActive}) => { }; const tradeClick = () => { - sendMessage({ type: 'trade' }); + if (!tradeActive) { + setTradeActive(true); + sendMessage({ type: 'trade' }); + } else { + setTradeActive(false); + sendMessage({ type: 'trade', action: 'cancel', offer: undefined }); + } if (buildActive) setBuildActive(false); } @@ -146,7 +152,15 @@ const Actions = ({buildActive, setBuildActive}) => { robberActions = (turn && turn.robberInAction), haveResources = priv ? priv.resources !== 0 : false, placement = (state === 'initial-placement' || (turn && turn.active === 'road-building')), - placeRoad = placement && turn && turn.actions && turn.actions.indexOf('place-road') !== -1; + placeRoad = placement && turn && turn.actions && + (turn.actions.indexOf('place-road') !== -1 + || turn.actions.indexOf('place-city') !== -1 + || turn.actions.indexOf('place-settlement') !== -1); + if (tradeActive && (!turn || !turn.actions || turn.actions.indexOf('trade'))) { + setTradeActive(false); + } else if (!tradeActive && turn && turn.actions && turn.actions.indexOf('trade') !== -1) { + setTradeActive(true); + } return ( diff --git a/client/src/App.js b/client/src/App.js index fc492dc..9ce2c06 100755 --- a/client/src/App.js +++ b/client/src/App.js @@ -45,6 +45,7 @@ const Table = () => { const [color, setColor] = useState(undefined); const [priv, setPriv] = useState(undefined); const [buildActive, setBuildActive] = useState(false); + const [tradeActive, setTradeActive] = useState(false); const [cardActive, setCardActive] = useState(undefined); const [winnerDismissed, setWinnerDismissed] = useState(undefined); const [global, setGlobal] = useState({}); @@ -347,10 +348,10 @@ const Table = () => {
{ name !== "" && } - + { name !== "" && } { /* name !== "" && */ } - { loaded && } + { loaded && }
; diff --git a/client/src/Trade.css b/client/src/Trade.css index 785b260..20fd671 100644 --- a/client/src/Trade.css +++ b/client/src/Trade.css @@ -22,9 +22,10 @@ } .Trade .PlayerList { - padding: 0.5em; + padding: 0; background-color:rgba(224, 224, 224); - margin: 0.5rem 0; + margin: 0.25rem 0; + font-size: 1.2em; } .Trade .Resource { @@ -104,10 +105,9 @@ } .Trade .PlayerColor { - align-self: flex-start; + align-self: center; width: 0.75em; height: 0.75em; - margin: 1rem 0.25rem 0 0; } .Trade .Transfer { @@ -118,10 +118,12 @@ } .Trade .Transfers { + font-size: 0.75em; display: flex; flex-direction: row; justify-items: flex-start; - margin: 0.25rem 0; + margin: 0.5rem 0; + justify-content: center; } .Trade .Transfers .GiveGet { @@ -182,7 +184,11 @@ flex-direction: row; align-items: center; flex: 1; - padding: 2px 0; + border-bottom: 1px solid #ccc; +} + +.Trade .TradeLine:last-child { + border-bottom: none; } .Trade .TradeLine .TradeText { @@ -190,6 +196,7 @@ flex-wrap: wrap; flex-direction: row; align-items: center; + padding: 0.25em 0; } .Trade .TradeText > span { @@ -200,10 +207,6 @@ flex-wrap: wrap; } -.Trade .TradeText > span:first-of-type { - min-height: 3.5em; -} - .Trade .TradeLine .Resource { height: 1.5em; width: 1.5em; diff --git a/client/src/Trade.js b/client/src/Trade.js index c5bfa28..1c9e524 100644 --- a/client/src/Trade.js +++ b/client/src/Trade.js @@ -314,22 +314,10 @@ const Trade = () => { } activeTrades.sort((A, B) => { - if (A.negotiator) { - return -1; - } - - if (B.negotiator) { - return +1; - } - - if (A.self) { - return -1; - } - - if (B.self) { - return +1; - } - + if (A.negotiator) { return -1; } + if (B.negotiator) { return +1; } + if (A.self) { return -1; } + if (B.self) { return +1; } return A.name.localeCompare(B.name); }); @@ -517,23 +505,18 @@ const Trade = () => { return (
-
- Trading negotiations {isTurn ? '' : `with ${turn.name}`} -
{ tradeElements }
- { priv.resources === 0 && You have no resources to participate in this trade. } - - + { priv.resources === 0 &&
+ You have no resources to participate in this trade. +
} { priv.resources !== 0 &&
Get
Give
Have
{ transfers }
} - { isTurn && }
); diff --git a/server/routes/games.js b/server/routes/games.js index d01d9c2..b0fa50f 100755 --- a/server/routes/games.js +++ b/server/routes/games.js @@ -3054,6 +3054,7 @@ const saveGame = async (game) => { delete reducedGame.unselected; /* Save per turn while debugging... */ + game.step = game.step ? game.step : 0; await writeFile(`games/${game.id}.${game.step++}`, JSON.stringify(reducedGame, null, 2)) .catch((error) => { console.error(`${session.id} Unable to write to games/${game.id}`); @@ -3749,7 +3750,9 @@ router.ws("/ws/:id", async (ws, req) => { } break; case 'trade': - console.log(`${short}: <- trade:${getName(session)} - ${data.action} - `, data.offer ? data.offer : 'no trade yet'); + console.log(`${short}: <- trade:${getName(session)} - ` + + (data.action ? data.action : 'start') + ` - `, + data.offer ? data.offer : 'no trade yet'); warning = trade(game, session, data.action, data.offer); if (warning) { sendWarning(session, warning);