ui improvements to opening practice

franciscoBSalgueiro · Sep 22, 2023 · c10cb96 · c10cb96
1 parent dc5a750
commit c10cb96
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 67 deletions.
diff --git a/src/components/common/ConfirmModal.tsx b/src/components/common/ConfirmModal.tsx
@@ -6,12 +6,14 @@ function ConfirmModal({
   opened,
   onClose,
   onConfirm,
+  confirmLabel,
 }: {
   title: string;
   description: string;
   opened: boolean;
   onClose: () => void;
   onConfirm: () => void;
+  confirmLabel?: string;
 }) {
   return (
     <Modal withCloseButton={false} opened={opened} onClose={onClose}>
@@ -29,7 +31,7 @@ function ConfirmModal({
             Cancel
           </Button>
           <Button color="red" onClick={() => onConfirm()}>
-            Delete
+            {confirmLabel || "Delete"}
           </Button>
         </Group>
       </Stack>

diff --git a/src/components/panels/database/DatabasePanel.tsx b/src/components/panels/database/DatabasePanel.tsx
@@ -98,7 +98,6 @@ function DatabasePanel({ height, fen }: { height: number; fen: string }) {
     isLoading,
     error,
   } = useSWR([dbType, query], async ([dbType, query]) => {
-    console.log("fetching opening", query);
     return fetchOpening(query, dbType);
   });
 

diff --git a/src/components/panels/info/PracticePanel.tsx b/src/components/panels/info/PracticePanel.tsx
@@ -4,11 +4,16 @@ import {
   currentTabAtom,
   deckAtomFamily,
 } from "@/atoms/atoms";
+import ConfirmModal from "@/components/common/ConfirmModal";
 import {
   TreeDispatchContext,
   TreeStateContext,
 } from "@/components/common/TreeStateContext";
-import { getCardForReview, getStats } from "@/components/files/opening";
+import {
+  buildFromTree,
+  getCardForReview,
+  getStats,
+} from "@/components/files/opening";
 import {
   Text,
   ActionIcon,
@@ -17,18 +22,25 @@ import {
   Button,
   RingProgress,
 } from "@mantine/core";
+import { useToggle } from "@mantine/hooks";
 import { IconX } from "@tabler/icons-react";
-import { useAtomValue, useSetAtom } from "jotai";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { useContext } from "react";
 import { match } from "ts-pattern";
 
 function PracticePanel() {
   const dispatch = useContext(TreeDispatchContext);
   const { root, headers } = useContext(TreeStateContext);
   const currentTab = useAtomValue(currentTabAtom);
+  const [resetModal, toggleResetModal] = useToggle();
 
-  const deck = useAtomValue(
-    deckAtomFamily({ id: currentTab?.file?.name || "", root, headers, game: currentTab?.gameNumber || 0 }),
+  const [deck, setDeck] = useAtom(
+    deckAtomFamily({
+      id: currentTab?.file?.name || "",
+      root,
+      headers,
+      game: currentTab?.gameNumber || 0,
+    })
   );
 
   const stats = getStats(deck);
@@ -51,65 +63,94 @@ function PracticePanel() {
   }
 
   return (
-    <Stack>
-      <Group position="apart" m={12}>
-        <Text fw="bold">Practicing</Text>
-        <ActionIcon onClick={() => { setPracticing(false); setInvisible(false) }}>
-          <IconX />
-        </ActionIcon>
-      </Group>
-      <Group>
-        <RingProgress
-          size={150}
-          thickness={16}
-          label={
-            <Text align="center" px="xs" sx={{ pointerEvents: "none" }}>
-              {Math.round((stats.mastered / stats.total) * 100)}% mastered
-            </Text>
-          }
-          sections={[
-            {
-              value: (stats.mastered / stats.total) * 100,
-              color: "blue",
-              tooltip: `${stats.mastered} mastered`,
-            },
-            {
-              value: (stats.reviewing / stats.total) * 100,
-              color: "red",
-              tooltip: `${stats.reviewing} reviewing`,
-            },
-            {
-              value: (stats.learning / stats.total) * 100,
-              color: "cyan",
-              tooltip: `${stats.learning} learning`,
-            },
-            {
-              value: (stats.unseen / stats.total) * 100,
-              color: "gray",
-              tooltip: `${stats.unseen} unseen`,
-            },
-          ]}
-        />
-        {stats.due === 0 && <p>You have practiced all positions. Well done!</p>}
-      </Group>
+    <>
+      <Stack>
+        <Group position="apart" m={12}>
+          <Text fw="bold">Practicing</Text>
+          <ActionIcon
+            onClick={() => {
+              setPracticing(false);
+              setInvisible(false);
+            }}
+          >
+            <IconX />
+          </ActionIcon>
+        </Group>
+        <Group>
+          <RingProgress
+            size={150}
+            thickness={16}
+            label={
+              <Text align="center" px="xs" sx={{ pointerEvents: "none" }}>
+                {Math.round((stats.mastered / stats.total) * 100)}% mastered
+              </Text>
+            }
+            sections={[
+              {
+                value: (stats.mastered / stats.total) * 100,
+                color: "blue",
+                tooltip: `${stats.mastered} mastered`,
+              },
+              {
+                value: (stats.reviewing / stats.total) * 100,
+                color: "red",
+                tooltip: `${stats.reviewing} reviewing`,
+              },
+              {
+                value: (stats.learning / stats.total) * 100,
+                color: "cyan",
+                tooltip: `${stats.learning} learning`,
+              },
+              {
+                value: (stats.unseen / stats.total) * 100,
+                color: "gray",
+                tooltip: `${stats.unseen} unseen`,
+              },
+            ]}
+          />
+          {stats.due === 0 && (
+            <p>You have practiced all positions. Well done!</p>
+          )}
+        </Group>
 
-      <Group>
-        <Button onClick={() => newPractice("new")}>
-          Practice next position
-        </Button>
-        <Button onClick={() => newPractice("random")}>
-          Practice random position
-        </Button>
-        <Button
-          onClick={() => {
-            setInvisible(false);
-            dispatch({ type: "GO_TO_NEXT" });
-          }}
-        >
-          See Answer
-        </Button>
-      </Group>
-    </Stack>
+        <Group>
+          <Button variant="default" onClick={() => newPractice("new")}>
+            Practice next position
+          </Button>
+          <Button variant="default" onClick={() => newPractice("random")}>
+            Practice random position
+          </Button>
+          <Button
+            variant="default"
+            onClick={() => {
+              setInvisible(false);
+              dispatch({ type: "GO_TO_NEXT" });
+            }}
+          >
+            See Answer
+          </Button>
+          <Button variant="default" onClick={() => toggleResetModal()}>
+            Reset
+          </Button>
+        </Group>
+      </Stack>
+      <ConfirmModal
+        title={"Reset opening data"}
+        description={`Are you sure you want to reset the opening data for "${currentTab?.file?.name}"? All the learning progress will be lost.`}
+        opened={resetModal}
+        onClose={toggleResetModal}
+        onConfirm={() => {
+          const cards = buildFromTree(
+            root,
+            headers.orientation || "white",
+            headers.start || []
+          );
+          setDeck(cards);
+          toggleResetModal();
+        }}
+        confirmLabel="Reset"
+      />
+    </>
   );
 }
 

diff --git a/src/components/panels/info/RepertoireInfo.tsx b/src/components/panels/info/RepertoireInfo.tsx
@@ -87,14 +87,15 @@ function RepertoireInfo() {
       </Group>
 
       <Button
+        variant="default"
         onClick={() => setPracticing(true)}
         leftIcon={<IconTargetArrow />}
       >
         Practice
       </Button>
 
       {!loading && !missingMoves && (
-        <Button onClick={() => searchForMissingMoves()}>
+        <Button variant="default" onClick={() => searchForMissingMoves()}>
           Look for missing moves
         </Button>
       )}
@@ -176,7 +177,12 @@ function MissingMoves({
         noRecordsText="No games found"
       />
 
-      <Button mt={20} rightIcon={<IconReload />} onClick={search}>
+      <Button
+        variant="default"
+        mt={20}
+        rightIcon={<IconReload />}
+        onClick={search}
+      >
         Reload missing moves
       </Button>
     </div>

diff --git a/src/utils/treeReducer.ts b/src/utils/treeReducer.ts
@@ -218,7 +218,6 @@ const treeReducer = (state: TreeState, action: TreeAction) => {
             state.headers.start = payload;
         })
         .with({ type: "MAKE_MOVE" }, ({ payload }) => {
-            state.dirty = true;
             makeMove(state, payload);
         })
         .with({ type: "MAKE_MOVES" }, ({ payload }) => {
@@ -322,6 +321,7 @@ function makeMove(
     if (i !== -1) {
         state.position.push(i);
     } else {
+        state.dirty = true;
         const newMoveNode = createNode({
             fen: chess.fen(),
             move: m,