diff --git a/src/components/questions/SentenceQuestionPractice.tsx b/src/components/questions/SentenceQuestionPractice.tsx index 0d3dd25..88e2ad8 100644 --- a/src/components/questions/SentenceQuestionPractice.tsx +++ b/src/components/questions/SentenceQuestionPractice.tsx @@ -27,7 +27,7 @@ type WordWithSentence = export type WordToRender = { displayWord: string; word: WordWithSentence["words"][0] | undefined; - score: number | undefined; + score: number; }; export function SentenceQuestionPractice() { @@ -50,7 +50,7 @@ export function SentenceQuestionPractice() { setActiveQuestionIndex((prevIndex) => prevIndex - 1); }; - const [fontSize, setFontSize] = useLocalStorage("sentenceFontSize", 5); + const [fontSize, setFontSize] = useLocalStorage("sentenceFontSize", 3.5); const { data: minTimeForNextQuestion } = trpc.questionRouter.getMinTimeForNextQuestion.useQuery(); @@ -74,7 +74,7 @@ export function SentenceQuestionPractice() { return { displayWord: _word, word: undefined, - score: undefined, + score: 0, }; } @@ -96,7 +96,7 @@ export function SentenceQuestionPractice() { // link the word to the words in the sentence - const handleScore = (word: WordToRender, score: number | undefined) => { + const handleScore = (word: WordToRender, score: number) => { // update the score const newWordsToRender = wordsToRender.map((wordToRender) => { if (wordToRender.word?.word === word.word?.word) { diff --git a/src/components/questions/WordInSentence.tsx b/src/components/questions/WordInSentence.tsx index a5ad96c..5b00ef7 100644 --- a/src/components/questions/WordInSentence.tsx +++ b/src/components/questions/WordInSentence.tsx @@ -3,19 +3,12 @@ import { trpc } from "~/lib/trpc/client"; import { cn } from "~/lib/utils"; import { useQuerySsr } from "~/hooks/useQuerySsr"; -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "~/components/ui/popover"; -import { Button } from "~/components/ui/button"; -import { Icons } from "~/components/common/icons"; import { type WordToRender } from "./SentenceQuestionPractice"; export function WordInSentence(props: { wordToRender: WordToRender; - onUpdateScore: (score: number | undefined) => void; + onUpdateScore: (score: number) => void; }) { const { wordToRender, onUpdateScore } = props; @@ -25,83 +18,32 @@ export function WordInSentence(props: { // color map // score = undefined = blue; black = 100; red = 0 - const color = - wordToRender.score === undefined - ? "text-blue-700" - : wordToRender.score > 50 - ? "text-black" - : "text-red-700"; - - const showGoodButton = - wordToRender.score === undefined || wordToRender.score < 100; - const showBadButton = - wordToRender.score === undefined || wordToRender.score > 0; - const showSkipButton = wordToRender.score !== undefined; + const color = wordToRender.score > 50 ? "text-black" : "text-red-700"; // check focus by matching ID const isFocused = focusedWords?.some((c) => c.id === wordToRender.word?.id); + const toggleScoreGoodBad = () => { + if (wordToRender.score > 50) { + onUpdateScore(0); + } else { + onUpdateScore(100); + } + }; return ( <> - - -
-
- {wordToRender.displayWord} -
-
- {wordToRender.word?.summaries[0]?.interval ?? 1} -
-
-
- -
- {showGoodButton && ( - - )} - {showBadButton && ( - - )} - {showSkipButton && ( - - )} -
-
-
+
+
+ {wordToRender.displayWord} +
+
+ {wordToRender.word?.summaries[0]?.interval ?? 1} +
+
); }