From 026050533feb2fe428f932f844851d5c2a300f9b Mon Sep 17 00:00:00 2001
From: Jerome Hardaway <jerome@vetswhocode.io>
Date: Tue, 4 Feb 2025 21:37:39 -0500
Subject: [PATCH]  Remove Who's Branch Is It Anyway game components and related
 data

---
 src/components/whos-branch/index.tsx          |  38 ----
 src/components/whos-branch/question.tsx       |  30 ---
 src/components/whos-branch/score.tsx          |  19 --
 .../whos-branch.json                          |   7 +-
 src/lib/whos-branch.ts                        |  14 ++
 src/pages/index.tsx                           |   6 +-
 src/pages/subjects/[slug].tsx                 |   4 +-
 src/pages/whos-branch.tsx                     |  14 --
 src/pages/whos-branch/[branch].tsx            | 181 ++++++++++++++++++
 src/pages/whos-branch/index.tsx               |  76 ++++++++
 10 files changed, 281 insertions(+), 108 deletions(-)
 delete mode 100644 src/components/whos-branch/index.tsx
 delete mode 100644 src/components/whos-branch/question.tsx
 delete mode 100644 src/components/whos-branch/score.tsx
 rename src/data/{ => whos-branch-is-it-anyway}/whos-branch.json (95%)
 create mode 100644 src/lib/whos-branch.ts
 delete mode 100644 src/pages/whos-branch.tsx
 create mode 100644 src/pages/whos-branch/[branch].tsx
 create mode 100644 src/pages/whos-branch/index.tsx

