Trading now lists bank offers

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

client/src/Table.js

@@ -408,7 +408,8 @@ const Action = ({ table }) => {
   const inLobby = table.game.state === 'lobby',
     player = table.game ? table.game.player : undefined,
     hasRolled = (table.game && table.game.turn && table.game.turn.roll) ? true : false,
-    isTurn = (table.game && table.game.turn && table.game.turn.color === table.game.color) ? true : false;
+    isTurn = (table.game && table.game.turn && table.game.turn.color === table.game.color) ? true : false,
+    robberActions = (table.game && table.game.turn && table.game.turn.roll === 7 && !table.game.turn.robberDone);
 
   return (
     <Paper className="Action">
@@ -417,13 +418,13 @@ const Action = ({ table }) => {
         <Button disabled={table.game.color ? false : true} onClick={newTableClick}>New table</Button>
         <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} onClick={tradeClick}>Trade</Button>
-        <Button disabled={!isTurn || !hasRolled} onClick={buildClicked}>Build</Button>
+        <Button disabled={robberActions || !isTurn || hasRolled} onClick={rollClick}>Roll Dice</Button>
+        <Button disabled={robberActions || !isTurn || !hasRolled} onClick={tradeClick}>Trade</Button>
+        <Button disabled={robberActions || !isTurn || !hasRolled} onClick={buildClicked}>Build</Button>
         { table.game.turn.roll === 7 && player && player.mustDiscard > 0 &&
           <Button onClick={discardClick}>Discard</Button>
         }
-        <Button disabled={!isTurn || !hasRolled} onClick={passClick}>Done</Button>
+        <Button disabled={robberActions || !isTurn || !hasRolled} onClick={passClick}>Done</Button>
       </> }
       { !inLobby &&
         <Button onClick={quitClick}>Quit</Button>
@@ -613,7 +614,6 @@ class Table extends React.Component {
     return this.sendAction('chat', undefined, {message: message});
   }
 
-
   setPlayerName(name) {
     return this.sendAction('player-name', name)
     .then(() => {

client/src/Trade.css

@@ -23,7 +23,7 @@
   margin: 0.5em 0;
 }
 .Trade > * {
-  width: 20em;
+  min-width: 40em;
   display: inline-flex;
   padding: 0.5em;
   flex-direction: column;
@@ -52,7 +52,15 @@
   flex-direction: row;
   align-items: center;
   flex: 1;
-  justify-content: space-between;
+}
+
+.TradeLine > div {
+  display: flex;
+  flex-grow: 1;
+}
+
+.TradeLine > div > div {
+  margin-left: 0.25em;
 }
 
 .TradeLine *:last-child {

client/src/Trade.js

@@ -31,17 +31,29 @@ const Trade = ({table}) => {
 
   if (isTurn && table.game.player && table.game.player.banks) {
     table.game.player.banks.forEach(bank => {
-      players.push({ name: `Bank ${bank}`, color: undefined, gives: '1 *', gets: '2 wheat'});
+      const type = (bank === 'bank') ? 'of a kind' : bank,
+        count = (bank === 'bank') ? 3 : 2;
+      players.push({ name: `Bank`, color: undefined, gives: `1 of anything`, gets: `${count} ${type}`});
     })
 
-    players.push({ name: `Bank`, color: undefined, gives: '1 *', gets: '3 *'})
+    players.push({ name: `Bank`, color: undefined, gives: '1 of anything', gets: '4 of a kind'})
   }
 
-  players = players.map(item => 
-    <div className="TradePlayer" key={`player-${item.name}`}>
+  players = players.map((item, index) => 
+    <div className="TradePlayer" key={`player-${item.name}-${index}`}>
       <PlayerColor color={item.color}/>
       <div>{item.name}</div>
-      <div className='TradeLine'>will take <div>{item.gets}</div> for <div>{item.gives}</div>.<Button>accept</Button></div>
+      <div className='TradeLine'>
+        { item.gets && item.gives && 
+          <div>will take {item.gets} for {item.gives}.
+          </div> 
+        }
+        { (!item.gets || !item.gives) && 
+          <div>has not submitted a trade offer.
+          </div> 
+        }
+        <Button>accept</Button>
+      </div>
     </div>
   );
 

server/routes/games.js

@@ -81,12 +81,12 @@ const assetData = {
     { roll:  7, pips: 0 }, /* Robber is at the end or indexing gets off */
   ],
   borders: [
-    { left: "sheep", right: "bank" },
-    { center: "sheep" },
-    { left: "wheat", right: "bank" },
-    { center: "wood" },
-    { left: "sheep", right: "bank" },
-    { center: "bank" }
+    [ "bank",    undefined, "sheep"   ],
+    [ undefined, "bank",   undefined  ],
+    [ "bank",    undefined, "brick"   ],
+    [ undefined, "wood",    undefined ],
+    [ "bank",    undefined, "wheat"   ],
+    [ undefined, "stone",   undefined ]
   ],
   developmentCards: [
   ]
@@ -362,7 +362,7 @@ const processRoll = (game, dice) => {
   addChatMessage(game, session, `${session.name} rolled ${game.dice[0]}, ${game.dice[1]}.`);
   game.turn.roll = game.dice[0] + game.dice[1];
   if (game.turn.roll === 7) {
-    addChatMessage(game, null, `ROBBER! ROBBER! ROBBER!`);
+    addChatMessage(game, null, `ROBBER! Robber Roberson!`);
     game.turn.robberDone = false;
     delete game.turn.placedRobber;
     for (let id in game.sessions) {
@@ -1217,8 +1217,15 @@ router.put("/:id/:action/:value?", async (req, res) => {
       corner.type = 'settlement';
       if (layout.corners[index].banks.length) {
         layout.corners[index].banks.forEach(bank => {
-          if (player.banks.indexOf(bank) === -1) {
-            player.banks.push(bank);
+          const border = game.borderOrder[Math.floor(bank / 3)],
+            type = game.borders[border][bank % 3];
+          console.log(`Bank ${bank} = ${type}`);
+          if (!type) {
+            console.log(`Bank ${bank}`)
+            return;
+          }
+          if (player.banks.indexOf(type) === -1) {
+            player.banks.push(type);
           }
         });
       }
@@ -1233,11 +1240,20 @@ router.put("/:id/:action/:value?", async (req, res) => {
       corner.type = 'settlement';
       if (layout.corners[index].banks.length) {
         layout.corners[index].banks.forEach(bank => {
-          if (player.banks.indexOf(bank) === -1) {
-            player.banks.push(bank);
+          console.log(game.borderOrder);
+          console.log(game.borders);
+          const border = game.borderOrder[Math.floor(bank / 3)],
+            type = game.borders[border][bank % 3];
+          console.log(`Bank ${bank} = ${type}`);
+          if (!type) {
+            return;
+          }
+          if (player.banks.indexOf(type) === -1) {
+            player.banks.push(type);
           }
         });
       }
+      player.maritime = player.banks.map(bank => game.borders[Math.floor(bank / 3) + bank % 3]);
       game.turn.actions = ['place-road'];
       game.turn.limits = { roads: layout.corners[index].roads }; /* road placement is limited to be near this corner */
       addChatMessage(game, session, `Placed a settlement. Next, they need to place a road.`);
@@ -1759,7 +1775,7 @@ const shuffleBoard = (game) => {
   }
   shuffle(seq);
   console.log('TODO: Map borderOrder to an array of the border values; each border has 3 slots.');
-  consoel.log('This is then used in generating "banks" to determine maritime trading values for each player.');
+  console.log('This is then used in generating "banks" to determine maritime trading values for each player.');
   game.borderOrder = seq.slice();
   for (let i = 6; i < 19; i++) {
     seq.push(i);