Moved things around to work on smaller screens

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

client/src/Board.css

@@ -1,10 +1,13 @@
 .Board {
   display: flex;
   align-self: stretch;
-  position: relative;
+  position: absolute;
   flex: 1;
   align-items: stretch;
-  margin-right: 30rem;
+  right: 30rem;
+  left: 0;
+  top: 0;
+  bottom: 11rem;
 }
 
 /* Offset 'BorderBox' such that 0,0 is the center

client/src/BoardPieces.css

@@ -6,7 +6,6 @@
   height: 6rem;
   right: 30rem;
   bottom: 11rem; /* 1rem over top of Resource cards in hand */
-  width: 20rem;
   z-index: 1000;
   padding-bottom: 0.5rem;
   margin-bottom: 0.5rem;

client/src/PlayersStatus.css

@@ -14,10 +14,16 @@
   bottom: 11rem; /* 1rem over top of Resource cards in hand */
   align-items: flex-end;
   pointer-events: all;
+  left: auto;
 }
 
 .PlayersStatus .Player {
   margin-bottom: 0.5rem;
+  border-bottom: 1px solid black;
+}
+
+.PlayersStatus.ActivePlayer .Player {
+  border-bottom: none;
 }
 
 .PlayersStatus .Player .Who {
@@ -26,10 +32,24 @@
   align-items: center;
 }
 