diff --git a/src/components/whos-branch/index.tsx b/src/components/whos-branch/index.tsx
deleted file mode 100644
index 223f09c3..00000000
--- a/src/components/whos-branch/index.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-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 (
-        <div className="game">
-            {showScore ? (
-                <Score score={score} totalQuestions={questions.length} />
-            ) : (
-                <Question
-                    question={questions[currentQuestionIndex]}
-                    onAnswerOptionClick={handleAnswerOptionClick}
-                />
-            )}
-        </div>
-    );
-};
-
-export default Game;
diff --git a/src/components/whos-branch/question.tsx b/src/components/whos-branch/question.tsx
deleted file mode 100644
index 258e69bf..00000000
--- a/src/components/whos-branch/question.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from "react";
-
-interface QuestionProps {
-    question: {
-        question: string;
-        options: string[];
-        answer: string;
-    };
-    onAnswerOptionClick: (isCorrect: boolean) => void;
-}
-
-const Question: React.FC<QuestionProps> = ({ question, onAnswerOptionClick }) => {
-    return (
-        <div className="question">
-            <h2>{question.question}</h2>
-            <div className="options">
-                {question.options.map((option, index) => (
-                    <button
-                        key={index}
-                        onClick={() => onAnswerOptionClick(option === question.answer)}
-                    >
-                        {option}
-                    </button>
-                ))}
-            </div>
-        </div>
-    );
-};
-
-export default Question;
diff --git a/src/components/whos-branch/score.tsx b/src/components/whos-branch/score.tsx
deleted file mode 100644
index 8e0dc0cb..00000000
--- a/src/components/whos-branch/score.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-
-interface ScoreProps {
-    score: number;
-    totalQuestions: number;
-}
-
-const Score: React.FC<ScoreProps> = ({ score, totalQuestions }) => {
-    return (
-        <div className="score">
-            <h2>Your Score</h2>
-            <p>
-                {score} out of {totalQuestions}
-            </p>
-        </div>
-    );
-};
-
-export default Score;
diff --git a/src/data/whos-branch.json b/src/data/whos-branch-is-it-anyway/whos-branch.json
similarity index 95%
rename from src/data/whos-branch.json
rename to src/data/whos-branch-is-it-anyway/whos-branch.json
index 685b3f53..38989c49 100644
--- a/src/data/whos-branch.json
+++ b/src/data/whos-branch-is-it-anyway/whos-branch.json
@@ -1,4 +1,7 @@
-{
+// data/questions.ts
+import { GameData } from '../types';
+
+export const gameData: GameData = {
   "branches": [
     {
       "name": "Army",
@@ -76,4 +79,4 @@
       ]
     }
   ]
-}
+};
\ No newline at end of file
diff --git a/src/lib/whos-branch.ts b/src/lib/whos-branch.ts
new file mode 100644
index 00000000..d0e0c1ad
--- /dev/null
+++ b/src/lib/whos-branch.ts
@@ -0,0 +1,14 @@
+// lib/whos-branch.ts
+import fs from "fs";
+import path from "path";
+
+export const getAllBranches = () => {
+    const jsonPath = path.join(process.cwd(), "src/data/whos-branch-is-it-anyway/whos-branch.json");
+    const jsonData = JSON.parse(fs.readFileSync(jsonPath, "utf8"));
+    return jsonData.branches;
+};
+
+export const getBranchByName = (name: string) => {
+    const branches = getAllBranches();
+    return branches.find((branch: any) => branch.name.toLowerCase() === name.toLowerCase());
+};
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index e358d2af..b75f5f73 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -69,9 +69,9 @@ const Home: PageProps = ({ data }) => {
             <BlogArea data={{ ...content?.["blog-area"], blogs: data.blogs }} titleSize="large" />
             <BrandArea data={content?.["brand-area"]} />
             <NewsletterArea data={content?.["newsletter-area"]} />
-            <div className="tw-text-center tw-mt-10">
-                <Link href="/whos-branch">
-                    <a className="tw-text-primary tw-underline tw-text-lg">Play "Who's branch is it anyway"</a>
+            <div className="tw-mt-10 tw-text-center">
+                <Link href="/whos-branch" className="tw-text-lg tw-text-primary tw-underline">
+                    Play "Who's branch is it anyway"
                 </Link>
             </div>
         </>
diff --git a/src/pages/subjects/[slug].tsx b/src/pages/subjects/[slug].tsx
index f0682d09..c551720a 100644
--- a/src/pages/subjects/[slug].tsx
+++ b/src/pages/subjects/[slug].tsx
@@ -30,13 +30,13 @@ const SingleCourse: PageProps = ({ data: { course, instructor, relatedCourses }
                     type: "website",
                     images: [
                         {
-                            url: `https://maxcoach-react.pages.dev${course.thumbnail.src}`,
+                            url: `https://vetswhocode.io${course.thumbnail.src}`,
                             width: 800,
                             height: 600,
                             alt: course.title,
                         },
                         {
-                            url: `https://maxcoach-react.pages.dev${course.thumbnail.src}`,
+                            url: `https://vetswhocode.io${course.thumbnail.src}`,
                             width: 900,
                             height: 800,
                             alt: course.title,
diff --git a/src/pages/whos-branch.tsx b/src/pages/whos-branch.tsx
deleted file mode 100644
index 6787e381..00000000
--- a/src/pages/whos-branch.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { useState } from "react";
-import Breadcrumb from "@components/breadcrumb";
-import Game from "@components/whos-branch";
-
-const WhosBranchPage = () => {
-    return (
-        <>
-            <Breadcrumb pages={[{ path: "/", label: "Home" }]} currentPage="Who's Branch" />
-            <Game />
-        </>
-    );
-};
-
-export default WhosBranchPage;
diff --git a/src/pages/whos-branch/[branch].tsx b/src/pages/whos-branch/[branch].tsx
new file mode 100644
index 00000000..21f8caf6
--- /dev/null
+++ b/src/pages/whos-branch/[branch].tsx
@@ -0,0 +1,181 @@
+// pages/whos-branch/[branch].tsx
+import type { GetStaticPaths, NextPage } from "next";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { getAllBranches, getBranchByName } from "../../lib/whos-branch";
+
+interface Question {
+    question: string;
+    options: string[];
+    answer: string;
+}
+
+interface Branch {
+    name: string;
+    questions: Question[];
+}
+
+type TProps = {
+    data: {
+        branch: Branch;
+    };
+};
+
+const BranchQuiz: NextPage<TProps> = ({ data: { branch } }) => {
+    const router = useRouter();
+    const [players, setPlayers] = useState<string[]>([]);
+    const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+    const [selectedPlayer, setSelectedPlayer] = useState<string | null>(null);
+    const [scores, setScores] = useState<Record<string, number>>({});
+    const [feedback, setFeedback] = useState("");
+    const [showNextButton, setShowNextButton] = useState(false);
+
+    useEffect(() => {
+        // Get players from sessionStorage
+        const storedPlayers = sessionStorage.getItem("players");
+        if (!storedPlayers) {
+            router.push("/whos-branch");
+            return;
+        }
+        const playersList = JSON.parse(storedPlayers);
+        setPlayers(playersList);
+
+        // Initialize scores
+        const initialScores: Record<string, number> = {};
+        playersList.forEach((player: string) => {
+            initialScores[player] = 0;
+        });
+        setScores(initialScores);
+    }, [router]);
+
+    const handlePlayerSelect = (player: string) => {
+        setSelectedPlayer(player);
+    };
+
+    const handleAnswerClick = (selectedAnswer: string) => {
+        if (!selectedPlayer) {
+            setFeedback("Please select a player first!");
+            return;
+        }
+
+        const currentQuestion = branch.questions[currentQuestionIndex];
+        const isCorrect = selectedAnswer === currentQuestion.answer;
+
+        if (isCorrect) {
+            setScores((prev) => ({
+                ...prev,
+                [selectedPlayer]: prev[selectedPlayer] + 1,
+            }));
+            setFeedback("Correct!");
+        } else {
+            setFeedback(`Wrong! The correct answer is ${currentQuestion.answer}.`);
+        }
+
+        setShowNextButton(true);
+    };
+
+    const handleNextQuestion = () => {
+        if (currentQuestionIndex + 1 < branch.questions.length) {
+            setCurrentQuestionIndex((prev) => prev + 1);
+            setSelectedPlayer(null);
+            setFeedback("");
+            setShowNextButton(false);
+        } else {
+            // Game over logic
+            setFeedback("Game Over!");
+        }
+    };
+
+    if (!branch) return null;
+
+    return (
+        <div className="game-container">
+            <h1>Who&apos;s Branch Is It Anyway?</h1>
+
+            <div id="game-area">
+                <p>Select the Player:</p>
+                <div id="player-buttons">
+                    {players.map((player) => (
+                        <button
+                            key={player}
+                            onClick={() => handlePlayerSelect(player)}
+                            className={selectedPlayer === player ? "active" : ""}
+                        >
+                            {player}
+                        </button>
+                    ))}
+                </div>
+
+                <p id="fact">{branch.questions[currentQuestionIndex].question}</p>
+
+                <div id="answers">
+                    {branch.questions[currentQuestionIndex].options.map((option) => (
+                        <button
+                            key={option}
+                            className="answer-btn"
+                            onClick={() => handleAnswerClick(option)}
+                            disabled={showNextButton}
+                        >
+                            {option}
+                        </button>
+                    ))}
+                </div>
+
+                <p id="feedback">{feedback}</p>
+
+                {showNextButton && (
+                    <button id="next-btn" onClick={handleNextQuestion}>
+                        Next Question
+                    </button>
+                )}
+
+                <div id="scores">
+                    {Object.entries(scores).map(([player, score]) => (
+                        <p key={player}>
+                            {player}: {score}
+                        </p>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+    const branches = await getAllBranches();
+
+    return {
+        paths: branches.map((branch) => ({
+            params: {
+                branch: branch.name.toLowerCase(),
+            },
+        })),
+        fallback: false,
+    };
+};
+
+interface StaticProps {
+    params: {
+        branch: string;
+    };
+}
+
+export const getStaticProps = async ({ params }: StaticProps) => {
+    const branch = await getBranchByName(params.branch);
+
+    if (!branch) {
+        return {
+            notFound: true,
+        };
+    }
+
+    return {
+        props: {
+            data: {
+                branch,
+            },
+        },
+    };
+};
+
+export default BranchQuiz;
diff --git a/src/pages/whos-branch/index.tsx b/src/pages/whos-branch/index.tsx
new file mode 100644
index 00000000..cc4f590a
--- /dev/null
+++ b/src/pages/whos-branch/index.tsx
@@ -0,0 +1,76 @@
+// pages/whos-branch/index.tsx
+import type { NextPage } from "next";
+import { useState } from "react";
+import { useRouter } from "next/router";
+import { getAllBranches } from "../../lib/whos-branch";
+
+type TProps = {
+    data: {
+        branches: {
+            name: string;
+        }[];
+    };
+};
+
+const WhoBranchIndex: NextPage<TProps> = ({ data: { branches } }) => {
+    const router = useRouter();
+    const [players, setPlayers] = useState(["", "", "", ""]);
+
+    const handleStartGame = () => {
+        const validPlayers = players.filter(name => name.trim() !== "");
+        if (validPlayers.length === 0) {
+            alert("Please enter at least one player name");
+            return;
+        }
+        
+        // Store players in sessionStorage
+        sessionStorage.setItem('players', JSON.stringify(validPlayers));
+        
+        // Redirect to first branch
+        if (branches.length > 0) {
+            router.push(`/whos-branch/${branches[0].name.toLowerCase()}`);
+        }
+    };
+
+    const handlePlayerChange = (index: number, value: string) => {
+        const newPlayers = [...players];
+        newPlayers[index] = value;
+        setPlayers(newPlayers);
+    };
+
+    return (
+        <div className="game-container">
+            <h1>Who&apos;s Branch Is It Anyway?</h1>
+            
+            <div id="player-setup">
+                <p>Enter Player Names:</p>
+                {players.map((player, index) => (
+                    <input
+                        key={index}
+                        type="text"
+                        value={player}
+                        onChange={(e) => handlePlayerChange(index, e.target.value)}
+                        placeholder={`Player ${index + 1}`}
+                    />
+                ))}
+                <button id="start-btn" onClick={handleStartGame}>
+                    Start Game
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export const getStaticProps = async () => {
+    const branches = await getAllBranches();
+    
+    return {
+        props: {
+            data: {
+                branches,
+            },
+        },
+    };
+};
+
+export default WhoBranchIndex;
\ No newline at end of file