fix(game): increment current question on reconnect for manager and player

packages/socket/src/services/game.ts

@@ -203,7 +203,7 @@ class Game {
     socket.emit("manager:successReconnect", {
       gameId: this.gameId,
       currentQuestion: {
-        current: this.round.currentQuestion,
+        current: this.round.currentQuestion + 1,
         total: this.quizz.questions.length,
       },
       status,
@@ -250,7 +250,7 @@ class Game {
     socket.emit("player:successReconnect", {
       gameId: this.gameId,
       currentQuestion: {
-        current: this.round.currentQuestion,
+        current: this.round.currentQuestion + 1,
         total: this.quizz.questions.length,
       },
       status,

packages/web/src/components/game/GameWrapper.tsx

@@ -8,8 +8,9 @@ import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
 import { usePlayerStore } from "@rahoot/web/stores/player"
 import { useQuestionStore } from "@rahoot/web/stores/question"
 import { MANAGER_SKIP_BTN } from "@rahoot/web/utils/constants"
+import clsx from "clsx"
 import Image from "next/image"
-import { PropsWithChildren } from "react"
+import { PropsWithChildren, useEffect, useState } from "react"
 
 type Props = PropsWithChildren & {
   statusName: Status | undefined
@@ -21,6 +22,7 @@ const GameWrapper = ({ children, statusName, onNext, manager }: Props) => {
   const { isConnected } = useSocket()
   const { player } = usePlayerStore()
   const { questionStates, setQuestionStates } = useQuestionStore()
+  const [isDisabled, setIsDisabled] = useState(false)
   const next = statusName ? MANAGER_SKIP_BTN[statusName] : null
 
   useEvent("game:updateQuestion", ({ current, total }) => {
@@ -30,6 +32,15 @@ const GameWrapper = ({ children, statusName, onNext, manager }: Props) => {
     })
   })
 
+  useEffect(() => {
+    setIsDisabled(false)
+  }, [statusName])
+
+  const handleNext = () => {
+    setIsDisabled(true)
+    onNext?.()
+  }
+
   return (
     <section className="relative flex min-h-screen w-full flex-col justify-between">
       <div className="fixed top-0 left-0 -z-10 h-full w-full bg-orange-600 opacity-70">
@@ -56,8 +67,10 @@ const GameWrapper = ({ children, statusName, onNext, manager }: Props) => {
 
             {manager && next && (
               <Button
-                className="self-end bg-white px-4 text-black!"
-                onClick={onNext}
+                className={clsx("self-end bg-white px-4 text-black!", {
+                  "pointer-events-none": isDisabled,
+                })}
+                onClick={handleNext}
               >
                 {next}
               </Button>