Update Manager

socket/src/roles/manager.js

@@ -60,7 +60,7 @@ const Manager = {
 
   showLoaderboard: (game, io, socket) => {
     if (!game.questions[game.currentQuestion + 1]) {
-      io.to(game.room).emit("game:status", {
+      io.to(socket).emit("game:status", {
         name: "FINISH",
         data: {
           winners: game.players.slice(0, 3).sort((a, b) => b.points - a.points),
@@ -71,7 +71,7 @@ const Manager = {
       return
     }
 
-    io.to(game.room).emit("game:status", {
+    io.to(socket.id).emit("game:status", {
       name: "SHOW_LEADERBOARD",
       data: {
         leaderboard: game.players

src/components/game/join/Room.jsx

@@ -7,7 +7,7 @@ import { useState } from "react"
 export default function Room() {
   const { player, dispatch } = usePlayerContext()
   const [loading, setLoading] = useState(false)
-  const [roomId, setRoomId] = useState("")
+  const [roomId, setRoomId] = useState("207223")
 
   const handleLogin = () => {
     dispatch({ type: "JOIN", payload: roomId })

src/components/game/states/Answers.jsx

@@ -5,7 +5,8 @@ import Rhombus from "@/components/icons/Rhombus"
 import AnswerButton from "../../AnswerButton"
 import { useSocketContext } from "@/context/socket"
 import Image from "next/image"
-import { useState } from "react"
+import { useEffect, useRef, useState } from "react"
+import clsx from "clsx"
 
 const answersColors = [
   "bg-red-500",
@@ -16,12 +17,47 @@ const answersColors = [
 
 const answersIcons = [Triangle, Rhombus, Circle, Square]
 
-export default function Answers({ data: { question, answers, image, time } }) {
+const calculatePercentages = (objectResponses) => {
+  const keys = Object.keys(objectResponses)
+  const values = Object.values(objectResponses)
+
+  if (!values.length) {
+    return []
+  }
+
+  const totalSum = values.reduce(
+    (accumulator, currentValue) => accumulator + currentValue,
+    0
+  )
+
+  let result = {}
+
+  keys.map((key) => {
+    result[key] = ((objectResponses[key] / totalSum) * 100).toFixed() + "%"
+  })
+
+  console.log(result)
+
+  return result
+}
+
+export default function Answers({
+  data: { question, answers, image, time, responses, correct },
+}) {
   const { socket } = useSocketContext()
 
+  const [percentages, setPercentages] = useState([])
   const [cooldown, setCooldown] = useState(time)
   const [totalAnswer, setTotalAnswer] = useState(0)
 
+  useEffect(() => {
+    if (!responses) {
+      return
+    }
+
+    setPercentages(calculatePercentages(responses))
+  }, [responses])
+
   socket.on("game:cooldown", (sec) => {
     setCooldown(sec)
   })
@@ -38,25 +74,50 @@ export default function Answers({ data: { question, answers, image, time } }) {
         </h2>
 
         {/*<Image src={image} className="h-60 w-auto rounded-md" />*/}
+
+        {responses && (
+          <div
+            className={`w-full gap-4 grid grid-cols-${answers.length} px-2 max-w-3xl h-40 mt-8`}
+          >
+            {answers.map((_, key) => (
+              <div
+                key={key}
+                className={clsx(
+                  "flex flex-col rounded-md overflow-hidden self-end justify-end",
+                  answersColors[key]
+                )}
+                style={{ height: percentages[key] }}
+              >
+                <span className="text-white font-bold drop-shadow-md text-lg bg-black/10 w-full text-center">
+                  {responses[key] || 0}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
       </div>
 
-      <div className="">
-        <div className="max-w-7xl mx-auto mb-4 rounded-full w-full flex justify-between gap-1 font-bold text-white text-lg md:text-xl px-2">
-          <div className="bg-white shadow-inset text-black px-4 font-bold rounded-md flex flex-col items-center text-lg">
-            <span className="text-sm">Time</span>
-            <span className="-translate-y-1">{cooldown}</span>
+      <div>
+        {!responses && (
+          <div className="max-w-7xl mx-auto mb-4 rounded-full w-full flex justify-between gap-1 font-bold text-white text-lg md:text-xl px-2">
+            <div className="bg-white shadow-inset text-black px-4 font-bold rounded-md flex flex-col items-center text-lg">
+              <span className="text-sm">Time</span>
+              <span className="-translate-y-1">{cooldown}</span>
+            </div>
+            <div className="bg-white shadow-inset text-black px-4 font-bold rounded-md flex flex-col items-center text-lg">
+              <span className="text-sm">Answers</span>
+              <span className="-translate-y-1">{totalAnswer}</span>
+            </div>
           </div>
-          <div className="bg-white shadow-inset text-black px-4 font-bold rounded-md flex flex-col items-center text-lg">
-            <span className="text-sm">Answers</span>
-            <span className="-translate-y-1">{totalAnswer}</span>
-          </div>
-        </div>
+        )}
 
         <div className="max-w-7xl mx-auto mb-4 rounded-full w-full grid grid-cols-2 gap-1 font-bold text-white text-lg md:text-xl px-2">
           {answers.map((answer, key) => (
             <AnswerButton
               key={key}
-              className={answersColors[key]}
+              className={clsx(answersColors[key], {
+                "opacity-65": responses && correct !== key,
+              })}
               icon={answersIcons[key]}
               onClick={() => socket.emit("player:selectedAnswer", key)}
             >

src/components/game/states/Question.jsx

@@ -4,12 +4,6 @@ import { useEffect, useRef } from "react"
 export default function Question({ data: { question } }) {
   const barRef = useRef(null)
 
-  useEffect(() => {
-    setTimeout(() => {
-      barRef.current.style.width = "100%"
-    }, 1)
-  }, [])
-
   return (
     <section className="max-w-7xl mx-auto w-full flex-1 relative items-center flex flex-col px-4 h-full">
       <div className="flex items-center flex-1">
@@ -20,7 +14,7 @@ export default function Question({ data: { question } }) {
       <div
         ref={barRef}
         className="h-6 bg-primary mb-32 rounded-full self-start justify-self-end"
-        style={{ transition: `width ${6}s linear`, width: "0%" }}
+        style={{ animation: `progressBar ${6}s linear forwards` }}
       ></div>
     </section>
   )

src/components/game/states/Result.jsx

@@ -16,7 +16,7 @@ export default function Result({
   }, [])
 
   return (
-    <section className="max-w-7xl mx-auto w-full flex-1 relative items-center justify-center flex flex-col">
+    <section className="max-w-7xl mx-auto w-full flex-1 relative items-center justify-center flex flex-col anim-show">
       {correct ? (
         <CricleCheck className="max-h-60 aspect-square w-full" />
       ) : (

src/pages/game.jsx

@@ -14,7 +14,6 @@ const gameStateComponent = {
   SHOW_QUESTION: Question,
   WAIT: Wait,
   SHOW_RESULT: Result,
-  SHOW_LEADERBOARD: Leaderboard,
 }
 
 export default function Game() {

src/pages/manager.jsx

@@ -2,7 +2,6 @@ import GameWrapper from "@/components/game/GameWrapper"
 import Answers from "@/components/game/states/Answers"
 import Leaderboard from "@/components/game/states/Leaderboard"
 import Question from "@/components/game/states/Question"
-import Result from "@/components/game/states/Result"
 import Start from "@/components/game/states/Start"
 import Wait from "@/components/game/states/Wait"
 import { usePlayerContext } from "@/context/player"
@@ -15,7 +14,7 @@ const gameStateComponent = {
   SELECT_ANSWER: Answers,
   SHOW_QUESTION: Question,
   WAIT: Wait,
-  SHOW_RESULT: Result,
+  SHOW_RESPONSES: Answers,
   SHOW_LEADERBOARD: Leaderboard,
 }
 

src/styles/globals.css

@@ -50,3 +50,12 @@
     transform: scale(1);
   }
 }
+
+@keyframes progressBar {
+  from {
+    width: 0%;
+  }
+  to {
+    width: 100%;
+  }
+}