Successfully played through full game

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

client/src/Activities.js

@@ -92,7 +92,7 @@ const Activities = ({ table }) => {
   return (
     <div className="Activities">
       { list }
-      { normalPlay && mustDiscard === 0 && mustPlaceRobber &&
+      { normalPlay && !mustDiscard && mustPlaceRobber &&
         <div className="Requirement">{who}  must move the Robber.</div>
       }
 
@@ -104,7 +104,7 @@ const Activities = ({ table }) => {
         <div className="Requirement">{who} must select a player to steal from.</div>
       }
 
-      { normalPlay && mustDiscard !== 0 && <> { discarders } </> }
+      { normalPlay && mustDiscard && <> { discarders } </> }
       
       { !isTurn && normalPlay &&
         <div>It is <PlayerColor color={table.game.turn.color}/> {table.game.turn.name}'s turn.</div>

client/src/Table.js

@@ -146,15 +146,16 @@ const GameOrder = ({table}) => {
   for (let color in table.game.players) {
     const item = table.game.players[color],
       name = getPlayerName(table.game.sessions, color);
+    if (!name) {
+      continue;
+    }
+    if (!item.orderRoll) {
+      item.orderRoll = 0;
+    }
     if (color === table.game.color) {
       hasRolled = item.orderRoll !== 0;
     }
-    if (name) {
-      if (!item.orderRoll) {
-        item.orderRoll = 0;
-      }
-      players.push({ name: name, color: color, ...item });
-    }
+    players.push({ name: name, color: color, ...item });
   }
 
   players.sort((A, B) => {

client/src/Trade.css

@@ -1,9 +1,7 @@
 .Trade {
   display: flex;
   position: absolute;
-  left: 0;
-  right: 30rem;
-  bottom: 0;
+  right: 0;
   top: 0;
   justify-content: center;
   align-items: center;
@@ -133,15 +131,24 @@
   padding: 2px 0;
 }
 
+.Trade .TradeLine .TradeText {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
+.Trade .TradeLine .TradeText > div {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+/*
 .Trade .TradeLine > div {
   display: inline-flex;
   align-items: center;
   margin-right: 0.25rem;
 }
-
-.Trade .TradeLine > div > div {
-  margin-left: 0.25em;
-}
+*/
 
 .Trade .TradeLine .Resource {
   height: 1.5rem;

client/src/Trade.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from "react";
+import React, { useState, useCallback } from "react";
 import "./Trade.css";
 import { getPlayerName } from './Common.js';
 import PlayerColor from './PlayerColor.js';
@@ -63,7 +63,7 @@ const Trade = ({table}) => {
         type={resource} 
         count={gets[resource]}/>
     </div>;
-  }, [ gives, gets, transfer]);
+  }, [ gives, gets, transfer, player]);
 
   const agreeClicked = useCallback((offer) => {
     const trade = {
@@ -78,7 +78,7 @@ const Trade = ({table}) => {
     console.log(_gives, _gets);
     setGives(Object.assign({}, empty, _gives));
     setGets(Object.assign({}, empty, _gets));
-  }, [setGives, setGets, table]);
+  }, [setGives, setGets, gives, gets, table]);
 
   let transfers = [];
  
@@ -99,7 +99,11 @@ const Trade = ({table}) => {
   };
 
   const isCompatibleOffer = (player, offer) => {
-    let valid = player.gets.length === offer.gives.length &&
+    let valid = player.gets &&
+      player.gives &&
+      offer.gets &&
+      offer.gives &&
+      player.gets.length === offer.gives.length &&
       player.gives.length === offer.gets.length;
   
     if (!valid) {
@@ -126,8 +130,6 @@ const Trade = ({table}) => {
     return valid;
   };
   
-  const game = table.game;
-
   const isTurn = (table.game.turn && table.game.turn.color === table.game.color) ? true : false;
 
   const offerClicked = (event) => {
@@ -172,13 +174,17 @@ const Trade = ({table}) => {
     const item = table.game.players[color],
       name = getPlayerName(table.game.sessions, color);
 
-    /* Only list players with an offer */
-    if (table.game.turn.name !== name &&
+    /* Only list players with an offer, unless it is the active player (see
+     * that you haven't submitted an offer) or the current turn player,
+     * or the player explicitly rejected the player's offer */
+    if (table.game.turn.name !== name && table.game.name !== name &&
+      !item.offerRejected &&
       (!item.gets || item.gets.length === 0
-      || !item.gives || item.gives.lenght === 0)) {
+      || !item.gives || item.gives.length === 0)) {
       continue;
     }
 
+    /* If the active player already rejected this offer, hide it */
     if (table.game.turn.name === name && item.negotiatorRejectedOffer) {
       continue;
     }
@@ -193,7 +199,7 @@ const Trade = ({table}) => {
       offerRejected: (table.game.turn.name !== name) ? (item.offerRejected ? true : false) : false,
       negotiatorRejectedOffer: item.negotiatorRejectedOffer
     };
-    tmp.canSubmit = (item.gets.length && item.gives.length);
+    tmp.canSubmit = (tmp.gets.length && tmp.gives.length);
     players.push(tmp);
   }
 
@@ -248,11 +254,20 @@ const Trade = ({table}) => {
   }
 
   players = players.map((item, index) => {
+    /*
     if (item.negotiatorRejectedOffer && isTurn) {
       return <></>;
     }
+*/
 
-    const rejected = (item.offerRejected || item.negotiatorRejectedOffer);
+    let youWereRejected = item.negotiatorRejectedOffer;
+    let youRejectedOffer;
+    if (isTurn && !item.self) {
+      youRejectedOffer = item.negotiatorRejectedOffer;
+      youWereRejected = item.offerRejected;
+    } else {
+      youRejectedOffer = player.offerRejected;
+    }
 
     const _gets = item.gets.length ? item.gets.map((get, index) => <div key={`get-${get.type}-${index}`}>
       { get.type === 'bank' && <div key={`get-bank-${index}`}><b>4</b> of any resource</div>}
@@ -266,15 +281,36 @@ const Trade = ({table}) => {
     return (
       <div className="TradeLine" key={`player-${item.name}-${index}`}>
         <PlayerColor color={item.color}/>
-        { rejected && <>Your offer to give {_gets} in exchange for {_gives} was rejected.</> }
-        { !rejected && <>{item.self ? 'You' : item.name}</> }
-        { !rejected && _gets && _gives && 
-          <>{item.self ? ' want' : ' wants'} {_gets} and will give {_gives}.</>
-        }
-        { !rejected && (_gets === undefined || _gives === undefined) && 
-          <>{item.self ? ' have' : ' has'} not submitted a trade offer.</>
-        }
+          <div className="TradeText">
+          { item.self && <div>
+            { youWereRejected && <>Your offer to give {_gets} in exchange for {_gives} was rejected.</> }
+            { !youWereRejected && _gets && _gives && <>You want {_gets} and will give {_gives}.</> }
+            { !youWereRejected && (_gets === undefined || _gives === undefined) && <>
+              You have not submitted a trade offer.
+            </>}
+          </div> }
 
+          { !item.self && <>
+            <div>
+            { !youRejectedOffer && _gets && _gives && <>
+              {item.name} wants {_gets} and will give {_gives}.
+            </> }
+
+            { (_gets === undefined || _gives === undefined) && 
+              <>{item.name} has not submitted a trade offer.</>
+            }
+
+            { youRejectedOffer && <>
+              You rejected {item.name}'s offer to receive {_gets} in exchange for {_gives}.
+            </> }
+            </div>
+
+            { youWereRejected && <div>
+              {item.name} rejected your offer.
+            </div>}
+            
+          </>}
+        </div>
         <div className="TradeActions">
           { !item.self && isTurn &&
             <Button disabled={!item.valid}
@@ -288,7 +324,7 @@ const Trade = ({table}) => {
 
           { item.name !== 'The bank' && !item.self &&
             <Button disabled={!item.gets.length || 
-              !item.gives.length || player.offerRejected}
+              !item.gives.length || youRejectedOffer}
             onClick={() => rejectClicked(item)}>reject</Button> 
           }