+ +20.1% from last month +
++ +180.1% from last month +
++ +19% from last month +
++ +201 since last hour +
++ Oh no! There was an error fecthing questions. +
+ ) +} \ No newline at end of file diff --git a/src/components/quiz/finished-screen.tsx b/src/components/quiz/finished-screen.tsx new file mode 100644 index 0000000..7825e9a --- /dev/null +++ b/src/components/quiz/finished-screen.tsx @@ -0,0 +1,90 @@ +"use client"; + +import React from "react"; +// import { useNavigate } from 'react-router-dom' +// import { useSelector } from 'react-redux' +import { useQuizStore } from "@/lib/quiz-store"; +import { useShallow } from "zustand/react/shallow"; +import { SocialMedia } from "./social-media"; +import { useRouter } from "next/navigation"; +import { Button } from "../ui/button"; +import { + Card, + CardContent, + CardFooter, + CardHeader, + CardTitle, +} from "../ui/card"; + +export const FinishedScreen = () => { + const router = useRouter(); + const { + points, + highscore, + gameMode, + totalCorrectAns, + questionsArray, + reset, + } = useQuizStore( + useShallow((store) => ({ + points: store.points, + highscore: store.highscore, + gameMode: store.gameMode, + totalCorrectAns: store.totalCorrectAns, + questionsArray: store.questionsArray, + reset: store.reset, + })), + ); + // const {points, highscore} = useSelector(store => store.questions) + // const {gameMode} = useSelector(store => store.difficulty) + const percentage = Math.ceil((points * 100) / 300); + // const navigate = useNavigate() + + let congrats; + if (percentage === 100) congrats = "Perfect!"; + if (percentage >= 80 && percentage < 100) congrats = "Excellent!"; + if (percentage >= 50 && percentage < 80) congrats = "Good!"; + if (percentage > 0 && percentage < 50) congrats = "Bad luck!"; + if (percentage === 0) congrats = "Oh no!"; + + return ( ++ {congrats} You scored {points} out of 300 ({percentage} + %) +
*/} + {/*(Highscore: {highscore} points)
*/} +Correct: {totalCorrectAns}
++ Incorrect: {questionsArray.length - totalCorrectAns} +
++ {index + 1} / {questionsArray.length} +
+ {/*+ {points} / 300 +
*/} + {/*