Lots of bug fixes

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

client/src/App.css

@@ -161,11 +161,15 @@ body {
 }
 
 .Table button {
-  margin: 0.25em;
+  margin: 0.25rem;
   background-color: white;
   border: 1px solid black !important;
 }
 
+.Table .MuiButton-text {
+  padding: 0.25rem 0.55rem;
+}
+
 
 .Table button:disabled {
   opacity: 0.5;

client/src/App.js

@@ -46,6 +46,7 @@ const Table = () => {
   const [priv, setPriv] = useState(undefined);
   const [buildActive, setBuildActive] = useState(false);
   const [cardActive, setCardActive] = useState(undefined);
+  const [winnerDismissed, setWinnerDismissed] = useState(undefined);
   const fields = [ 'id', 'state', 'color', 'name', 'private' ];
 
   useEffect(() => {
@@ -109,9 +110,15 @@ const Table = () => {
         setPriv(priv);
       }
 
-      if ('name' in data.update && data.update.name !== name) {
+      if ('name' in data.update) {
+        if (data.update.name) {
           console.log(`App - setting name: ${data.update.name}`);
           setName(data.update.name);
+        } else {
+          setWarning("");
+          setError("");
+          setPriv(undefined);
+        }
       }
       if ('id' in data.update && data.update.id !== gameId) {
         console.log(`App - setting gameId ${data.update.id}`);
@@ -305,7 +312,7 @@ const Table = () => {
             </div> }
             { state === 'normal' && <SelectPlayer/> }
             { color && state === 'game-order' && <GameOrder/> }
-            <Winner/>
+            { !winnerDismissed && <Winner {...{winnerDismissed, setWinnerDismissed}}/> }
             <ViewCard {...{cardActive, setCardActive }}/>
             <ChooseCard/>
           </div>

client/src/Board.css

@@ -179,7 +179,7 @@
 .Tile-Shape:hover,
 .Corner-Shape:hover,
 .Road-Shape:hover {
-  background-color: white !important;
+  background-color: white;
 }
 
 .Board .Option .Tile-Shape,

client/src/PlayerName.js

@@ -16,7 +16,7 @@ const PlayerName = ({ name, setName }) => {
   
   const nameKeyPress = (event) => {
     if (event.key === "Enter") {
-      setName(edit);
+      setName(edit ? edit : name);
     }
   }
 
@@ -27,7 +27,7 @@ const PlayerName = ({ name, setName }) => {
         onKeyPress={nameKeyPress}
         label="Enter your name"
         variant="outlined"
-        value={edit ? edit : name}
+        value={edit}
         />
         <Button onClick={sendName}>Set</Button>
     </div>

client/src/PlayersStatus.js

@@ -61,7 +61,7 @@ const Player = ({ player, onClick, reverse, color,
         </div>
       }
       <div className="Points">{points}</div>
-      { (largestArmy || longestRoad || armyCards || developmentCards) && <>
+      { (largestArmy || longestRoad || armyCards || resourceCards || developmentCards) && <>
         <div className="Has">
           { !reverse && <>
             { largestArmyPlacard }
@@ -154,8 +154,7 @@ const PlayersStatus = ({ active }) => {
       color={color}/>;
   } else {
     elements = Object.getOwnPropertyNames(players)
-    .filter(key => players[key].status === 'Active' 
+    .filter(key => color !== key)
-      && color !== key)
     .map(key => {
       return <Player
         player={players[key]}

client/src/Trade.css

@@ -5,15 +5,15 @@
   top: 0;
   justify-content: center;
   align-items: center;
-  margin: 0.25em;
+  margin: 0.25rem;
 }
 
 .Trade > * {
-  max-height: calc(100vh - 2em);
+  max-height: calc(100vh - 2rem);
   overflow: auto;
-  width: 40em;
+  width: 40rem;
   display: inline-flex;
-  padding: 0.5em;
+  padding: 0.5rem;
   flex-direction: column;
 }
 
@@ -24,19 +24,19 @@
 }
 
 .Trade .PlayerList {
-  padding: 0.5em;
+  padding: 0.5rem;
   background-color:rgba(224, 224, 224);
-  margin: 0.5em 0;
+  margin: 0.5rem 0;
 }
 
 .Trade .Resource {
   display: inline-flex;
   align-items: center;
   justify-content: space-around;
-  width: 3.75em; /* 5x7 aspect ratio */
+  width: 3.75rem; /* 5x7 aspect ratio */
-  height: 3.75em;
+  height: 3.75rem;
-  min-width: 3.75em; /* 5x7 aspect ratio */
+  min-width: 3.75rem; /* 5x7 aspect ratio */
-  min-height: 3.75em;
+  min-height: 3.75rem;
   margin: 0 0.125rem;
   background-size: 130%;
   border: 2px solid #ccc;
@@ -54,9 +54,9 @@
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
-  height: 2em;
+  height: 2rem;
-  width: 2em;
+  width: 2rem;
-  line-height: 2em;
+  line-height: 2rem;
 }
 
 .Trade .Resource:hover {
@@ -107,9 +107,9 @@
 
 .Trade .PlayerColor {
   align-self: flex-start;
-  width: 0.75em;
+  width: 0.75rem;
-  height: 0.75em;
+  height: 0.75rem;
-  margin: 1rem 0.25em 0 0;
+  margin: 1rem 0.25rem 0 0;
 }
 
 .Trade .Transfer {

client/src/Winner.js

@@ -10,7 +10,7 @@ import {Resource} from './Resource.js';
 import {PlayerColor} from './PlayerColor.js';
 import { GlobalContext } from "./GlobalContext.js";
 
-const Winner = () => {
+const Winner = ({ winnerDismissed, setWinnerDismissed }) => {
   const { ws } = useContext(GlobalContext);
   const [winner, setWinner] = useState(undefined);
   const [state, setState] = useState(undefined);
@@ -29,6 +29,7 @@ const Winner = () => {
         if (data.update.state !== 'winner') {
           setWinner(undefined);
         }
+        setWinnerDismissed(false);
         setState(data.update.state);
       }
       break;
@@ -55,12 +56,15 @@ const Winner = () => {
   }, [ws, fields]);
 
   const quitClicked = useCallback((event) => {
+    if (!winnerDismissed) {
+      setWinnerDismissed(true);
       ws.send(JSON.stringify({
         type: 'goto-lobby'
       }));
+    }
   }, [ws]);
 
-  if (!winner) {
+  if (!winner || winnerDismissed) {
     return <></>;
   }
 

server/routes/games.js

@@ -1849,7 +1849,7 @@ const clearTimeNotice= (game, session) => {
 };
 
 const startTurnTimer = (game, session) => {
-  const timeout = 30;
+  const timeout = 90;
   console.log(`${session.id}: (Re)setting turn timer for ${session.name} to ${timeout} seconds.`);
   if (game.turnTimer) {
     clearTimeout(game.turnTimer);
@@ -2055,7 +2055,8 @@ const stealResource = (game, session, color) => {
   sendUpdateToPlayers(game, {
     turn: game.turn,
     chat: game.chat,
-    activities: game.activities
+    activities: game.activities,
+    players: getFilteredPlayers(game)
   });
 }
 
@@ -2476,7 +2477,7 @@ const placeRoad = (game, session, index) => {
         name: session.name,
         color: getColorFromName(game, session.name)
       };
-      session.player.startTime = Date.now();
+      session.player.turnTime = Date.now();
       
       addChatMessage(game, null, `Everyone has placed their two settlements!`);
 
@@ -2522,7 +2523,8 @@ const placeRoad = (game, session, index) => {
     chat: game.chat,
     state: game.state,
     longestRoad: game.longestRoad,
-    longestRoadLength: game.longestRoadLength
+    longestRoadLength: game.longestRoadLength,
+    players: getFilteredPlayers(game)
   });
 }
 
@@ -3077,6 +3079,17 @@ const sendGameToPlayer = (game, session) => {
     console.log(`${session.id}: -> sendGamePlayer:: Currently no connection`);
     return;
   }
+
+  let update;
+
+  /* Only send empty name data to unnamed players */
+  if (!session.name) {
+    console.log(`${session.id}: -> sendGamePlayer:${getName(session)} - only sending empty name`);
+    update = { name: "" };
+  } else {
+    update - getFilteredGameForPlayer(game, session);
+  }
+    
   session.ws.send(JSON.stringify({
     type: 'game-update', 
     update: getFilteredGameForPlayer(game, session)
@@ -3116,6 +3129,11 @@ const sendUpdateToPlayers = async (game, update) => {
   });
   for (let key in game.sessions) {
     const _session = game.sessions[key];
+    /* Only send player and game data to named players */
+    if (!_session.name) {
+      console.log(`${session.id}: -> sendUpdateToPlayers:${getName(_session)} - only sending empty name`);
+      message = JSON.stringify({ name: "" });
+    }
     if (!_session.ws) {
       console.log(`${_session.id}: -> sendUpdateToPlayers: Currently no connection.`);
     } else {
@@ -3126,6 +3144,13 @@ const sendUpdateToPlayers = async (game, update) => {
 }
 
 const sendUpdateToPlayer = async (game, session, update) => {
+  /* If this player does not have a name, *ONLY* send the name, regardless
+   * of what is requested */
+  if (!session.name) {
+    console.log(`${session.id}: -> sendUpdateToPlayer:${getName(session)} - only sending empty name`);
+    update = { name: "" };
+  }
+
   /* Ensure clearing of a field actually gets sent by setting
     * undefined to 'false' 
     */
@@ -3277,6 +3302,11 @@ const calculatePoints = (game, update) => {
         game.state = 'winner';
         game.waiting = [];
         stopTurnTimer(game);
+        sendUpdateToPlayers(game, {
+          state: game.state,
+          winner: game.winner,
+          players: game.players /* unfiltered */
+        });
       }
     }
   }
@@ -3744,7 +3774,7 @@ router.ws("/ws/:id", async (ws, req) => {
     }
 
     /* If the current player took an action, reset the session timer */
-    if (processed && session.color === game.turn.color) {
+    if (processed && session.color === game.turn.color && game.state !== 'winner') {
       resetTurnTimer(game, session);
     }  
   });
@@ -3774,7 +3804,7 @@ router.ws("/ws/:id", async (ws, req) => {
   }
   
   /* If the current turn player just rejoined, set their turn timer */
-  if (game.turn && game.turn.color === session.color) {
+  if (game.turn && game.turn.color === session.color && game.state !== 'winner') {
     resetTurnTimer(game, session);
   }