fix: Add key prop to buttons in Game component and fix typo in SetLes…

…sons component
WebmasterCamp · Jul 21, 2024 · 4249135 · 4249135
1 parent d34f794
commit 4249135
Show file tree

Hide file tree

Showing 11 changed files with 131 additions and 56 deletions.
diff --git a/app/game/[id]/page.tsx b/app/game/[id]/page.tsx
@@ -0,0 +1,42 @@
+'use client'
+import Link from "next/link";
+import quizs from "@/lib/database";
+import { useState } from "react";
+
+function Answer({ params }: { params: { id: number, correct: boolean } }) {
+    const currentQuiz = quizs.quizs[params.id]
+
+    return (
+        <div className="min-w-[1440px] flex flex-col items-center justify-center gap-[33px] p-24">
+            <div className="flex gap-2 items-center self-start">
+                <Link href={'/'}>
+                    <svg width="23" height="21" viewBox="0 0 23 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M9.9722 18.7709L2.33331 10.7501M2.33331 10.7501L9.9722 2.72925M2.33331 10.7501H20.6666" stroke="#343434" stroke-width="3.66667" stroke-linecap="round" stroke-linejoin="round" />
+                    </svg>
+                </Link>
+                <p className="text-4xl text-[#555555]">บริหารการเงิน</p>
+            </div>
+            <p className="self-start text-2xl text-[#8C8C8C] font-bold">{currentQuiz.id} quiz</p>
+            <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 ? (
+                        <div className="text-4xl text-white p-24 bg-[#35CD4D] rounded-[36px]">
+                            ถูก
+                            <p>+1 coin</p>
+                        </div>
+                    ) : (
+                        <div className="text-4xl text-white p-24 bg-[#FBAE17] rounded-[36px]">
+                            ผิด
+                            <p>-1 coin</p>
+                            <p>เฉลย: {currentQuiz.answer}</p>
+                        </div>
+                    )}
+                </div>
+                <Link href={`/game/${params.id++}`} className="mt-10 p-3 text-2xl bg-green-500 rounded-xl text-white">Next</Link>
+            </div>
+        </div>
+    );
+}
+
+export default Answer;
diff --git a/app/game/correct/page.tsx b/app/game/correct/page.tsx
diff --git a/app/game/page.tsx b/app/game/page.tsx
@@ -1,21 +1,20 @@
 'use client'
 import quizs from "@/lib/database";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 
