diff --git a/socket/roles/manager.js b/socket/roles/manager.js index 206c4b8..252f6d1 100644 --- a/socket/roles/manager.js +++ b/socket/roles/manager.js @@ -37,6 +37,8 @@ const Manager = { io.in(playerId).socketsLeave(game.room) io.to(player.id).emit("game:kick") io.to(game.manager).emit("manager:playerKicked", player.id) + + io.to(game.room).emit("game:totalPlayers", game.players.length) }, startGame: async (game, io, socket) => { diff --git a/socket/roles/player.js b/socket/roles/player.js index ae61221..454b2ab 100644 --- a/socket/roles/player.js +++ b/socket/roles/player.js @@ -56,6 +56,9 @@ const Player = { game.players.push(playerData) + // Emit total players to all players in the room + io.to(player.room).emit("game:totalPlayers", game.players.length) + socket.emit("game:successJoin") }, @@ -83,6 +86,8 @@ const Player = { }) socket.to(game.room).emit("game:playerAnswer", game.playersAnswer.length) + io.to(game.room).emit("game:totalPlayers", game.players.length) + if (game.playersAnswer.length === game.players.length) { abortCooldown() } diff --git a/src/components/game/states/Answers.jsx b/src/components/game/states/Answers.jsx index 2b9e9b3..6e54897 100644 --- a/src/components/game/states/Answers.jsx +++ b/src/components/game/states/Answers.jsx @@ -43,6 +43,7 @@ export default function Answers({ const [percentages, setPercentages] = useState([]) const [cooldown, setCooldown] = useState(time) const [totalAnswer, setTotalAnswer] = useState(0) + const [totalPlayer, setTotalPlayer] = useState(0) const [sfxPop] = useSound(SFX_ANSWERS_SOUND, { volume: 0.1, @@ -102,9 +103,14 @@ export default function Answers({ sfxPop() }) + socket.on("game:totalPlayers", (total) => { + setTotalPlayer(total) + }) + return () => { socket.off("game:cooldown") socket.off("game:playerAnswer") + socket.off("game:totalPlayers") } }, [sfxPop]) @@ -150,7 +156,7 @@ export default function Answers({
Answers - {totalAnswer} + {totalAnswer}/{totalPlayer}
)} diff --git a/src/components/game/states/Room.jsx b/src/components/game/states/Room.jsx index 29a7036..4f95ddd 100644 --- a/src/components/game/states/Room.jsx +++ b/src/components/game/states/Room.jsx @@ -4,6 +4,7 @@ import { useEffect, useState } from "react" export default function Room({ data: { text, inviteCode } }) { const { socket } = useSocketContext() const [playerList, setPlayerList] = useState([]) + const [totalPlayers, setTotalPlayers] = useState(0) useEffect(() => { socket.on("manager:newPlayer", (player) => { @@ -18,10 +19,15 @@ export default function Room({ data: { text, inviteCode } }) { setPlayerList(playerList.filter((p) => p.id !== playerId)) }) + socket.on("game:totalPlayers", (total) => { + setTotalPlayers(total) + }) + return () => { socket.off("manager:newPlayer") socket.off("manager:removePlayer") socket.off("manager:playerKicked") + socket.off("game:totalPlayers") } }, [playerList]) @@ -35,6 +41,12 @@ export default function Room({ data: { text, inviteCode } }) { {text} +
+ + Players Joined: {totalPlayers} + +
+
{playerList.map((player) => (