diff --git a/__tests__/pages/whos-branch.tests.tsx b/__tests__/pages/whos-branch.tests.tsx new file mode 100644 index 00000000..789bfaf6 --- /dev/null +++ b/__tests__/pages/whos-branch.tests.tsx @@ -0,0 +1,49 @@ +import React from "react"; +import { render, screen, fireEvent } from "@testing-library/react"; +import "@testing-library/jest-dom/extend-expect"; +import WhosBranchPage from "@pages/whos-branch"; +import Game from "@components/whos-branch"; +import questions from "@data/whos-branch.json"; + +describe("WhosBranchPage", () => { + test("renders the breadcrumb", () => { + render(); + expect(screen.getByText("Home")).toBeInTheDocument(); + expect(screen.getByText("Who's Branch")).toBeInTheDocument(); + }); + + test("renders the game component", () => { + render(); + expect(screen.getByText(questions[0].question)).toBeInTheDocument(); + }); +}); + +describe("Game Component", () => { + test("renders the first question", () => { + render(); + expect(screen.getByText(questions[0].question)).toBeInTheDocument(); + }); + + test("handles correct answer", () => { + render(); + const correctOption = screen.getByText(questions[0].options[0]); + fireEvent.click(correctOption); + expect(screen.getByText(questions[1].question)).toBeInTheDocument(); + }); + + test("handles incorrect answer", () => { + render(); + const incorrectOption = screen.getByText(questions[0].options[1]); + fireEvent.click(incorrectOption); + expect(screen.getByText(questions[1].question)).toBeInTheDocument(); + }); + + test("displays score at the end", () => { + render(); + questions.forEach((question) => { + const option = screen.getByText(question.options[0]); + fireEvent.click(option); + }); + expect(screen.getByText("Your Score")).toBeInTheDocument(); + }); +}); diff --git a/src/components/whos-branch/index.tsx b/src/components/whos-branch/index.tsx new file mode 100644 index 00000000..223f09c3 --- /dev/null +++ b/src/components/whos-branch/index.tsx @@ -0,0 +1,38 @@ +import React, { useState } from "react"; +import questions from "@data/whos-branch.json"; +import Question from "./question"; +import Score from "./score"; + +const Game = () => { + const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0); + const [score, setScore] = useState(0); + const [showScore, setShowScore] = useState(false); + + const handleAnswerOptionClick = (isCorrect: boolean) => { + if (isCorrect) { + setScore(score + 1); + } + + const nextQuestion = currentQuestionIndex + 1; + if (nextQuestion < questions.length) { + setCurrentQuestionIndex(nextQuestion); + } else { + setShowScore(true); + } + }; + + return ( +
+ {showScore ? ( + + ) : ( + + )} +
+ ); +}; + +export default Game; diff --git a/src/components/whos-branch/question.tsx b/src/components/whos-branch/question.tsx new file mode 100644 index 00000000..258e69bf --- /dev/null +++ b/src/components/whos-branch/question.tsx @@ -0,0 +1,30 @@ +import React from "react"; + +interface QuestionProps { + question: { + question: string; + options: string[]; + answer: string; + }; + onAnswerOptionClick: (isCorrect: boolean) => void; +} + +const Question: React.FC = ({ question, onAnswerOptionClick }) => { + return ( +
+

{question.question}

+
+ {question.options.map((option, index) => ( + + ))} +
+
+ ); +}; + +export default Question; diff --git a/src/components/whos-branch/score.tsx b/src/components/whos-branch/score.tsx new file mode 100644 index 00000000..8e0dc0cb --- /dev/null +++ b/src/components/whos-branch/score.tsx @@ -0,0 +1,19 @@ +import React from "react"; + +interface ScoreProps { + score: number; + totalQuestions: number; +} + +const Score: React.FC = ({ score, totalQuestions }) => { + return ( +
+

Your Score

+

+ {score} out of {totalQuestions} +

+
+ ); +}; + +export default Score; diff --git a/src/data/menu.ts b/src/data/menu.ts index 8f2a5cdc..02df1314 100644 --- a/src/data/menu.ts +++ b/src/data/menu.ts @@ -1,4 +1,3 @@ -// Types for menu structure type MenuStatus = "hot" | "coming soon" | "new"; interface MenuItem { @@ -118,6 +117,19 @@ const navigation: NavigationItem[] = [ }, ], }, + { + id: 7, + label: "Games", + path: "#!", + submenu: [ + { + id: 71, + label: "Who's branch is it anyway", + path: "/whos-branch", + status: "new", + }, + ], + }, ]; export default navigation; diff --git a/src/data/whos-branch.json b/src/data/whos-branch.json new file mode 100644 index 00000000..685b3f53 --- /dev/null +++ b/src/data/whos-branch.json @@ -0,0 +1,79 @@ +{ + "branches": [ + { + "name": "Army", + "questions": [ + { + "question": "What is the primary color of the Army uniform?", + "options": ["Green", "Blue", "White", "Black"], + "answer": "Green" + }, + { + "question": "What is the motto of the Army?", + "options": ["Semper Fi", "This We'll Defend", "Aim High", "Always Ready"], + "answer": "This We'll Defend" + } + ] + }, + { + "name": "Navy", + "questions": [ + { + "question": "What is the primary color of the Navy uniform?", + "options": ["Green", "Blue", "White", "Black"], + "answer": "Blue" + }, + { + "question": "What is the motto of the Navy?", + "options": ["Semper Fi", "This We'll Defend", "Aim High", "Semper Fortis"], + "answer": "Semper Fortis" + } + ] + }, + { + "name": "Air Force", + "questions": [ + { + "question": "What is the primary color of the Air Force uniform?", + "options": ["Green", "Blue", "White", "Black"], + "answer": "Blue" + }, + { + "question": "What is the motto of the Air Force?", + "options": ["Semper Fi", "This We'll Defend", "Aim High", "Always Ready"], + "answer": "Aim High" + } + ] + }, + { + "name": "Marines", + "questions": [ + { + "question": "What is the primary color of the Marines uniform?", + "options": ["Green", "Blue", "White", "Black"], + "answer": "Blue" + }, + { + "question": "What is the motto of the Marines?", + "options": ["Semper Fi", "This We'll Defend", "Aim High", "Always Ready"], + "answer": "Semper Fi" + } + ] + }, + { + "name": "Coast Guard", + "questions": [ + { + "question": "What is the primary color of the Coast Guard uniform?", + "options": ["Green", "Blue", "White", "Black"], + "answer": "Blue" + }, + { + "question": "What is the motto of the Coast Guard?", + "options": ["Semper Fi", "This We'll Defend", "Aim High", "Always Ready"], + "answer": "Always Ready" + } + ] + } + ] +} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index d9d66bd0..e358d2af 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,5 +1,6 @@ import type { NextPage } from "next"; import { GetStaticProps } from "next"; +import Link from "next/link"; import SEO from "@components/seo/page-seo"; import Layout from "@layout/layout-03"; import Wrapper from "@ui/wrapper/wrapper-02"; @@ -68,6 +69,11 @@ const Home: PageProps = ({ data }) => { + ); }; diff --git a/src/pages/whos-branch.tsx b/src/pages/whos-branch.tsx new file mode 100644 index 00000000..6787e381 --- /dev/null +++ b/src/pages/whos-branch.tsx @@ -0,0 +1,14 @@ +import React, { useState } from "react"; +import Breadcrumb from "@components/breadcrumb"; +import Game from "@components/whos-branch"; + +const WhosBranchPage = () => { + return ( + <> + + + + ); +}; + +export default WhosBranchPage;