adding pause and resume in game state

packages/web/src/app/(auth)/manager/page.tsx

@@ -41,6 +41,9 @@ const Manager = () => {
   const handleCreate = (quizzId: string) => {
     socket?.emit("game:create", quizzId)
   }
+  const handleBreakToggle = (active: boolean) => {
+    socket?.emit("manager:setBreak", { gameId: null, active })
+  }
 
   if (!isAuth) {
     return <ManagerPassword onSubmit={handleAuth} />
@@ -52,6 +55,7 @@ const Manager = () => {
         quizzList={quizzList}
         onBack={() => setShowEditor(false)}
         onListUpdate={setQuizzList}
+        onBreakToggle={handleBreakToggle}
       />
     )
   }

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

@@ -39,6 +39,7 @@ const GameWrapper = ({
   const { questionStates, setQuestionStates } = useQuestionStore()
   const { backgroundUrl, setBackground, setBrandName } = useThemeStore()
   const [isDisabled, setIsDisabled] = useState(false)
+  const [onBreak, setOnBreak] = useState(false)
   const next = statusName ? MANAGER_SKIP_BTN[statusName] : null
 
   useEvent("game:updateQuestion", ({ current, total }) => {
@@ -52,6 +53,9 @@ const GameWrapper = ({
     setIsDisabled(false)
   }, [statusName])
 
+  useEvent("game:break", (active) => setOnBreak(active))
+  useEvent("manager:break", (active) => setOnBreak(active))
+
   useEffect(() => {
     const loadTheme = async () => {
       try {
@@ -171,6 +175,15 @@ const GameWrapper = ({
               </div>
             </div>
           )}
+
+          {onBreak && (
+            <div className="pointer-events-none fixed inset-0 z-40 flex items-center justify-center bg-black/60">
+              <div className="rounded-md bg-white/90 px-6 py-4 text-center shadow-lg">
+                <p className="text-lg font-semibold text-gray-800">Game paused for a break</p>
+                <p className="text-sm text-gray-600">We&apos;ll resume from the same spot.</p>
+              </div>
+            </div>
+          )}
         </>
       )}
     </section>

packages/web/src/components/game/create/QuizEditor.tsx

@@ -12,6 +12,7 @@ type Props = {
   quizzList: QuizzWithId[]
   onBack: () => void
   onListUpdate: (_quizz: QuizzWithId[]) => void
+  onBreakToggle?: (_active: boolean) => void
 }
 
 type EditableQuestion = QuizzWithId["questions"][number]
@@ -55,7 +56,7 @@ const formatBytes = (bytes: number) => {
   return `${value.toFixed(value >= 10 || value % 1 === 0 ? 0 : 1)} ${units[i]}`
 }
 
-const QuizEditor = ({ quizzList, onBack, onListUpdate }: Props) => {
+const QuizEditor = ({ quizzList, onBack, onListUpdate, onBreakToggle }: Props) => {
   const { socket } = useSocket()
   const [selectedId, setSelectedId] = useState<string | null>(null)
   const [draft, setDraft] = useState<QuizzWithId | null>(null)
@@ -462,19 +463,29 @@ const QuizEditor = ({ quizzList, onBack, onListUpdate }: Props) => {
   return (
     <div className="mx-auto flex w-full max-w-[1280px] flex-col gap-7 rounded-md bg-white p-6 shadow-sm md:p-8">
         <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <Button onClick={onBack} className="bg-gray-700">
-              Back
+        <div className="flex items-center gap-2">
+          <Button onClick={onBack} className="bg-gray-700">
+            Back
+          </Button>
+          <Button onClick={handleNew} className="bg-blue-600">
+            New quiz
+          </Button>
+          {selectedId && (
+            <Button className="bg-red-600" onClick={handleDeleteQuizz} disabled={saving}>
+              Delete quiz
             </Button>
-            <Button onClick={handleNew} className="bg-blue-600">
-              New quiz
-            </Button>
-            {selectedId && (
-              <Button className="bg-red-600" onClick={handleDeleteQuizz} disabled={saving}>
-                Delete quiz
+          )}
+          {onBreakToggle && (
+            <>
+              <Button className="bg-amber-500" onClick={() => onBreakToggle(true)}>
+                Break
               </Button>
-            )}
-          </div>
+              <Button className="bg-green-600" onClick={() => onBreakToggle(false)}>
+                Resume
+              </Button>
+            </>
+          )}
+        </div>
 
         <Button onClick={handleSave} disabled={saving || loading}>
           {saving ? "Saving..." : "Save quiz"}