Font tweaks and Trade layout

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>

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 (
     <Paper className="Actions">

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 = () => {
         </div>
         <div className="Sidebar">
           { name !== "" && <PlayerList/> }
-          <Trade/>
+          <Trade {...{tradeActive, setTradeActive}}/>
           { name !== "" && <Chat/> }
           { /* name !== "" && <VideoFeeds/> */ }
-          { loaded && <Actions {...{buildActive, setBuildActive}}/> }
+          { loaded && <Actions {...{buildActive, setBuildActive, tradeActive, setTradeActive}}/> }
         </div>
       </div>
     </GlobalContext.Provider>;

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;

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 (
     <div className="Trade">
       <Paper>
-        <div className="Title">
-          Trading negotiations {isTurn ? '' : `with ${turn.name}`}
-        </div>
         <div className="PlayerList">
           { tradeElements }
         </div>
-        { priv.resources === 0 && <b>You have no resources to participate in this trade.</b> }
-        <Button className="OfferButton" disabled={isOfferSubmitted || !isOfferValid}
-          onClick={offerClicked}>Offer</Button>
-
+        { priv.resources === 0 && <div>
+          <b>You have no resources to participate in this trade.</b>
+        </div> }
         { priv.resources !== 0 &&
           <div className="Transfers">
             <div className="GiveGet"><div>Get</div><div>Give</div><div>Have</div></div>
             { transfers }
           </div>
         }
-        { isTurn && <Button className="CancelButton"onClick={cancelClicked}>cancel</Button> }
       </Paper>
     </div>
   );

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);