From a0effd7a2d6b4ecad29568f471baf863b1f1aa9a Mon Sep 17 00:00:00 2001
From: h16nning <henning.flath@t-online.de>
Date: Thu, 8 Feb 2024 18:30:56 +0100
Subject: [PATCH 1/4] Switch to fsrs

Might be still buggy or have placeholder values, not everything tested yet

temporary ui to debug
---
 package-lock.json                             |   9 +
 package.json                                  |   1 +
 ...dModal.module.css => DebugCard.module.css} |   0
 .../DebugCardModal/DebugCardModal.tsx         |  80 +---
 .../DebugCardModal/DebugCardTable.tsx         | 107 +++++
 src/components/deck/DebugDeckModal.tsx        |  22 +-
 src/components/deck/DeckMenu.tsx              |   5 +-
 src/components/deck/DeckPreview.tsx           |  18 +-
 src/components/deck/DeckView.tsx              |   5 +-
 .../deck/HeroDeckSection/HeroDeckSection.tsx  |  29 +-
 .../FinishedLearningView.tsx                  |  11 +-
 .../learning/LearnView/LearnView.tsx          |  71 ++--
 .../learning/LearnView/LearnViewFooter.tsx    |  84 ++--
 .../learning/LearnView/LearnViewHeader.tsx    |  65 +--
 .../LearnViewCurrentCardStateIndicator.tsx    |  52 ++-
 .../RemainingCardsIndicator.module.css        |  17 +
 .../RemainingCardsIndicator.tsx               |  28 ++
 .../RemainingCardsStats.module.css            |  16 -
 .../RemainingCardsStats.tsx                   |  26 --
 src/logic/CardScheduler.ts                    |   3 +
 src/logic/SpacedRepetition.ts                 | 111 ------
 src/logic/card.tsx                            | 125 +++---
 src/logic/learn.ts                            | 372 ++++++++----------
 src/style/StyleProvider.ts                    |   2 +
 24 files changed, 560 insertions(+), 699 deletions(-)
 rename src/components/DebugCardModal/{DebugCardModal.module.css => DebugCard.module.css} (100%)
 create mode 100644 src/components/DebugCardModal/DebugCardTable.tsx
 create mode 100644 src/components/learning/RemainingCardsIndicator/RemainingCardsIndicator.module.css
 create mode 100644 src/components/learning/RemainingCardsIndicator/RemainingCardsIndicator.tsx
 delete mode 100644 src/components/learning/RemainingCardsStats/RemainingCardsStats.module.css
 delete mode 100644 src/components/learning/RemainingCardsStats/RemainingCardsStats.tsx
 create mode 100644 src/logic/CardScheduler.ts
 delete mode 100644 src/logic/SpacedRepetition.ts

diff --git a/package-lock.json b/package-lock.json
index d5d71af..a521490 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,6 +43,7 @@
         "dexie-react-hooks": "^1.1.1",
         "embla-carousel-react": "^7.0.9",
         "firebase": "^9.18.0",
+        "fsrs.js": "^1.2.2",
         "html-to-text": "^9.0.4",
         "i18next": "^23.7.11",
         "react": "^18.2.0",
@@ -4319,6 +4320,14 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/fsrs.js": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/fsrs.js/-/fsrs.js-1.2.2.tgz",
+      "integrity": "sha512-LFFPn33/EBbqJoOKmtCfE+Y3LyijQO7ytf/3N6+BlPP/QxI6nlrX6n7IeeKVkjxXVrKxUUvFXTR5K6keSztphg==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
diff --git a/package.json b/package.json
index fa8c791..c597c43 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "dexie-react-hooks": "^1.1.1",
     "embla-carousel-react": "^7.0.9",
     "firebase": "^9.18.0",
+    "fsrs.js": "^1.2.2",
     "html-to-text": "^9.0.4",
     "i18next": "^23.7.11",
     "react": "^18.2.0",
diff --git a/src/components/DebugCardModal/DebugCardModal.module.css b/src/components/DebugCardModal/DebugCard.module.css
similarity index 100%
rename from src/components/DebugCardModal/DebugCardModal.module.css
rename to src/components/DebugCardModal/DebugCard.module.css
diff --git a/src/components/DebugCardModal/DebugCardModal.tsx b/src/components/DebugCardModal/DebugCardModal.tsx
index a842b57..d4444dd 100644
--- a/src/components/DebugCardModal/DebugCardModal.tsx
+++ b/src/components/DebugCardModal/DebugCardModal.tsx
@@ -10,6 +10,7 @@ import {
   Space,
 } from "@mantine/core";
 import { Card, CardType } from "../../logic/card";
