Monopoly works

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

client/src/ChooseCard.js

@@ -54,7 +54,7 @@ const ChooseCard = () => {
       type: 'select-resources',
       cards
     }));
-  }, [ws]);
+  }, [ws, cards]);
 
   const count = (turn && turn.active === 'monopoly') ? 1 : 2;
   

client/src/PlayersStatus.js

@@ -9,7 +9,7 @@ import { Placard } from './Placard.js';
 import { GlobalContext } from './GlobalContext.js';
 
 const Player = ({ player, onClick, reverse, color,
-  largestArmy, largestArmySize, isSelf, longestRoad, longestRoadLength }) => {
+  largestArmy, isSelf, longestRoad }) => {
   if (!player) {
     return <></>;
   }
@@ -35,7 +35,7 @@ const Player = ({ player, onClick, reverse, color,
         disabled
         active={false}
         type='longest-road'
-        count={longestRoadLength}
+        count={player.longestRoad}
       /> : undefined;
 
     const largestArmyPlacard = largestArmy && largestArmy === color ?
@@ -43,49 +43,51 @@ const Player = ({ player, onClick, reverse, color,
         disabled
         active={false}
         type='largest-army'
-        count={largestArmySize}
+        count={player.army}
       /> : undefined;
   
   return <div className="Player">
-      <div className="Who">
-        <PlayerColor color={color}/>{player.name}
-      </div>
-      <div className="What">
-        { isSelf &&
-          <div className="LongestRoad">
-            Longest road: {player.longestRoad ? player.longestRoad : 0}
-          </div>
-        }
-        <div className="Points">{points}</div>
-        { (largestArmy || longestRoad || armyCards || developmentCards) && <>
-          <div className="Has">
-            { !reverse && <>
-              { largestArmyPlacard }
-              { longestRoadPlacard }
-              { !largestArmyPlacard && armyCards }
-              { developmentCards }
-            </> }
-            { reverse && <>
-              { developmentCards }
-              { !largestArmyPlacard && armyCards }
-              { longestRoadPlacard }
-              { largestArmyPlacard }
-            </> }
-          </div>
-        </> }
-      </div>
-      <div className={`${onClick ? 'Normal' : 'Shrunken'}`}>
-        <BoardPieces onClick={onClick} player={player}/>
-      </div>
+    <div className="Who">
+      <PlayerColor color={color}/>{player.name}
     </div>
+    <div className="What">
+      { isSelf &&
+        <div className="LongestRoad">
+          Longest road: {player.longestRoad ? player.longestRoad : 0}
+        </div>
+      }
+      <div className="Points">{points}</div>
+      { (largestArmy || longestRoad || armyCards || developmentCards) && <>
+        <div className="Has">
+          { !reverse && <>
+            { largestArmyPlacard }
+            { longestRoadPlacard }
+            { !largestArmyPlacard && armyCards }
+            { developmentCards }
+          </> }
+          { reverse && <>
+            { developmentCards }
+            { !largestArmyPlacard && armyCards }
+            { longestRoadPlacard }
+            { largestArmyPlacard }
+          </> }
+        </div>
+      </> }
+    </div>
+    <div className={`${onClick ? 'Normal' : 'Shrunken'}`}>
+      <BoardPieces onClick={onClick} player={player}/>
+    </div>
+  </div>
 };
 
 const PlayersStatus = ({ active }) => {
   const { ws } = useContext(GlobalContext);
   const [players, setPlayers] = useState(undefined);
   const [color, setColor] = useState(undefined);
+  const [largestArmy, setLargestArmy] = useState(undefined);
+  const [longestRoad, setLongestRoad] = useState(undefined);
   const fields = useMemo(() => [
-    'players', 'color'
+    'players', 'color', 'longestRoad', 'largestArmy'
   ], []);
   const onWsMessage = (event) => {
     const data = JSON.parse(event.data);
@@ -98,6 +100,12 @@ const PlayersStatus = ({ active }) => {
       if ('color' in data.update && data.update.color !== color) {
         setColor(data.update.color);
       }
+      if ('longestRoad' in data.update && data.update.longestRoad !== longestRoad) {
+        setLongestRoad(data.update.longestRoad);
+      }
+      if ('largestArmy' in data.update && data.update.largestArmy !== largestArmy) {
+        setLargestArmy(data.update.largestArmy);
+      }
       break;
     default:
       break;
@@ -133,6 +141,9 @@ const PlayersStatus = ({ active }) => {
       player={players[color]}
       onClick={buildItem}
       reverse
+      largestArmy={largestArmy}
+      longestRoad={longestRoad}
+      isSelf={active}
       key={`PlayerStatus-${color}`}
       color={color}/>;
   } else {
@@ -142,6 +153,8 @@ const PlayersStatus = ({ active }) => {
     .map(key => {
       return <Player
         player={players[key]}
+        largestArmy={largestArmy}
+        longestRoad={longestRoad}
         key={`PlayerStatus-${key}}`}
         color={key}/>;
     });

client/src/ViewCard.js

@@ -55,7 +55,8 @@ const ViewCard = ({cardActive, setCardActive}) => {
       type: 'play-card',
       card: cardActive
     }));
-  }, [ws, cardActive]);
+    setCardActive(undefined);
+  }, [ws, cardActive, setCardActive]);
 
   const close = (event) => {
     setCardActive(undefined);

server/routes/games.js

@@ -394,7 +394,7 @@ const processRoll = (game, session, dice) => {
       addChatMessage(game, null, `The robber was rolled and ${player.name} must discard ${player.mustDiscard} resource cards!`);
       for (let key in game.sessions) {
         if (game.sessions[key].player === player) {
-          sendUpdateToPlayer(game.sessions[key].player, {
+          sendUpdateToPlayer(game.sessions[key], {
             private: player
           });
           break;
@@ -1866,9 +1866,10 @@ const pass = (game, session) => {
   addChatMessage(game, null, `It is ${next}'s turn.`);
   
   sendUpdateToPlayers(game, {
+    turns: game.turns,
     turn: game.turn,
     chat: game.chat,
-    activites: game.activities
+    activities: game.activities
   });
 }
 
@@ -2173,7 +2174,8 @@ const playCard = (game, session, card) => {
     activities: game.activities,
     largestArmy: game.largestArmy,
     largestArmySize: game.largestArmySize,
-    turn: game.turn
+    turn: game.turn,
+    players: getFilteredPlayers(game)
   });
 }
 
@@ -2619,6 +2621,14 @@ const selectResources = (game, session, cards) => {
         session.resources += player[type];
         total += player[type];
         player[type] = 0;
+        for (let key in game.sessions) {
+          if (game.sessions[key].player === player) {
+            sendUpdateToPlayer(game.sessions[key], {
+              private: game.sessions[key].player
+            });
+            break;
+          }
+        }
       }
     }
 
@@ -3312,6 +3322,7 @@ router.ws("/ws/:id", async (ws, req) => {
         case 'chat':
         case 'startTime':
         case 'state':
+        case 'turns':
           update[field] = game[field];
           break;
         case 'name':