Add Kick player & Validators

src/components/Toaster.jsx

@@ -0,0 +1,26 @@
+import clsx from "clsx"
+import { Toaster as ToasterRaw, ToastBar } from "react-hot-toast"
+
+const Toaster = () => (
+  <ToasterRaw>
+    {(t) => (
+      <ToastBar
+        toast={t}
+        style={{
+          ...t.style,
+          boxShadow: "rgba(0, 0, 0, 0.25) 0px -4px inset",
+          fontWeight: 700,
+        }}
+      >
+        {({ icon, message }) => (
+          <>
+            {icon}
+            {message}
+          </>
+        )}
+      </ToastBar>
+    )}
+  </ToasterRaw>
+)
+
+export default Toaster

src/components/game/GameWrapper.jsx

@@ -4,14 +4,24 @@ import background from "@/assets/background.webp"
 import { usePlayerContext } from "@/context/player"
 import { useSocketContext } from "@/context/socket"
 import { useEffect, useState } from "react"
+import { useRouter } from "next/router"
 
 export default function GameWrapper({ children, textNext, onNext, manager }) {
   const { socket } = useSocketContext()
-  const { player } = usePlayerContext()
+  const { player, dispatch } = usePlayerContext()
+  const router = useRouter()
 
   const [questionState, setQuestionState] = useState()
 
   useEffect(() => {
+    socket.on("game:kick", () => {
+      dispatch({
+        type: "LOGOUT",
+      })
+
+      router.replace("/")
+    })
+
     socket.on("game:updateQuestion", ({ current, total }) => {
       setQuestionState({
         current,
@@ -20,6 +30,7 @@ export default function GameWrapper({ children, textNext, onNext, manager }) {
     })
 
     return () => {
+      socket.off("game:kick")
       socket.off("game:updateQuestion")
     }
   }, [])

src/components/game/join/Room.jsx

@@ -2,7 +2,7 @@ import { usePlayerContext } from "@/context/player"
 import Form from "@/components/Form"
 import Button from "@/components/Button"
 import Input from "@/components/Input"
-import { useEffect, useMemo, useState } from "react"
+import { useEffect, useState } from "react"
 import { socket } from "@/context/socket"
 
 export default function Room() {

src/components/game/join/Username.jsx

@@ -2,7 +2,7 @@ import { usePlayerContext } from "@/context/player"
 import Form from "@/components/Form"
 import Button from "@/components/Button"
 import Input from "@/components/Input"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { useSocketContext } from "@/context/socket"
 import { useRouter } from "next/router"
 
@@ -14,14 +14,23 @@ export default function Username() {
   const [username, setUsername] = useState("")
 
   const handleJoin = () => {
-    dispatch({
-      type: "LOGIN",
-      payload: username,
+    socket.emit("player:join", { username: username, room: player.room })
+  }
+
+  useEffect(() => {
+    socket.on("game:successJoin", () => {
+      dispatch({
+        type: "LOGIN",
+        payload: username,
+      })
+
+      router.replace("/game")
     })
 
-    socket.emit("player:join", { username: username, room: player.room })
-    router.push("/game")
-  }
+    return () => {
+      socket.off("game:successJoin")
+    }
+  }, [username])
 
   return (
     <>

src/components/game/states/Room.jsx

@@ -10,8 +10,13 @@ export default function Room({ data: { text, inviteCode } }) {
       setPlayerList([...playerList, player])
     })
 
+    socket.on("manager:playerKicked", (playerId) => {
+      setPlayerList(playerList.filter((p) => p.id !== playerId))
+    })
+
     return () => {
       socket.off("manager:newPlayer")
+      socket.off("manager:playerKicked")
     }
   }, [playerList])
 

src/pages/_app.js

@@ -1,3 +1,4 @@
+import Toaster from "@/components/Toaster"
 import { PlayerContextProvider } from "@/context/player"
 import { SocketContextProvider } from "@/context/socket"
 import "@/styles/globals.css"
@@ -26,6 +27,7 @@ export default function App({ Component, pageProps }) {
           </main>
         </PlayerContextProvider>
       </SocketContextProvider>
+      <Toaster />
     </>
   )
 }

src/pages/game.jsx

@@ -9,7 +9,7 @@ import Start from "@/components/game/states/Start"
 import { usePlayerContext } from "@/context/player"
 import { useSocketContext } from "@/context/socket"
 import { useRouter } from "next/router"
-import { createElement, useMemo, useState } from "react"
+import { createElement, useEffect, useState } from "react"
 
 const gameStateComponent = {
   SELECT_ANSWER: Answers,
@@ -26,10 +26,11 @@ export default function Game() {
   const { socket } = useSocketContext()
   const { player } = usePlayerContext()
 
-  if (!player) {
-    //router.push("/")
-    return
-  }
+  useEffect(() => {
+    if (!player) {
+      router.replace("/")
+    }
+  }, [])
 
   const [state, setState] = useState({
     status: {
@@ -42,7 +43,7 @@ export default function Game() {
     },
   })
 
-  useMemo(() => {
+  useEffect(() => {
     socket.on("game:status", (status) => {
       setState({
         ...state,

src/pages/index.js

@@ -4,12 +4,13 @@ import Form from "@/components/Form"
 import Button from "@/components/Button"
 import Input from "@/components/Input"
 import logo from "@/assets/logo.svg"
-import { useEffect, useMemo, useState } from "react"
+import { useEffect, useState } from "react"
 import Loader from "@/components/Loader"
 import { usePlayerContext } from "@/context/player"
 import Room from "@/components/game/join/Room"
 import Username from "@/components/game/join/Username"
 import { useSocketContext } from "@/context/socket"
+import toast from "react-hot-toast"
 
 export default function Home() {
   const [loading, setLoading] = useState(false)
@@ -17,9 +18,9 @@ export default function Home() {
   const { player, dispatch } = usePlayerContext()
   const { socket } = useSocketContext()
 
-  useMemo(() => {
+  useEffect(() => {
     socket.on("game:errorMessage", (message) => {
-      console.log(message)
+      toast.error(message)
     })
 
     return () => {

src/pages/managerold.jsx

@@ -4,7 +4,7 @@ import Leaderboard from "@/components/game/states/Leaderboard"
 import Question from "@/components/game/states/Question"
 import Wait from "@/components/game/states/Wait"
 import { useSocketContext } from "@/context/socket"
-import { createElement, useEffect, useMemo, useState } from "react"
+import { createElement, useEffect, useState } from "react"
 
 export default function Manager({ children }) {
   const { socket } = useSocketContext()