Continued shrinking real estate to fit more on phones

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

client/src/Board.css

@@ -71,7 +71,8 @@
   width: 40vw;
   max-height: 100vh;
   overflow: hidden;
-  min-width: 20em;
+  min-width: 100vw;
+  max-width: 40vw;
   z-index: 100;
   padding: 0.5em;
   opacity: 0.7;
@@ -87,7 +88,7 @@
 }
 
 .lobby {
-  width: calc(100vw - 1em);
+  width: 100vw;
 }
 
 .Chat {
@@ -102,10 +103,11 @@
   min-height: 0;
 }
 
-.Chat #ChatList {
+#ChatList {
   flex: 1;
   overflow: auto;
   scroll-behavior: smooth;
+  align-items: flex-start;
 } 
 
 #ChatList .MuiListItem-gutters {
@@ -129,7 +131,8 @@
 #ChatList .PlayerColor {
   width: 1em;
   height: 1em;
-  padding: 0px;
+  padding: 0;
+  margin-top: 4px;
 }
 
 .Players {
@@ -137,22 +140,44 @@
   user-select: none;
 }
 
+.PlayerSelector .PlayerColor {
+  width: 1em;
+  height: 1em;
+}
+
 .PlayerSelector {
-  display: flex;
+  display: inline-flex;
+  flex-wrap: wrap;
   flex-direction: row;
   justify-content: space-between;
 }
 
+.PlayerSelector.MuiList-padding {
+  padding: 0;
+}
+
 .PlayerSelector .PlayerEntry {
+  flex: 1 1 0px;
   align-items: center;
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
-  width: 50%;
+  min-width: 10em;
+}
+
+.PlayerSelector .MuiTypography-body1 {
+  font-size: 0.8rem;
+  white-space: nowrap;
+}
+
+.PlayerSelector .MuiTypography-body2 {
+  font-size: 0.7rem;
+  white-space: nowrap;
 }
 
 .Players .PlayerEntry {
   border: 1px solid rgba(0,0,0,0);
   border-radius: 0.5em;
+  min-width: 10em;
 }
 
 .Players .PlayerEntry[data-selectable=true]:hover {
@@ -258,6 +283,8 @@ button {
   text-align: left;
   font-size: 12pt;
   padding: 1em;
+  margin: 1em;
+  z-index: 10000;
 }
 
 .Message {
@@ -266,7 +293,7 @@ button {
   background-color: rgba(224, 224, 224);
   text-align: left;
   font-size: 12pt;
-  padding: 1em;
+  padding: 0.5em;
   user-select: none;
 }
 

client/src/Board.js

@@ -9,7 +9,7 @@ import ListItem from '@material-ui/core/ListItem';
 import ListItemAvatar from  '@material-ui/core/ListItemAvatar';
 import ListItemText from '@material-ui/core/ListItemText';
 import { makeStyles } from '@material-ui/core/styles';
-import { deepOrange, lightBlue, red, grey } from '@material-ui/core/colors';
+import { orange, deepOrange, lightBlue, red, grey } from '@material-ui/core/colors';
 import Avatar from '@material-ui/core/Avatar';
 import Moment from 'react-moment';
 //import moment from 'moment';
@@ -57,8 +57,8 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: red[500],
   },
   O: {
-    color: theme.palette.getContrastText(deepOrange[500]),
-    backgroundColor: deepOrange[500],
+    color: theme.palette.getContrastText(orange[500]),
+    backgroundColor: orange[500],
   },
   W: {
     color: theme.palette.getContrastText(grey[500]),
@@ -73,7 +73,7 @@ const useStyles = makeStyles((theme) => ({
 const PlayerColor = ({ color }) => {
   const classes = useStyles();
   return (
-    <Avatar className={['PlayerColor', classes[color]]}/>
+    <Avatar className={['PlayerColor', classes[color]].join(' ')}/>
   );
 };
 
@@ -425,13 +425,14 @@ const getPlayerName = (sessions, color) => {
  * player's active item in the game */
 const Players = ({ board }) => {
   const toggleSelected = (key) => {
+    console.log('toggle');
     board.setSelected(board.game.color === key ? "" : key);
   }
 
   const players = [];
   for (let color in board.game.players) {
-    const item = board.game.players[color];
-    if (board.game.state !== "lobby" && item.status === 'Not active') {
+    const item = board.game.players[color], inLobby = board.game.state === 'lobby';
+    if (!inLobby && item.status === 'Not active') {
       continue;
     }
     const name = getPlayerName(board.game.sessions, color),
@@ -442,15 +443,16 @@ const Players = ({ board }) => {
         data-selectable={selectable}
         data-selected={board.game.color === color}
         className="PlayerEntry"
+        onClick={() => { inLobby && selectable && toggleSelected(color) }} 
         key={`player-${color}`}>
-        <PlayerColor onClick={() => { selectable && toggleSelected(color) }} color={color}/>
-        <ListItemText onClick={() => { selectable && toggleSelected(color) }}primary={toggleText} secondary={(
+        <PlayerColor color={color}/>
+        <ListItemText primary={toggleText} secondary={(
         <>
           { item.status + ' ' }
           { item.status !== 'Not active' && <Moment fromNow date={item.lastActive > Date.now() ? Date.now() : item.lastActive}/>}
         </>)} />
-        { board.game.state !== 'lobby' && board.game.color === color && 
-          <Button onClick={() => toggleSelected(color)}>exit to lobby</Button>
+        { !inLobby && board.game.color === color && 
+          <Button onClick={() => toggleSelected(color)}>Quit</Button>
         }
       </div>
     ));
@@ -1487,12 +1489,10 @@ class Board extends React.Component {
             <Chat board={this} promoteGameState={this.promoteGameState}/>
             <Action board={this}/>
           </> }
-          { this.state.error && <Paper className="Error"><div>{this.state.error}</div></Paper> }
         </div> }
+
         <div className="Cards" ref={el => this.cards = el}>
-       {
-        game && game.state === "active" &&
-        <>
+          { game && game.state === "active" && <>
             <div>In hand</div>
             <div className="Hand">
               <Resource type="wood" count={this.state.wood}/>
@@ -1535,6 +1535,9 @@ class Board extends React.Component {
             </div>
           </> }
         </div>
+
+        { this.state.error && <Paper className="Error"><div>{this.state.error}</div></Paper> }
+
       </div>
     );
   }