attempt to make flashcard game more obvious

better-frontend/src/components/FlashcardShufflePlay.tsx

@@ -1,6 +1,13 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { FlashcardDto } from "../types/flashcard";
-import { Button, HStack, Heading, Text, VStack } from "@chakra-ui/react";
+import {
+  Button,
+  HStack,
+  Heading,
+  Progress,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
 
 function shuffle<T>(arr: T[]): T[] {
   return Array.from(arr).sort(() => Math.random() - 0.5);
@@ -15,16 +22,19 @@ export default function FlashcardShufflePlay({
   const [nextLeftFlashcards, setNextLeftFlashcards] = useState<FlashcardDto[]>(
     []
   );
+  const [rememberedFlashcards, setRememberedFlashcards] = useState<
+    FlashcardDto[]
+  >([]);
 
-  useEffect(() => {
-    if (leftFlashcards.length === 0 && nextLeftFlashcards.length > 0) {
-      setLeftFlashcards(shuffle(nextLeftFlashcards));
-      setNextLeftFlashcards([]);
-    }
-  }, [leftFlashcards, nextLeftFlashcards]);
+  function nextRound() {
+    setLeftFlashcards(shuffle(nextLeftFlashcards));
+    setNextLeftFlashcards([]);
+    setRememberedFlashcards([]);
+  }
 
   function remember() {
     setLeftFlashcards(leftFlashcards.filter((_v, i) => i !== 0));
+    setRememberedFlashcards([...rememberedFlashcards, leftFlashcards[0]]);
   }
 
   function repeat() {
@@ -43,9 +53,28 @@ export default function FlashcardShufflePlay({
     );
   }
 
+  if (leftFlashcards.length === 0 && nextLeftFlashcards.length > 0) {
+    return (
+      <NextRoundView
+        rememberedCount={rememberedFlashcards.length}
+        nextCount={nextLeftFlashcards.length}
+        onProceed={nextRound}
+      />
+    );
+  }
+
   if (leftFlashcards.length > 0) {
     return (
       <>
+        <Progress
+          w="full"
+          value={
+            ((nextLeftFlashcards.length + rememberedFlashcards.length) * 100) /
+            (nextLeftFlashcards.length +
+              leftFlashcards.length +
+              rememberedFlashcards.length)
+          }
+        />
         <Flashcard flashcard={leftFlashcards[0]} />
         <HStack justifyContent="center" mx="auto">
           <Button onClick={remember}>Remeber</Button>
@@ -56,6 +85,26 @@ export default function FlashcardShufflePlay({
   }
 }
 
+function NextRoundView({
+  rememberedCount,
+  nextCount,
+  onProceed,
+}: {
+  rememberedCount: number;
+  nextCount: number;
+  onProceed: () => void;
+}) {
+  return (
+    <VStack w="full">
+      <Heading size="lg">Your progress so far</Heading>
+      <Text>
+        {rememberedCount} remembered, {nextCount} left
+      </Text>
+      <Button onClick={onProceed}>Continue</Button>
+    </VStack>
+  );
+}
+
 function Flashcard({ flashcard }: { flashcard: FlashcardDto }) {
   const [isFlipped, setIsFlipped] = useState(false);