Fixed chat to fill space then scroll

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

client/src/Board.css

@@ -1,9 +1,10 @@
 .Board {
-  display: inline-block;
+  display: flex;
   position: absolute;
   width: 100%;
   overflow: hidden;
   height: 100%;
+  justify-content: right;
 }
 
 .Display {
@@ -67,45 +68,64 @@
   display: inline-flex;
   flex-direction: column;
   box-sizing: border-box;
-  width: 20em;
+  width: 40vw;
-  opacity: 0.7;
+  max-height: 100vh;
-  z-index: 100;
   overflow: hidden;
+  min-width: 20em;
+  z-index: 100;
+  padding: 0.5em;
 }
 
-.lobby {
+.Game > * {
-  width: calc(100vw - 1em);
+  /* for Firefox */
+  min-height: 0;
 }
 
 .Game > *:not(:last-child) {
   margin-bottom: 0.5em;
 }
 
+.lobby {
+  width: calc(100vw - 1em);
+}
+
 .Chat {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
   padding: 0.5em;
 }
 
 .Chat > * {
-  width: 100%;
+  /* for Firefox */
+  min-height: 0;
 }
 
-.Chat > :first-child {
+.Chat #ChatList {
-  max-height: 30vh;
+  flex: 1;
-  overflow-y: scroll;
+  overflow: auto;
+  scroll-behavior: smooth;
 } 
 
 .Players {
   padding: 0.5em;
+  user-select: none;
+}
+
+.Players .PlayerSelector {
+  border: 1px solid rgba(0,0,0,0);
+  border-radius: 0.5em;
+}
+
+.Players .PlayerSelector[data-selectable=true]:hover {
+  border-color: rgba(0,0,0,0.5);
+  cursor: pointer;
 }
 
 .PlayerName {
   padding: 0.5em;
 }
 
-#ChatList {
-  scroll-behavior: smooth;
-}
-
 .Players > * {
   width: 100%;
 }
@@ -166,13 +186,15 @@
 .Action {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-evenly;
   background-color: rgba(16, 16, 16, 0.25);
+  padding: 0.25em;
 }
 
