manually redirection when game is lost

components/quizz/card/index.tsx

@@ -33,6 +33,7 @@ export const Card: React.FC<Props> = ({ prompt, onScore }) => {
       {result?.success && result?.id === prompt.id && (
         <Confetti
           height={340}
+          width={340}
           numberOfPieces={100}
           className="w-full lg:w-[340px] h-full"
         />

components/quizz/hooks/useQuizz.ts

@@ -52,11 +52,9 @@ export const useQuizz = () => {
 
     setResult(response.ok ? id : response.resultId, response?.ok);
     await sleep(response.ok ? 2000 : 3000);
-    setResult(null);
     if (response?.ok) {
+      setResult(null);
       client.invalidateQueries(['quizz']);
-    } else {
-      return router.push('/results');
     }
   };
 

components/quizz/index.tsx

@@ -6,9 +6,11 @@ import { RxLapTimer } from "react-icons/rx";
 import { useQuizz } from "./hooks/useQuizz";
 import { PromptType } from "@/utils/type";
 import { Card } from "./card";
+import { Button } from "../button/button";
+import Link from "next/link";
 
 export const QuizzContent = () => {
-  const { loading, prompts, question, onScore } = useQuizz();
+  const { loading, prompts, question, onScore, result } = useQuizz();
   const [counter, setCounter] = useState(10);
   const [isRunning, toggleIsRunning] = useBoolean(true);
 
@@ -74,6 +76,11 @@ export const QuizzContent = () => {
               ))}
         </div>
       </div>
+      {result && !result?.success && (
+        <Link href="/results">
+          <Button>Go to results</Button>
+        </Link>
+      )}
     </div>
   );
 };

components/results/index.tsx

@@ -22,70 +22,21 @@ export const Results = () => {
 
   const renderTitle = (score: number) => {
     if (score < 2) {
-      return (
-        <>
-          You can do <br />
-          <span className="bg-gradient-to-tr from-green to-cyan bg-clip-text">
-            better
-          </span>{" "}
-          ! <span className="text-white">💪</span>
-        </>
-      );
+      return <>You can do better! 💪</>;
     }
     if (score < 5) {
-      return (
-        <>
-          Not bad! <br />
-          <span className="bg-gradient-to-tr from-green to-cyan bg-clip-text">
-            Keep going
-          </span>{" "}
-          ! <span className="text-white">🤗</span>
-        </>
-      );
+      return <>Not bad! Keep going! 🤗</>;
     }
     if (score < 11) {
-      return (
-        <>
-          You are <br />
-          <span className="bg-gradient-to-tr from-green to-cyan bg-clip-text">
-            good
-          </span>{" "}
-          ! <span className="text-white">🙂</span>
-        </>
-      );
+      return <>You are good! 🙂</>;
     }
     if (score < 16) {
-      return (
-        <>
-          You are <br />
-          <span className="bg-gradient-to-tr from-green to-cyan bg-clip-text">
-            amazing
-          </span>{" "}
-          ! <span className="text-white">🥳</span>
-        </>
-      );
+      return <>You are amazing! 🥳</>;
     }
     if (score < 20) {
-      return (
-        <>
-          You are <br />
-          <span className="bg-gradient-to-tr from-green to-cyan bg-clip-text">
-            incredible
-          </span>{" "}
-          ! <span className="text-white">🤯</span>
-        </>
-      );
+      return <>You are incredible! 🤯</>;
     }
-    return (
-      <>
-        Congrats! <br />
-        You{" "}
-        <span className="bg-gradient-to-tr from-green to-cyan bg-clip-text">
-          killed
-        </span>{" "}
-        it! 🎉
-      </>
-    );
+    return <>Congrats! You killed it! 🎉</>;
   };
 
   return (
@@ -99,7 +50,11 @@ export const Results = () => {
             alt="Sparkling effect"
             className="absolute top-8 left-0"
           />
-          {renderTitle(score)}
+          You obtained <br />
+          <span className="bg-gradient-to-tr from-green to-cyan bg-clip-text font-bold text-transparent">
+            {score} point{score > 1 ? "s" : ""}
+          </span>{" "}
+          !
           <Image
             src={SparklingEffect2}
             width={30}
@@ -110,11 +65,7 @@ export const Results = () => {
         </h1>
         <div className="w-full grid grid-cols-1 gap-2">
           <h2 className="text-white text-2xl md:text-4xl text-center font-semibold">
-            You obtained{" "}
-            <span className="bg-gradient-to-tr from-green to-cyan bg-clip-text font-bold text-transparent">
-              {score} point{score > 1 ? "s" : ""}
-            </span>{" "}
-            !
+            {renderTitle(score)}
           </h2>
           <p className="text-white text-xl md:text-2xl text-center font-light">
             Share your score with your friends and challenge them!