Sort players in trade as Negotiator, Self, then rest alphabetically

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

client/src/Trade.css

@@ -139,7 +139,7 @@
 .Trade .Transfers .GiveGet div:nth-child(1) {
   position: absolute;
   top: 0;
-  border: 1px solid white;
+  border: 1px solid #888;
   background-color: rgb(36, 148, 46);
   color: white;
   border-radius: 0.25rem;
@@ -151,7 +151,7 @@
 .Trade .Transfers .GiveGet div:nth-child(2) {
   position: absolute;
   top: 7.5rem;
-  border: 1px solid white;
+  border: 1px solid #888;
   background-color: rgb(36, 148, 46);
   color: white;
   border-radius: 0.25rem;
@@ -162,7 +162,7 @@
 
 .Trade .Transfers .GiveGet div:last-child {
   position: absolute;
-  border: 1px solid #f0f0f0;
+  border: 1px solid #888;
   background-color: #444;
   color: white;
   font-size: 1rem;

client/src/Trade.js

@@ -240,6 +240,7 @@ const Trade = ({table}) => {
     }
 
     const tmp = {
+      negotiator: table.game.turn.name === name,
       self: table.game.name === name,
       name: name,
       color: color,
@@ -255,6 +256,22 @@ const Trade = ({table}) => {
   }
 
   players.sort((A, B) => {
+    if (A.negotiator) {
+      return -1;
+    }
+
+    if (B.negotiator) {
+      return +1;
+    }
+
+    if (A.self) {
+      return -1;
+    }
+
+    if (B.self) {
+      return +1;
+    }
+
     return A.name.localeCompare(B.name);
   });
 
@@ -365,7 +382,7 @@ const Trade = ({table}) => {
             </span> }
 
             { !youWereRejected && _gets === 'nothing' && _gives === 'nothing' && <span>
-              You have not s a trade offer.
+              You have not made a trade offer.
             </span>}
 
             { !isTurn && isSameOffer && isOfferValid && _gets !== 'nothing' && _gives !== 'nothing' && <span style={{fontWeight: 'bold'}}>
@@ -379,7 +396,7 @@ const Trade = ({table}) => {
             </span> }
 
             { !isBank && <>
-              { isTurn && !isSameOffer && isOfferValid && _gets !== 'nothing' && _gives !== 'nothing' && <span style={{fontWeight: 'bold'}}>
+              { isTurn && !isSameOffer && isOfferValid && !youRejectedOffer && _gets !== 'nothing' && _gives !== 'nothing' && <span style={{fontWeight: 'bold'}}>
                 This is a counter offer.
               </span> }
 
@@ -387,7 +404,7 @@ const Trade = ({table}) => {
                 {item.name} will meet your terms.
               </span> }
 
-              { (_gets === 'nothing' || _gives === 'nothing') && <span>
+              { (!isTurn || !youWereRejected) && (_gets === 'nothing' || _gives === 'nothing') && <span>
                 {item.name} has not submitted a trade offer.
               </span> }
 
@@ -412,9 +429,9 @@ const Trade = ({table}) => {
               onClick={() => agreeClicked(item)}>agree</Button>
           }
 
-          { item.name !== 'The bank' && !item.self &&
+          { item.name !== 'The bank' && !item.self && (isTurn || item.name === table.game.turn.name) &&
             <Button disabled={!item.gets.length || 
-              !item.gives.length || youRejectedOffer}
+              !item.gives.length || youRejectedOffer }
             onClick={() => rejectClicked(item)}>reject</Button> 
           }