From 1e3d086b5707ce89dea9e8919f2d175449df7b82 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_eikona@ketrenos.com>
Date: Sun, 6 Mar 2022 17:16:45 -0800
Subject: [PATCH] Moved things around to work on smaller screens

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
---
 client/src/Board.css         |  7 ++--
 client/src/BoardPieces.css   |  1 -
 client/src/PlayersStatus.css | 60 ++++++++++++++++++++++++-------
 client/src/PlayersStatus.js  | 59 +++++++++++++++++++++++-------
 client/src/Table.css         | 70 +++++-------------------------------
 client/src/Table.js          | 68 ++---------------------------------
 client/src/Trade.js          |  2 --
 client/src/ViewCard.css      |  7 +++-
 client/src/ViewCard.js       | 35 +++++++++---------
 client/src/Winner.css        |  1 -
 client/src/index.css         |  2 +-
 server/routes/games.js       |  2 +-
 12 files changed, 135 insertions(+), 179 deletions(-)

diff --git a/client/src/Board.css b/client/src/Board.css
index a0ce1fd..5a91a11 100644
--- a/client/src/Board.css
+++ b/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
diff --git a/client/src/BoardPieces.css b/client/src/BoardPieces.css
index 30d2acc..d055500 100644
--- a/client/src/BoardPieces.css
+++ b/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;
diff --git a/client/src/PlayersStatus.css b/client/src/PlayersStatus.css
index b77b043..26d0581 100644
--- a/client/src/PlayersStatus.css
+++ b/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 {
diff --git a/client/src/PlayersStatus.js b/client/src/PlayersStatus.js
index 26b963b..1e001a8 100644
--- a/client/src/PlayersStatus.js
+++ b/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;
\ No newline at end of file
diff --git a/client/src/Table.css b/client/src/Table.css
index 6df72cb..c4d196c 100755
--- a/client/src/Table.css
+++ b/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;
diff --git a/client/src/Table.js b/client/src/Table.js
index e752c1e..f8fc7ec 100755
--- a/client/src/Table.js
+++ b/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">
diff --git a/client/src/Trade.js b/client/src/Trade.js
index 6fca700..1563133 100644
--- a/client/src/Trade.js
+++ b/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++) {
diff --git a/client/src/ViewCard.css b/client/src/ViewCard.css
index 3e93b12..23a695e 100644
--- a/client/src/ViewCard.css
+++ b/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;
 }
 
diff --git a/client/src/ViewCard.js b/client/src/ViewCard.js
index 6753f80..f4c0b25 100644
--- a/client/src/ViewCard.js
+++ b/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;
   };
diff --git a/client/src/Winner.css b/client/src/Winner.css
index e287cd9..c4463ba 100644
--- a/client/src/Winner.css
+++ b/client/src/Winner.css
@@ -39,7 +39,6 @@
 }
 
 .Winner .Description > div {
-  display: inline;
   margin-bottom: 1rem;
   line-height: 1.25rem;  
 }
diff --git a/client/src/index.css b/client/src/index.css
index 13d0096..c805b60 100644
--- a/client/src/index.css
+++ b/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;
   }
diff --git a/server/routes/games.js b/server/routes/games.js
index 017561e..7756604 100755
--- a/server/routes/games.js
+++ b/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') {