confirm dialog on abort training

Author: battermann

src/App.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { ConfirmDialog } from "./components/ConfirmDialog";
 import { HomeScreen } from "./components/HomeScreen";
 import { LevelOverview } from "./components/LevelOverview";
 import { LevelSummaryScreen } from "./components/LevelSummaryScreen";
@@ -175,6 +176,10 @@ function getRecommendationLabel(
   return "Stay on same level" as const;
 }
 
+function isActiveTrainingState(appState: AppState): boolean {
+  return ["memorizing", "pause", "reconstructing", "problem-result"].includes(appState);
+}
+
 export default function App() {
   const initialProgress = useMemo(() => loadProgress(), []);
   const initialRoute = useMemo(() => parseRoute(), []);
@@ -198,6 +203,9 @@ export default function App() {
   const [pauseCountdown, setPauseCountdown] = useState(3);
   const [lastResultIndex, setLastResultIndex] = useState<number | null>(null);
   const [summarySaved, setSummarySaved] = useState(false);
+  const [pendingExitRoute, setPendingExitRoute] = useState<Route | null>(null);
+  const sessionRef = useRef<TrainingSession | null>(null);
+  const appStateRef = useRef<AppState>(appState);
 
   useEffect(() => {
     const failures = runScoringSelfCheck();
@@ -210,6 +218,14 @@ export default function App() {
     saveProgress(progress);
   }, [progress]);
 
+  useEffect(() => {
+    sessionRef.current = session;
+  }, [session]);
+
+  useEffect(() => {
+    appStateRef.current = appState;
+  }, [appState]);
+
   useEffect(() => {
     if (!window.location.hash) {
       replaceRoute({ screen: "home" });
@@ -223,6 +239,18 @@ export default function App() {
   useEffect(() => {
     function applyRoute(): void {
       const route = parseRoute();
+      const activeSession = sessionRef.current;
+      const leavingActiveTraining =
+        activeSession !== null &&
+        isActiveTrainingState(appStateRef.current) &&
+        (route.screen !== "training" || route.level !== activeSession.level);
+
+      if (leavingActiveTraining) {
+        replaceRoute({ screen: "training", level: activeSession.level });
+        setPendingExitRoute(route);
+        return;
+      }
+
       if (route.screen === "home") {
         setSession(null);
         setAppState("home");
@@ -517,11 +545,45 @@ export default function App() {
   }
 
   function backHome(): void {
+    if (session && isActiveTrainingState(appState)) {
+      setPendingExitRoute({ screen: "home" });
+      return;
+    }
     setSession(null);
     setAppState("home");
     pushRoute({ screen: "home" });
   }
 
+  function cancelTrainingExit(): void {
+    setPendingExitRoute(null);
+    if (session && isActiveTrainingState(appState)) {
+      replaceRoute({ screen: "training", level: session.level });
+    }
+  }
+
+  function confirmTrainingExit(): void {
+    if (!pendingExitRoute) {
+      return;
+    }
+    const nextRoute = pendingExitRoute;
+    setPendingExitRoute(null);
+    setSession(null);
+
+    if (nextRoute.screen === "home") {
+      setAppState("home");
+      pushRoute({ screen: "home" });
+      return;
+    }
+
+    setSelectedLevel(nextRoute.level);
+    setProgress((current) => ({
+      ...current,
+      lastSelectedLevel: nextRoute.level,
+    }));
+    setAppState("level-overview");
+    pushRoute({ screen: "level-overview", level: nextRoute.level });
+  }
+
   const lastSession = progress.sessions[progress.sessions.length - 1];
   const showWorldChampionshipMessage =
     session?.level === (LEVELS[LEVELS.length - 1]?.level ?? null) &&
@@ -617,6 +679,15 @@ export default function App() {
           onBackHome={backHome}
         />
       ) : null}
+      <ConfirmDialog
+        open={pendingExitRoute !== null}
+        title="Leave training?"
+        message="Your current level progress will be lost."
+        cancelLabel="Stay in training"
+        confirmLabel="Leave training"
+        onCancel={cancelTrainingExit}
+        onConfirm={confirmTrainingExit}
+      />
     </main>
   );
 }

src/components/ConfirmDialog.tsx

@@ -0,0 +1,55 @@
+import { FaTimes } from "react-icons/fa";
+
+type ConfirmDialogProps = {
+  open: boolean;
+  title: string;
+  message: string;
+  confirmLabel: string;
+  cancelLabel: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+};
+
+export function ConfirmDialog({
+  open,
+  title,
+  message,
+  confirmLabel,
+  cancelLabel,
+  onConfirm,
+  onCancel,
+}: ConfirmDialogProps) {
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <div className="modal-backdrop" role="presentation">
+      <section
+        className="modal-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="confirm-dialog-title"
+      >
+        <button
+          type="button"
+          className="modal-close"
+          onClick={onCancel}
+          aria-label="Close dialog"
+        >
+          <FaTimes aria-hidden="true" />
+        </button>
+        <h2 id="confirm-dialog-title">{title}</h2>
+        <p>{message}</p>
+        <div className="button-row modal-actions">
+          <button type="button" onClick={onCancel}>
+            {cancelLabel}
+          </button>
+          <button type="button" className="primary" onClick={onConfirm}>
+            {confirmLabel}
+          </button>
+        </div>
+      </section>
+    </div>
+  );
+}

src/styles.css

@@ -778,6 +778,53 @@ a:hover {
   color: #b8c2d1;
 }
 
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 20;
+  display: grid;
+  place-items: center;
+  padding: 18px;
+  background: rgba(8, 11, 15, 0.72);
+  animation: screen-enter 150ms ease-out both;
+}
+
+.modal-dialog {
+  position: relative;
+  width: min(100%, 430px);
+  padding: 20px;
+  border: 1px solid #2c3644;
+  border-radius: 8px;
+  background:
+    radial-gradient(circle at 92% 0%, rgba(224, 176, 109, 0.08), transparent 26%),
+    #1a212b;
+  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.45);
+}
+
+.modal-dialog h2 {
+  margin-right: 36px;
+}
+
+.modal-dialog p {
+  color: #c9d3e2;
+}
+
+.modal-close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+}
+
+.modal-actions {
+  justify-content: flex-end;
+}
+
 .level-preview-grid {
   margin-top: 16px;
   display: grid;