Allows multiple users to connect and dealer allocates as players

server/websocketevents.js

@@ -26,9 +26,11 @@ const pongHandler = ws => {
 };
 
 export const closeHandler = (ws, serverStore) => {
+  const { users } = serverStore;
   ws.isAlive = false;
-  const disconnectingUser = serverStore.users.find(user => user.websocket === ws);
+  const disconnectingUser = users.find(user => user.websocket === ws);
   if (disconnectingUser) {
+    deallocateUserToPlayer(serverStore, disconnectingUser);
     disconnectingUser.websocket = null;
   }
   serverStore.users = serverStore.users.filter(user => user !== disconnectingUser);
@@ -91,16 +93,16 @@ const connectUser = (serverStore, ws, userId = null) => {
   }
 };
 
-const addCardToInPlay = (serverStore, cardToAdd) => {
+const addCardToInPlay = (serverStore, data) => {
+  const { card: cardToAdd, currentPlayer } = data;
   const { deck, players } = serverStore;
   const cardsAlreadyInPlay = deck.filter(card => card.inPlay !== null);
   const playersAlreadyPlayed = [...new Set(cardsAlreadyInPlay.map(card => card.player))];
   if (!playersAlreadyPlayed.includes(cardToAdd.player)) {
     const card = deck.find(card => card.bitmask === cardToAdd.bitmask && card.player === cardToAdd.player);
     if (card) {
       card.inPlay = new Date().getTime();
-      const player = players.find(player => player.id === card.player);
-      updateClientState(`${player.name} played the ${getFullCardName(card.bitmask)}`);
+      updateClientState(`${currentPlayer.name} played the ${getFullCardName(card.bitmask)}`);
     }
   }
 };
@@ -127,20 +129,18 @@ const changeUserName = (serverStore, ws, data) => {
   }
 };
 
-const allocateUserToPlayer = (serverStore, data) => {
-  const { users, players } = serverStore;
-  const { user } = data;
+const allocateUserToPlayer = (serverStore, user) => {
+  const { players } = serverStore;
   if (!players.includes(user.id) && players.length < CONFIG.MAX_PLAYERS) {
     players.push(user.id);
     updateClientState(`Dealer added ${user.name} as a player`);
   }
 };
 
-const deallocateUserToPlayer = (serverStore, data) => {
-  const { users, players } = serverStore;
-  const { user } = data;
+const deallocateUserToPlayer = (serverStore, user) => {
+  const { players } = serverStore;
   if (players.includes(user.id)) {
     serverStore.players = players.filter(playerid => playerid !== user.id);
-    updateClientState(`Dealer removed ${user.name} as a player`);
+    updateClientState(`${user.name} is no longer a player`);
   }
 };

src/components/ConnectedUsers.css

@@ -26,4 +26,16 @@
 
 .connected-users .btn-icon.remove {
   color: #fc5554;
+}
+
+@media (max-width: 719px), (max-height: 719px) {
+  .connected-users {
+    transform: translateX(0);
+  }
+  .connected-users ul {
+    display: flex;
+  }
+  .connected-users ul li {
+    margin: 0 2rem 0.5rem 1rem;
+  }
 }

src/components/ConnectedUsers.jsx

@@ -10,11 +10,11 @@ const ConnectedUsers = props => {
   const playersFull = players.length >= CONFIG.MAX_PLAYERS;
 
   const addAsPlayerHandler = user => () => {
-    sendToServer(ACTIONS.SERVER_ALLOCATE_USER_TO_PLAYER, { user });
+    sendToServer(ACTIONS.SERVER_ALLOCATE_USER_TO_PLAYER, user);
   };
 
   const removeAsPlayerHandler = user => () => {
-    sendToServer(ACTIONS.SERVER_DEALLOCATE_USER_TO_PLAYER, { user });
+    sendToServer(ACTIONS.SERVER_DEALLOCATE_USER_TO_PLAYER, user);
   };
 
   return <div className="connected-users">

src/components/InPlay.jsx

@@ -4,14 +4,13 @@ import * as ACTIONS from '../store/actiontypes.js';
 
 const InPlay = props => {
   const { store, sendToServer } = props;
-  const { players, currentPlayer, deck } = store;
-  const { isDealer = false } = currentPlayer ?? {};
+  const { players, currentUser, deck } = store;
+  const { isDealer = false } = currentUser ?? {};
 
-  const playersWithoutDealer = players.filter(player => !player.isDealer);
   const inPlay = deck.filter(card => card.inPlay !== null).sort((a, b) => a.inPlay - b.inPlay);
-  const currentPlayerIndex = playersWithoutDealer.map(player => player.id).indexOf(currentPlayer ? currentPlayer.id : null);
-  const rotateAngle = currentPlayerIndex > -1 ? ((currentPlayerIndex + 2) % playersWithoutDealer.length) * 90 : 0;
-  const allPlayersHavePlayed = inPlay?.length === playersWithoutDealer?.length;
+  const currentPlayerIndex = players.indexOf(currentUser ? currentUser.id : null);
+  const rotateAngle = currentPlayerIndex > -1 ? ((currentPlayerIndex + 2) % players.length) * 90 : 0;
+  const allPlayersHavePlayed = inPlay?.length === players?.length;
   const addCardsToPlayedHandler = () => {
     if (allPlayersHavePlayed) {
       sendToServer(ACTIONS.SERVER_ADD_CARDS_TO_PLAYED);
@@ -24,12 +23,12 @@ const InPlay = props => {
       </button>
     </div>}
     {inPlay.map(card => {
-      const cardPlayer = players.find(player => player.id === card.player);
+      const cardPlayer = players.find(player => player === card.player);
       return <Card 
         key={`${card.bitmask}`} 
         bitmask={card.bitmask}
         player={cardPlayer}
-        className={`player${playersWithoutDealer.map(player => player.id).indexOf(card.player) + 1}`}
+        className={`player${players.indexOf(card.player) + 1}`}
       />;
     })}
   </div>;

src/components/Player.jsx

@@ -19,7 +19,7 @@ const Player = props => {
       setSelectedCardBitmask(card.bitmask);
       return;
     }
-    sendToServer(ACTIONS.SERVER_ADD_CARD_TO_IN_PLAY, card);
+    sendToServer(ACTIONS.SERVER_ADD_CARD_TO_IN_PLAY, { card, currentPlayer });
     setSelectedCardBitmask(null);
   };
 

src/components/Players.jsx

@@ -8,20 +8,20 @@ const rotateArray = (arr, n) => {
 };
 
 const Players = props => {
-  const { store: { users = [], players = [], currentPlayer = null, deck = []}, sendToServer } = props;
+  const { store: { users = [], players = [], currentUser = null, deck = []}, sendToServer } = props;
   const inPlay = deck.filter(card => card.inPlay !== null);
 
-  const currentPlayerIndex = players.indexOf(currentPlayer?.id);
+  const currentPlayerIndex = players.indexOf(currentUser?.id);
   const sortedPlayers = rotateArray(players, 2 - (currentPlayerIndex === -1 ? 2 : currentPlayerIndex));
 
   return <>
     {sortedPlayers.map((playerId, idx) => {
       const player = users.find(user => user.id === playerId);
       const hand = deck.filter(card => card.player === playerId && card.inPlay === null && !card.played);
-      const isCurrentPlayer = playerId === currentPlayer?.id;
+      const isCurrentPlayer = playerId === currentUser?.id;
       return <Player 
         className={`player${idx + 1}`}
-        currentPlayer={currentPlayer}
+        currentPlayer={currentUser}
         isCurrentPlayer={isCurrentPlayer}
         hand={hand}
         inPlay={inPlay}