In-play tweaks

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

client/src/Board.css

@@ -155,10 +155,18 @@
 }
 
 .Roberta .Pip-Shape {
+  top: -2em;
+  left: -2em;
+  clip-path: circle(50%);
+  transform: scale(0.45);
   background-image:url("./assets/woman-robber.png"); 
 }
 
 .Robert .Pip-Shape {
+  top: -2em;
+  left: -2em;
+  clip-path: circle(50%);
+  transform: scale(0.45);
   background-image:url("./assets/man-robber.png"); 
 }
 

client/src/Table.css

@@ -10,7 +10,7 @@
 
 .BottomBar {
   display: flex;
-  margin-right: 40vw;
+  margin-right: 30vw;
   justify-content: space-between;
   align-items: flex-end;
 }
@@ -18,13 +18,14 @@
 .WaitingForPlayer {
   display: flex;
   position: absolute;
-  left: 0;
-  right: 0;/*40vw;*/
-  bottom: 0;
-  top: 0;
+  left: 0.5em;
+/*  right: 30vw;*/
+/*  bottom: 0;*/
+  opacity: 0.8;
+  top: 0.5em;
   justify-content: center;
   align-items: center;
-  background: rgba(0,0,0,0.5);
+  /*background: rgba(0,0,0,0.5);*/
   z-index: 0;/*1000*/
 }
 
@@ -208,7 +209,7 @@
   box-sizing: border-box;
   max-height: 100vh;
   overflow: hidden;
-  max-width: 40vw;
+  max-width: 30vw;
   z-index: 100;
   padding: 0.5em;
   right: 0px;
@@ -315,7 +316,7 @@
 
 .PlayerSelector .MuiTypography-body1 {
   font-size: 0.8rem;
-  white-space: nowrap;
+/*  white-space: nowrap;*/
 }
 
 .PlayerSelector .MuiTypography-body2 {

client/src/Table.js

@@ -219,7 +219,7 @@ const Chat = ({ table }) => {
   }
 
   const name = table.game ? table.game.name : "Why no game?";
-
+  const startTime = table.game ? table.game.startTime : Date.now();
   return (
     <Paper className="Chat">
       <List className="ChatList" id="ChatList" onScroll={chatScroll}>
@@ -229,7 +229,7 @@ const Chat = ({ table }) => {
         disabled={!name}
         onChange={chatInput}
         onKeyPress={chatKeyPress}
-        label={(<Moment format="h:mm:ss" interval={1000}/>)} variant="outlined"/>
+        label={(<Moment format="h:mm:ss">{Date.now()-startTime}</Moment>)} variant="outlined"/>
     </Paper>
   );
 }
@@ -411,9 +411,9 @@ const Action = ({ table }) => {
         }
         <Button disabled={robberActions || !isTurn || !hasRolled} onClick={passClick}>Done</Button>
       </> }
-      { !inLobby &&
+      { /* inLobby &&
         <Button onClick={quitClick}>Quit</Button>
-      }
+      */ }
     </Paper>
   );
 }

client/src/Trade.js

@@ -33,15 +33,17 @@ const ResourceCounter = ({type, count, onCount, max}) => {
         display: 'flex',
         justifyContent: 'space-around',
         width: '100%',
-        alignItems: 'center'
+        alignItems: 'center',
+        flexDirection: 'column'
         }}>
+          <div style={{userSelect: 'none'}}>{count}</div>
+          <div>
             <Button style={{
                 flexShrink: 1, 
                 minWidth: 0
               }} 
               disabled={count>=max}
               onClick={plusClicked}>+</Button>
-          <div style={{userSelect: 'none'}}>{count}</div>
             <Button  style={{
                 flexShrink: 1, 
                 minWidth: 0
@@ -50,6 +52,7 @@ const ResourceCounter = ({type, count, onCount, max}) => {
               onClick={minusClicked}>-</Button>
           </div>
       </div>      
+    </div>
   );
 };