Tightning up Focus Mode during exam.

psriraj3 · psriraj3 · commit 54ffe63c7f4b · 2026-01-07T20:08:53.000+05:30
diff --git a/dist/assets/index-BfQhuYO5.js b/dist/assets/index-BfQhuYO5.js
diff --git a/dist/assets/index-CNIGOKbX.js b/dist/assets/index-CNIGOKbX.js
diff --git a/dist/index.html b/dist/index.html
@@ -9,7 +9,7 @@
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>FUNton</title>
-    <script type="module" crossorigin src="/assets/index-CNIGOKbX.js"></script>
+    <script type="module" crossorigin src="/assets/index-BfQhuYO5.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-DmekIFy3.css">
   </head>
   <body>
diff --git a/src/App.tsx b/src/App.tsx
@@ -99,6 +99,7 @@ export default function App() {
   const [view, setView] = useState<View>("main");
 
   const [mode, setMode] = useState<Mode>("practice");
+  const [focusRunning, setFocusRunning] = useState(false);
   const [subject, setSubject] = useState<Subject>("maths");
   const [ukYear, setUkYear] = useState(4);
   const [difficulty, setDifficulty] = useState(6);
@@ -211,20 +212,24 @@ export default function App() {
               <button
                   type="button"
                   className="brand"
+                  disabled={focusRunning}
                   onClick={() => {
+                    if (focusRunning) return;
                     setView("main");
                     setMode("practice");
                   }}
                   aria-label="Go to Practice Mode"
-                  title="Go to Practice Mode"
+                  title={focusRunning ? "Finish the exam to switch modes" : "Go to Practice Mode"}
               >
                 <img className="brandLogo" src="/logo.png" alt="FUNton" />
               </button>
 
               <div className="appHeaderRight">
                 <ModeSwitch
                     mode={mode}
+                    disabledModes={focusRunning ? { practice: true, worksheet: true } : undefined}
                     onChange={(m) => {
+                      if (focusRunning && m !== "focus") return;
                       setMode(m);
                       // If user changes mode while on review/thanks, bring them back
                       if (view !== "main") setView("main");
@@ -326,7 +331,8 @@ export default function App() {
                           ukYear={ukYear}
                           difficulty={difficulty}
                           seed={seed}
-                          topic={topic} // ✅ whatever your maths topic state variable is
+                          topic={topic}
+                          onRunningChange={setFocusRunning}
                       />
                   ) : mode === "practice" ? (
                       <PracticeRunner key={generated.seed} set={generated} />
diff --git a/src/ui/FocusMode.tsx b/src/ui/FocusMode.tsx
@@ -10,6 +10,7 @@ type Props = {
     difficulty: number;
     seed?: string;
     topic?: MathsTopic; // ✅ add
+    onRunningChange?: (running: boolean) => void;
 };
 
 type Phase = "setup" | "running" | "done";
@@ -520,7 +521,7 @@ function tierCopy(ukYear: number, tier: "fail" | "pass" | "fantastic", name: str
     };
 }
 
-export function FocusMode({ subject, ukYear, difficulty, seed, topic }: Props) {
+export function FocusMode({ subject, ukYear, difficulty, seed, topic, onRunningChange }: Props) {
     const [phase, setPhase] = useState<Phase>("setup");
     const [showReview, setShowReview] = useState(false);
     const [onlyWrong, setOnlyWrong] = useState(false);
@@ -546,6 +547,13 @@ export function FocusMode({ subject, ukYear, difficulty, seed, topic }: Props) {
         if (phase !== "running") setNavOpen(false);
     }, [phase]);
 
+
+    // Notify parent (App) when exam starts/ends so it can lock mode switching
+    useEffect(() => {
+        onRunningChange?.(phase === "running");
+        return () => onRunningChange?.(false);
+    }, [phase, onRunningChange]);
+
     // ===== Refs to avoid stale state in timer/lockdown auto-submit =====
     const phaseRef = useRef<Phase>(phase);
     const configRef = useRef<FocusConfig>(config);
diff --git a/src/ui/ModeSwitch.tsx b/src/ui/ModeSwitch.tsx
@@ -1,30 +1,27 @@
 // type Mode = "practice" | "worksheet";
 export type Mode = "practice" | "worksheet" | "focus";
-export function ModeSwitch(props: { mode: Mode; onChange: (m: Mode) => void }) {
-  const { mode, onChange } = props;
+export function ModeSwitch(props: { mode: Mode; onChange: (m: Mode) => void; disabledModes?: Partial<Record<Mode, boolean>> }) {
+  const { mode, onChange, disabledModes } = props;
 
-  const btnStyle = (active: boolean): React.CSSProperties => ({
+  const btnStyle = (active: boolean, disabled: boolean): React.CSSProperties => ({
     padding: "10px 12px",
     borderRadius: 10,
     border: "1px solid #ddd",
     background: active ? "#111" : "#fff",
     color: active ? "#fff" : "#111",
-    cursor: "pointer"
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.55 : 1
   });
 
   return (
     <div style={{ display: "flex", gap: 8 }}>
-      <button style={btnStyle(mode === "practice")} onClick={() => onChange("practice")}>
+      <button disabled={!!disabledModes?.practice} style={btnStyle(mode === "practice", !!disabledModes?.practice)} onClick={() => onChange("practice")}>
         Practice Mode
       </button>
-      <button style={btnStyle(mode === "worksheet")} onClick={() => onChange("worksheet")}>
+      <button disabled={!!disabledModes?.worksheet} style={btnStyle(mode === "worksheet", !!disabledModes?.worksheet)} onClick={() => onChange("worksheet")}>
         Worksheet PDF
       </button>
-        <button
-            style={btnStyle(mode === "focus")}
-            className={mode === "focus" ? "active" : ""}
-            onClick={() => onChange("focus")}
-        >
+        <button disabled={!!disabledModes?.focus} style={btnStyle(mode === "focus", !!disabledModes?.focus)} onClick={() => onChange("focus")}>
             Focus (Exam)
         </button>
     </div>
