Add Start cooldown & Patch socket event

src/pages/game.jsx

@@ -5,15 +5,17 @@ import Prepared from "@/components/game/states/Prepared"
 import Question from "@/components/game/states/Question"
 import Result from "@/components/game/states/Result"
 import Wait from "@/components/game/states/Wait"
+import Start from "@/components/game/states/Start"
 import { usePlayerContext } from "@/context/player"
 import { useSocketContext } from "@/context/socket"
 import { useRouter } from "next/router"
-import { createElement, useState } from "react"
+import { createElement, useMemo, useState } from "react"
 
 const gameStateComponent = {
   SELECT_ANSWER: Answers,
   SHOW_QUESTION: Question,
   WAIT: Wait,
+  SHOW_START: Start,
   SHOW_RESULT: Result,
   SHOW_PREPARED: Prepared,
 }
@@ -40,16 +42,22 @@ export default function Game() {
     },
   })
 
-  socket.on("game:status", (status) => {
-    setState({
-      ...state,
-      status: status,
-      question: {
-        ...state.question,
-        current: status.question,
-      },
+  useMemo(() => {
+    socket.on("game:status", (status) => {
+      setState({
+        ...state,
+        status: status,
+        question: {
+          ...state.question,
+          current: status.question,
+        },
+      })
     })
-  })
+
+    return () => {
+      socket.off("game:status")
+    }
+  }, [state])
 
   return (
     <GameWrapper>