From 93b1098e742cd5470e1c2bcd3afbd3d37598f739 Mon Sep 17 00:00:00 2001 From: Muhammad Rais Ramadhani Date: Sat, 13 Sep 2025 18:14:56 +0700 Subject: [PATCH 1/3] Emit total players count to clients in the room on player join and kick events --- socket/roles/manager.js | 3 +++ socket/roles/player.js | 5 +++++ src/components/game/states/Answers.jsx | 8 +++++++- src/components/game/states/Room.jsx | 12 ++++++++++++ 4 files changed, 27 insertions(+), 1 deletion(-) diff --git a/socket/roles/manager.js b/socket/roles/manager.js index 206c4b8..f8ee6f4 100644 --- a/socket/roles/manager.js +++ b/socket/roles/manager.js @@ -37,6 +37,9 @@ const Manager = { io.in(playerId).socketsLeave(game.room) io.to(player.id).emit("game:kick") io.to(game.manager).emit("manager:playerKicked", player.id) + + // Emit updated total players to all clients in the room + 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..e6c2a9b 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") }, @@ -82,6 +85,8 @@ const Player = { data: { text: "Waiting for the players to answer" }, }) socket.to(game.room).emit("game:playerAnswer", game.playersAnswer.length) + // Also emit total players to keep the UI updated + 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) => (
Date: Sun, 21 Sep 2025 16:26:20 +0700 Subject: [PATCH 2/3] Remove comments --- socket/roles/manager.js | 1 - socket/roles/player.js | 2 +- tailwind.config.js | 19 ------------------- 3 files changed, 1 insertion(+), 21 deletions(-) delete mode 100644 tailwind.config.js diff --git a/socket/roles/manager.js b/socket/roles/manager.js index f8ee6f4..252f6d1 100644 --- a/socket/roles/manager.js +++ b/socket/roles/manager.js @@ -38,7 +38,6 @@ const Manager = { io.to(player.id).emit("game:kick") io.to(game.manager).emit("manager:playerKicked", player.id) - // Emit updated total players to all clients in the room io.to(game.room).emit("game:totalPlayers", game.players.length) }, diff --git a/socket/roles/player.js b/socket/roles/player.js index e6c2a9b..454b2ab 100644 --- a/socket/roles/player.js +++ b/socket/roles/player.js @@ -85,7 +85,7 @@ const Player = { data: { text: "Waiting for the players to answer" }, }) socket.to(game.room).emit("game:playerAnswer", game.playersAnswer.length) - // Also emit total players to keep the UI updated + io.to(game.room).emit("game:totalPlayers", game.players.length) if (game.playersAnswer.length === game.players.length) { diff --git a/tailwind.config.js b/tailwind.config.js deleted file mode 100644 index 0bd9511..0000000 --- a/tailwind.config.js +++ /dev/null @@ -1,19 +0,0 @@ -/** @type {import('tailwindcss').Config} */ -module.exports = { - content: [ - "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", - "./src/components/**/*.{js,ts,jsx,tsx,mdx}", - "./src/app/**/*.{js,ts,jsx,tsx,mdx}", - ], - theme: { - extend: { - colors: { - primary: "#ff9900", - secondary: "#1a140b", - }, - }, - }, - safelist: ["grid-cols-4", "grid-cols-3", "grid-cols-2", { - pattern: /bg-(red|blue|yellow|green)/}], - plugins: [], -} From bfd6810f166abb187f5b29ec50eae81e1ab2dd26 Mon Sep 17 00:00:00 2001 From: Muhammad Rais Ramadhani Date: Sun, 21 Sep 2025 17:24:55 +0700 Subject: [PATCH 3/3] Add Tailwind CSS configuration file --- tailwind.config.js | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 tailwind.config.js diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..629640c --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,25 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", + "./src/components/**/*.{js,ts,jsx,tsx,mdx}", + "./src/app/**/*.{js,ts,jsx,tsx,mdx}", + ], + theme: { + extend: { + colors: { + primary: "#ff9900", + secondary: "#1a140b", + }, + }, + }, + safelist: [ + "grid-cols-4", + "grid-cols-3", + "grid-cols-2", + { + pattern: /bg-(red|blue|yellow|green)/, + }, + ], + plugins: [], +}