Refactoring into stand alone files

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

client/src/Common.js

@@ -0,0 +1,17 @@
+
+const getPlayerName = (sessions, color) => {
+  for (let i = 0; i < sessions.length; i++) {
+    const session = sessions[i];
+    if (session.color === color) {
+      return session.name;
+    }
+  }
+  return null;
+}
+
+const base = process.env.PUBLIC_URL;
+   
+const assetsPath = `${base}/assets`;
+const gamesPath = `${base}/games`;
+
+export { base, assetsPath, gamesPath, getPlayerName };

client/src/Dice.css

@@ -0,0 +1,5 @@
+.Dice {
+  width: 1rem;
+  height: 1rem;
+  background-color: black;
+}

client/src/Dice.js

@@ -0,0 +1,23 @@
+import React from "react";
+import "./Dice.css";
+import { assetsPath } from './Common.js';
+
+const Dice = ({ pips }) => {
+  let name;
+  switch (pips.toString()) {
+  case '1': name = 'one'; break;
+  case '2': name = 'two'; break;
+  case '3': name = 'three'; break;
+  case '4': name = 'four'; break;
+  case '5': name = 'five'; break;
+  default:
+  case '6': name = 'six'; break;
+  }
+  return (
+    <img alt={name} className="Dice" src={`${assetsPath}/dice-six-faces-${name}.svg`}/>
+  );
+};
+
+export default Dice;
+
+

client/src/PlayerColor.css

@@ -0,0 +1,20 @@
+
+.PlayerColor {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 1em;
+  height: 1em;
+  padding: 0.125em;
+  margin: 0 0.25em;
+  border-radius: 0.625em;
+  border-width: 1px;
+  border-style: solid;
+  text-align: center;
+}
+
+.PlayerColor > div {
+  font-weight: bold;
+  overflow: hidden;
+  font-size: 0.75rem;
+}

client/src/PlayerColor.js

@@ -0,0 +1,42 @@
+
+import React from "react";
+import Avatar from '@material-ui/core/Avatar';
+import { makeStyles } from '@material-ui/core/styles';
+import { orange,lightBlue, red, grey } from '@material-ui/core/colors';
+
+import "./PlayerColor.css";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+    '& > *': {
+      margin: theme.spacing(1),
+    },
+  },
+  R: {
+    color: theme.palette.getContrastText(red[500]),
+    backgroundColor: red[500],
+  },
+  O: {
+    color: theme.palette.getContrastText(orange[500]),
+    backgroundColor: orange[500],
+  },
+  W: {
+    color: theme.palette.getContrastText(grey[500]),
+    backgroundColor: grey[500],
+  },
+  B: {
+    color: theme.palette.getContrastText(lightBlue[500]),
+    backgroundColor: lightBlue[500],
+  },
+}));
+
+
+const PlayerColor = ({ color }) => {
+  const classes = useStyles();
+  return (
+    <Avatar className={['PlayerColor', classes[color]].join(' ')}/>
+  );
+};
+
+export default PlayerColor;

client/src/Table.css

@@ -141,26 +141,6 @@
   position: absolute;
 }
 
-.PlayerColor {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  width: 1em;
-  height: 1em;
-  padding: 0.125em;
-  margin: 0 0.25em;
-  border-radius: 0.625em;
-  border-width: 1px;
-  border-style: solid;
-  text-align: center;
-}
-
-.PlayerColor > div {
-  font-weight: bold;
-  overflow: hidden;
-  font-size: 0.75rem;
-}
-
 .Cards {
   display: inline-block;
   position: absolute;
@@ -222,12 +202,6 @@
   top: -1em;
 }
 
