From 8a2519203476898795f8b996b4a0c0c934770d9a Mon Sep 17 00:00:00 2001
From: RandyJC <rchompff@gmail.com>
Date: Tue, 9 Dec 2025 14:25:21 +0100
Subject: [PATCH] clean resume state when pausing game

---
 packages/socket/src/services/game.ts              |  7 +++++++
 .../web/src/app/game/manager/[gameId]/page.tsx    | 11 +++++++++++
 packages/web/src/components/game/GameWrapper.tsx  | 15 +++++++++++++++
 3 files changed, 33 insertions(+)

diff --git a/packages/socket/src/services/game.ts b/packages/socket/src/services/game.ts
index 81db6b4..4f48ef4 100644
--- a/packages/socket/src/services/game.ts
+++ b/packages/socket/src/services/game.ts
@@ -314,6 +314,10 @@ class Game {
       players: this.players,
     })
     socket.emit("game:totalPlayers", this.players.length)
+    if (this.breakActive) {
+      socket.emit("manager:break", true)
+      socket.emit("game:break", true)
+    }
 
     registry.reactivateGame(this.gameId)
     console.log(`Manager reconnected to game ${this.inviteCode}`)
@@ -365,6 +369,9 @@ class Game {
       },
     })
     socket.emit("game:totalPlayers", this.players.length)
+    if (this.breakActive) {
+      socket.emit("game:break", true)
+    }
     console.log(
       `Player ${player.username} reconnected to game ${this.inviteCode}`
     )
diff --git a/packages/web/src/app/game/manager/[gameId]/page.tsx b/packages/web/src/app/game/manager/[gameId]/page.tsx
index ec93f46..0c93a57 100644
--- a/packages/web/src/app/game/manager/[gameId]/page.tsx
+++ b/packages/web/src/app/game/manager/[gameId]/page.tsx
@@ -26,6 +26,7 @@ const ManagerGame = () => {
     useManagerStore()
   const { setQuestionStates } = useQuestionStore()
   const [cooldownPaused, setCooldownPaused] = useState(false)
+  const [breakActive, setBreakActive] = useState(false)
   const { players } = useManagerStore()
 
   useEvent("game:status", ({ name, data }) => {
@@ -73,6 +74,9 @@ const ManagerGame = () => {
     setCooldownPaused(isPaused)
   })
 
+  useEvent("game:break", (active) => setBreakActive(active))
+  useEvent("manager:break", (active) => setBreakActive(active))
+
   const handleSkip = () => {
     if (!gameId) {
       return
@@ -115,6 +119,11 @@ const ManagerGame = () => {
     }
   }
 
+  const handleBreakToggle = () => {
+    if (!gameId) return
+    socket?.emit("manager:setBreak", { gameId, active: !breakActive })
+  }
+
   const handleEndGame = () => {
     if (!gameId) return
     socket?.emit("manager:endGame", { gameId })
@@ -173,6 +182,8 @@ const ManagerGame = () => {
       showPause={
         status?.name === STATUS.SHOW_QUESTION || status?.name === STATUS.SELECT_ANSWER
       }
+      onBreakToggle={handleBreakToggle}
+      breakActive={breakActive}
       onEnd={handleEndGame}
       players={players}
       manager
diff --git a/packages/web/src/components/game/GameWrapper.tsx b/packages/web/src/components/game/GameWrapper.tsx
index cddaf28..65f9931 100644
--- a/packages/web/src/components/game/GameWrapper.tsx
+++ b/packages/web/src/components/game/GameWrapper.tsx
@@ -21,6 +21,8 @@ type Props = PropsWithChildren & {
   onEnd?: () => void
   players?: { id: string; username: string; connected: boolean }[]
   manager?: boolean
+  onBreakToggle?: () => void
+  breakActive?: boolean
 }
 
 const GameWrapper = ({
@@ -33,6 +35,8 @@ const GameWrapper = ({
   onEnd,
   players,
   manager,
+  onBreakToggle,
+  breakActive,
 }: Props) => {
   const { isConnected } = useSocket()
   const { player } = usePlayerStore()
@@ -135,6 +139,17 @@ const GameWrapper = ({
               </Button>
             )}
 
+            {manager && onBreakToggle && (
+              <Button
+                className={clsx("self-end bg-white px-4 text-black!", {
+                  "pointer-events-none": isDisabled,
+                })}
+                onClick={onBreakToggle}
+              >
+                {breakActive ? "Resume game" : "Break"}
+              </Button>
+            )}
+
             {manager && onEnd && (
               <Button className="self-end bg-red-600 px-4" onClick={onEnd}>
                 End game