Merge pull request #20 from raisramadhani/main

Emit total players count to clients in the room on player join and kick events & remove comments

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) => {

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()
     }

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({
             </div>
             <div className="flex flex-col items-center rounded-full bg-black/40 px-4 text-lg font-bold">
               <span className="translate-y-1 text-sm">Answers</span>
-              <span>{totalAnswer}</span>
+              <span>{totalAnswer}/{totalPlayer}</span>
             </div>
           </div>
         )}

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}
       </h2>
 
+      <div className="mb-6 flex items-center justify-center rounded-full bg-black/40 px-6 py-3">
+        <span className="text-2xl font-bold text-white drop-shadow-md">
+          Players Joined: {totalPlayers}
+        </span>
+      </div>
+
       <div className="flex flex-wrap gap-3">
         {playerList.map((player) => (
           <div

tailwind.config.js

@@ -13,7 +13,13 @@ module.exports = {
       },
     },
   },
-  safelist: ["grid-cols-4", "grid-cols-3", "grid-cols-2", {
-    pattern: /bg-(red|blue|yellow|green)/}],
+  safelist: [
+    "grid-cols-4",
+    "grid-cols-3",
+    "grid-cols-2",
+    {
+      pattern: /bg-(red|blue|yellow|green)/,
+    },
+  ],
   plugins: [],
 }