+import DebugCardTable from "./DebugCardTable";
 
 interface DebugCardModalProps {
   opened: boolean;
@@ -27,84 +28,7 @@ function DebugCardModal({ opened, setOpened, card }: DebugCardModalProps) {
         title="Debug"
       >
         <Stack justify="space-between">
-          {card ? (
-            <table className={classes.table}>
-              <tbody>
-                <tr>
-                  <th>Card Type:</th>
-                  <td>{card.content.type}</td>
-                </tr>
-                <tr>
-                  <th>ID:</th>
-                  <td>{card.id}</td>
-                </tr>
-                <tr>
-                  <th>Content:</th>
-                  <td>{JSON.stringify(card.content)}</td>
-                </tr>
-                <tr>
-                  <th>Decks:</th>
-                  <td>
-                    <Anchor href={"/deck/" + card.deck}>{card.deck}</Anchor>,{" "}
-                  </td>
-                </tr>
-                <tr>
-                  <th>DueDate:</th>
-                  <td>{card.dueDate?.toLocaleString()}</td>
-                </tr>
-              </tbody>
-              <tbody>
-                <thead>
-                  <th>Model</th>
-                </thead>
-                <tr>
-                  <th>Interval:</th>
-                  <td>{card.model.interval}</td>
-                </tr>
-                <tr>
-                  <th>Learned:</th>
-                  <td>{card.model.learned ? "true" : "false"}</td>
-                </tr>
-                <tr>
-                  <th>Repetitions:</th>
-                  <td>{card.model.repetitions}</td>
-                </tr>
-                <tr>
-                  <th>Ease Factor:</th>
-                  <td>{card.model.easeFactor}</td>
-                </tr>
-              </tbody>
-              <tbody>
-                <thead>
-                  <th>History</th>
-                </thead>
-                {card.history.map((repetition) => (
-                  <Fragment key={repetition.date.toISOString()}>
-                    <tr>
-                      <th>Date: </th>
-                      <td>
-                        {(typeof repetition.date === "number"
-                          ? new Date(repetition.date)
-                          : repetition.date
-                        ).toLocaleString()}
-                      </td>
-                    </tr>
-                    <tr>
-                      <th>Result: </th>
-                      <td>{repetition.result}</td>
-                    </tr>
-                    <tr>
-                      <Space h="xs" />
-                    </tr>
-                  </Fragment>
-                ))}
-              </tbody>
-            </table>
-          ) : (
-            <Text color="dimmed" fz="sm">
-              This card could not be found.
-            </Text>
-          )}
+          <DebugCardTable card={card} />
           <Group justify="right">
             <Button onClick={() => setOpened(false)}>Close</Button>
           </Group>
diff --git a/src/components/DebugCardModal/DebugCardTable.tsx b/src/components/DebugCardModal/DebugCardTable.tsx
new file mode 100644
index 0000000..66b54a2
--- /dev/null
+++ b/src/components/DebugCardModal/DebugCardTable.tsx
@@ -0,0 +1,107 @@
+import classes from "./DebugCard.module.css";
+import { Fragment } from "react";
+import { Card, CardType } from "../../logic/card";
+import { Anchor, Space, Text } from "@mantine/core";
+
+export default function DebugCardTable({
+  card,
+}: { card: Card<CardType> | undefined }) {
+  return card ? (
+    <table className={classes.table}>
+      <tbody>
+        <tr>
+          <th>Card Type:</th>
+          <td>{card.content.type}</td>
+        </tr>
+        <tr>
+          <th>ID:</th>
+          <td>{card.id}</td>
+        </tr>
+        <tr>
+          <th>Content:</th>
+          <td>{JSON.stringify(card.content)}</td>
+        </tr>
+        <tr>
+          <th>Decks:</th>
+          <td>
+            <Anchor href={"/deck/" + card.deck}>{card.deck}</Anchor>,{" "}
+          </td>
+        </tr>
+      </tbody>
+      <tbody>
+        <thead>
+          <th>FSRS Model</th>
+        </thead>
+        <tr>
+          <th>Due:</th>
+          <td>
+            {card.model.due.toLocaleTimeString() +
+              " " +
+              card.model.due.toDateString()}
+          </td>
+        </tr>
+        <tr>
+          <th>Stability:</th>
+          <td>{card.model.stability}</td>
+        </tr>
+        <tr>
+          <th>Difficulty:</th>
+          <td>{card.model.difficulty}</td>
+        </tr>
+        <tr>
+          <th>Elapsed Days:</th>
+          <td>{card.model.elapsed_days}</td>
+        </tr>
+        <tr>
+          <th>Scheduled Days:</th>
+          <td>{card.model.scheduled_days}</td>
+        </tr>
+        <tr>
+          <th>Repetitions:</th>
+          <td>{card.model.reps}</td>
+        </tr>
+        <tr>
+          <th>Lapses:</th>
+          <td>{card.model.lapses}</td>
+        </tr>
+        <tr>
+          <th>State:</th>
+          <td>{card.model.state}</td>
+        </tr>
+        <tr>
+          <th>Last Review:</th>
+          <td>{card.model.last_review.toDateString()}</td>
+        </tr>
+      </tbody>
+      <tbody>
+        <thead>
+          <th>History</th>
+        </thead>
+        {card.history.map((repetition) => (
+          <Fragment key={repetition.date.toISOString()}>
+            <tr>
+              <th>Date: </th>
+              <td>
+                {(typeof repetition.date === "number"
+                  ? new Date(repetition.date)
+                  : repetition.date
+                ).toLocaleString()}
+              </td>
+            </tr>
+            <tr>
+              <th>Result: </th>
+              <td>{repetition.result}</td>
+            </tr>
+            <tr>
+              <Space h="xs" />
+            </tr>
+          </Fragment>
+        ))}
+      </tbody>
+    </table>
+  ) : (
+    <Text color="dimmed" fz="sm">
+      This card could not be found.
+    </Text>
+  );
+}
diff --git a/src/components/deck/DebugDeckModal.tsx b/src/components/deck/DebugDeckModal.tsx
index 7767ab5..6650730 100644
--- a/src/components/deck/DebugDeckModal.tsx
+++ b/src/components/deck/DebugDeckModal.tsx
@@ -1,14 +1,14 @@
 import React from "react";
 import { Anchor, Button, Group, Modal, Stack, Text } from "@mantine/core";
 import { Deck } from "../../logic/deck";
-import { Card, CardsStats, CardType } from "../../logic/card";
+import { Card, CardType, useStatesOf } from "../../logic/card";
+import { State } from "fsrs.js";
 
 interface DebugDeckModalProps {
   opened: boolean;
   setOpened: Function;
   deck?: Deck;
   cards: Card<CardType>[];
-  stats: CardsStats;
 }
 
 function DebugDeckModal({
@@ -16,8 +16,8 @@ function DebugDeckModal({
   setOpened,
   deck,
   cards,
-  stats,
 }: DebugDeckModalProps) {
+  const states = useStatesOf(cards);
   return (
     <Modal
       opened={opened}
@@ -62,16 +62,20 @@ function DebugDeckModal({
               {cards.length}
             </Text>
             <Text fz="xs">
-              <b>New Cards: </b>
-              {stats.newCards}
+              <b>New: </b>
+              {states[State.New]}
             </Text>
             <Text fz="xs">
-              <b>Learning Cards: </b>
-              {stats.learningCards}
+              <b>Learning: </b>
+              {states[State.Learning]}
             </Text>
             <Text fz="xs">
-              <b>Due Cards: </b>
-              {stats.dueCards}
+              <b>Review: </b>
+              {states[State.Review]}
+            </Text>
+            <Text fz="xs">
+              <b>Relearning: </b>
+              {states[State.Relearning]}
             </Text>
           </Stack>
         ) : (
diff --git a/src/components/deck/DeckMenu.tsx b/src/components/deck/DeckMenu.tsx
index 7253cb0..6410fe8 100644
--- a/src/components/deck/DeckMenu.tsx
+++ b/src/components/deck/DeckMenu.tsx
@@ -15,7 +15,7 @@ import DangerousConfirmModal from "../custom/DangerousConfirmModal";
 import { useNavigate } from "react-router-dom";
 import RenameCardModal from "../editcard/RenameCardModal";
 import DebugDeckModal from "./DebugDeckModal";
-import { Card, CardsStats, CardType } from "../../logic/card";
+import { Card, CardType } from "../../logic/card";
 import { useSetting } from "../../logic/Settings";
 import ImportModal from "../settings/importexport/ImportModal";
 
@@ -24,7 +24,6 @@ interface DeckMenuProps {
   isDeckReady: boolean;
   cards?: Card<CardType>[];
   areCardsReady: boolean;
-  stats: CardsStats;
   setDeckOptionsOpened: Function;
 }
 
@@ -34,7 +33,6 @@ function DeckMenu({
   setDeckOptionsOpened,
   cards,
   areCardsReady,
-  stats,
 }: DeckMenuProps) {
   const navigate = useNavigate();
 
@@ -137,7 +135,6 @@ function DeckMenu({
           <DebugDeckModal
             deck={deck}
             cards={cards}
-            stats={stats}
             opened={debugModalOpened}
             setOpened={setDebugModalOpened}
           />
diff --git a/src/components/deck/DeckPreview.tsx b/src/components/deck/DeckPreview.tsx
index c004329..5e56155 100644
--- a/src/components/deck/DeckPreview.tsx
+++ b/src/components/deck/DeckPreview.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { Deck } from "../../logic/deck";
 import { useNavigate } from "react-router-dom";
 import ListButton from "../custom/ListButton/ListButton";
-import { useCardsOf, useStatsOf } from "../../logic/card";
+import { useCardsOf, useSimplifiedStatesOf } from "../../logic/card";
 import { useTranslation } from "react-i18next";
 
 type DeckPreviewProps = {
@@ -15,7 +15,7 @@ export default function DeckPreview({ deck, i }: DeckPreviewProps) {
   const navigate = useNavigate();
   const [t] = useTranslation();
   const [cards] = useCardsOf(deck);
-  const stats = useStatsOf(cards);
+  const states = useSimplifiedStatesOf(cards);
 
   return (
     <ListButton
@@ -28,23 +28,25 @@ export default function DeckPreview({ deck, i }: DeckPreviewProps) {
         <Group justify="space-between" w="100%" wrap="nowrap">
           <Text>{deck.name}</Text>
           <Group gap="xs" wrap="nowrap">
-            {stats.dueCards && stats.dueCards > 0 ? (
+            {states.review > 0 ? (
               <Badge variant="dot" color="blue">
-                {t("deck.review-cards-label", { count: stats.dueCards })}
+                {t("deck.review-cards-label", { count: -1 })}
               </Badge>
             ) : (
               <></>
             )}
-            {stats.newCards && stats.newCards > 0 ? (
+            {states.new > 0 ? (
               <Badge variant="dot" color="grape">
-                {t("deck.new-cards-label", { count: stats.newCards })}
+                {t("deck.new-cards-label", { count: states.new })}
               </Badge>
             ) : (
               <></>
             )}
-            {stats.learningCards && stats.learningCards > 0 ? (
+            {states.learning > 0 ? (
               <Badge variant="dot" color="orange">
-                {t("deck.learning-cards-label", { count: stats.learningCards })}
+                {t("deck.learning-cards-label", {
+                  count: states.learning,
+                })}
               </Badge>
             ) : (
               <></>
diff --git a/src/components/deck/DeckView.tsx b/src/components/deck/DeckView.tsx
index 262e8b5..cb68e20 100644
--- a/src/components/deck/DeckView.tsx
+++ b/src/components/deck/DeckView.tsx
@@ -8,7 +8,7 @@ import { useDeckFromUrl, useSuperDecks } from "../../logic/deck";
 import DeckOptionsModal from "./DeckOptionsModal";
 import MissingObject from "../custom/MissingObject";
 import SuperDecksBreadcrumbs from "../SuperDecksBreadcrumbs/SuperDecksBreadcrumbs";
-import { useCardsOf, useStatsOf } from "../../logic/card";
+import { useCardsOf } from "../../logic/card";
 import HeroDeckSection from "./HeroDeckSection/HeroDeckSection";
 import { useDocumentTitle } from "@mantine/hooks";
 import { useScrollResetOnLocationChange } from "../../logic/ui";
@@ -20,7 +20,6 @@ function DeckView() {
   const [deck, isDeckReady] = useDeckFromUrl();
   const [superDecks] = useSuperDecks(deck);
   const [cards, areCardsReady] = useCardsOf(deck);
-  const stats = useStatsOf(cards);
 
   useScrollResetOnLocationChange();
 
@@ -71,7 +70,6 @@ function DeckView() {
             isDeckReady={isDeckReady}
             cards={cards}
             areCardsReady={areCardsReady}
-            stats={stats}
             setDeckOptionsOpened={setDeckOptionsOpened}
           />
         </Group>
@@ -96,7 +94,6 @@ function DeckView() {
             isDeckReady={isDeckReady}
             cards={cards}
             areCardsReady={areCardsReady}
-            stats={stats}
           />
         </Stack>
 
diff --git a/src/components/deck/HeroDeckSection/HeroDeckSection.tsx b/src/components/deck/HeroDeckSection/HeroDeckSection.tsx
index dca216d..a00074c 100644
--- a/src/components/deck/HeroDeckSection/HeroDeckSection.tsx
+++ b/src/components/deck/HeroDeckSection/HeroDeckSection.tsx
@@ -1,6 +1,6 @@
 import classes from "./HeroDeckSection.module.css";
 
-import React from "react";
+import React, { useState } from "react";
 import { Button, Group, Paper, Stack, Text, Title } from "@mantine/core";
 import { Deck } from "../../../logic/deck";
 import {
@@ -10,33 +10,27 @@ import {
   IconSparkles,
 } from "@tabler/icons-react";
 import { useNavigate } from "react-router-dom";
-import { Card, CardsStats, CardType } from "../../../logic/card";
+import { Card, CardType, useSimplifiedStatesOf } from "../../../logic/card";
 import Stat from "../../custom/Stat/Stat";
 import { useTranslation } from "react-i18next";
+import { State } from "fsrs.js";
 
 interface HeroDeckSectionProps {
   deck?: Deck;
   cards?: Card<CardType>[];
-  stats: CardsStats;
   isDeckReady: boolean;
   areCardsReady: boolean;
 }
 
-function HeroDeckSection({
-  deck,
-  cards,
-  areCardsReady,
-  stats,
-}: HeroDeckSectionProps) {
+function HeroDeckSection({ deck, cards, areCardsReady }: HeroDeckSectionProps) {
   const navigate = useNavigate();
   const [t] = useTranslation();
 
   function isDone() {
-    return (
-      stats.newCards === 0 && stats.learningCards === 0 && stats.dueCards === 0
-    );
+    return false; //FIXME 33
   }
 
+  const states = useSimplifiedStatesOf(cards);
   return (
     <Paper className={classes.container}>
       {areCardsReady &&
@@ -73,19 +67,19 @@ function HeroDeckSection({
           <Stack gap="md" align="center" w="100%">
             <Group wrap="nowrap" w="100%" justify="center">
               <Stat
-                value={stats.newCards ?? 0}
+                value={states.new}
                 name={t("deck.new-cards-label")}
                 color="grape"
                 icon={IconSparkles}
               />
               <Stat
-                value={stats.learningCards ?? 0}
+                value={states.learning}
                 name={t("deck.learning-cards-label")}
                 color="orange"
                 icon={IconCircleArrowUpRight}
               />
               <Stat
-                value={stats.dueCards ?? 0}
+                value={states.review}
                 name={t("deck.review-cards-label")}
                 color="blue"
                 icon={IconBook}
@@ -93,10 +87,7 @@ function HeroDeckSection({
             </Group>
             <Button
               disabled={
-                !deck ||
-                (stats.newCards === 0 &&
-                  stats.learningCards === 0 &&
-                  stats.dueCards === 0)
+                !deck || states.new + states.learning + states.review === 0
               }
               leftSection={<IconBolt />}
               w="50%"
diff --git a/src/components/learning/FinishedLearningView/FinishedLearningView.tsx b/src/components/learning/FinishedLearningView/FinishedLearningView.tsx
index 0aa77b7..a8838e5 100644
--- a/src/components/learning/FinishedLearningView/FinishedLearningView.tsx
+++ b/src/components/learning/FinishedLearningView/FinishedLearningView.tsx
@@ -23,25 +23,22 @@ import Stat from "../../custom/Stat/Stat";
 import { useRepetitionAccuracy } from "../../../logic/learn";
 
 interface FinishedLearningViewProps {
-  repetitionList: number[];
+  ratingsList: number[];
   time: StopwatchResult;
 }
 
 function FinishedLearningView({
-  repetitionList,
+  ratingsList,
   time,
 }: FinishedLearningViewProps) {
   const navigate = useNavigate();
   const [name] = useSetting("name");
 
-  const accuracy = useRepetitionAccuracy(repetitionList);
+  const accuracy = useRepetitionAccuracy(ratingsList);
 
   useHotkeys([["Space", () => navigate("/home")]]);
   useHotkeys([["Enter", () => navigate("/home")]]);
 
-  useEffect(() => {
-    console.log(classes.tropyIcon);
-  }, []);
   return (
     <Center>
       <Stack gap="xl" align="center" pt="xl">
@@ -71,7 +68,7 @@ function FinishedLearningView({
           />
           <Stat
             name="Repetitions"
-            value={repetitionList.length}
+            value={ratingsList.length}
             icon={IconTallymarks}
             color="blue"
             width="7rem"
diff --git a/src/components/learning/LearnView/LearnView.tsx b/src/components/learning/LearnView/LearnView.tsx
index 2e84fb5..56da93a 100644
--- a/src/components/learning/LearnView/LearnView.tsx
+++ b/src/components/learning/LearnView/LearnView.tsx
@@ -1,14 +1,8 @@
 import classes from "./LearnView.module.css";
 import React, { useCallback, useEffect, useState } from "react";
-import { Box, Center, Flex, Modal, Overlay } from "@mantine/core";
+import { Box, Center, Flex, Modal } from "@mantine/core";
 import { useDeckFromUrl } from "../../../logic/deck";
-import {
-  Card,
-  CardState,
-  CardType,
-  getCardsOf,
-  getStateOf,
-} from "../../../logic/card";
+import { getCardsOf } from "../../../logic/card";
 import MissingObject from "../../custom/MissingObject";
 import { getUtils } from "../../../logic/CardTypeManager";
 import { generalFail } from "../../custom/Notification/Notification";
@@ -20,51 +14,45 @@ import { useLearning } from "../../../logic/learn";
 import { useDebouncedValue, useFullscreen } from "@mantine/hooks";
 import { useNavigate } from "react-router-dom";
 import { useSetting } from "../../../logic/Settings";
+import { Rating } from "fsrs.js";
+import DebugCardTable from "../../DebugCardModal/DebugCardTable";
 
 function LearnView() {
   const { toggle, fullscreen } = useFullscreen();
-  const [useZenMode] = useSetting("useZenMode");
+  const [zenMode] = useSetting("useZenMode");
 
   const navigate = useNavigate();
   const [deck, isReady, params] = useDeckFromUrl();
-  const [cardSet, setCardSet] = useState<Card<CardType>[] | null>(null);
 
-  const controller = useLearning(cardSet, { learnAll: params === "all" });
-
-  const [currentCardState, setCurrentCardState] = useState<
-    CardState | undefined
-  >(undefined);
+  const controller = useLearning(
+    {
+      querier: () => getCardsOf(deck),
+      dependencies: [deck],
+    },
+    { learnAll: params === "all", newToReviewRatio: 0.5 }
+  );
 
+  //ZEN MODE
   useEffect(() => {
-    toggle();
-    return () => {
+    if (zenMode) {
       toggle();
+    }
+    return () => {
+      if (zenMode) {
+        toggle();
+      }
     };
   }, []);
 
-  useEffect(() => {
-    getCardsOf(deck).then((cards) => setCardSet(cards ?? null));
-  }, [deck]);
-
-  useEffect(() => {
-    if (controller.currentCard) {
-      setCurrentCardState(getStateOf(controller.currentCard));
-    } else {
-      setCurrentCardState(undefined);
-    }
-  }, [controller.currentCard]);
-
   const [showingAnswer, setShowingAnswer] = useState<boolean>(false);
-  const [debouncedLearningIsFinished] = useDebouncedValue(
-    controller.learningIsFinished,
-    1000
-  );
+  const [debouncedFinish] = useDebouncedValue(controller.isFinished, 1000);
 
   const answerButtonPressed = useCallback(
-    async (quality: number) => {
+    async (rating: Rating) => {
       try {
-        await controller.answerCard(quality);
+        await controller.answerCard(rating);
         setShowingAnswer(false);
+        controller.nextCard();
       } catch (error) {
         generalFail();
         console.log(error);
@@ -74,10 +62,10 @@ function LearnView() {
   );
 
   useEffect(() => {
-    if (controller.learningIsFinished) {
-      stopwatchResult.pause();
+    if (controller.isFinished) {
+      //stopwatchResult.pause();
     }
-  }, [controller.learningIsFinished]);
+  }, [controller.isFinished]);
 
   if (isReady && !deck) {
     return <MissingObject />;
@@ -92,7 +80,7 @@ function LearnView() {
       <Center>
         <Box component="div" className={classes.cardContainer}>
           <LearnViewCurrentCardStateIndicator
-            currentCardState={currentCardState}
+            currentCardModel={controller.currentCard?.model}
           />
           {!showingAnswer &&
             controller.currentCard &&
@@ -105,6 +93,7 @@ function LearnView() {
               controller.currentCard
             )}
         </Box>
+        <DebugCardTable card={controller.currentCard ?? undefined} />
       </Center>
       <LearnViewFooter
         controller={controller}
@@ -113,7 +102,7 @@ function LearnView() {
         setShowingAnswer={setShowingAnswer}
       />
       <Modal
-        opened={controller.learningIsFinished}
+        opened={controller.isFinished}
         onClose={() => navigate("/home")}
         fullScreen
         closeOnClickOutside={false}
@@ -122,7 +111,7 @@ function LearnView() {
         transitionProps={{ transition: "fade" }}
       >
         <FinishedLearningView
-          repetitionList={controller.repetitionList}
+          ratingsList={controller.ratingsList}
           time={stopwatchResult}
         />
       </Modal>
diff --git a/src/components/learning/LearnView/LearnViewFooter.tsx b/src/components/learning/LearnView/LearnViewFooter.tsx
index 0ea9807..49cc677 100644
--- a/src/components/learning/LearnView/LearnViewFooter.tsx
+++ b/src/components/learning/LearnView/LearnViewFooter.tsx
@@ -1,10 +1,9 @@
 import { Button, Group } from "@mantine/core";
 import { useHotkeys } from "@mantine/hooks";
-import { useMemo } from "react";
 import AnswerCardButton from "../../../logic/AnswerCardButton";
-import { sm2 } from "../../../logic/SpacedRepetition";
 import { LearnController } from "../../../logic/learn";
 import classes from "./LearnView.module.css";
+import { Rating } from "fsrs.js";
 
 interface LearnViewFooterProps {
   controller: LearnController;
@@ -19,62 +18,71 @@ function LearnViewFooter({
   setShowingAnswer,
 }: LearnViewFooterProps) {
   useHotkeys([
-    ["1", () => answer(0)],
-    ["2", () => answer(1)],
-    ["3", () => answer(4)],
-    ["4", () => answer(5)],
-    ["Space", () => (!showingAnswer ? setShowingAnswer(true) : answer(4))],
-    ["Enter", () => (!showingAnswer ? setShowingAnswer(true) : answer(4))],
+    ["1", () => answer(Rating.Again)],
+    ["2", () => answer(Rating.Hard)],
+    ["3", () => answer(Rating.Good)],
+    ["4", () => answer(Rating.Easy)],
+    [
+      "Space",
+      () => (!showingAnswer ? setShowingAnswer(true) : answer(Rating.Good)),
+    ],
+    [
+      "Enter",
+      () => (!showingAnswer ? setShowingAnswer(true) : answer(Rating.Good)),
+    ],
   ]);
 
-  const sm2Hard = useMemo(() => {
-    if (controller.currentCard) {
-      const days = sm2(1, controller.currentCard.model).interval;
-      return days === 0 ? "< 6 min" : days + " d";
-    } else return "";
-  }, [controller.currentCard]);
-
-  const sm2Normal = useMemo(() => {
-    if (controller.currentCard) {
-      const days = sm2(4, controller.currentCard.model).interval;
-      return days === 0 ? "< 10 min" : days + " d";
-    } else return "";
-  }, [controller.currentCard]);
-
-  const sm2Easy = useMemo(() => {
-    if (controller.currentCard) {
-      const days = sm2(5, controller.currentCard.model).interval;
-      return days === 0 ? "< 10 min" : days + " d";
-    } else return "";
-  }, [controller.currentCard]);
-
   return (
     <Group className={classes.footerContainer} justify="center">
       {showingAnswer ? (
         <Group gap="xs" wrap="nowrap" justify="center" w="100%" maw="25rem">
           <AnswerCardButton
             label="Again"
-            timeInfo="< 10 min"
+            timeInfo={
+              (controller.currentCardRepeatInfo &&
+                controller.currentCardRepeatInfo[
+                  Rating.Again
+                ]?.card.due.toDateString()) ??
+              ""
+            }
             color="red"
-            action={() => answer(0)}
+            action={() => answer(Rating.Again)}
           />
           <AnswerCardButton
             label="Hard"
-            timeInfo={sm2Hard}
+            timeInfo={
+              (controller.currentCardRepeatInfo &&
+                controller.currentCardRepeatInfo[
+                  Rating.Hard
+                ]?.card.due.toDateString()) ??
+              ""
+            }
             color="yellow"
-            action={() => answer(1)}
+            action={() => answer(Rating.Hard)}
           />
           <AnswerCardButton
-            label="Normal"
-            timeInfo={sm2Normal}
+            label="Good"
+            timeInfo={
+              (controller.currentCardRepeatInfo &&
+                controller.currentCardRepeatInfo[
+                  Rating.Good
+                ]?.card.due.toDateString()) ??
+              ""
+            }
             color="green"
-            action={() => answer(4)}
+            action={() => answer(Rating.Good)}
           />
           <AnswerCardButton
             label="Easy"
-            timeInfo={sm2Easy}
+            timeInfo={
+              (controller.currentCardRepeatInfo &&
+                controller.currentCardRepeatInfo[
+                  Rating.Easy
+                ]?.card.due.toDateString()) ??
+              ""
+            }
             color="blue"
-            action={() => answer(5)}
+            action={() => answer(Rating.Easy)}
           />
         </Group>
       ) : (
diff --git a/src/components/learning/LearnView/LearnViewHeader.tsx b/src/components/learning/LearnView/LearnViewHeader.tsx
index ca39d87..718be7f 100644
--- a/src/components/learning/LearnView/LearnViewHeader.tsx
+++ b/src/components/learning/LearnView/LearnViewHeader.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo } from "react";
-import { ActionIcon, Group, Progress, Text } from "@mantine/core";
+import { ActionIcon, Group, Progress, Stack, Text } from "@mantine/core";
 import CardMenu from "../../editcard/CardMenu";
 import { useNavigate } from "react-router-dom";
 import { StopwatchResult, useStopwatch } from "react-timer-hook";
@@ -8,6 +8,7 @@ import { IconX } from "@tabler/icons-react";
 import { LearnController } from "../../../logic/learn";
 import { getCounterString } from "../../../logic/timeUtils";
 import { useDebouncedValue } from "@mantine/hooks";
+import RemainingCardsIndicator from "../RemainingCardsIndicator/RemainingCardsIndicator";
 
 export let stopwatchResult: StopwatchResult;
 
@@ -30,46 +31,50 @@ function LearnViewHeader({ currentCard, controller }: LearnViewHeaderProps) {
   const navigate = useNavigate();
   const progress = useMemo(
     () =>
-      controller.learningIsFinished
-        ? 100
-        : (controller.repetitionList.length /
-            (1 +
-              controller.repetitionList.length +
-              controller.learnedCardsLength +
-              controller.newCardsLength +
-              controller.learningQueueLength * 2)) *
-          100,
+      (controller.ratingsList.length /
+        (controller.ratingsList.length +
+          controller.newCardsNumber * 2 +
+          controller.toReviewCardsNumber +
+          controller.timeCriticalCardsNumber)) *
+      100,
     [
-      controller.learningIsFinished,
-      controller.repetitionList,
-      controller.learnedCardsLength,
-      controller.newCardsLength,
-      controller.learningQueueLength,
+      controller.isFinished,
+      controller.ratingsList,
+      controller.newCardsNumber,
+      controller.toReviewCardsNumber,
+      controller.timeCriticalCardsNumber,
+      //FIXME
     ]
   );
   const [debouncedProgress] = useDebouncedValue(progress, 100);
   return (
     <div>
-      <Group justify="space-between" pb="md" wrap="nowrap">
-        <ActionIcon
-          onClick={() => navigate("/home")}
-          variant="subtle"
-          color="gray"
-        >
-          <IconX />
-        </ActionIcon>
-        <Stopwatch />
+      <Stack gap={0}>
+        <Group justify="space-between" pb="md" wrap="nowrap">
+          <Group>
+            <ActionIcon
+              onClick={() => navigate("/home")}
+              variant="subtle"
+              color="gray"
+            >
+              <IconX />
+            </ActionIcon>
+            <Stopwatch />
+          </Group>
+
+          <Group justify="flex-end" wrap="nowrap">
+            <RemainingCardsIndicator controller={controller} />
+            <CardMenu card={currentCard} onDelete={controller.nextCard} />
+          </Group>
+        </Group>
         <Progress
-          size="md"
-          value={debouncedProgress}
+          size="sm"
+          value={progress}
           transitionDuration={200}
           radius="md"
           w="100%"
         />
-        <Group w="10%" justify="flex-end">
-          <CardMenu card={currentCard} onDelete={controller.nextCard} />
-        </Group>
-      </Group>
+      </Stack>
     </div>
   );
 }
diff --git a/src/components/learning/LearnViewCurrentCardStateIndicator/LearnViewCurrentCardStateIndicator.tsx b/src/components/learning/LearnViewCurrentCardStateIndicator/LearnViewCurrentCardStateIndicator.tsx
index 35f579d..fdda9a2 100644
--- a/src/components/learning/LearnViewCurrentCardStateIndicator/LearnViewCurrentCardStateIndicator.tsx
+++ b/src/components/learning/LearnViewCurrentCardStateIndicator/LearnViewCurrentCardStateIndicator.tsx
@@ -1,15 +1,18 @@
 import classes from "./LearnViewCurrentCardStateIndicator.module.css";
-import React from "react";
-import { CardState } from "../../../logic/card";
+import React, { useCallback } from "react";
 import { Group, Text, useMantineTheme } from "@mantine/core";
+import { Card as Model } from "fsrs.js";
 import {
+  IconBook,
+  IconCircleArrowUpRight,
   IconInfoCircle,
   IconSparkles,
   TablerIconsProps,
 } from "@tabler/icons-react";
+import { State } from "fsrs.js";
 
 interface LearnViewCurrentCardStateIndicatorProps {
-  currentCardState: CardState | undefined;
+  currentCardModel: Model | undefined;
 }
 
 function Indicator({
@@ -45,21 +48,36 @@ function Indicator({
 }
 
 export default function LearnViewCurrentCardStateIndicator({
-  currentCardState,
+  currentCardModel,
 }: LearnViewCurrentCardStateIndicatorProps) {
-  if (currentCardState === undefined) {
+  if (currentCardModel === undefined) {
     return null;
   }
-  return {
-    new: <Indicator color="grape" icon={IconSparkles} text="New card" />,
-    learned: (
-      <Indicator
-        color="blue"
-        icon={IconInfoCircle}
-        text="You already know this card"
-      />
-    ),
-    learning: null,
-    due: null,
-  }[currentCardState];
+  const indicator = useCallback(() => {
+    if (currentCardModel.state === State.New) {
+      return <Indicator color="grape" icon={IconSparkles} text="New card" />;
+    } else if (
+      currentCardModel.state === State.Learning ||
+      currentCardModel.state === State.Relearning
+    ) {
+      return (
+        <Indicator
+          color="orange"
+          icon={IconCircleArrowUpRight}
+          text="Learn card"
+        />
+      );
+    } else if (
+      currentCardModel.state === State.Review &&
+      currentCardModel.due <= new Date(Date.now())
+    ) {
+      return <Indicator color="blue" icon={IconBook} text="Review card" />;
+    } else {
+      return (
+        <Indicator color="gray" icon={IconInfoCircle} text="Already learned" />
+      );
+    }
+  }, [currentCardModel]);
+
+  return indicator();
 }
diff --git a/src/components/learning/RemainingCardsIndicator/RemainingCardsIndicator.module.css b/src/components/learning/RemainingCardsIndicator/RemainingCardsIndicator.module.css
new file mode 100644
index 0000000..20a9198
--- /dev/null
+++ b/src/components/learning/RemainingCardsIndicator/RemainingCardsIndicator.module.css
@@ -0,0 +1,17 @@
+.container {
+    border-radius: var(--mantine-radius-sm);
+    border: 1px solid;
+    border-color: light-dark(
+      var(--mantine-color-gray-2),
+      var(--mantine-color-dark-6)
+    );
+    padding: 0.25rem var(--mantine-spacing-xs);
+  }
+  
+  .label {
+    width: 4rem;
+    font-weight: 600;
+    font-size: var(--mantine-font-size-xs);
+    text-align: center;
+  }
+  
\ No newline at end of file
diff --git a/src/components/learning/RemainingCardsIndicator/RemainingCardsIndicator.tsx b/src/components/learning/RemainingCardsIndicator/RemainingCardsIndicator.tsx
new file mode 100644
index 0000000..1f663a0
--- /dev/null
+++ b/src/components/learning/RemainingCardsIndicator/RemainingCardsIndicator.tsx
@@ -0,0 +1,28 @@
+import classes from "./RemainingCardsIndicator.module.css";
+import React from "react";
+import { LearnController } from "../../../logic/learn";
+import { Group, Text } from "@mantine/core";
+interface RemainingCardsIndicatorProps {
+  controller: LearnController;
+}
+
+export default function RemainingCardsIndicator({
+  controller,
+}: RemainingCardsIndicatorProps) {
+  return (
+    <Group align="end" gap="xs" className={classes.container} wrap="nowrap">
+      <Text c="mantine-color" className={classes.label}>
+        {controller.newCardsNumber} new cards
+      </Text>
+      <Text c="orange" className={classes.label}>
+        {controller.timeCriticalCardsNumber} cards to do now
+      </Text>
+      <Text c="blue" className={classes.label}>
+        {controller.toReviewCardsNumber} cards to review
+      </Text>
+      <Text c="gray" className={classes.label}>
+        {controller.learnedCardsNumber} cards learned
+      </Text>
+    </Group>
+  );
+}
diff --git a/src/components/learning/RemainingCardsStats/RemainingCardsStats.module.css b/src/components/learning/RemainingCardsStats/RemainingCardsStats.module.css
deleted file mode 100644
index 7fa9753..0000000
--- a/src/components/learning/RemainingCardsStats/RemainingCardsStats.module.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.container {
-  border-radius: var(--mantine-radius-sm);
-  border: 1px solid;
-  border-color: light-dark(
-    var(--mantine-color-gray-2),
-    var(--mantine-color-dark-6)
-  );
-  padding: 0.25rem var(--mantine-spacing-xs);
-}
-
-.label {
-  width: 4rem;
-  font-weight: 600;
-  font-size: var(--mantine-font-size-xs);
-  text-align: center;
-}
diff --git a/src/components/learning/RemainingCardsStats/RemainingCardsStats.tsx b/src/components/learning/RemainingCardsStats/RemainingCardsStats.tsx
deleted file mode 100644
index 0db06ae..0000000
--- a/src/components/learning/RemainingCardsStats/RemainingCardsStats.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import classes from "./RemainingCardsStats.module.css";
-import React from "react";
-import { LearnController } from "../../../logic/learn";
-import { Group, Text } from "@mantine/core";
-
-interface RemainingCardsStatsProps {
-  controller: LearnController;
-}
-
-export default function RemainingCardsStats({
-  controller,
-}: RemainingCardsStatsProps) {
-  return (
-    <Group align="end" gap="xs" className={classes.container}>
-      <Text c="blue" className={classes.label}>
-        {controller.newCardsLength} new
-      </Text>
-      <Text c="red" className={classes.label}>
-        {controller.learningQueueLength} learn
-      </Text>
-      <Text c="teal" className={classes.label}>
-        {controller.learnedCardsLength} review
-      </Text>
-    </Group>
-  );
-}
diff --git a/src/logic/CardScheduler.ts b/src/logic/CardScheduler.ts
new file mode 100644
index 0000000..068a845
--- /dev/null
+++ b/src/logic/CardScheduler.ts
@@ -0,0 +1,3 @@
+import * as fsrsjs from "fsrs.js";
+
+export const scheduler = new fsrsjs.FSRS();
diff --git a/src/logic/SpacedRepetition.ts b/src/logic/SpacedRepetition.ts
deleted file mode 100644
index 337bea4..0000000
--- a/src/logic/SpacedRepetition.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import { Card, CardType } from "./card";
-
-export function legacySM2(quality: number, model: ReviewModel): ReviewModel {
-  const newModel: ReviewModel = structuredClone(model);
-
-  if (quality >= 3) {
-    if (model.repetitions === 0) {
-      newModel.interval = 0;
-    } else if (model.repetitions === 1) {
-      //interval of 1 for quality = 3 and interval of 3 for quality = 5
-      newModel.interval = quality - 2;
-    } else {
-      if (model.interval === 0) {
-        newModel.interval = 1;
-      } else {
-        newModel.interval = Math.ceil(model.interval * model.easeFactor);
-      }
-    }
-    newModel.repetitions++;
-    newModel.easeFactor =
-      model.easeFactor + (0.1 - (5 - quality) * (0.08 + (5 - quality) * 0.02));
-  } else if (quality === 0) {
-    newModel.repetitions = 0;
-    newModel.interval = 0;
-  } else if (quality < 3) {
-    if (model.repetitions === 0) {
-      newModel.interval = 0;
-    } else {
-      newModel.repetitions = 0;
-      newModel.interval = 1;
-    }
-  }
-  if (newModel.easeFactor < 1.3) {
-    newModel.easeFactor = 1.3;
-  }
-  return newModel;
-}
-
-export function sm2(quality: number, model: ReviewModel): ReviewModel {
-  const newModel: ReviewModel = structuredClone(model);
-
-  function progress() {
-    newModel.interval =
-      Math.ceil(model.interval * model.easeFactor) + (quality - 4);
-    newModel.repetitions++;
-  }
-
-  function reset() {
-    newModel.interval = 0;
-    newModel.repetitions = 0;
-  }
-
-  if (quality >= 4) {
-    if (model.repetitions === 0) {
-      newModel.interval = 0;
-      newModel.repetitions++;
-    } else if (model.repetitions === 1) {
-      //interval of 1 for quality = 4 and interval of 3 for quality = 5
-      newModel.interval = (quality - 4) * 2 + 1;
-      newModel.repetitions++;
-    } else {
-      progress();
-    }
-  } else if (quality > 0) {
-    if (model.repetitions < 2) {
-      reset();
-    } else {
-      progress();
-      newModel.interval = Math.max(1, newModel.interval);
-    }
-  } else {
-    reset();
-  }
-
-  newModel.easeFactor =
-    model.easeFactor + (0.1 - (5 - quality) * (0.08 + (5 - quality) * 0.02));
-
-  if (newModel.easeFactor < 1.3) {
-    newModel.easeFactor = 1.3;
-  }
-
-  return newModel;
-}
-
-export function testSM2(startModel: ReviewModel, qualitySequence: number[]) {
-  let model = startModel;
-  console.log("--------------------");
-  console.log("Starting SM2 test");
-  console.log("Interval: " + model.interval);
-  for (const quality of qualitySequence) {
-    console.log("Simulate answer of: " + quality);
-    model = sm2(quality, model);
-    console.log(
-      "Interval is now: " + model.interval + ", EaseFactor: " + model.easeFactor
-    );
-  }
-  console.log("SM2 test finished");
-  console.log("--------------------");
-  return model;
-}
-
-export function updateModel(quality: number, card: Card<CardType>) {
-  card.model = sm2(quality, card.model);
-}
-export type ReviewModel = {
-  interval: number;
-  //TODO not used anymore, remove
-  learned: boolean;
-  repetitions: number;
-  easeFactor: number;
-};
diff --git a/src/logic/card.tsx b/src/logic/card.tsx
index 9fb8b9a..09ec239 100644
--- a/src/logic/card.tsx
+++ b/src/logic/card.tsx
@@ -4,9 +4,10 @@ import { Deck } from "./deck";
 import { db } from "./db";
 import { useLiveQuery } from "dexie-react-hooks";
 import { newRepetition, Repetition } from "./Repetition";
-import { ReviewModel, sm2 } from "./SpacedRepetition";
 import { useMemo } from "react";
 import { Table } from "dexie";
+import { Card as Model, State } from "fsrs.js";
+import { scheduler } from "./CardScheduler";
 
 export enum CardType {
   Normal = "normal",
@@ -19,9 +20,8 @@ export enum CardType {
 export interface CardSkeleton {
   id: string;
   history: Repetition[];
-  model: ReviewModel;
+  model: Model;
   deck: string;
-  dueDate: Date | null;
   creationDate: Date;
   frame?: string | undefined;
 }
@@ -36,8 +36,7 @@ export function createCardSkeleton(): CardSkeleton {
     id: id,
     history: [],
     deck: "",
-    dueDate: null,
-    model: { repetitions: 0, easeFactor: 2.5, interval: 0, learned: false },
+    model: new Model(),
     creationDate: new Date(Date.now()),
   };
 }
@@ -72,6 +71,10 @@ export async function updateCard(
   return db.cards.update(id, changes);
 }
 
+export async function updateCardModel(card: Card<CardType>, model: Model) {
+  return db.cards.update(card.id, { model: model });
+}
+
 export async function moveCard(card: Card<CardType>, newDeck: Deck) {
   //Remove card from old deck
   const oldDeck = await db.decks.get(card.deck);
@@ -100,27 +103,6 @@ export async function deleteCard(card: Card<CardType>) {
   });
 }
 
-export async function answerCard(
-  potentiallyOldCard: Card<CardType>,
-  quality: number,
-  learned: boolean
-) {
-  //The card object passed does not have to represent the current version stored in the database due to the implementation in LearnView. Therefore, the card is loaded from the database.
-  //TODO check this new implementation could mean that the card is actually loaded twice see pullCardFrom() in useLearning
-  const card = await getCard(potentiallyOldCard.id);
-  if (card) {
-    card.model.learned = learned;
-    const newModel = sm2(quality, card.model);
-    const dueDate = new Date();
-    dueDate.setDate(dueDate.getDate() + newModel.interval);
-    await updateCard(card.id, {
-      model: newModel,
-      history: [...card.history, newRepetition(quality)],
-      dueDate: dueDate,
-    });
-  }
-}
-
 export function useCards() {
   return useLiveQuery(() => db.cards.orderBy("content.front").toArray());
 }
@@ -180,66 +162,47 @@ export async function getCard(id: string) {
   return db.cards.get(id);
 }
 
-export type CardState = "due" | "learned" | "new" | "learning";
-
-/**
- * Returns the state of a card. It can be "due", "learned", "new" or "learning". See {@link CardState} for more information.
- * @param card The card to get the state of.
- */
-export function getStateOf(card: Card<CardType>): CardState {
-  if (card.history.length === 0) {
-    return "new";
-  } else {
-    if (card.model.interval !== 0) {
-      if (!card.dueDate || card.dueDate?.getTime() <= Date.now()) {
-        return "due";
-      } else {
-        return "learned";
-      }
-    } else {
-      return "learning";
-    }
-  }
+export function useStatesOf(cards?: Card<CardType>[]): Record<State, number> {
+  return useMemo(() => {
+    const states = {
+      [State.New]: 0,
+      [State.Learning]: 0,
+      [State.Review]: 0,
+      [State.Relearning]: 0,
+    };
+    cards?.forEach((card) => {
+      states[card.model.state]++;
+    });
+    return states;
+  }, [cards]);
 }
 
-/**
- * Returns the number of cards in each state. See {@link CardsStats} for more information.
- * @param cards The cards to get the stats of.
- */
-export function useStatsOf(cards?: Card<CardType>[]): CardsStats {
-  return useMemo(() => {
-    let dueCounter = 0;
-    let learnedCounter = 0;
-    let newCounter = 0;
-    let learningCounter = 0;
+export type ThreeTypeState = "new" | "learning" | "review";
 
+export function useSimplifiedStatesOf(
+  cards?: Card<CardType>[]
+): Record<ThreeTypeState, number> {
+  return useMemo(() => {
+    const states = {
+      new: 0,
+      learning: 0,
+      review: 0,
+    };
     cards?.forEach((card) => {
-      if (card.history.length === 0) {
-        newCounter++;
-      } else {
-        if (card.model.interval !== 0) {
-          if (!card.dueDate || card.dueDate?.getTime() <= Date.now()) {
-            dueCounter++;
-          } else {
-            learnedCounter++;
-          }
-        } else {
-          learningCounter++;
-        }
+      if (card.model.state === State.New) {
+        states.new++;
+      } else if (
+        card.model.state === State.Learning ||
+        card.model.state === State.Relearning
+      ) {
+        states.learning++;
+      } else if (
+        card.model.state === State.Review &&
+        card.model.due <= new Date(Date.now())
+      ) {
+        states.review++;
       }
     });
-    return {
-      dueCards: dueCounter,
-      learnedCards: learnedCounter,
-      newCards: newCounter,
-      learningCards: learningCounter,
-    };
+    return states;
   }, [cards]);
 }
-
-export type CardsStats = {
-  dueCards: number | null;
-  learnedCards: number | null;
-  newCards: number | null;
-  learningCards: number | null;
-};
diff --git a/src/logic/learn.ts b/src/logic/learn.ts
index 6a6b129..12c217c 100644
--- a/src/logic/learn.ts
+++ b/src/logic/learn.ts
@@ -1,262 +1,214 @@
-import { answerCard, Card, CardType, getCard, getStateOf } from "./card";
-import { useCallback, useEffect, useState } from "react";
-
-export type Answer = "again" | "hard" | "good" | "easy";
-
-export const AnswerQuality: Record<Answer, number> = {
-  again: 0,
-  hard: 1,
-  good: 4,
-  easy: 5,
-};
-
+import { Card, CardType, updateCardModel, useCardsWith } from "./card";
+import {
+  useCallback,
+  useDebugValue,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { Rating, State, Card as Model, FSRS, SchedulingInfo } from "fsrs.js";
+import { Table } from "dexie";
+import { scheduler } from "./CardScheduler";
+import { use } from "i18next";
 export type LearnOptions = {
   learnAll: boolean;
+  newToReviewRatio: number;
 };
 
-/**
- * This type specifies the return value of the useLearning hook. It contains all the functions and variables needed to control the learning process.
- */
 export type LearnController = {
   currentCard: Card<CardType> | null;
-  currentCardFromReservoir: "new" | "learned" | "learning" | null;
-  nextCard: Function;
-  answerCard: Function;
-  learningIsFinished: boolean;
-  repetitionList: number[];
-  learnedCardsLength: number;
-  newCardsLength: number;
-  learningQueueLength: number;
-};
+  nextCard: () => void;
+  answerCard: (rating: Rating) => void;
+  currentCardRepeatInfo: Record<number, SchedulingInfo> | null;
 
-/**
- * This objects maps the maximum time a card can be in the urgent queue to the answer given by the user
- */
-const timeInUrgentQueue: Record<number, number> = {
-  0: 60_000,
-  1: 300_000,
-  4: 600_000,
-  5: 1_200_000,
-};
+  newCardsNumber: number;
+  timeCriticalCardsNumber: number;
+  toReviewCardsNumber: number;
+  learnedCardsNumber: number;
 
-/**
- * This function pulls a card from the reservoir and sets it as the current card
- * @param reservoir The reservoir from which the card is pulled
- * @param setReservoir The function to set the reservoir
- * @param setCurrentCard The function to set the current card
- */
-async function pullCardFromReservoir(
-  reservoir: Card<CardType>[],
-  setReservoir: Function,
-  setCurrentCard: Function
-) {
-  getCard(reservoir[0].id).then((card) => {
-    if (card) {
-      setCurrentCard(card);
-      setReservoir(reservoir.filter((_, i) => i !== 0));
-    }
-  });
-}
+  ratingsList: Rating[];
 
-async function pullCardFromLearningQueue(
-  queue: { card: Card<CardType>; due: number }[],
-  setQueue: Function,
-  setCurrentCard: Function
-) {
-  getCard(queue[0].card.id).then((card) => {
-    if (card) {
-      console.log("Pulled card from reservoir: " + card.id);
-      setCurrentCard(card);
-      setQueue(queue.filter((_, i) => i !== 0));
-    }
-  });
-}
+  isFinished: boolean;
+};
+
+export type CardQuerier = {
+  querier: (
+    cards: Table<Card<CardType>>
+  ) => Promise<Card<CardType>[] | undefined>;
+  dependencies: any[];
+};
 
-/**
- * This hook controls the learning process. It takes a card set and returns a {@link LearnController} object.
- * @param cardSet
- * @param options
- */
 export function useLearning(
-  cardSet: Card<CardType>[] | null,
-  options?: LearnOptions
+  cardQuerier: CardQuerier,
+  options: LearnOptions
 ): LearnController {
+  //e. g. all cards of a deck
+  const [providedCards] = useCardsWith(
+    cardQuerier.querier,
+    cardQuerier.dependencies
+  );
+
+  const [timeCriticalCards, setTimeCriticalCards] = useState<Card<CardType>[]>(
+    []
+  );
   const [newCards, setNewCards] = useState<Card<CardType>[]>([]);
+  const [toReviewCards, setToReviewCards] = useState<Card<CardType>[]>([]);
   const [learnedCards, setLearnedCards] = useState<Card<CardType>[]>([]);
-  const [learningQueue, setLearningQueue] = useState<
-    { card: Card<CardType>; due: number }[]
-  >([]);
+
   const [currentCard, setCurrentCard] = useState<Card<CardType> | null>(null);
-  const [currentCardFromReservoir, setCurrentCardFromReservoir] = useState<
-    "new" | "learned" | "learning" | null
-  >(null);
-  const [repetitionList, setRepetitionList] = useState<number[]>([]);
-  const [finished, setFinished] = useState<boolean>(false);
-  const [requestingNext, setRequestingNext] = useState<boolean>(false);
 
-  //This is the function which is presented to the outside scope
-  //It will set the request next state to true, which will trigger the useEffect below
-  const requestNext = useCallback(
-    () => setRequestingNext(true),
-    [setRequestingNext]
-  );
+  const [isFinished, setIsFinished] = useState<boolean>(false);
 
-  useEffect(() => {
-    //IF another card is requested
-    //OR there is no current card and there are still cards in the card reservoirs
-    if (
-      requestingNext ||
-      (!currentCard &&
-        (newCards.length !== 0 ||
-          learnedCards.length !== 0 ||
-          learningQueue.length !== 0))
-    ) {
-      setRequestingNext(false);
+  const [ratingsList, setRatingsList] = useState<Rating[]>([]);
 
-      //Check if there are any learning cards to be presented
-      //There have to be items in the learningQueue
-      //and the oldest one hast to be due, or instead there have to be no cards
-      //left in the other card reservoirs
+  //Sorting the cards into different categories if they have been provided
+  useEffect(() => {
+    if (providedCards) {
       if (
-        learningQueue.length !== 0 &&
-        (learningQueue[0].due <= Date.now() ||
-          (newCards.length === 0 && learnedCards.length === 0))
+        timeCriticalCards.length +
+          newCards.length +
+          toReviewCards.length +
+          learnedCards.length ===
+          0 &&
+        currentCard === null
       ) {
-        void pullCardFromLearningQueue(
-          learningQueue,
-          setLearningQueue,
-          setCurrentCard
+        console.log("sorting out cards");
+        const now = new Date(Date.now());
+        setTimeCriticalCards(
+          providedCards.filter(
+            (card) =>
+              card.model.state === State.Learning ||
+              card.model.state === State.Relearning
+          )
         );
-        setCurrentCardFromReservoir("learning");
-      } else {
-        const newCardsAvailable = newCards.length > 0;
-        const learnedCardsAvailable = learnedCards.length > 0;
+        setNewCards(
+          providedCards.filter((card) => card.model.state === State.New)
+        );
+        setToReviewCards(
+          providedCards.filter(
+            (card) => card.model.state === State.Review && card.model.due <= now
+          )
+        );
+        setLearnedCards(
+          providedCards.filter(
+            (card) => card.model.state === State.Review && card.model.due > now
+          )
+        );
+      } else if (currentCard === null) {
+        console.log("no current card, setting it");
+        nextCard();
+      }
+    }
+  }, [
+    providedCards,
+    currentCard,
+    timeCriticalCards,
+    newCards,
+    toReviewCards,
+    learnedCards,
+  ]);
 
-        //If there are new cards and learned cards left, decide from which reservoir to pull from
-        //TODO use other method than doing to than random, maybe incorporate a parameter from settings
-        //If only one reservoir holds cards, pull it from that one
-        //If no reservoir holds any more cards, then learning can be considered finished
-        if (newCardsAvailable && learnedCardsAvailable) {
-          if (Math.random() < 0.5) {
-            void pullCardFromReservoir(newCards, setNewCards, setCurrentCard);
-            setCurrentCardFromReservoir("new");
-          } else {
-            void pullCardFromReservoir(
-              learnedCards,
-              setLearnedCards,
-              setCurrentCard
-            );
-            setCurrentCardFromReservoir("learned");
-          }
-        } else if (newCardsAvailable) {
-          void pullCardFromReservoir(newCards, setNewCards, setCurrentCard);
-        } else if (learnedCardsAvailable) {
-          void pullCardFromReservoir(
-            learnedCards,
-            setLearnedCards,
-            setCurrentCard
-          );
-          setCurrentCardFromReservoir("learned");
+  const nextCard = useCallback(() => {
+    if (
+      timeCriticalCards.length > 0 &&
+      timeCriticalCards[0].model.due <= new Date(Date.now())
+    ) {
+      setCurrentCard(timeCriticalCards[0]);
+      setTimeCriticalCards(timeCriticalCards.filter((_, i) => i !== 0));
+    } else if (newCards.length + toReviewCards.length > 0) {
+      if (newCards.length === 0) {
+        setCurrentCard(toReviewCards[0]);
+        setToReviewCards(toReviewCards.filter((_, i) => i !== 0));
+      } else if (toReviewCards.length === 0) {
+        setCurrentCard(newCards[0]);
+        setNewCards(newCards.filter((_, i) => i !== 0));
+      } else {
+        if (Math.random() < options.newToReviewRatio) {
+          setCurrentCard(newCards[0]);
+          setNewCards(newCards.filter((_, i) => i !== 0));
         } else {
-          setFinished(true);
+          setCurrentCard(toReviewCards[0]);
+          setToReviewCards(toReviewCards.filter((_, i) => i !== 0));
         }
       }
+    } else if (options.learnAll && learnedCards.length > 0) {
+      setCurrentCard(learnedCards[0]);
+      setLearnedCards(learnedCards.filter((_, i) => i !== 0));
+    } else if (timeCriticalCards.length > 0) {
+      setCurrentCard(timeCriticalCards[0]);
+      setTimeCriticalCards(timeCriticalCards.filter((_, i) => i !== 0));
+    } else {
+      console.log("no more cards");
+      setIsFinished(true);
     }
   }, [
-    learningQueue,
+    timeCriticalCards,
     newCards,
+    toReviewCards,
     learnedCards,
-    requestNext,
-    currentCard,
-    requestingNext,
+    options,
+    setCurrentCard,
   ]);
 
-  const answer = useCallback(
-    async (quality: number) => {
-      if (currentCard) {
-        //Increase repetition count for stats
-        setRepetitionList(repetitionList.concat(quality));
+  //Providing information about how all 4 ratings would affect the current card
+  //Shown on buttons
+  const currentCardRepeatInfo = useMemo(() => {
+    if (currentCard) {
+      return scheduler.repeat(currentCard.model, new Date(Date.now()));
+    } else {
+      return null;
+    }
+  }, [currentCard]);
 
-        //If the quality is 0 or the card has never been repeated before or the quality is 1 and the repetition count is less than 2, push the card to the urgent queue
-        if (
-          quality === 0 ||
-          currentCard.model.repetitions === 0 ||
-          (quality <= 1 && currentCard.model.repetitions < 2)
-        ) {
-          console.log("pushing to urgent queue");
-          setLearningQueue(
-            learningQueue.concat({
-              card: currentCard,
-              due: Date.now() + timeInUrgentQueue[quality],
-            })
+  //Answering the current card with the given rating
+  const answer = useCallback(
+    (rating: Rating) => {
+      if (currentCard && currentCardRepeatInfo) {
+        updateCardModel(currentCard, currentCardRepeatInfo[rating].card);
+        if (currentCardRepeatInfo[rating].card.scheduled_days === 0) {
+          setTimeCriticalCards(
+            [
+              ...timeCriticalCards,
+              { ...currentCard, model: currentCardRepeatInfo[rating].card },
+            ].sort((a, b) => a.model.due.getTime() - b.model.due.getTime())
           );
+          setRatingsList([...ratingsList, rating]);
         }
-        console.log("calling sm2 and updating database");
-
-        //Now calculate sm2 and update database
-        await answerCard(currentCard, quality, currentCard.model.learned);
-
-        console.log("answer finished");
+      } else {
+        throw new Error("Card or cardModelInfo is missing");
       }
-
-      requestNext();
     },
-    [currentCard, learningQueue, repetitionList, requestNext]
+    [currentCard]
   );
 
-  //This useEffect is used to filter the cards given in using cardSet and spreading them to the learningQueue and the newCards / learnedCards reservoir
-  useEffect(() => {
-    if (cardSet && cardSet[0] && repetitionList.length === 0) {
-      setNewCards(
-        cardSet
-          .filter((card) => getStateOf(card) === "new")
-          .sort((a, b) => a.creationDate.getTime() - b.creationDate.getTime())
-      );
-
-      if (options?.learnAll) {
-        setLearnedCards(
-          cardSet.filter((card) => {
-            const state = getStateOf(card);
-            return state === "due" || state === "learned";
-          })
-        );
-      } else {
-        setLearnedCards(cardSet.filter((card) => getStateOf(card) === "due"));
-      }
-
-      setLearningQueue(
-        cardSet
-          .filter((card) => getStateOf(card) === "learning")
-          .map((card) => ({ card: card, due: Date.now() }))
-      );
-    }
-  }, [cardSet, repetitionList, options?.learnAll]);
-
   return {
     currentCard: currentCard,
-    currentCardFromReservoir: currentCardFromReservoir,
+    currentCardRepeatInfo: currentCardRepeatInfo,
     answerCard: answer,
-    nextCard: requestNext,
-    learningIsFinished: finished,
-    repetitionList: repetitionList,
-    learnedCardsLength: learnedCards.length,
-    newCardsLength: newCards.length,
-    learningQueueLength: learningQueue.length,
+    nextCard: nextCard,
+
+    newCardsNumber: newCards.length,
+    timeCriticalCardsNumber: timeCriticalCards.length,
+    toReviewCardsNumber: toReviewCards.length,
+    learnedCardsNumber: learnedCards.length,
+
+    ratingsList: ratingsList,
+
+    isFinished: isFinished,
   };
 }
 
-export function useRepetitionAccuracy(repetitionList: number[]): number | null {
+//POSSIBLY NOT ACCURATE | NOT REVIEWED AGAIN AFTER #33
+export function useRepetitionAccuracy(ratingsList: number[]): number | null {
   const [accuracy, setAccuracy] = useState<number | null>(null);
 
   useEffect(() => {
-    if (repetitionList.length !== 0) {
+    if (ratingsList.length !== 0) {
       let sum = 0;
-      repetitionList.forEach(
-        (quality) => (sum += quality / AnswerQuality.good)
-      );
-      setAccuracy(Math.round((sum / repetitionList.length) * 1000) / 10);
+      ratingsList.forEach((rating) => (sum += rating / Rating.Good));
+      setAccuracy(Math.round((sum / ratingsList.length) * 1000) / 10);
     }
-  }, [repetitionList]);
+  }, [ratingsList]);
 
   return accuracy;
 }
diff --git a/src/style/StyleProvider.ts b/src/style/StyleProvider.ts
index 5192f5d..ca8523f 100644
--- a/src/style/StyleProvider.ts
+++ b/src/style/StyleProvider.ts
@@ -208,6 +208,7 @@ export const cssVariablesResolver: CSSVariablesResolver = (theme) => {
       "--mantine-color-lime-strong": theme.colors.lime[7],
       "--mantine-color-yellow-strong": theme.colors.yellow[7],
       "--mantine-color-orange-strong": theme.colors.orange[7],
+      "--mantine-color-gray-strong": theme.colors.gray[6],
     },
 
     dark: {
@@ -223,6 +224,7 @@ export const cssVariablesResolver: CSSVariablesResolver = (theme) => {
       "--mantine-color-lime-strong": theme.colors.lime[3],
       "--mantine-color-yellow-strong": theme.colors.yellow[3],
       "--mantine-color-orange-strong": theme.colors.orange[3],
+      "--mantine-color-gray-strong": theme.colors.gray[5],
     },
   };
 };

From c0b61f33701bdf0b3ff1b06d288997e59857e23a Mon Sep 17 00:00:00 2001
From: h16nning <henning.flath@t-online.de>
Date: Thu, 8 Feb 2024 22:34:23 +0100
Subject: [PATCH 2/4] Sort types, fixes, comments

Sort types: for now byCreationDate and bySortField (using displayPreview from CardTypeManager)
---
 .../deck/HeroDeckSection/HeroDeckSection.tsx  |   5 +-
 .../learning/LearnView/LearnView.tsx          |   8 +-
 src/logic/deck.ts                             |  10 ++
 src/logic/learn.ts                            | 131 +++++++++++-------
 4 files changed, 98 insertions(+), 56 deletions(-)

diff --git a/src/components/deck/HeroDeckSection/HeroDeckSection.tsx b/src/components/deck/HeroDeckSection/HeroDeckSection.tsx
index a00074c..5713c75 100644
--- a/src/components/deck/HeroDeckSection/HeroDeckSection.tsx
+++ b/src/components/deck/HeroDeckSection/HeroDeckSection.tsx
@@ -26,11 +26,12 @@ function HeroDeckSection({ deck, cards, areCardsReady }: HeroDeckSectionProps) {
   const navigate = useNavigate();
   const [t] = useTranslation();
 
+  const states = useSimplifiedStatesOf(cards);
+
   function isDone() {
-    return false; //FIXME 33
+    return states.new + states.learning + states.review === 0;
   }
 
-  const states = useSimplifiedStatesOf(cards);
   return (
     <Paper className={classes.container}>
       {areCardsReady &&
diff --git a/src/components/learning/LearnView/LearnView.tsx b/src/components/learning/LearnView/LearnView.tsx
index 56da93a..f24d1e4 100644
--- a/src/components/learning/LearnView/LearnView.tsx
+++ b/src/components/learning/LearnView/LearnView.tsx
@@ -10,7 +10,7 @@ import FinishedLearningView from "../FinishedLearningView/FinishedLearningView";
 import LearnViewFooter from "./LearnViewFooter";
 import LearnViewHeader, { stopwatchResult } from "./LearnViewHeader";
 import LearnViewCurrentCardStateIndicator from "../LearnViewCurrentCardStateIndicator/LearnViewCurrentCardStateIndicator";
-import { useLearning } from "../../../logic/learn";
+import { CardSorts, useLearning } from "../../../logic/learn";
 import { useDebouncedValue, useFullscreen } from "@mantine/hooks";
 import { useNavigate } from "react-router-dom";
 import { useSetting } from "../../../logic/Settings";
@@ -29,7 +29,11 @@ function LearnView() {
       querier: () => getCardsOf(deck),
       dependencies: [deck],
     },
-    { learnAll: params === "all", newToReviewRatio: 0.5 }
+    {
+      learnAll: params === "all",
+      newToReviewRatio: 0.5,
+      sort: CardSorts.bySortField(1),
+    }
   );
 
   //ZEN MODE
diff --git a/src/logic/deck.ts b/src/logic/deck.ts
index 0a03500..bceeb54 100644
--- a/src/logic/deck.ts
+++ b/src/logic/deck.ts
@@ -13,6 +13,12 @@ export interface Deck {
   superDecks?: string[];
   cards: Array<string>;
   description?: string;
+  options: DeckOptions;
+}
+
+export interface DeckOptions {
+  newToReviewRatio: number;
+  dailyNewCards: number;
 }
 
 export async function newDeck(
@@ -46,6 +52,10 @@ export async function newDeck(
     subDecks: [],
     superDecks: superDecks,
     description: description,
+    options: {
+      newToReviewRatio: 0.5,
+      dailyNewCards: 25,
+    },
   });
   return uuid;
 }
diff --git a/src/logic/learn.ts b/src/logic/learn.ts
index 12c217c..e681461 100644
--- a/src/logic/learn.ts
+++ b/src/logic/learn.ts
@@ -1,69 +1,82 @@
 import { Card, CardType, updateCardModel, useCardsWith } from "./card";
-import {
-  useCallback,
-  useDebugValue,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-import { Rating, State, Card as Model, FSRS, SchedulingInfo } from "fsrs.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Rating, State, SchedulingInfo } from "fsrs.js";
 import { Table } from "dexie";
 import { scheduler } from "./CardScheduler";
-import { use } from "i18next";
+import { getUtils } from "./CardTypeManager";
+
 export type LearnOptions = {
   learnAll: boolean;
   newToReviewRatio: number;
+  sort?: (a: Card<CardType>, b: Card<CardType>) => number;
 };
 
-export type LearnController = {
-  currentCard: Card<CardType> | null;
-  nextCard: () => void;
-  answerCard: (rating: Rating) => void;
-  currentCardRepeatInfo: Record<number, SchedulingInfo> | null;
+export type CardQuerier = {
+  querier: (
+    cards: Table<Card<CardType>>
+  ) => Promise<Card<CardType>[] | undefined>;
+  dependencies: any[];
+};
 
+export const CardSorts = {
+  byCreationDate:
+    (sortOrder: 1 | -1) => (a: Card<CardType>, b: Card<CardType>) =>
+      (a.creationDate.getTime() - b.creationDate.getTime()) * sortOrder,
+  bySortField: (sortOrder: 1 | -1) => (a: Card<CardType>, b: Card<CardType>) =>
+    (getUtils(a).displayPreview(a) > getUtils(b).displayPreview(b) ? 1 : -1) *
+    sortOrder,
+};
+
+export type LearnController = {
   newCardsNumber: number;
   timeCriticalCardsNumber: number;
   toReviewCardsNumber: number;
   learnedCardsNumber: number;
 
-  ratingsList: Rating[];
+  currentCard: Card<CardType> | null;
+  currentCardRepeatInfo: Record<number, SchedulingInfo> | null;
 
-  isFinished: boolean;
-};
+  answerCard: (rating: Rating) => void;
+  nextCard: () => void;
 
-export type CardQuerier = {
-  querier: (
-    cards: Table<Card<CardType>>
-  ) => Promise<Card<CardType>[] | undefined>;
-  dependencies: any[];
+  ratingsList: Rating[];
+  isFinished: boolean;
 };
 
 export function useLearning(
   cardQuerier: CardQuerier,
   options: LearnOptions
 ): LearnController {
-  //e. g. all cards of a deck
+  //e.g. all cards of a deck
   const [providedCards] = useCardsWith(
     cardQuerier.querier,
     cardQuerier.dependencies
   );
 
+  //Time critical cards are cards that are due today / should be done within this learning session (5-10 min interval). timeCriticalCards should be sorted by due date
   const [timeCriticalCards, setTimeCriticalCards] = useState<Card<CardType>[]>(
     []
   );
+
+  //New cards are cards that have never been reviewed
   const [newCards, setNewCards] = useState<Card<CardType>[]>([]);
+  //To review cards are cards that have been answered correctly before and are due for a review
   const [toReviewCards, setToReviewCards] = useState<Card<CardType>[]>([]);
+  //Learned cards are cards that have been answered correctly but are not due for a review. These cards are not regulary shown, only with learnAll true
   const [learnedCards, setLearnedCards] = useState<Card<CardType>[]>([]);
 
+  //Currently shown card
   const [currentCard, setCurrentCard] = useState<Card<CardType> | null>(null);
 
+  //Determines if FinishedLearningView is shown
   const [isFinished, setIsFinished] = useState<boolean>(false);
-
+  //for progress bar and statistics on FinishedLearningView
   const [ratingsList, setRatingsList] = useState<Rating[]>([]);
 
-  //Sorting the cards into different categories if they have been provided
   useEffect(() => {
+    //Check if there are already cards provided
     if (providedCards) {
+      //Check if there are no cards are in the respective lists and currentCard is not set.
       if (
         timeCriticalCards.length +
           newCards.length +
@@ -72,7 +85,7 @@ export function useLearning(
           0 &&
         currentCard === null
       ) {
-        console.log("sorting out cards");
+        //If yes, sort the cards into the respective lists
         const now = new Date(Date.now());
         setTimeCriticalCards(
           providedCards.filter(
@@ -82,20 +95,28 @@ export function useLearning(
           )
         );
         setNewCards(
-          providedCards.filter((card) => card.model.state === State.New)
+          providedCards
+            .filter((card) => card.model.state === State.New)
+            .sort(options.sort)
         );
         setToReviewCards(
-          providedCards.filter(
-            (card) => card.model.state === State.Review && card.model.due <= now
-          )
+          providedCards
+            .filter(
+              (card) =>
+                card.model.state === State.Review && card.model.due <= now
+            )
+            .sort(options.sort)
         );
         setLearnedCards(
-          providedCards.filter(
-            (card) => card.model.state === State.Review && card.model.due > now
-          )
+          providedCards
+            .filter(
+              (card) =>
+                card.model.state === State.Review && card.model.due > now
+            )
+            .sort(options.sort)
         );
       } else if (currentCard === null) {
-        console.log("no current card, setting it");
+        //If currentCard is not set (and there are cards in the lists), set it
         nextCard();
       }
     }
@@ -108,37 +129,42 @@ export function useLearning(
     learnedCards,
   ]);
 
+  //Tries to set currentCard to the next card
   const nextCard = useCallback(() => {
+    //If there are time critical cards that are due, set the first one as currentCard
     if (
       timeCriticalCards.length > 0 &&
       timeCriticalCards[0].model.due <= new Date(Date.now())
     ) {
       setCurrentCard(timeCriticalCards[0]);
-      setTimeCriticalCards(timeCriticalCards.filter((_, i) => i !== 0));
+      setTimeCriticalCards((tcCards) => tcCards.filter((_, i) => i !== 0));
+      //If there are new cards or cards that need to be reviewed are available choose one of them based on the newToReviewRatio
     } else if (newCards.length + toReviewCards.length > 0) {
       if (newCards.length === 0) {
         setCurrentCard(toReviewCards[0]);
-        setToReviewCards(toReviewCards.filter((_, i) => i !== 0));
+        setToReviewCards((trCards) => trCards.filter((_, i) => i !== 0));
       } else if (toReviewCards.length === 0) {
         setCurrentCard(newCards[0]);
-        setNewCards(newCards.filter((_, i) => i !== 0));
+        setNewCards((nCards) => nCards.filter((_, i) => i !== 0));
       } else {
         if (Math.random() < options.newToReviewRatio) {
           setCurrentCard(newCards[0]);
-          setNewCards(newCards.filter((_, i) => i !== 0));
+          setNewCards((nCards) => nCards.filter((_, i) => i !== 0));
         } else {
           setCurrentCard(toReviewCards[0]);
-          setToReviewCards(toReviewCards.filter((_, i) => i !== 0));
+          setToReviewCards((trCards) => trCards.filter((_, i) => i !== 0));
         }
       }
+      //If learnAll is true and there are learned cards available set the first one as currentCard
     } else if (options.learnAll && learnedCards.length > 0) {
       setCurrentCard(learnedCards[0]);
-      setLearnedCards(learnedCards.filter((_, i) => i !== 0));
+      setLearnedCards((lCards) => lCards.filter((_, i) => i !== 0));
+      //If there aren't any other cards but still time critical cards which are not due yet do them anyway
     } else if (timeCriticalCards.length > 0) {
       setCurrentCard(timeCriticalCards[0]);
-      setTimeCriticalCards(timeCriticalCards.filter((_, i) => i !== 0));
+      setTimeCriticalCards((tcCards) => tcCards.filter((_, i) => i !== 0));
+      //If there are no cards left finish the learning session
     } else {
-      console.log("no more cards");
       setIsFinished(true);
     }
   }, [
@@ -164,36 +190,37 @@ export function useLearning(
   const answer = useCallback(
     (rating: Rating) => {
       if (currentCard && currentCardRepeatInfo) {
+        console.log(currentCardRepeatInfo[rating]);
         updateCardModel(currentCard, currentCardRepeatInfo[rating].card);
         if (currentCardRepeatInfo[rating].card.scheduled_days === 0) {
-          setTimeCriticalCards(
+          setTimeCriticalCards((tcCards) =>
             [
-              ...timeCriticalCards,
+              ...tcCards,
               { ...currentCard, model: currentCardRepeatInfo[rating].card },
             ].sort((a, b) => a.model.due.getTime() - b.model.due.getTime())
           );
-          setRatingsList([...ratingsList, rating]);
+          setRatingsList((rList) => [...rList, rating]);
         }
       } else {
         throw new Error("Card or cardModelInfo is missing");
       }
     },
-    [currentCard]
+    [currentCard, currentCardRepeatInfo, timeCriticalCards, ratingsList]
   );
 
   return {
-    currentCard: currentCard,
-    currentCardRepeatInfo: currentCardRepeatInfo,
-    answerCard: answer,
-    nextCard: nextCard,
-
     newCardsNumber: newCards.length,
     timeCriticalCardsNumber: timeCriticalCards.length,
     toReviewCardsNumber: toReviewCards.length,
     learnedCardsNumber: learnedCards.length,
 
-    ratingsList: ratingsList,
+    currentCard: currentCard,
+    currentCardRepeatInfo: currentCardRepeatInfo,
 
+    answerCard: answer,
+    nextCard: nextCard,
+
+    ratingsList: ratingsList,
     isFinished: isFinished,
   };
 }

From b39871622192396a5e34e9b35f2b8a9de2f30989 Mon Sep 17 00:00:00 2001
From: h16nning <henning.flath@t-online.de>
Date: Thu, 8 Feb 2024 23:54:04 +0100
Subject: [PATCH 3/4] Fixed learning related bugs

- fixed repetition accuracy and repetition numbers
- fixed isFinished being set to true if there is still a card but react state hasn't updated yet (current solution: isFinished is being set to false again, but it is fast enough to not be visible)
- fixed DeckPreview showing always one as to review count
---
 src/components/deck/DeckPreview.tsx           |  2 +-
 .../FinishedLearningView.tsx                  |  1 -
 .../learning/LearnView/LearnView.tsx          |  5 ++-
 .../learning/LearnView/LearnViewFooter.tsx    | 34 +++++++++-------
 src/logic/learn.ts                            | 40 ++++++++++---------
 5 files changed, 45 insertions(+), 37 deletions(-)

diff --git a/src/components/deck/DeckPreview.tsx b/src/components/deck/DeckPreview.tsx
index 5e56155..9272842 100644
--- a/src/components/deck/DeckPreview.tsx
+++ b/src/components/deck/DeckPreview.tsx
@@ -30,7 +30,7 @@ export default function DeckPreview({ deck, i }: DeckPreviewProps) {
           <Group gap="xs" wrap="nowrap">
             {states.review > 0 ? (
               <Badge variant="dot" color="blue">
-                {t("deck.review-cards-label", { count: -1 })}
+                {t("deck.review-cards-label", { count: states.review })}
               </Badge>
             ) : (
               <></>
diff --git a/src/components/learning/FinishedLearningView/FinishedLearningView.tsx b/src/components/learning/FinishedLearningView/FinishedLearningView.tsx
index a8838e5..f274ec4 100644
--- a/src/components/learning/FinishedLearningView/FinishedLearningView.tsx
+++ b/src/components/learning/FinishedLearningView/FinishedLearningView.tsx
@@ -1,5 +1,4 @@
 import classes from "./FinishedLearningView.module.css";
-import React, { useEffect } from "react";
 import {
   Button,
   Center,
diff --git a/src/components/learning/LearnView/LearnView.tsx b/src/components/learning/LearnView/LearnView.tsx
index f24d1e4..091d8dc 100644
--- a/src/components/learning/LearnView/LearnView.tsx
+++ b/src/components/learning/LearnView/LearnView.tsx
@@ -49,7 +49,7 @@ function LearnView() {
   }, []);
 
   const [showingAnswer, setShowingAnswer] = useState<boolean>(false);
-  const [debouncedFinish] = useDebouncedValue(controller.isFinished, 1000);
+  const [debouncedFinish] = useDebouncedValue(controller.isFinished, 50);
 
   const answerButtonPressed = useCallback(
     async (rating: Rating) => {
@@ -105,8 +105,9 @@ function LearnView() {
         showingAnswer={showingAnswer}
         setShowingAnswer={setShowingAnswer}
       />
+
       <Modal
-        opened={controller.isFinished}
+        opened={debouncedFinish}
         onClose={() => navigate("/home")}
         fullScreen
         closeOnClickOutside={false}
diff --git a/src/components/learning/LearnView/LearnViewFooter.tsx b/src/components/learning/LearnView/LearnViewFooter.tsx
index 49cc677..70916b8 100644
--- a/src/components/learning/LearnView/LearnViewFooter.tsx
+++ b/src/components/learning/LearnView/LearnViewFooter.tsx
@@ -17,20 +17,26 @@ function LearnViewFooter({
   showingAnswer,
   setShowingAnswer,
 }: LearnViewFooterProps) {
-  useHotkeys([
-    ["1", () => answer(Rating.Again)],
-    ["2", () => answer(Rating.Hard)],
-    ["3", () => answer(Rating.Good)],
-    ["4", () => answer(Rating.Easy)],
-    [
-      "Space",
-      () => (!showingAnswer ? setShowingAnswer(true) : answer(Rating.Good)),
-    ],
-    [
-      "Enter",
-      () => (!showingAnswer ? setShowingAnswer(true) : answer(Rating.Good)),
-    ],
-  ]);
+  useHotkeys(
+    !controller.isFinished
+      ? [
+          ["1", () => answer(Rating.Again)],
+          ["2", () => answer(Rating.Hard)],
+          ["3", () => answer(Rating.Good)],
+          ["4", () => answer(Rating.Easy)],
+          [
+            "Space",
+            () =>
+              !showingAnswer ? setShowingAnswer(true) : answer(Rating.Good),
+          ],
+          [
+            "Enter",
+            () =>
+              !showingAnswer ? setShowingAnswer(true) : answer(Rating.Good),
+          ],
+        ]
+      : []
+  );
 
   return (
     <Group className={classes.footerContainer} justify="center">
diff --git a/src/logic/learn.ts b/src/logic/learn.ts
index e681461..f5466bc 100644
--- a/src/logic/learn.ts
+++ b/src/logic/learn.ts
@@ -120,6 +120,15 @@ export function useLearning(
         nextCard();
       }
     }
+    if (
+      timeCriticalCards.length +
+        newCards.length +
+        toReviewCards.length +
+        learnedCards.length >
+      0
+    ) {
+      setIsFinished(false);
+    }
   }, [
     providedCards,
     currentCard,
@@ -131,6 +140,7 @@ export function useLearning(
 
   //Tries to set currentCard to the next card
   const nextCard = useCallback(() => {
+    if (isFinished) return;
     //If there are time critical cards that are due, set the first one as currentCard
     if (
       timeCriticalCards.length > 0 &&
@@ -167,14 +177,7 @@ export function useLearning(
     } else {
       setIsFinished(true);
     }
-  }, [
-    timeCriticalCards,
-    newCards,
-    toReviewCards,
-    learnedCards,
-    options,
-    setCurrentCard,
-  ]);
+  }, [timeCriticalCards, newCards, toReviewCards, learnedCards, options]);
 
   //Providing information about how all 4 ratings would affect the current card
   //Shown on buttons
@@ -190,7 +193,6 @@ export function useLearning(
   const answer = useCallback(
     (rating: Rating) => {
       if (currentCard && currentCardRepeatInfo) {
-        console.log(currentCardRepeatInfo[rating]);
         updateCardModel(currentCard, currentCardRepeatInfo[rating].card);
         if (currentCardRepeatInfo[rating].card.scheduled_days === 0) {
           setTimeCriticalCards((tcCards) =>
@@ -199,8 +201,8 @@ export function useLearning(
               { ...currentCard, model: currentCardRepeatInfo[rating].card },
             ].sort((a, b) => a.model.due.getTime() - b.model.due.getTime())
           );
-          setRatingsList((rList) => [...rList, rating]);
         }
+        setRatingsList((rList) => [...rList, rating]);
       } else {
         throw new Error("Card or cardModelInfo is missing");
       }
@@ -225,17 +227,17 @@ export function useLearning(
   };
 }
 
-//POSSIBLY NOT ACCURATE | NOT REVIEWED AGAIN AFTER #33
-export function useRepetitionAccuracy(ratingsList: number[]): number | null {
-  const [accuracy, setAccuracy] = useState<number | null>(null);
-
-  useEffect(() => {
+export function useRepetitionAccuracy(ratingsList: number[]): number {
+  return useMemo(() => {
     if (ratingsList.length !== 0) {
       let sum = 0;
-      ratingsList.forEach((rating) => (sum += rating / Rating.Good));
-      setAccuracy(Math.round((sum / ratingsList.length) * 1000) / 10);
+      ratingsList.forEach((rating) => {
+        return (sum += (rating - 1) / 2);
+      });
+      return Math.round((sum / ratingsList.length) * 1000) / 10;
+    } else {
+      console.log("No ratings available");
+      return NaN;
     }
   }, [ratingsList]);
-
-  return accuracy;
 }

From bd1c2b9878f4073b8efb0ba551514b8207456c86 Mon Sep 17 00:00:00 2001
From: h16nning <henning.flath@t-online.de>
Date: Fri, 9 Feb 2024 10:52:28 +0100
Subject: [PATCH 4/4] Remove temp UI, fixes

- Removed DebugCardTable from always showing in LearnView
- fixed stopwatch
- fixed ProgressBar for learnAll
---
 src/components/learning/LearnView/LearnView.tsx       | 6 +++---
 src/components/learning/LearnView/LearnViewHeader.tsx | 4 +++-
 src/logic/learn.ts                                    | 5 +++++
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/learning/LearnView/LearnView.tsx b/src/components/learning/LearnView/LearnView.tsx
index 091d8dc..e8884ff 100644
--- a/src/components/learning/LearnView/LearnView.tsx
+++ b/src/components/learning/LearnView/LearnView.tsx
@@ -15,7 +15,6 @@ import { useDebouncedValue, useFullscreen } from "@mantine/hooks";
 import { useNavigate } from "react-router-dom";
 import { useSetting } from "../../../logic/Settings";
 import { Rating } from "fsrs.js";
-import DebugCardTable from "../../DebugCardModal/DebugCardTable";
 
 function LearnView() {
   const { toggle, fullscreen } = useFullscreen();
@@ -67,7 +66,9 @@ function LearnView() {
 
   useEffect(() => {
     if (controller.isFinished) {
-      //stopwatchResult.pause();
+      stopwatchResult.pause();
+    } else {
+      stopwatchResult.start();
     }
   }, [controller.isFinished]);
 
@@ -97,7 +98,6 @@ function LearnView() {
               controller.currentCard
             )}
         </Box>
-        <DebugCardTable card={controller.currentCard ?? undefined} />
       </Center>
       <LearnViewFooter
         controller={controller}
diff --git a/src/components/learning/LearnView/LearnViewHeader.tsx b/src/components/learning/LearnView/LearnViewHeader.tsx
index 718be7f..35d9074 100644
--- a/src/components/learning/LearnView/LearnViewHeader.tsx
+++ b/src/components/learning/LearnView/LearnViewHeader.tsx
@@ -35,7 +35,8 @@ function LearnViewHeader({ currentCard, controller }: LearnViewHeaderProps) {
         (controller.ratingsList.length +
           controller.newCardsNumber * 2 +
           controller.toReviewCardsNumber +
-          controller.timeCriticalCardsNumber)) *
+          controller.timeCriticalCardsNumber +
+          (controller.options.learnAll ? controller.learnedCardsNumber : 0))) *
       100,
     [
       controller.isFinished,
@@ -43,6 +44,7 @@ function LearnViewHeader({ currentCard, controller }: LearnViewHeaderProps) {
       controller.newCardsNumber,
       controller.toReviewCardsNumber,
       controller.timeCriticalCardsNumber,
+      controller.learnedCardsNumber,
       //FIXME
     ]
   );
diff --git a/src/logic/learn.ts b/src/logic/learn.ts
index f5466bc..46b75b0 100644
--- a/src/logic/learn.ts
+++ b/src/logic/learn.ts
@@ -41,6 +41,8 @@ export type LearnController = {
 
   ratingsList: Rating[];
   isFinished: boolean;
+
+  options: LearnOptions;
 };
 
 export function useLearning(
@@ -136,6 +138,7 @@ export function useLearning(
     newCards,
     toReviewCards,
     learnedCards,
+    options,
   ]);
 
   //Tries to set currentCard to the next card
@@ -224,6 +227,8 @@ export function useLearning(
 
     ratingsList: ratingsList,
     isFinished: isFinished,
+
+    options: options,
   };
 }