adding new clients view for manager page

packages/web/src/app/game/manager/[gameId]/page.tsx

@@ -26,6 +26,7 @@ const ManagerGame = () => {
     useManagerStore()
   const { setQuestionStates } = useQuestionStore()
   const [cooldownPaused, setCooldownPaused] = useState(false)
+  const { players } = useManagerStore()
 
   useEvent("game:status", ({ name, data }) => {
     if (name in GAME_STATE_COMPONENTS_MANAGER) {
@@ -56,6 +57,18 @@ const ManagerGame = () => {
     toast.error(message)
   })
 
+  useEvent("manager:newPlayer", (player) => {
+    setPlayers((prev) => [...prev.filter((p) => p.id !== player.id), player])
+  })
+
+  useEvent("manager:removePlayer", (playerId) => {
+    setPlayers((prev) => prev.filter((p) => p.id !== playerId))
+  })
+
+  useEvent("manager:players", (players) => {
+    setPlayers(players)
+  })
+
   useEvent("game:cooldownPause", (isPaused) => {
     setCooldownPaused(isPaused)
   })
@@ -102,6 +115,11 @@ const ManagerGame = () => {
     }
   }
 
+  const handleEndGame = () => {
+    if (!gameId) return
+    socket?.emit("manager:endGame", { gameId })
+  }
+
   let component = null
 
   switch (status?.name) {
@@ -155,6 +173,8 @@ const ManagerGame = () => {
       showPause={
         status?.name === STATUS.SHOW_QUESTION || status?.name === STATUS.SELECT_ANSWER
       }
+      onEnd={handleEndGame}
+      players={players}
       manager
     >
       {component}

packages/web/src/components/game/GameWrapper.tsx

@@ -18,6 +18,8 @@ type Props = PropsWithChildren & {
   onPause?: () => void
   paused?: boolean
   showPause?: boolean
+  onEnd?: () => void
+  players?: { id: string; username: string; connected: boolean }[]
   manager?: boolean
 }
 
@@ -28,6 +30,8 @@ const GameWrapper = ({
   onPause,
   paused,
   showPause,
+  onEnd,
+  players,
   manager,
 }: Props) => {
   const { isConnected } = useSocket()
@@ -97,8 +101,37 @@ const GameWrapper = ({
                 {paused ? "Resume" : "Pause"}
               </Button>
             )}
+
+            {manager && onEnd && (
+              <Button className="self-end bg-red-600 px-4" onClick={onEnd}>
+                End game
+              </Button>
+            )}
           </div>
 
+          {manager && players && players.length > 0 && (
+            <div className="mx-4 mb-2 rounded-md bg-white/90 p-3 text-sm shadow">
+              <div className="mb-1 text-xs font-semibold uppercase text-gray-600">
+                Players ({players.length})
+              </div>
+              <div className="flex flex-wrap gap-2">
+                {players.map((p) => (
+                  <span
+                    key={p.id}
+                    className={clsx(
+                      "rounded border px-2 py-1 font-semibold",
+                      p.connected
+                        ? "border-green-500 text-green-700"
+                        : "border-gray-300 text-gray-500",
+                    )}
+                  >
+                    {p.username || p.id} {p.connected ? "" : "(disc.)"}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+
           {children}
 
           {!manager && (