-interface GameProps {
-
-}
-
-function Game(): GameProps {
+function Game() {
     const [currentQuiz, setCurrentQuiz] = useState(quizs.quizs[0]);
     const [selectedOption, setSelectedOption] = useState("");
     const [score, setScore] = useState(0);
 
+    const router = useRouter();
+
     return (
         <main className="min-w-[1440px] flex flex-col items-center justify-center gap-[33px] p-24">
             <div className="flex gap-2 items-center self-start">
-                <Link href={'/'}>
+                <Link href={'/game'}>
                     <svg width="23" height="21" viewBox="0 0 23 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M9.9722 18.7709L2.33331 10.7501M2.33331 10.7501L9.9722 2.72925M2.33331 10.7501H20.6666" stroke="#343434" stroke-width="3.66667" stroke-linecap="round" stroke-linejoin="round" />
                     </svg>
@@ -32,6 +31,10 @@ function Game(): GameProps {
                                 setSelectedOption(option)
                                 if (selectedOption === currentQuiz.answer) {
                                     setScore(score + 1);
+                                    router.push(`/game/${currentQuiz.id}?correct=true`);
+                                } else {
+                                    setScore(score - 1);
+                                    router.push(`/game/${currentQuiz.id}?correct=false`);
                                 }
                                 setCurrentQuiz(quizs.quizs[currentQuiz.id]);
                             }

diff --git a/app/game/wrong/page.tsx b/app/game/wrong/page.tsx
diff --git a/app/lessons/page.tsx b/app/lessons/page.tsx
@@ -1,9 +1,10 @@
+// import { Button } from "@/components/ui/button";
 import Navbar from "@/components/Navbar";
 import SetLessons from "@/components/setLessons";
 
 function Lessons() {
     return (
-        <main className="flex min-h-screen flex-col items-center">
+        <main className=" flex min-h-screen flex-col items-center">
             <Navbar />
             <SetLessons />
         </main>

diff --git a/components/Home.tsx b/components/Home.tsx
@@ -11,7 +11,7 @@ const rubik = Rubik({ subsets: ["latin"] });
 
 function HomePage() {
     return (
-        <main className="min-w-[1440px] flex flex-col items-center justify-center gap-[33px]">
+        <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">
                 <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]">
@@ -30,13 +30,15 @@ function HomePage() {
             <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-around w-[935px] h-[249px] border-b-4 border-2 border-[#818181] rounded-[42px] bg-white">
-                        <Link href={'/game'} className="cursor-pointer"><Image src={play} width={90} height={90} alt="play" /></Link>
-                        <p className={`${prompt.className} text-6xl font-bold`}>บริหารการเงิน</p>
-                        <Image src={coinstack} width={190} height={190} alt="coinstack" />
-                    </div>
+                    <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">
+                            <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" />
+                        </div>
+                    </Link>
                 </div>
-            </div>  
+            </div>
         </main>
     );
 }

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -2,29 +2,29 @@ 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="flex justify-center gap-2">
+                <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" />
                     </svg>
-                    <a href="/" className="flex items-center text-center">Home</a>
-                </div>
-                <div className="flex justify-center gap-2">
+                    <p className="flex items-center text-center">Home</p>
+                </a>
+                <a href="/lessons" className="flex justify-center gap-2">
                     <svg width="38" height="32" viewBox="0 0 38 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M22.899 31.5535C21.9585 31.3478 21.5919 30.9584 19.732 28.1897C18.6576 26.5903 17.3332 25.2158 16.7188 25.0625C16.5461 25.0194 15.9264 25.0506 15.3417 25.1319C12.5706 25.5167 10.2746 24.6976 8.26096 22.6058C7.28708 21.5941 7.14156 21.4926 6.3548 21.2757C5.54212 21.0518 4.08228 20.2962 2.63914 19.3526C0.757015 18.122 -0.153746 12.3973 1.03156 9.2482C1.54602 7.88151 4.52048 4.57482 6.31118 3.37899C7.45572 2.61466 7.91001 2.41265 10.2949 1.60724L12.45 0.879473L15.7153 0.68163C17.5112 0.572818 19.3039 0.448175 19.699 0.404631C21.4411 0.212656 24.3597 0.85413 28.0741 2.24545C28.8742 2.54512 30.8079 4.01927 32.233 5.41569C32.6992 5.87255 36.479 11.5826 36.8101 12.3301C37.692 14.3218 37.7387 19.3338 36.8905 20.9641C36.6429 21.4401 35.2537 22.7354 34.2112 23.4623C33.5021 23.9567 33.3856 24.1005 33.2111 24.6973C33.034 25.3028 32.6363 25.9324 31.6449 27.1766C31.1013 27.8588 30.0529 28.226 28.2083 28.3799C26.3308 28.5367 26.3103 28.5482 26.1101 29.5599C25.815 31.0507 24.4565 31.8941 22.899 31.5535ZM28.4826 24.6336C29.2609 24.4024 29.0595 24.2431 28.0908 24.3239C26.9789 24.4166 25.0328 24.7361 24.9334 24.8422C24.8088 24.9752 27.9551 24.7903 28.4826 24.6336ZM22.1946 21.7606C23.6711 21.0998 24.9986 20.8309 28.5153 20.4804C31.9721 20.1358 32.4836 20.0347 32.9948 19.5946L33.4042 19.2423L33.4897 16.9703C33.5479 15.4233 33.5277 14.5254 33.4265 14.1564C33.2544 13.5285 30.6898 9.64273 29.8998 8.81275C29.6052 8.50329 29.3642 8.20578 29.3642 8.15163C29.3642 8.00224 27.3148 6.02805 26.9799 5.85474C26.8186 5.77131 25.4084 5.31555 23.8459 4.84196L21.005 3.98085L17.8377 4.11876C14.4523 4.26615 13.8187 4.36601 11.5356 5.112C9.38588 5.81437 9.0843 5.98789 7.11074 7.65751C4.63002 9.75629 3.93817 11.5016 4.40485 14.4835C4.63747 15.9699 5.02102 16.5104 6.29951 17.1534L7.02069 17.5161L7.46221 17.2449C7.70504 17.0957 8.40578 16.3741 9.01937 15.6413C10.8865 13.4115 11.3392 13.1504 13.7063 12.9394L15.1926 12.8069L18.8498 10.9334L20.4171 10.9344C22.3903 10.9356 23.3662 11.1449 23.9721 11.6968C24.7923 12.4438 24.6772 13.8001 23.7348 14.4926C23.2946 14.8161 23.0266 14.8389 21.33 14.6972L20.1529 14.5989L18.4565 15.4662C16.7866 16.3199 16.7353 16.3363 15.1707 16.5119C13.1702 16.7364 12.615 17.0325 11.4391 18.5021C10.5695 19.5889 10.8532 20.2632 12.5116 21.0509C13.6132 21.5741 13.8826 21.5966 15.7266 21.3204C18.1661 20.9549 18.7148 21.0272 19.8157 21.8594C20.5491 22.4139 20.7542 22.4053 22.1946 21.7606Z" fill="#2A2B2A" />
                     </svg>
-                    <a href="/lessons" className="flex items-center text-center">Lessons</a>
-                </div>
-                <div className="flex justify-center gap-2">
+                    <p className="flex items-center text-center">Lessons</p>
+                </a>
+                <a href="/" 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>
-                    <a className="flex items-center text-center">Account</a>
-                </div>
-                <div className="flex justify-center gap-2">
+                    <p className="flex items-center text-center">Account</p>
+                </a>
+                <a className="flex justify-center gap-2 cursor-pointer">
                     <svg width="30" height="24" viewBox="0 0 30 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M27.3333 21.25H2.66663M27.3333 12H2.66663M27.3333 2.75H2.66663" stroke="black" stroke-width="4.11111" stroke-linecap="round" />
                     </svg>
-                </div>
+                </a>
             </div>
         </main>
     )

diff --git a/components/setLessons.tsx b/components/setLessons.tsx
@@ -1,36 +1,38 @@
 import { Prompt } from "next/font/google";
 import React from "react";
 import Image from "next/image";
-import step1 from "/public/images/step1.png";
-import step2 from "/public/images/step2.png";
-import step3 from "/public/images/step3.png";
+// import step1 from "/public/images/step1.png";
+// import step2 from "/public/images/step2.png";
+// import step3 from "/public/images/step3.png";
+import step_full from "/public/images/step_full.png";
+
 
 const prompt = Prompt({ subsets: ["latin"], weight: ["300", "400", "500", "600", "700"] });
 
 function SetLessons() {
     return (
-        <main className="min-w-[1440px] h-full flex flex-col justify-center">
-            <div className="flex tems-center justify-between">
+        <main className="min-w-[1440px] h-[90vh] flex flex-col justify-center">
+            <div className="flex items-center justify-between">
 
                 <div>
-                    <div className="flex items-centermb-1">
+                    <div className="flex items-center mb-1">
                         <svg width="55" height="50" viewBox="0 0 55 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M25.9722 32.7709L18.3333 24.7501M18.3333 24.7501L25.9722 16.7292M18.3333 24.7501H36.6666" stroke="#343434" stroke-width="3.66667" stroke-linecap="round" stroke-linejoin="round" />
                         </svg>
-                        <p className={`${prompt.className} text-3xl font-bold`}>บริหารการเงิน</p>
+                        <p className={`${prompt.className} text-4xl font-bold`}>บริหารการเงิน</p>
                     </div>
                     <div className={`${prompt.className} text-2xl font-bold pl-[35px]`}   >
-                        <p className="text-[#0066FF]">10%</p>
-                        <p className="text-[#8C8C8C]">2/20 quizzes</p>
+                        <div className="flex items-center gap-3">
+                            <p className="text-[#0066FF]">0%</p>
+                            <div className="w-[350px] h-3 bg-[#A6A6A6] rounded-[55px]"></div>
+                        </div>
+                        <p className="text-[#8C8C8C]">0/20 quizzes</p>
                     </div>
                 </div>
 
                 <div className="relative w-[340px] h-[500px]">
                      <div className="absolute">
-                        <Image className="" src={step1} alt="step1"/>
-                        <Image src={step2} alt="step2"/>
-                        <Image src={step3} alt="step3"/>
-
+                        <Image src={step_full} alt="step_full"/>    
                      </div>
                 </div>
             </div>

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

diff --git a/public/images/step4.png b/public/images/step4.png
diff --git a/public/images/step_full.png b/public/images/step_full.png