Resized trading

Sort players in player list

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

client/src/Actions.css

@@ -5,7 +5,7 @@
   align-items: center;
   flex-direction: column;
   justify-content: space-evenly;
-  margin: 0.25rem 0.25rem 0.25rem 0;
+  margin: 0 0.25rem 0.25rem 0;
   padding: 0.25em;
 }
 

client/src/App.css

@@ -113,10 +113,9 @@ body {
 }
 
 .Table .Trade {
+  display: flex;
+  position: relative;
   z-index: 25000;
-  transform-origin: right center;
-  transform: scale(0.75);
-  right: 0;
   align-self: center;
 }
 

client/src/App.js

@@ -289,7 +289,7 @@ const Table = () => {
       { /* <PingPong/> */ }
       <div className="Table">
         <Activities/>
-        <Trade/>
+       
         <div className="Game">
           <div className="Dialogs">
             { error && <div className="Dialog ErrorDialog">
@@ -324,6 +324,7 @@ const Table = () => {
         </div>
         <div className="Sidebar">
           { name !== "" && <PlayerList/> }
+          <Trade/>
           { name !== "" && <Chat/> }
           { /* name !== "" && <VideoFeeds/> */ }
           { loaded && <Actions {...{buildActive, setBuildActive}}/> }

client/src/PlayerList.js

@@ -83,27 +83,41 @@ const PlayerList = () => {
   const playerElements = [];
 
   const inLobby = state === 'lobby';
+  const sortedPlayers = [];
+
   for (let key in players) {
-    const item = players[key];
+    sortedPlayers.push(players[key]);
+  }
+  sortedPlayers.sort((A, B) => {
+    if (A.color === color) {
+      return -1;
+    }
+    if (B.color === color) {
+      return +1;
+    }
+    return A.name.localeCompare(B.name);
+  });
+
+  sortedPlayers.forEach(item => {
     const name = item.name;
-    const selectable = inLobby && (item.status === 'Not active' || color === key);
+    const selectable = inLobby && (item.status === 'Not active' || color === item.color);
     playerElements.push(
       <div
         data-selectable={selectable}
-        data-selected={key === color}
+        data-selected={item.color === color}
         className="PlayerEntry"
-        onClick={() => { inLobby && selectable && toggleSelected(key) }} 
+        onClick={() => { inLobby && selectable && toggleSelected(item.color) }} 
-        key={`player-${key}`}>
+        key={`player-${item.color}`}>
         <div>
-          <PlayerColor color={key}/>
+          <PlayerColor color={item.color}/>
           <div className="Name">{name ? name : 'Available' }</div>
         { name && !item.live && <div className="NoNetwork"></div> }
         </div>
-        { name && item.live && <MediaControl peer={name} isSelf={key === color}/> }
+        { name && item.live && <MediaControl peer={name} isSelf={item.color === color}/> }
         { !name && <div></div> }
       </div>
     );
-  }
+  });
 
   const waiting = unselected.map((player) => {
     return <div className={player === name ? 'Self' : ''} key={player}>

client/src/Trade.css

@@ -1,17 +1,17 @@
 .Trade {
   display: flex;
-  position: absolute;
   justify-content: center;
   align-items: center;
-  margin: 0.25rem;
+  margin-right: 0.25rem;
+  font-size: 0.75em;
 }
 
 .Trade > * {
   max-height: calc(100vh - 2rem);
   overflow: auto;
-  width: 32rem;
+  width: 32em;
   display: inline-flex;
-  padding: 0.5rem;
+  padding: 0.5em;
   flex-direction: column;
 }
 
@@ -22,7 +22,7 @@
 }
 
 .Trade .PlayerList {
-  padding: 0.5rem;
+  padding: 0.5em;
   background-color:rgba(224, 224, 224);
   margin: 0.5rem 0;
 }
@@ -31,20 +31,20 @@
   display: inline-flex;
   align-items: center;
   justify-content: space-around;
-  width: 3.75rem; /* 5x7 aspect ratio */
+  width: 3.75em; /* 5x7 aspect ratio */
-  height: 3.75rem;
+  height: 3.75em;
-  min-width: 3.75rem; /* 5x7 aspect ratio */
+  min-width: 3.75em; /* 5x7 aspect ratio */
-  min-height: 3.75rem;
+  min-height: 3.75em;
-  margin: 0 0.125rem;
+  margin: 0 0.5em;
   background-size: 130%;
   border: 2px solid #ccc;
-  border-radius: 0.25rem;
+  border-radius: 0.25em;
-  margin: 0.75rem;
+  
 }
 
 .Trade b {
-  margin-left: 0.25rem;
+  margin-left: 0.25em;
-  margin-right: 0.25rem;
+  margin-right: 0.25em;
 }
 
 .Trade .Direction {
@@ -52,9 +52,9 @@
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
-  height: 2rem;
+  height: 2em;
-  width: 2rem;
+  width: 2em;
-  line-height: 2rem;
+  line-height: 2em;
 }
 
 .Trade .Resource:hover {
@@ -72,31 +72,31 @@
 .Trade .Resource > div.Right {
   user-select: none;
   position: absolute;
-  top: -0.75rem;
+  top: -0.75em;
-  right: -0.75rem;
+  right: -0.75em;
   border-radius: 50%;
   border: 1px solid white;
   background-color: rgb(36, 148, 46);
-  font-size: 1rem;
+  font-size: 1em;
-  width: 1.5rem;
+  width: 1.5em;
-  height: 1.5rem;
+  height: 1.5em;
   text-align: center;
-  line-height: 1.5rem;
+  line-height: 1.5em;
 }
 
 .Trade .Resource > div.Left {
   user-select: none;
   position: absolute;
-  bottom: -0.75rem;
+  bottom: -0.75em;
-  left: -0.75rem;
+  left: -0.75em;
   border-radius: 50%;
   border: 1px solid white;
   background-color: #444;
-  font-size: 1rem;
+  font-size: 1em;
-  width: 1.5rem;
+  width: 1.5em;
-  height: 1.5rem;
+  height: 1.5em;
   text-align: center;
-  line-height: 1.5rem;
+  line-height: 1.5em;
 }
 
 .Trade .Resource.None {
@@ -105,8 +105,8 @@
 
 .Trade .PlayerColor {
   align-self: flex-start;
-  width: 0.75rem;
+  width: 0.75em;
-  height: 0.75rem;
+  height: 0.75em;
   margin: 1rem 0.25rem 0 0;
 }
 
@@ -131,34 +131,37 @@
   justify-content: space-around;
   align-items: center;
   font-weight: bold;
-  font-size: 1.25rem;
+  font-size: 1em;
-  margin: 0 0.5rem;
+  margin: 0 0.5em;
-  min-width: 3rem;
+  min-width: 3em;
 }
 
+.Trade .OfferButton {
+  margin: 0 0 0.75em 0;
+}
 
 .Trade .Transfers .GiveGet div:nth-child(1) {
   position: absolute;
-  top: 0;
+  top: -0.5em;
   border: 1px solid #888;
   background-color: rgb(36, 148, 46);
   color: white;
-  border-radius: 0.25rem;
+  border-radius: 0.25em;
-  min-width: 2.5rem;
+  min-width: 2.5em;
   text-align: center;
-  padding: 0.25rem;
+  padding: 0.25em;
 }
 
 .Trade .Transfers .GiveGet div:nth-child(2) {
   position: absolute;
-  top: 7.5rem;
+  top: 5.5em;
   border: 1px solid #888;
   background-color: rgb(36, 148, 46);
   color: white;
-  border-radius: 0.25rem;
+  border-radius: 0.25em;
-  min-width: 2.5rem;
+  min-width: 2.5em;
   text-align: center;
-  padding: 0.25rem;
+  padding: 0.25em;
 }
 
 .Trade .Transfers .GiveGet div:last-child {
@@ -166,10 +169,10 @@
   border: 1px solid #888;
   background-color: #444;
   color: white;
-  font-size: 1rem;
+  font-size: 1em;
-  border-radius: 0.25rem;
+  border-radius: 0.25em;
-  padding: 0.25rem;
+  padding: 0.25em;
-  bottom: 0.125rem;
+  bottom: 0.125em;
 }
 
 .Trade .TradeLine {
@@ -192,27 +195,27 @@
 .Trade .TradeText > span {
   display: inline-flex;
   align-items: center;
-  margin-right: 0.25rem;
+  margin-right: 0.25em;
   width: 100%;
   flex-wrap: wrap;
 }
 
 .Trade .TradeText > span:first-of-type {
-  min-height: 3.5rem;
+  min-height: 3.5em;
 }
 
 .Trade .TradeLine .Resource {
-  height: 1.5rem;
+  height: 1.5em;
-  width: 1.5rem;
+  width: 1.5em;
-  min-width: 1.5rem;
+  min-width: 1.5em;
-  min-height: 1.5rem;
+  min-height: 1.5em;
 }
 
 .Trade .TradeLine .Resource > div {
-  font-size: 0.75rem;
+  font-size: 0.75em;
-  width: 1rem;
+  width: 1em;
-  height: 1rem;
+  height: 1em;
-  line-height: 1rem;
+  line-height: 1em;
 }
 
 .Trade .TradeLine .TradeActions {
@@ -222,5 +225,6 @@
 }
 
 .Trade .TradeLine .TradeActions > * {
-  margin-left: 0.5rem;
+  margin-left: 0.5em;
+  font-size: 0.75em;
 }

client/src/Trade.js

@@ -524,7 +524,7 @@ const Trade = () => {
           { tradeElements }
         </div>
         { priv.resources === 0 && <b>You have no resources to participate in this trade.</b> }
-        <Button disabled={isOfferSubmitted || !isOfferValid}
+        <Button className="OfferButton" disabled={isOfferSubmitted || !isOfferValid}
           onClick={offerClicked}>Offer</Button>
 
         { priv.resources !== 0 &&
@@ -533,7 +533,7 @@ const Trade = () => {
             { transfers }
           </div>
         }
-        { isTurn && <Button onClick={cancelClicked}>cancel</Button> }
+        { isTurn && <Button className="CancelButton"onClick={cancelClicked}>cancel</Button> }
       </Paper>
     </div>
   );