-.Dice {
-  width: 1rem;
-  height: 1rem;
-  background-color: black;
-}
-
 .Game {
   display: flex;
   position: absolute;

client/src/Table.js

@@ -7,11 +7,12 @@ import TextField from '@material-ui/core/TextField';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
-import { makeStyles } from '@material-ui/core/styles';
-import { orange,lightBlue, red, grey } from '@material-ui/core/colors';
-import Avatar from '@material-ui/core/Avatar';
 import Moment from 'react-moment';
-import Board from './Board.js'
+import Board from './Board.js';
+import Trade from './Trade.js';
+import { assetsPath, base, getPlayerName, gamesPath } from './Common.js';
+import PlayerColor from './PlayerColor.js';
+import Dice from './Dice.js';
 
 //import moment from 'moment';
 
@@ -39,59 +40,6 @@ function withRouter(Component) {
   return ComponentWithRouterProp;
 }
 /* end of withRouter polyfill */
-
-const base = process.env.PUBLIC_URL;
-   
-const assetsPath = `${base}/assets`;
-const gamesPath = `${base}/games`;
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    '& > *': {
-      margin: theme.spacing(1),
-    },
-  },
-  R: {
-    color: theme.palette.getContrastText(red[500]),
-    backgroundColor: red[500],
-  },
-  O: {
-    color: theme.palette.getContrastText(orange[500]),
-    backgroundColor: orange[500],
-  },
-  W: {
-    color: theme.palette.getContrastText(grey[500]),
-    backgroundColor: grey[500],
-  },
-  B: {
-    color: theme.palette.getContrastText(lightBlue[500]),
-    backgroundColor: lightBlue[500],
-  },
-}));
-
-const Dice = ({ pips }) => {
-  let name;
-  switch (pips.toString()) {
-  case '1': name = 'one'; break;
-  case '2': name = 'two'; break;
-  case '3': name = 'three'; break;
-  case '4': name = 'four'; break;
-  case '5': name = 'five'; break;
-  default:
-  case '6': name = 'six'; break;
-  }
-  return (
-    <img alt={name} className="Dice" src={`${assetsPath}/dice-six-faces-${name}.svg`}/>
-  );
-}
-
-const PlayerColor = ({ color }) => {
-  const classes = useStyles();
-  return (
-    <Avatar className={['PlayerColor', classes[color]].join(' ')}/>
-  );
-};
   
 const Placard = ({table, type, active}) => {
   const dismissClicked = (event) => {
@@ -515,16 +463,6 @@ const PlayerName = ({table}) => {
   );
 };
 
-const getPlayerName = (sessions, color) => {
-  for (let i = 0; i < sessions.length; i++) {
-    const session = sessions[i];
-    if (session.color === color) {
-      return session.name;
-    }
-  }
-  return null;
-}
-
 /* This needs to take in a mechanism to declare the
  * player's active item in the game */
 const Players = ({ table }) => {
@@ -1032,7 +970,7 @@ class Table extends React.Component {
     case "O": color = "orange"; break;
     case "R": color = "red"; break;
     case "B": color = "blue"; break;
-    case "W": color = "white"; break;
+    default: case "W": color = "white"; break;
     }
     let development;
     if (player) {
@@ -1040,7 +978,7 @@ class Table extends React.Component {
       game.player.development.forEach(item => (item.type in stacks) ? stacks[item.type].push(item.card) : stacks[item.type] = [item.card]);
       development = [];
       for (let type in stacks) {
-        const cards = stacks[type].map(card => <Development table={this} type={`${type}-${card}`}/>);
+        const cards = stacks[type].map(card => <Development table={this} key={`${type}-${card}`} type={`${type}-${card}`}/>);
         development.push(<div key={type} className="Stack">{ cards }</div>);
       }
     } else {
@@ -1084,9 +1022,14 @@ class Table extends React.Component {
           <GameOrder table={this}/>
         }
 
+        { game && game.state === 'normal' &&
+          game.turn.actions && game.turn.actions.indexOf('trade') !== -1 &&
+          <Trade table={this}/>
+        }
+
         { game && game.state === 'normal' &&
           game.turn && 
-          game.turn.color == game.color &&
+          game.turn.color === game.color &&
           game.turn.actions && game.turn.actions.indexOf('steal-resource') !== -1 &&
           <SelectPlayer table={this} players={game.turn.limits.players}/>
         }

client/src/Trade.css

@@ -0,0 +1,47 @@
+.Trade {
+  display: flex;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0,0,0,0.5);
+  z-index: 1000;
+}
+
+.Trade .Title {
+  align-self: center;
+  padding: 2px;
+  font-weight: bold;
+}
+
+.Trade .PlayerList {
+  padding: 0.5em;
+  background-color:rgba(224, 224, 224);
+  margin: 0.5em 0;
+}
+.Trade > * {
+  width: 20em;
+  display: inline-flex;
+  padding: 0.5em;
+  flex-direction: column;
+}
+
+.Trade .PlayerColor {
+  width: 1em;
+  height: 1em;
+}
+
+.Trade .TradePlayer {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  align-items: center;
+  padding: 2px 0;
+}
+
+.TradePlayer > * {
+  margin: 0 0.25em;
+}

client/src/Trade.js

@@ -0,0 +1,66 @@
+import React from "react";
+import "./Trade.css";
+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;
+  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;
+      }
+      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;
+  });
+
+  players = players.map(item => 
+    <div className="TradePlayer" key={`player-${item.color}`}>
+      <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>
+  );
+
+  return (
+    <div className="Trade">
+      { table.game && <Paper>
+        <div className="Title">Game Order</div>
+        <div className="PlayerList">
+          { players }
+        </div>
+        <Button disabled={hasRolled} onClick={rollClick}>Roll Dice</Button>
+      </Paper> }
+    </div>
+  );
+};
+
+export default Trade;