fix(game): fix kickPlayer event to include gameId and improve reset message on player kick

packages/common/src/types/game/socket.ts

@@ -31,7 +31,6 @@ export interface ServerToClientEvents {
   "game:errorMessage": (_message: string) => void
   "game:startCooldown": () => void
   "game:cooldown": (_count: number) => void
-  "game:kick": () => void
   "game:reset": (_message: string) => void
   "game:updateQuestion": (_data: { current: number; total: number }) => void
   "game:playerAnswer": (_count: number) => void
@@ -69,9 +68,7 @@ export interface ClientToServerEvents {
   "game:create": (_quizzId: string) => void
   "manager:auth": (_password: string) => void
   "manager:reconnect": (_message: { gameId: string }) => void
-  "manager:kickPlayer": (
+  "manager:kickPlayer": (_message: { gameId: string; playerId: string }) => void
-    _message: MessageWithoutStatus<{ playerId: string }>
-  ) => void
   "manager:startGame": (_message: MessageGameId) => void
   "manager:abortQuiz": (_message: MessageGameId) => void
   "manager:nextQuestion": (_message: MessageGameId) => void

packages/socket/src/index.ts

@@ -104,8 +104,8 @@ io.on("connection", (socket) => {
     withGame(gameId, socket, (game) => game.join(socket, data.username))
   )
 
-  socket.on("manager:kickPlayer", ({ gameId, data }) =>
+  socket.on("manager:kickPlayer", ({ gameId, playerId }) =>
-    withGame(gameId, socket, (game) => game.kickPlayer(socket, data.playerId))
+    withGame(gameId, socket, (game) => game.kickPlayer(socket, playerId))
   )
 
   socket.on("manager:startGame", ({ gameId }) =>

packages/socket/src/services/game.ts

@@ -158,7 +158,9 @@ class Game {
     this.playerStatus.delete(playerId)
 
     this.io.in(playerId).socketsLeave(this.gameId)
-    this.io.to(player.id).emit("game:kick")
+    this.io
+      .to(player.id)
+      .emit("game:reset", "You have been kicked by the manager")
     this.io.to(this.manager.id).emit("manager:playerKicked", player.id)
 
     this.io.to(this.gameId).emit("game:totalPlayers", this.players.length)

packages/web/src/app/(auth)/manager/page.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { QuizzWithId } from "@rahoot/common/types/game"
+import { STATUS } from "@rahoot/common/types/game/status"
 import ManagerPassword from "@rahoot/web/components/game/create/ManagerPassword"
 import SelectQuizz from "@rahoot/web/components/game/create/SelectQuizz"
 import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
@@ -23,7 +24,7 @@ const Manager = () => {
 
   useEvent("manager:gameCreated", ({ gameId, inviteCode }) => {
     setGameId(gameId)
-    setStatus("SHOW_ROOM", { text: "Waiting for the players", inviteCode })
+    setStatus(STATUS.SHOW_ROOM, { text: "Waiting for the players", inviteCode })
     router.push(`/game/manager/${gameId}`)
   })
 

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

@@ -44,11 +44,6 @@ const Game = () => {
     }
   })
 
-  useEvent("game:kick", () => {
-    router.replace("/")
-    reset()
-  })
-
   useEvent("game:reset", (message) => {
     router.replace("/")
     reset()

packages/web/src/components/game/join/Username.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { STATUS } from "@rahoot/common/types/game/status"
 import Button from "@rahoot/web/components/Button"
 import Form from "@rahoot/web/components/Form"
 import Input from "@rahoot/web/components/Input"
@@ -11,7 +12,7 @@ import { KeyboardEvent, useState } from "react"
 
 const Username = () => {
   const { socket } = useSocket()
-  const { gameId, login } = usePlayerStore()
+  const { gameId, login, setStatus } = usePlayerStore()
   const router = useRouter()
   const [username, setUsername] = useState("")
 
@@ -30,6 +31,7 @@ const Username = () => {
   }
 
   useEvent("game:successJoin", (gameId) => {
+    setStatus(STATUS.WAIT, { text: "Waiting for the players" })
     login(username)
 
     router.replace(`/game/${gameId}`)

packages/web/src/components/game/states/Room.tsx

@@ -11,6 +11,7 @@ type Props = {
 }
 
 const Room = ({ data: { text, inviteCode } }: Props) => {
+  const { gameId } = useManagerStore()
   const { socket } = useSocket()
   const { players } = useManagerStore()
   const [playerList, setPlayerList] = useState<Player[]>(players)
@@ -33,8 +34,13 @@ const Room = ({ data: { text, inviteCode } }: Props) => {
   })
 
   const handleKick = (playerId: string) => () => {
+    if (!gameId) {
+      return
+    }
+
     socket?.emit("manager:kickPlayer", {
-      data: { playerId },
+      gameId,
+      playerId,
     })
   }