-.Action Button {
+button {
   margin: 0.25em;
   background-color: white;
+  border: 1px solid black !important;
 }
 
 .Error {
@@ -191,12 +213,12 @@
 
 .Message {
   display: inline;
-  align-items: left;
   justify-content: left;
   background-color: rgba(224, 224, 224);
   text-align: left;
   font-size: 12pt;
   padding: 1em;
+  user-select: none;
 }
 
 .Message div {

client/src/Board.js

@@ -315,13 +315,19 @@ const Chat = ({ board, promoteGameState }) => {
   );
 }
 
-const Action = ({ board }) => {
+const StartButton = ({ board }) => {
   const startClick = (event) => {
     board.setGameState("game-order").then((state) => {
       board.game.state = state;
     });
   };
 
+  return (
+    <Button disabled={!board.game.color || board.game.active < 2} onClick={startClick}>Start game</Button>
+  );
+};
+
+const Action = ({ board }) => {
   const newBoardClick = (event) => {
     return board.shuffleBoard();
   };
@@ -336,7 +342,7 @@ const Action = ({ board }) => {
   return (
     <Paper className="Action">
       { board.game.state === 'lobby' && <>
-        <Button disabled={!board.game.color || board.game.active < 2} onClick={startClick}>Start game</Button>
+        <StartButton board={board}/>
         <Button disabled={!board.game.color} onClick={newBoardClick}>New board</Button>
         <Button disabled={board.game.color ? true : false} onClick={() => {board.setState({ pickName: true})}}>Change name</Button>    </> }
       { board.game.state === 'game-order' && 
@@ -410,10 +416,13 @@ const Players = ({ board }) => {
     if (board.game.state !== "lobby" && item.status === 'Not active') {
       continue;
     }
-    const name = getPlayerName(board.game.sessions, color);
+    const name = getPlayerName(board.game.sessions, color),
+      selectable = item.status === 'Not active' || board.game.color === color;
     item.lastActive = item.lastActive > Date.now() ? Date.now() : item.lastActive;
     players.push((
-      <ListItem key={`player-${color}`}>
+      <ListItem
+        data-selectable={selectable} 
+        onClick={() => { selectable && toggleSelected(color) }} className="PlayerSelector" key={`player-${color}`}>
         <ListItemAvatar>
           <Avatar className={classes[color]}>{color}</Avatar>
         </ListItemAvatar>
@@ -422,10 +431,8 @@ const Players = ({ board }) => {
             { item.status + ' ' }
             { item.status !== 'Not active' && <Moment fromNow date={item.lastActive}/>}
           </>)} />
-        { (item.status === 'Not active' || board.game.color === color) &&
+        { selectable &&
-          <Switch edge="end"
+          <Switch edge="end" checked={board.game.color === color}/>
-            checked={board.game.color === color}
-            onChange={() => toggleSelected(color)}/>
         }
       </ListItem>
     ));
@@ -1313,12 +1320,7 @@ class Board extends React.Component {
     const player = (this.game && this.game.color) ? this.game.players[this.game.color] : undefined,
       name = this.game ? this.game.name : "";
 
-    let message = [],
+    let message = <></>;
-      key = 0;
-      const color = 'B';
-    message=<></>;
-    //message=<>{message}<i>itallic</i></>;
-  //  this.setState({ message: message})
     if (this.state.pickName || !name) {
       message = <>{message}Enter the name you would like to be known by, then press&nbsp;<b>ENTER</b>&nbsp;or select &nbsp;<b>SET</b>.</>;
     } else {
@@ -1332,9 +1334,9 @@ class Board extends React.Component {
         }
         message = <>{message}You can chat with other players below.</>;
         if (this.game.active < 2) {
-          message = <>{message}Once there are two or more players, you can select&nbsp;<b>START GAME</b>.</>;
+          message = <>{message}Once there are two or more players, you can select <StartButton board={this}/>.</>;
         } else {
-          message = <>{message}There are enough players to start the game. Select&nbsp;<b>START GAME</b>&nbsp;when ready.</>;
+          message = <>{message}There are enough players to start the game. Select <StartButton board={this}/> when ready.</>;
         }
         break;
       case 'game-order':
@@ -1465,24 +1467,21 @@ class Board extends React.Component {
     return (
       <div className="Board" ref={el => this.el = el}>
         <canvas className="Display" ref={el => this.canvas = el}></canvas>
-         <div className="Cards" ref={el => this.cards = el}>
+        
-          { game && 
+        { game && <div className={'Game ' + game.state}>
-              <div className={'Game ' + game.state}>
+          <Paper className="Message">{ this.state.message }</Paper>
-              <Paper className="Message">{ this.state.message }</Paper>
+          {(this.state.pickName || !this.game.name) && <PlayerName board={this}/> }
-              {(this.state.pickName || !this.game.name) && <PlayerName board={this}/> }
+          {(!this.state.pickName && this.game.name) && <>
-              {(!this.state.pickName && this.game.name) && 
+            <Players board={this} promoteGameState={this.promoteGameState}/>
-                <>
+            <Chat board={this} promoteGameState={this.promoteGameState}/>
-                <Players board={this} promoteGameState={this.promoteGameState}/>
+            <Action board={this}/>
-                <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}>
-              { this.state.error && <Paper className="Error"><div>{this.state.error}</div></Paper> }
+       {
-            </div>
-          }
-        {
         game && game.state === "active" &&
-      <>
+        <>
          <div>In hand</div>
           <div className="Hand">
             <Resource type="wood" count={this.state.wood}/>

server/routes/games.js

@@ -97,34 +97,40 @@ for (let i = 0; i < 5; i++) {
 const games = {};
 
 const roll = (game, session) => {
-  let message;
+  let message, error;
 
   const player = session.player,
     name = session.name ? session.name : "Unnamed";
 
   switch (game.state) {
   case "lobby":
-    return `Rolling dice in the lobby is not allowed!`;
+    error = `Rolling dice in the lobby is not allowed!`;
 
   case "game-order":
     if (player.order) {
-      return `Player ${name} already rolled for order.`;
+      error = `Player ${name} already rolled for order.`;
+      break;
     }
+
     game.dice = [ Math.ceil(Math.random() * 6) ];
     player.order = game.dice[0];
     message = `${name} rolled ${game.dice[0]} for play order.`;
-    game.chat.push({ date: Date.now(),  message: message });
     break;
 
   case "active":
     game.dice = [ Math.ceil(Math.random() * 6), Math.ceil(Math.random() * 6) ];
     message = `${name} rolled ${game.dice[0] + game.dice[1]}.`;
-    game.chat.push({ date: Date.now(),  message: message });
+    break;
-    return;
 
   default:
-    return `Invalid game state (${game.state}) in roll.`;
+    error = `Invalid game state (${game.state}) in roll.`;
+    break;
   }
+
+  if (!error && message) {
+    game.chat.push({ from: session.color, date: Date.now(),  message: message });
+  }
+  return error;
 };
 
 const getPlayer = (game, color) => {