Add leaderboard & Manager some features

src/components/game/GameWrapper.jsx

@@ -2,10 +2,22 @@ import Image from "next/image"
 import Button from "@/components/Button"
 import background from "@/assets/2238431_1694.jpg"
 import { usePlayerContext } from "@/context/player"
+import { useSocketContext } from "@/context/socket"
+import { useState } from "react"
 
-export default function GameWrapper({ children }) {
+export default function GameWrapper({ children, onNext, manager }) {
+  const { socket } = useSocketContext()
   const { player } = usePlayerContext()
 
+  const [questionState, setQuestionState] = useState()
+
+  socket.on("game:updateQuestion", ({ current, total }) => {
+    setQuestionState({
+      current,
+      total,
+    })
+  })
+
   return (
     <section className="relative flex justify-between flex-col w-full min-h-screen">
       <div className="fixed h-full w-full top-0 left-0 bg-orange-600 opacity-70 -z-10">
@@ -16,10 +28,20 @@ export default function GameWrapper({ children }) {
       </div>
 
       <div className="p-4 w-full flex justify-between">
-        <div className="bg-white shadow-inset text-black px-4 font-bold rounded-md flex items-center text-lg">
-          1/10
-        </div>
-        <Button className="bg-white !text-black px-4">Skip</Button>
+        {questionState && (
+          <div className="bg-white shadow-inset text-black px-4 font-bold rounded-md flex items-center text-lg">
+            {`${questionState.current} / ${questionState.total}`}
+          </div>
+        )}
+
+        {manager && (
+          <Button
+            className="bg-white !text-black px-4 self-end"
+            onClick={() => onNext()}
+          >
+            Skip
+          </Button>
+        )}
       </div>
 
       {children}

src/components/game/join/Username.jsx

@@ -19,6 +19,7 @@ export default function Username() {
       payload: username,
     })
 
+    socket.emit("player:join", { username: username, room: player.room })
     router.push("/game")
   }
 

src/components/game/states/Leaderboard.jsx

@@ -1,24 +1,16 @@
-export default function Leaderboard({ data }) {
+export default function Leaderboard({ data: { leaderboard } }) {
   return (
-    <section className="max-w-7xl mx-auto w-full flex-1 flex-col relative items-center justify-center flex">
+    <section className="max-w-7xl mx-auto w-full flex-1 flex-col relative items-center justify-center flex px-2">
       <h2 className="text-white drop-shadow-md text-5xl font-bold mb-6">
         Leaderboard
       </h2>
       <div className="w-full flex-col flex gap-2">
-        <div className=" bg-orange-500 rounded-md p-3 flex justify-between w-full text-white font-bold text-2xl">
-          <span>Username</span>
-          <span>10000</span>
-        </div>
-
-        <div className="bg-orange-500 rounded-md p-3 flex justify-between w-full text-white font-bold text-2xl">
-          <span>Username</span>
-          <span>10000</span>
-        </div>
-
-        <div className="bg-orange-500 rounded-md p-3 flex justify-between w-full text-white font-bold text-2xl">
-          <span>Username</span>
-          <span>10000</span>
-        </div>
+        {leaderboard.map(({ username, points }) => (
+          <div className="bg-primary rounded-md p-3 flex justify-between w-full text-white font-bold text-2xl">
+            <span className="drop-shadow-md">{username}</span>
+            <span className="drop-shadow-md">{points}</span>
+          </div>
+        ))}
       </div>
     </section>
   )

src/components/game/states/Question.jsx

@@ -19,8 +19,8 @@ export default function Question({ data: { question } }) {
       </div>
       <div
         ref={barRef}
-        className="h-6 bg-primary mb-32 rounded-full w-0 self-start justify-self-end"
-        style={{ transition: `width ${6}s linear` }}
+        className="h-6 bg-primary mb-32 rounded-full self-start justify-self-end"
+        style={{ transition: `width ${6}s linear`, width: "0%" }}
       ></div>
     </section>
   )

src/components/game/states/Start.jsx

@@ -0,0 +1,38 @@
+import Loader from "@/components/Loader"
+import { useSocketContext } from "@/context/socket"
+import { useEffect, useState } from "react"
+
+export default function Start({ data: { text } }) {
+  const { socket } = useSocketContext()
+  const [playerList, setPlayerList] = useState([])
+
+  socket.on("manager:newPlayer", (player) => {
+    setPlayerList([...playerList, player])
+  })
+
+  useEffect(() => {
+    socket.emit("manager:createRoom")
+  }, [])
+
+  return (
+    <section className="max-w-7xl mx-auto w-full flex-1 relative items-center justify-center flex flex-col px-2">
+      <h2 className="text-white font-bold text-4xl drop-shadow-lg mb-4">
+        {text}
+      </h2>
+
+      <div className="flex flex-wrap gap-3">
+        {playerList.map((player) => (
+          <div
+            key={player.id}
+            className="py-3 px-4 bg-primary shadow-inset rounded-md text-white font-bold"
+            onClick={() => socket.emit("manager:kickPlayer", player.id)}
+          >
+            <span className="drop-shadow-md text-xl hover:line-through cursor-pointer">
+              {player.username}
+            </span>
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}