Trading dialog starting to come together

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

client/src/Table.js

@@ -278,7 +278,7 @@ const GameOrder = ({table}) => {
   const rollClick = (event) => {
     table.throwDice();
   }
-
+  
   if (!table.game) {
     return (<></>);
   }
@@ -384,6 +384,10 @@ const Action = ({ table }) => {
     return table.shuffleTable();
   };
 
+  const tradeClick = (event) => {
+    table.startTrading();
+  }
+
   const rollClick = (event) => {
     table.throwDice();
   }
@@ -414,7 +418,7 @@ const Action = ({ table }) => {
         <Button disabled={table.game.color ? true : false} onClick={() => {table.setState({ pickName: true})}}>Change name</Button>    </> }
       { table.game.state === 'normal' && <>
         <Button disabled={!isTurn || hasRolled} onClick={rollClick}>Roll Dice</Button>
-        <Button disabled={!isTurn || !hasRolled}>Trade</Button>
+        <Button disabled={!isTurn || !hasRolled} onClick={tradeClick}>Trade</Button>
         <Button disabled={!isTurn || !hasRolled} onClick={buildClicked}>Build</Button>
         { table.game.turn.roll === 7 && player && player.mustDiscard > 0 &&
           <Button onClick={discardClick}>Discard</Button>
@@ -535,6 +539,9 @@ class Table extends React.Component {
     this.rollDice = this.rollDice.bind(this);
     this.setGameState = this.setGameState.bind(this);
     this.shuffleTable = this.shuffleTable.bind(this);
+    this.startTrading = this.startTrading.bind(this);
+    this.acceptTrade = this.acceptTrade.bind(this);
+    this.cancelTrading = this.cancelTrading.bind(this);
     this.discard = this.discard.bind(this);
     this.passTurn = this.passTurn.bind(this);
     this.updateGame = this.updateGame.bind(this);
@@ -621,6 +628,18 @@ class Table extends React.Component {
     });
   }
 
+  startTrading() {
+    return this.sendAction('trade');
+  }
+
+  cancelTrading() {
+    return this.sendAction('trade', 'cancel');
+  }
+
+  acceptTrade(trade) {
+    return this.sendAction('trade', 'accept', trade);
+  }
+
   discard(resources) {
     return this.sendAction('discard', undefined, resources);
   }

client/src/Trade.css

@@ -30,11 +30,12 @@
 }
 
 .Trade .PlayerColor {
-  width: 1em;
-  height: 1em;
+  width: 0.5em;
+  height: 0.5em;
+  margin: 0 0.25em 0 0;
 }
 
-.Trade .TradePlayer {
+.TradePlayer {
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -43,5 +44,17 @@
 }
 
 .TradePlayer > * {
-  margin: 0 0.25em;
+  margin-right: 0.25em;
 }
+
+.TradeLine {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex: 1;
+  justify-content: space-between;
+}
+
+.TradeLine *:last-child {
+  align-self: flex-end;
+}

client/src/Trade.js

@@ -4,60 +4,57 @@ import { getPlayerName } from './Common.js';
 import PlayerColor from './PlayerColor.js';
 import Paper from '@material-ui/core/Paper';
 import Button from '@material-ui/core/Button';
-import Dice from './Dice.js';
 
 const Trade = ({table}) => {
-
-  const rollClick = (event) => {
-    table.throwDice();
-  }
-
   if (!table.game) {
     return (<></>);
   }
 
-  let players = [], hasRolled = true;
+  const isTurn = (table.game && table.game.turn && table.game.turn.color === table.game.color) ? true : false;
+
+  const cancelClicked = (event) => {
+    table.cancelTrading();
+  }
+
+  let players = [];
   for (let color in table.game.players) {
     const item = table.game.players[color],
       name = getPlayerName(table.game.sessions, color);
-    if (color === table.game.color) {
-      hasRolled = item.orderRoll !== 0;
-    }
-    if (name) {
-      if (!item.orderRoll) {
-        item.orderRoll = 0;
-      }
+    if (name && table.game.name !== name) {
       players.push({ name: name, color: color, ...item });
     }
   }
 
   players.sort((A, B) => {
-    if (A.order === B.order) {
-      if (A.orderRoll === B.orderRoll) {
-        return A.name.localeCompare(B.name);
-      }    
-      return B.orderRoll - A.orderRoll;
-    }
-    return B.order - A.order;
+    return A.name.localeCompare(B.name);
   });
 
+  if (isTurn && table.game.player && table.game.player.banks) {
+    table.game.player.banks.forEach(bank => {
+      players.push({ name: `Bank ${bank}`, color: undefined, gives: '*', gets: '2 wheat'});
+    })
+  }
+
   players = players.map(item => 
-    <div className="TradePlayer" key={`player-${item.color}`}>
+    <div className="TradePlayer" key={`player-${item.name}`}>
       <PlayerColor color={item.color}/>
       <div>{item.name}</div>
-      { item.orderRoll !== 0 && <>rolled <Dice pips={item.orderRoll}/>.</> }
-      { item.orderRoll === 0 && <>has not rolled yet. {item.orderStatus}</>}
+      <div className='TradeLine'>wants: <div>{item.gets}</div> for: <div>{item.gives}</div><Button>accept</Button></div>
     </div>
   );
 
   return (
     <div className="Trade">
       { table.game && <Paper>
-        <div className="Title">Game Order</div>
+        <div className="Title">Trading negotiations {isTurn ? '' : `with ${table.game.turn.name}`}</div>
         <div className="PlayerList">
           { players }
         </div>
-        <Button disabled={hasRolled} onClick={rollClick}>Roll Dice</Button>
+        <div className='TradeLine'><div>you want</div><div>you give</div></div>
+        <div>
+          <Button>Offer</Button>
+          { isTurn && <Button onClick={cancelClicked}>cancel</Button> }
+        </div>
       </Paper> }
     </div>
   );

server/routes/games.js

@@ -948,6 +948,46 @@ router.put("/:id/:action/:value?", async (req, res) => {
   let corners, corner;
 
   switch (action) {
+  case "trade":
+    if (game.state !== "normal") {
+      error = `Game not in correct state to begin trading.`;
+      break;
+    }
+
+    if (!game.turn.actions || game.turn.actions.indexOf('trade') === -1) {
+      /* Only the active player can begin trading */
+      if (game.turn.name !== name) {
+        error = `You cannot start trading negotiations when it is not your turn.`
+        break;
+      }
+      game.turn.actions = [ 'trade' ];
+      game.turn.limits = {};
+      addChatMessage(game, session, `${name} has requested to begin trading negotiations.`);
+      break;
+    }
+
+    /* Only the active player can cancel trading */
+    if (value === 'cancel') {
+      /* TODO: Perhaps 'cancel' is how a player can remove an offer... */
+      if (game.turn.name !== name) {
+        error = `Only the active player can cancel trading negotiations.`;
+        break;
+      }
+      game.turn.actions = [];
+      game.turn.limits = {};
+      addChatMessage(game, session, `${name} has cancelled trading negotiations.`);
+      break;
+    }
+
+    addChatMessage(game, session, `Trading functionality not implmented beyond this.`);
+
+    /* Any player can make an offer */
+
+    /* Only the active player can accept an offer */
+
+
+    break;
+
   case "roll":
     error = roll(game, session);
     break;