fix: Update button key prop in Game component and fix typo in SetLess…

…ons component
WebmasterCamp · Jul 21, 2024 · a34d50f · a34d50f
1 parent 4249135
commit a34d50f
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 36 deletions.
diff --git a/app/account/page.tsx b/app/account/page.tsx
diff --git a/app/game/[id]/page.tsx b/app/game/[id]/page.tsx
@@ -1,10 +1,24 @@
 'use client'
 import Link from "next/link";
 import quizs from "@/lib/database";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
+import { useSearchParams } from 'next/navigation'
 
-function Answer({ params }: { params: { id: number, correct: boolean } }) {
-    const currentQuiz = quizs.quizs[params.id]
+function Answer({ params }: { params: { id: string } }) {
+    const searchParams = useSearchParams()
+    const correct = searchParams.get('correctOrWrong') === 'true'
+    const view = searchParams.get('view') === 'true'
+    console.log("Param",params.id)
+    console.log("quizs",quizs)
+    const currentQuiz = quizs.quizs[Number(params.id)]
+    console.log(currentQuiz)
+    console.log(currentQuiz.id)
+    console.log("CorrectOrWrong Value:", correct, typeof correct)
+    console.log("View:", view)
+    const [selectedOption, setSelectedOption] = useState("");
+    const [score, setScore] = useState(0);
+    const router = useRouter();
 
     return (
         <div className="min-w-[1440px] flex flex-col items-center justify-center gap-[33px] p-24">
@@ -20,7 +34,7 @@ function Answer({ params }: { params: { id: number, correct: boolean } }) {
             <div className="w-full h-fit items-center justify-center flex flex-col">
                 <p className="text-4xl font-bold text-wrap text-center text-[#343434]">{currentQuiz.question}</p>
                 <div className="flex gap-6 mt-20">
-                    {params.correct ? (
+                    {/* {correct && !view ? (
                         <div className="text-4xl text-white p-24 bg-[#35CD4D] rounded-[36px]">
                             ถูก
                             <p>+1 coin</p>
@@ -31,9 +45,44 @@ function Answer({ params }: { params: { id: number, correct: boolean } }) {
                             <p>-1 coin</p>
                             <p>เฉลย: {currentQuiz.answer}</p>
                         </div>
+                    )} */}
+                    {correct && !view ? (
+                        <div className="text-4xl text-white p-24 bg-[#35CD4D] rounded-[36px]">
+                            ถูก
+                            <p>+1 coin</p>
+                        </div>
+                    ) : !correct && !view ? (
+                        <div className="text-4xl text-white p-24 bg-[#FBAE17] rounded-[36px]">
+                            ผิด
+                            <p>-1 coin</p>
+                            <p>เฉลย: {currentQuiz.answer}</p>
+                        </div>
+                    ) : view ? (
+                        <div className="flex gap-6 mt-20">
+                            {currentQuiz.options.map((option, index) => (
+                                <button key={index} className={`text-4xl text-white p-24  ${currentQuiz.type == 'boolean' ? "bg-[#35CD4D]" : "bg-[#FBAE17]"} rounded-[36px]`} onClick={
+                                    () => {
+                                        setSelectedOption(option)
+                                        console.log("Selected Option:", selectedOption)
+                                        console.log(currentQuiz.answer)
+                                        if (selectedOption === currentQuiz.answer) {
+                                            setScore(score + 1);
+                                            router.push(`/game/${currentQuiz.id}?correctOrWrong=true`);
+                                        } else {
+                                            setScore(score - 1);
+                                            router.push(`/game/${currentQuiz.id}?correctOrWrong=false`);
+                                        }
+                                    }
+                                }>{option}</button>
+                            ))}
+                        </div>
+                    ) : (
+                        <div className="flex gap-6 mt-20">
+                            Error Occur!
+                        </div>
                     )}
                 </div>
-                <Link href={`/game/${params.id++}`} className="mt-10 p-3 text-2xl bg-green-500 rounded-xl text-white">Next</Link>
+                {!view && <Link href={`/game/${params.id}?view=true`} className="mt-10 p-3 text-2xl bg-green-500 rounded-xl text-white">Next</Link>}
             </div>
         </div>
     );

diff --git a/app/game/page.tsx b/app/game/page.tsx
@@ -31,14 +31,13 @@ function Game() {
                                 setSelectedOption(option)
                                 if (selectedOption === currentQuiz.answer) {
                                     setScore(score + 1);
-                                    router.push(`/game/${currentQuiz.id}?correct=true`);
+                                    router.push(`/game/${currentQuiz.id}?correctOrWrong=true`);
                                 } else {
                                     setScore(score - 1);
-                                    router.push(`/game/${currentQuiz.id}?correct=false`);
+                                    router.push(`/game/${currentQuiz.id}?correctOrWrong=false`);
                                 }
-                                setCurrentQuiz(quizs.quizs[currentQuiz.id]);
                             }
-                        }>{option}</button>
+                        }>{option}</button> 
                     ))}
                 </div>
             </div>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -5,7 +5,7 @@ import "./globals.css";
 const rubik = Rubik({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "JWC13 - [AppName]",
+  title: "CoinCrushers",
   description: "Part of JWC13 Hackathon",
 };
 

diff --git a/components/Home.tsx b/components/Home.tsx
@@ -12,26 +12,26 @@ const rubik = Rubik({ subsets: ["latin"] });
 function HomePage() {
     return (
         <main className="min-w-[1440px] flex flex-col items-center justify-center gap-[33px] mt-[5%]">
-            <div className="flex gap-[43px] items-center justify-center">
+            <div className="flex gap-[43px] items-center justify-center max-lg:flex-col">
                 <h1 className={`${rubik.className} text-4xl font-bold w-[468px]`}>Welcome to coin <br /> crusher!</h1>
-                <div className="w-[492px] h-[128px] border-b-4 border-2 border-[#FBAE17] rounded-[28px] bg-[#FFF4D8]">
-                    <div className="flex p-4 gap-2 items-center justify-between">
-                        <div className="flex gap-2 items-center">
-                            <p className="text-8xl text-[#FBAE17]">1</p>
+                <div className="w-[492px] h-[128px] border-b-4 border-2 border-[#FBAE17] rounded-[28px] bg-[#FFF4D8] ">
+                    <div className="flex px-4 pt-2 gap-2 items-center justify-between">
+                        <div className="flex gap-2 items-center justify-center">
+                            <p className="text-8xl font-black text-[#FBAE17]">1</p>
                             <Image src={coin} width={90} height={90} alt="coin" />
                         </div>
-                        <div className="flex flex-col items-center justify-start ">
-                            <p className="font-bold text-2xl text-[#3A3A3A]">1 coin collected</p>
+                        <div className="flex flex-col items-center justify-start pr-4">
+                            <p className=" font-bold text-2xl text-[#3A3A3A]">1 coin collected</p>
                             <p className="font-bold text-3xl text-[#FBAE17]">keep it up!</p>
                         </div>
                     </div>
                 </div>
             </div>
             <div className="flex flex-col items-start justify-center gap-[23px]">
                 <p className={`${rubik.className} text-4xl font-bold text-[#656565]`}>Our available lessons</p>
-                <div className="flex items-center justify-center rounded-[55px] w-[1002px] h[389px] bg-[#EEEEEE] px-4 py-12">
+                <div className="flex items-center justify-center rounded-[55px] w-[1002px] h[389px] bg-[#EEEEEE] px-4 py-12 max-lg:w-[800px]">
                     <Link href={'/game'} className="cursor-pointer">
-                        <div className="flex items-center justify-around w-[935px] h-[249px] border-b-4 border-2 border-[#818181] rounded-[42px] bg-white">
+                        <div className="flex items-center justify-around w-[935px] h-[249px] border-b-4 border-2 border-[#818181] rounded-[42px] bg-white transition-all hover:bg-slate-100 max-lg:w-[735px]">
                             <Image src={play} width={90} height={90} alt="play" />
                             <p className={`${prompt.className} text-6xl font-bold`}>บริหารการเงิน</p>
                             <Image src={coinstack} width={190} height={190} alt="coinstack" />

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -1,7 +1,7 @@
 function Navbar() {
     return (
         <main className="w-full">
-            <div className="min-w-[1440px] flex items-center justify-evenly h-[80px]  font-bold text-[#343434]">
+            <div className="min-w-[1440px] flex items-center justify-evenly h-[80px]  font-bold text-[#343434] max-2xl:w-full">
                 <a href="/" className="flex justify-center gap-2">
                     <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M30.6195 15.1719L27.9688 12.5229V6.03125C27.9688 5.02578 27.1461 4.20312 26.1406 4.20312H24.3125C23.307 4.20312 22.4844 5.02578 22.4844 6.03125V7.0422L18.8281 3.38961C18.329 2.91795 17.872 2.375 17 2.375C16.128 2.375 15.671 2.91795 15.1719 3.38961L3.38047 15.1719C2.81009 15.766 2.375 16.1993 2.375 17C2.375 18.0292 3.16475 18.8281 4.20312 18.8281H6.03125V29.7969C6.03125 30.8023 6.85391 31.625 7.85938 31.625H11.5156C12.5253 31.625 13.3438 30.8065 13.3438 29.7969V22.4844C13.3438 21.4789 14.1664 20.6562 15.1719 20.6562H18.8281C19.8336 20.6562 20.6562 21.4789 20.6562 22.4844V29.7969C20.6562 30.8065 20.5607 31.625 21.5703 31.625H26.1406C27.1461 31.625 27.9688 30.8023 27.9688 29.7969V18.8281H29.7969C30.8353 18.8281 31.625 18.0292 31.625 17C31.625 16.1993 31.1899 15.766 30.6195 15.1719Z" stroke="#343434" stroke-width="3.9" stroke-linejoin="round" />
@@ -14,7 +14,7 @@ function Navbar() {
                     </svg>
                     <p className="flex items-center text-center">Lessons</p>
                 </a>
-                <a href="/" className="flex justify-center gap-2">
+                <a href="/account" className="flex justify-center gap-2">
                     <svg width="22" height="27" viewBox="0 0 22 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M5.48459 26.0052C0.971365 25.6513 -0.941701 21.1613 1.70574 17.1358C3.01174 15.1501 4.9873 13.4877 6.96937 12.7067C8.09402 12.2636 8.16119 12.1146 7.44808 11.6444C5.69695 10.4896 4.72955 8.57001 4.72955 6.25027C4.72955 3.54846 5.7955 1.86851 8.31883 0.593375L9.41059 0.0416441L10.9687 0.00312869C13.9206 -0.0698424 15.9556 1.1331 17.1673 3.66727C18.3899 6.22458 17.5657 9.8184 15.4165 11.3016C14.4606 11.9612 14.2809 12.1957 14.6246 12.335C18.0473 13.7215 19.9973 15.4887 21.4184 18.4916L21.941 19.5959L21.9017 20.8356C21.828 23.1569 20.9654 24.4852 18.8424 25.5466L17.8351 26.0502L12.2407 26.0732C9.16382 26.0859 6.12364 26.0553 5.48475 26.0052L5.48459 26.0052ZM17.4492 22.4482C19.0185 21.5821 18.9362 20.3161 17.1638 18.0535C15.6091 16.0689 13.7017 15.2543 10.8862 15.3725C8.24429 15.4834 6.42822 16.4041 4.94716 18.3835C3.62919 20.1449 3.51442 21.2712 4.5528 22.2511C4.97688 22.6513 5.86949 22.7005 12.1059 22.6672C16.485 22.6439 17.1437 22.6169 17.4492 22.4482ZM12.5936 9.10619C13.8783 8.62121 14.6869 7.04417 14.3833 5.61562C13.8768 3.23283 10.3095 2.43481 8.74966 4.35525C6.58906 7.01546 9.28974 10.3533 12.5936 9.10607V9.10619Z" fill="#2F302F" />
                     </svg>

diff --git a/components/setLessons.tsx b/components/setLessons.tsx
@@ -23,10 +23,13 @@ function SetLessons() {
                     </div>
                     <div className={`${prompt.className} text-2xl font-bold pl-[35px]`}   >
                         <div className="flex items-center gap-3">
-                            <p className="text-[#0066FF]">0%</p>
-                            <div className="w-[350px] h-3 bg-[#A6A6A6] rounded-[55px]"></div>
+                            <p className="text-[#0066FF]">20%</p>
+                            <div className="relative">  
+                                <div className="w-[70px] h-3 bg-[#0066FF] rounded-[55px] absolute"></div>
+                                <div className="w-[350px] h-3 bg-[#A6A6A6] rounded-[55px]"></div>
+                            </div>
                         </div>
-                        <p className="text-[#8C8C8C]">0/20 quizzes</p>
+                        <p className="text-[#8C8C8C]">2/20 quizzes</p>
                     </div>
                 </div>
 

diff --git a/lib/database.ts b/lib/database.ts
@@ -9,53 +9,46 @@ const quizs = {
         },
         {
             id: 2,
-            type: "multiple",
-            question: "คุณควรออมเงินเพื่ออะไรเป็นลําดับแรก",
-            options: ["เพื่อซื้อของที่อยากได้", "เพื่อการเกษียณ", "เผื่อเหตุการณ์ฉุกเฉิน", "เพื่อลงทุน"],
-            answer: "เผื่อเหตุการณ์ฉุกเฉิน"
-        },
-        {
-            id: 3,
             type: "boolean",
             question: "การกินอาหารนอกบ้านบ่อยครั้งถือเป็นวิธีบริหารงบประมาณอาหารอย่างประหยัด",
             options: ["ถูก", "ผิด"],
             answer: "ผิด"
         },
         {
-            id: 4,
+            id: 3,
             type: "boolean",
             question: "การซื้อสินค้าเป็นจำนวนมากสามารถประหยัดเงินได้ในระยะยาว",
             options: ["ถูก", "ผิด"],
             answer: "ถูก"
         },
         {
-            id: 5,
+            id: 4,
             type: "boolean",
             question: "การซื้อของตามอารมณ์ไม่ส่งผลกระทบต่อความมั่นคงทางการเงินของคุณ",
             options: ["ถูก", "ผิด"],
             answer: "ผิด"
         },
         {
-            id: 6,
+            id: 5,
             type: "boolean",
             question: "การสร้างงบประมาณรายสัปดาห์หรือรายเดือนไม่สามารถช่วยให้คุณจัดการกับค่าใช้จ่ายในแต่ละวันได้ดีขึ้น",
             options: ["ถูก", "ผิด"],
             answer: "ผิด"
         },
         {
-            id: 7,
+            id: 6,
             type: "boolean",
             question: "การสร้างกองทุนฉุกเฉินเป็นส่วนสำคัญของการจัดการเงินในชีวิตประจำวัน",
             options: ["ถูก", "ผิด"],
             answer: "ถูก"
         },
         {
-            id: 8,
+            id: 7,
             type: "boolean",
             question: "การตั้งเป้าหมายทางการเงินสามารถกระตุ้นให้คุณออมและใช้จ่ายอย่างฉลาด",
             options: ["ถูก", "ผิด"],
             answer: "ถูก"
-        }
+        },
     ]
 }