From 62defd19f2851bafcebc2f45a4f46e3d5238eb9f Mon Sep 17 00:00:00 2001 From: David Pounds Date: Wed, 10 Mar 2021 22:40:52 +0000 Subject: [PATCH] Allows multiple users to connect and dealer allocates as players --- server/websocketevents.js | 22 +++++++++++----------- src/components/ConnectedUsers.css | 12 ++++++++++++ src/components/ConnectedUsers.jsx | 4 ++-- src/components/InPlay.jsx | 15 +++++++-------- src/components/Player.jsx | 2 +- src/components/Players.jsx | 8 ++++---- 6 files changed, 37 insertions(+), 26 deletions(-) diff --git a/server/websocketevents.js b/server/websocketevents.js index bdd6f20..7681389 100644 --- a/server/websocketevents.js +++ b/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,7 +93,8 @@ 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))]; @@ -99,8 +102,7 @@ const addCardToInPlay = (serverStore, cardToAdd) => { 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`); } }; \ No newline at end of file diff --git a/src/components/ConnectedUsers.css b/src/components/ConnectedUsers.css index 8e91afd..88602e7 100644 --- a/src/components/ConnectedUsers.css +++ b/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; + } } \ No newline at end of file diff --git a/src/components/ConnectedUsers.jsx b/src/components/ConnectedUsers.jsx index 249dfb2..9d44793 100644 --- a/src/components/ConnectedUsers.jsx +++ b/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
diff --git a/src/components/InPlay.jsx b/src/components/InPlay.jsx index bfb2984..7b9407e 100644 --- a/src/components/InPlay.jsx +++ b/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 => {
} {inPlay.map(card => { - const cardPlayer = players.find(player => player.id === card.player); + const cardPlayer = players.find(player => player === card.player); return player.id).indexOf(card.player) + 1}`} + className={`player${players.indexOf(card.player) + 1}`} />; })} ; diff --git a/src/components/Player.jsx b/src/components/Player.jsx index 90eab94..b5a7fe1 100644 --- a/src/components/Player.jsx +++ b/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); }; diff --git a/src/components/Players.jsx b/src/components/Players.jsx index f9050e6..47d5512 100644 --- a/src/components/Players.jsx +++ b/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