+.PlayersStatus.ActivePlayer .Who {
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 0.5rem;
+}
+
+.PlayerStatus.ActivePlayer .Resource {
+  margin: 0.5rem 0 0 0.5rem;
+}
+
 .PlayersStatus .What {
-  margin-left: 0.25rem;
-  margin-top: 0.25rem;
-  margin-right: 0.25rem;
+  margin: 0.25rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.PlayersStatus.ActivePlayer .What {
+  align-items: flex-end;
 }
 
 .PlayersStatus .PlayerColor {
@@ -39,7 +59,7 @@
 
 .PlayersStatus .Shrunken {
   position: relative;
-  height: 5.75rem;
+  height: 4.75rem;
   display: flex;
 }
 
@@ -49,11 +69,6 @@
   display: flex;
 }
 
-.PlayersStatus .Shrunken {
-  position: relative;
-  height: 5.75rem;
-  display: flex;
-}
 
 .PlayersStatus .BoardPieces {
   align-items: flex-end;
@@ -78,11 +93,33 @@
   width: 2.1rem;
   background-size: contain;
   pointer-events: none;
-  margin: 0 0.125rem;
+  margin: 0.75rem 0.5rem 0 0;
   border-radius: 2px;
   filter: brightness(150%);
 }
 
+.PlayersStatus .Has {
+  display: flex;
+  align-items: flex-end;
+}
+
+.PlayersStatus .Placard {
+  /*
+  width: 9.4em;
+  height: 11.44em;
+  */
+  width: 3rem;
+  height: 3.64rem;
+  background-size: 108%;
+  box-sizing: border-box;
+  border-radius: 2px;
+  border: 1px solid #fff;
+  margin: 0 0.25rem 0 0;
+}
+
+.PlayersStatus.ActivePlayer .Placard {
+  margin-left: 0.25rem;
+}
 
 .PlayersStatus .Points .Resource {
   display: inline-flex;
@@ -94,8 +131,7 @@
   border-radius: 50%;
   border: 2px solid #444;
   background-size: 130%;
-  margin-left: -0.625rem;
-  margin-bottom: 0.5rem;
+  margin: 0 0 0 -0.625rem;
 }
 
 .PlayersStatus .Points .Resource:first-child {

client/src/PlayersStatus.js

@@ -4,55 +4,88 @@ import "./PlayersStatus.css";
 import BoardPieces from './BoardPieces.js';
 import { getPlayerName } from './Common.js';
 import PlayerColor from './PlayerColor.js';
+import Placard from './Placard.js';
 
-const Player = ({ table, color, onClick }) => {
-  const player = table.game.players[color];
+const Player = ({ table, color, onClick, reverse }) => {
+  if (!table.game) {
+    return <></>;
+  }
+  const game = table.game;
+  const player = game.players[color];
  
   const developmentCards = player.unplayed ? <Resource label={true} type={'progress-back'} count={player.unplayed} disabled/> : <></>;
   const armyCards = player.army ? <Resource label={true} type={'army-1'} count={player.army} disabled/> : <></>;
   const points = player.points ? 
     <Resource type={'progress-back'} count={player.points} disabled/> : <></>;
   
+  const longestRoad = game.longestRoad && game.longestRoad === color ?
+      <Placard
+        disabled
+        active={false}
+        type='longest-road'
+      /> : <></>;
+
+    const largestArmy = game.largestArmy && game.largestArmy === color ?
+      <Placard
+        disabled
+        active={false}
+        type='largest-army'
+      /> : <></>;
+  
   return <div className="Player">
       <div className="Who">
-        <PlayerColor color={color}/>{getPlayerName(table.game.sessions, color)}
+        <PlayerColor color={color}/>{getPlayerName(game.sessions, color)}
       </div>
       <div className="What">
         <div className="Points">{points}</div>
-        { developmentCards }
-        { armyCards }
+        <div className="Has">
+          { !reverse && <>
+            { largestArmy }
+            { longestRoad }
+            { armyCards }
+            { developmentCards }
+          </> }
+          { reverse && <>
+            { developmentCards }
+            { armyCards }
+            { longestRoad }
+            { largestArmy }
+          </> }
+        </div>
       </div>
       <div className={`${onClick ? 'Normal' : 'Shrunken'}`}><BoardPieces onClick={onClick} table={table} color={color}/></div>
     </div>
 };
 
-const PlayersStatus = ({ table, onClick, color, className }) => {
+const PlayersStatus = ({ table, onClick, color, active }) => {
   if (!table.game) {
     return <></>;
   }
 
+  const game = table.game;
   let players;
   if (color) {
-    const player = table.game.players[color];
+    const player = game.players[color];
     players = <Player
       onClick={onClick}
-      key={`PlayerStatus-${getPlayerName(table.game.sessions, color)}`}
+      reverse
+      key={`PlayerStatus-${getPlayerName(game.sessions, color)}`}
       table={table}
       color={color}/>;
   } else {
-    players = Object.getOwnPropertyNames(table.game.players)
-    .filter(color => table.game.players[color].status === 'Active' && table.game.color !== color)
+    players = Object.getOwnPropertyNames(game.players)
+    .filter(color => game.players[color].status === 'Active' && game.color !== color)
     .map(color => {
-      const player = table.game.players[color];
+      const player = game.players[color];
       return <Player
         onClick={onClick}
-        key={`PlayerStatus-${getPlayerName(table.game.sessions, color)}`}
+        key={`PlayerStatus-${getPlayerName(game.sessions, color)}`}
         table={table}
         color={color}/>;
     });
   }
 
-  return <div className={`PlayersStatus ${className ? className : ''}`}>{ players }</div>;
+  return <div className={`PlayersStatus ${active ? 'ActivePlayer' : ''}`}>{ players }</div>;
 }
 
 export default PlayersStatus;

client/src/Table.css

@@ -38,11 +38,14 @@
 
 .BottomBar {
   display: flex;
-  margin-right: 30rem;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 30rem;
+  justify-items: space-between;
   justify-content: space-between;
   align-items: flex-end;
   height: 10.5rem;
-  overflow: visible;
 }
 
 .GameOrder {
@@ -153,7 +156,7 @@
   position: absolute;
 }
 
-.Cards {
+.Table .Cards {
   display: inline-block;
   position: absolute;
   text-align: right;
@@ -181,23 +184,12 @@
 .Stack > *:not(:first-child) {
   margin-left: -4.5em;
 }
-
-.Hand:hover .Stack:hover > *:not(:first-child) {
-  /*  margin-left: -2em; */
-  }
-  
-.Hand:hover .Stack:hover:not(:last-child) > *:last-child {
-/*  margin-right: 3em; */
-}
   
 .Hand {
   display: flex;
   min-height: calc(7.2em + 0.5em);
-}
-
-.Hand > button {
-  align-self: center;
-  justify-self: center;
+  justify-items: space-between;
+  justify-content: space-between;
 }
 
 .Placard:hover {
@@ -320,52 +312,6 @@
   flex-grow: 1;
 }
 
-.Placard {
-  z-index: 30000; /* over the top of the BuildPieces */
-  position: relative;
-  width: 9.4em;
-  height: 11.44em;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  margin: 0.25em;
-  display: inline-block;
-  display: flex;
-  flex-direction: column;
-  justify-items: space-between;
-  cursor: pointer;
-}
-
-.Placard > div {
-  box-sizing: border-box;
-  margin: 0 0.9em;
-}
-.Placard:not([disabled]) {
-  cursor: pointer;
-}
-.Placard.Selected {
-  filter: brightness(110%);
-  transform-origin: 100% 100%;
-  transform: scale(1.5);
-}
-.Placard > div:nth-child(1) {
-  height: 15.5%;
-}
-.Placard > div:nth-child(2),
-.Placard > div:nth-child(3),
-.Placard > div:nth-child(4),
-.Placard > div:nth-child(5) {
-    height: 15.25%;
-}
-.Placard > div:nth-child(6) {
-  flex: 1;
-}
-.Placard > div:hover:nth-child(2),
-.Placard > div:hover:nth-child(3),
-.Placard > div:hover:nth-child(4),
-.Placard > div:hover:nth-child(5) {
-  background-color: #ffffff40;
-}
 
 .Development {
   position: relative;

client/src/Table.js

@@ -20,7 +20,7 @@ import Chat from './Chat.js';
 import { CircularProgress } from "@material-ui/core";
 import 'moment-timezone';
 import Activities from './Activities.js';
-import BoardPieces from './BoardPieces.js';
+import Placard from './Placard.js';
 import PlayersStatus from './PlayersStatus.js';
 
 /* Start of withRouter polyfill */
@@ -48,70 +48,6 @@ function withRouter(Component) {
 }
 /* end of withRouter polyfill */
   
-const Placard = ({table, type, active}) => {
-  const dismissClicked = (event) => {
-    table.setState({ buildActive: false });
-  }
-
-  const buildClicked = (event) => {
-    if (!type.match(/^l.*/)) {
-      if (!table.state.buildActive) {
-        table.setState({ buildActive: true });
-      }
-    }
-  };
-
-  const roadClicked = (event) => {
-    table.buyRoad();
-    table.setState({ buildActive: false });
-  };
-
-  const settlementClicked = (event) => {
-    table.buySettlement();
-    table.setState({ buildActive: false });
-  };
-
-  const cityClicked = (event) => {
-    table.buyCity();
-    table.setState({ buildActive: false });
-  };
-
-  const developmentClicked = (event) => {
-    table.buyDevelopment();
-    table.setState({ buildActive: false });
-  };
-
-  let buttons;
-  switch (active ? type : undefined) {
-  case 'orange':
-  case 'red':
-  case 'white':
-  case 'blue':
-    buttons = <>
-      <div onClick={dismissClicked}/>
-      <div onClick={roadClicked}/>
-      <div onClick={settlementClicked}/>
-      <div onClick={cityClicked}/>
-      <div onClick={developmentClicked}/>
-      <div onClick={dismissClicked}/>
-    </>;
-    break;
-  default:
-    buttons = <></>;
-    break;
-  }
-  
-  return (
-    <div className={`Placard${active ? ' Selected' : ''}`}
-      onClick={buildClicked}
-      data-type={type}
-      style={{
-        backgroundImage:`url(${assetsPath}/gfx/placard-${type}.png)`
-      }}
-    >{buttons}</div>
-  );
-};
-
 const Development = ({table, type, card, onClick}) => {
   return (
     <div className={`Development ${card.played ? 'Selected' : ''}`}
@@ -994,7 +930,7 @@ class Table extends React.Component {
           <Board table={this} game={game}/>
           { player !== undefined && <>
             <PlayersStatus table={this}/>
-            <PlayersStatus className="ActivePlayer"
+            <PlayersStatus active={true}
               onClick={this.buildItem} 
               table={this} color={this.game.color}/>
             <div className="BottomBar">

client/src/Trade.js

@@ -7,7 +7,6 @@ import Button from '@material-ui/core/Button';
 import Resource from './Resource.js';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'
-import { alertClasses } from "@mui/material";
 
 const empty = {
   wheat: 0,
@@ -104,7 +103,6 @@ const Trade = ({table}) => {
 
   const canMeetOffer = (player, offer) => {
     if (offer.gets.length === 0 || offer.gives.length === 0) {
-      console.log(`no length`);
       return false;
     }
     for (let i = 0; i < offer.gets.length; i++) {

client/src/ViewCard.css

@@ -32,7 +32,12 @@
   box-sizing: border-box;
 }
 
-.ViewCard .Description p:first-of-type {
+.ViewCard .Description > div {
+  margin-bottom: 1rem;
+  line-height: 1.25rem;  
+}
+
+.ViewCard .Description div:first-of-type {
   margin-top: 0;
 }
 

client/src/ViewCard.js

@@ -36,40 +36,41 @@ const ViewCard = ({table, card}) => {
 
   switch (lookup) {
   case 'army': 
-    description = <>When played, you <b>must</b> move the robber.
-      <p>Steal <b>1</b> resource card from the owner of an adjacent settlement or city.</p>
-      <p>You may only play one development card during your turn -- either one
-        knight or one progress card.</p></>;
+    description = <>
+      <div>When played, you <b>must</b> move the robber.</div>
+      <div>Steal <b>1</b> resource card from the owner of an adjacent settlement or city.</div>
+      <div>You may only play one development card during your turn -- either one
+        knight or one progress card.</div></>;
     break;
   case 'vp':
-    description = <><b>1</b> victory point.
-      <p>You only reveal your victory point cards when the game is over, either 
+    description = <><div><b>1</b> victory point.</div>
+      <div>You only reveal your victory point cards when the game is over, either 
         when you or an opponent 
         reaches <b>10+</b> victory points on their turn and declares
-        victory!</p></>;
+        victory!</div></>;
     break;
   case 'progress-road-1':
   case 'progress-road-2':
     description = <>
-      <p>Play <b>2</b> new roads as if you had just built them.</p>
-      <p>This is still limited by the number of roads you have. If you do not have enough roads
+      <div>Play <b>2</b> new roads as if you had just built them.</div>
+      <div>This is still limited by the number of roads you have. If you do not have enough roads
         remaining, or if there are no valid road building locations, the number of roads
-        you can place will be reduced.</p>
-      <p>You currently have <b>{table.game.player.roads}</b> roads remaining.</p>
+        you can place will be reduced.</div>
+      <div>You currently have <b>{table.game.player.roads}</b> roads remaining.</div>
       </>;
       break;
   case 'progress-monopoly':
     description = <>
-      <p>When you play this card, you will select <b>1</b> type of resource.
-      All other players must give you all their resource cards of that type.</p>
+      <div>When you play this card, you will select <b>1</b> type of resource.
+      All other players must give you all their resource cards of that type.</div>
       </>;
     break;
   case 'progress-year-of-plenty':
     description = <>
-      Take any <b>2</b> resources from the bank. Add them to your hand. They can be 
-      <b>2</b> of the same resource or <b>2</b> different resources.
-      <p><b>Unfortunately</b> the current implementation only lets you pick a single
-      resource and you will then get <b>2</b> of those.</p>
+      <div>Take any <b>2</b> resources from the bank. Add them to your hand. They can be 
+      <b>2</b> of the same resource or <b>2</b> different resources.</div>
+      <div><b>Unfortunately</b> the current implementation only lets you pick a single
+      resource and you will then get <b>2</b> of those.</div>
       </>;
     break;
   };

client/src/Winner.css

@@ -39,7 +39,6 @@
 }
 
 .Winner .Description > div {
-  display: inline;
   margin-bottom: 1rem;
   line-height: 1.25rem;  
 }

client/src/index.css

@@ -1,4 +1,4 @@
-@media only screen and (max-width: 900px) {
+@media only screen and (max-width: 1200px) {
   html {
     font-size: 10px;
   }

server/routes/games.js

@@ -2000,7 +2000,7 @@ router.put("/:id/:action/:value?", async (req, res) => {
         error = `You can not play victory point cards until you can reach 10!`;
         break;
       }
-      addActivity(game, session, `${session.name} played a Victory Point card.`);
+      addChatMessage(game, session, `${session.name} played a Victory Point card.`);
     }
 
     if (card.type === 'progress') {