From 92ea5a1744d8943dba3566187dc45b181ccba11c Mon Sep 17 00:00:00 2001 From: Jerome Hardaway Date: Tue, 4 Feb 2025 19:39:12 -0500 Subject: [PATCH] Add Who's branch is it anyway game page Add a new page for the "Who's branch is it anyway" game. * **New Page and Components** - Add `src/pages/whos-branch.tsx` to create a new page component for the game. - Add `src/components/whos-branch/index.tsx` to implement the game logic and UI. - Add `src/components/whos-branch/question.tsx` to display game questions. - Add `src/components/whos-branch/score.tsx` to display the game score. * **Game Data** - Add `src/data/whos-branch.json` to store game data, including branches and questions. * **Navigation and Menu** - Modify `src/pages/index.tsx` to add a link to the new game page. - Modify `src/data/menu.ts` to add a menu item for the new game page. * **Testing** - Add `__tests__/pages/whos-branch.tests.tsx` to create tests for the game page, game logic, and UI. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/Vets-Who-Code/vets-who-code-app?shareId=XXXX-XXXX-XXXX-XXXX). --- __tests__/pages/whos-branch.tests.tsx | 49 +++++++++++++++ src/components/whos-branch/index.tsx | 38 ++++++++++++ src/components/whos-branch/question.tsx | 30 ++++++++++ src/components/whos-branch/score.tsx | 19 ++++++ src/data/menu.ts | 14 ++++- src/data/whos-branch.json | 79 +++++++++++++++++++++++++ src/pages/index.tsx | 6 ++ src/pages/whos-branch.tsx | 14 +++++ 8 files changed, 248 insertions(+), 1 deletion(-) create mode 100644 __tests__/pages/whos-branch.tests.tsx create mode 100644 src/components/whos-branch/index.tsx create mode 100644 src/components/whos-branch/question.tsx create mode 100644 src/components/whos-branch/score.tsx create mode 100644 src/data/whos-branch.json create mode 100644 src/pages/whos-branch.tsx 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;