From 8ed14f44fda0ffdb9343b784faeb3ce234f7c609 Mon Sep 17 00:00:00 2001
From: instantfred <furede87@gmail.com>
Date: Tue, 20 Aug 2024 14:58:34 -0600
Subject: [PATCH] Add end game button

---
 src/SounddittoGame.js | 157 ++++++++++++++++++++++++++++--------------
 1 file changed, 107 insertions(+), 50 deletions(-)

diff --git a/src/SounddittoGame.js b/src/SounddittoGame.js
index 536c8cc..b12543f 100644
--- a/src/SounddittoGame.js
+++ b/src/SounddittoGame.js
@@ -1,34 +1,34 @@
-import React, { useState, useEffect } from 'react';
-import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardHeader } from "@/components/ui/card"
-import { Switch } from "@/components/ui/switch"
-import { Info } from "lucide-react"
-import englishWords from './lib/englishWords';
-import spanishWords from './lib/spanishWords';
-import Footer from './components/ui/Footer';
-import InstructionsModal from './components/modals/InstructionsModal';
+import React, { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Switch } from "@/components/ui/switch";
+import { Info } from "lucide-react";
+import englishWords from "./lib/englishWords";
+import spanishWords from "./lib/spanishWords";
+import Footer from "./components/ui/Footer";
+import InstructionsModal from "./components/modals/InstructionsModal";
 
 const GAME_DURATION = 60; // Game duration in seconds
 const SKIP_PENALTY = 5; // Time penalty for skipping in seconds
 
 const SounddittoGame = () => {
-  const [gameState, setGameState] = useState('waiting');
-  const [currentWords, setCurrentWords] = useState({ easy: '', hard: '' });
+  const [gameState, setGameState] = useState("waiting");
+  const [currentWords, setCurrentWords] = useState({ easy: "", hard: "" });
   const [score, setScore] = useState(0);
   const [timeLeft, setTimeLeft] = useState(GAME_DURATION);
-  const [language, setLanguage] = useState('english');
+  const [language, setLanguage] = useState("english");
   const [availableWords, setAvailableWords] = useState([]);
   const [isInstructionsOpen, setIsInstructionsOpen] = useState(false);
   const [isTimerEnabled, setIsTimerEnabled] = useState(true);
 
   useEffect(() => {
     let timer;
-    if (gameState === 'playing' && isTimerEnabled) {
+    if (gameState === "playing" && isTimerEnabled) {
       timer = setInterval(() => {
         setTimeLeft((prevTime) => {
           if (prevTime <= 1) {
             clearInterval(timer);
-            setGameState('finished');
+            setGameState("finished");
             return 0;
           }
           return prevTime - 1;
@@ -39,9 +39,10 @@ const SounddittoGame = () => {
   }, [gameState, isTimerEnabled]);
 
   const startGame = () => {
-    const words = language === 'english' ? [...englishWords] : [...spanishWords];
+    const words =
+      language === "english" ? [...englishWords] : [...spanishWords];
     setAvailableWords(words);
-    setGameState('playing');
+    setGameState("playing");
     setScore(0);
     if (isTimerEnabled) {
       setTimeLeft(GAME_DURATION);
@@ -49,9 +50,13 @@ const SounddittoGame = () => {
     nextWord(words);
   };
 
+  const endGame = () => {
+    setGameState("finished");
+  };
+
   const nextWord = (words = availableWords) => {
     if (words.length <= 1) {
-      setGameState('finished');
+      setGameState("finished");
       return;
     }
     const randomIndex = Math.floor(Math.random() * words.length);
@@ -67,40 +72,48 @@ const SounddittoGame = () => {
   };
 
   const handleGotIt = (difficulty) => {
-    setScore((prevScore) => prevScore + (difficulty === 'easy' ? 1 : 2));
+    setScore((prevScore) => prevScore + (difficulty === "easy" ? 1 : 2));
     nextWord();
   };
 
   const toggleLanguage = () => {
-    setLanguage(prevLang => prevLang === 'english' ? 'spanish' : 'english');
+    setLanguage((prevLang) => (prevLang === "english" ? "spanish" : "english"));
   };
 
   const toggleTimer = () => {
-    setIsTimerEnabled(prevState => !prevState);
+    setIsTimerEnabled((prevState) => !prevState);
   };
 
   const renderLanguageToggle = () => (
     <div className="flex items-center justify-center mt-4 space-x-2">
-      <span className={`font-semibold ${language === 'english' ? 'text-pink-500' : 'text-gray-400'}`}>EN</span>
+      <span
+        className={`font-semibold ${language === "english" ? "text-pink-500" : "text-gray-400"}`}
+      >
+        EN
+      </span>
       <Switch
-        checked={language === 'spanish'}
+        checked={language === "spanish"}
         onCheckedChange={toggleLanguage}
-        disabled={gameState !== 'waiting'}
+        disabled={gameState !== "waiting"}
         className="bg-white border-2 border-gray-300 data-[state=checked]:bg-white data-[state=unchecked]:bg-white"
       />
-      <span className={`font-semibold ${language === 'spanish' ? 'text-yellow-500' : 'text-gray-400'}`}>ES</span>
+      <span
+        className={`font-semibold ${language === "spanish" ? "text-yellow-500" : "text-gray-400"}`}
+      >
+        ES
+      </span>
     </div>
   );
 
   const renderTimerToggle = () => (
     <div className="flex items-center justify-center mt-4 space-x-2">
       <span className="font-semibold text-gray-600">
-        {language === 'english' ? 'Timer' : 'Temporizador'}
+        {language === "english" ? "Timer" : "Temporizador"}
       </span>
       <Switch
         checked={isTimerEnabled}
         onCheckedChange={toggleTimer}
-        disabled={gameState !== 'waiting'}
+        disabled={gameState !== "waiting"}
         className="bg-white border-2 border-gray-300 data-[state=checked]:bg-white data-[state=unchecked]:bg-white"
       />
     </div>
@@ -126,7 +139,7 @@ const SounddittoGame = () => {
                 <Info className="h-6 w-6" />
               </Button>
             </div>
-            {gameState === 'waiting' && (
+            {gameState === "waiting" && (
               <>
                 {renderLanguageToggle()}
                 {renderTimerToggle()}
@@ -134,59 +147,98 @@ const SounddittoGame = () => {
             )}
           </CardHeader>
           <CardContent className="p-6">
-            {gameState === 'waiting' && (
-              <Button onClick={startGame} className="w-full bg-gradient-to-r from-green-400 to-blue-500 hover:from-green-500 hover:to-blue-600 text-white font-bold py-3 rounded-full shadow-lg hover:scale-105 transition-all duration-300 animate-pulse">
-                {language === 'english' ? 'Start Game' : 'Iniciar Juego'}
+            {gameState === "waiting" && (
+              <Button
+                onClick={startGame}
+                className="w-full bg-gradient-to-r from-green-400 to-blue-500 hover:from-green-500 hover:to-blue-600 text-white font-bold py-3 rounded-full shadow-lg hover:scale-105 transition-all duration-300 animate-pulse"
+              >
+                {language === "english" ? "Start Game" : "Iniciar Juego"}
               </Button>
             )}
-            {gameState === 'playing' && (
+            {gameState === "playing" && (
               <div className="space-y-6">
                 <div className="text-center">
                   <p className="text-xl font-semibold text-gray-600">
-                    {language === 'english' ? 'Choose a word:' : 'Elige una palabra:'}
+                    {language === "english"
+                      ? "Choose a word:"
+                      : "Elige una palabra:"}
                   </p>
                   <div className="flex justify-between mt-4 space-x-4">
-                    <Button onClick={() => handleGotIt('easy')} className="flex-1 bg-green-500 hover:bg-green-600 text-white font-bold py-6 rounded-full shadow-lg hover:scale-105 transition-all duration-300">
+                    <Button
+                      onClick={() => handleGotIt("easy")}
+                      className="flex-1 bg-green-500 hover:bg-green-600 text-white font-bold py-6 rounded-full shadow-lg hover:scale-105 transition-all duration-300"
+                    >
                       <span className="block">
-                        <span className="text-xs">{language === 'english' ? 'Easy (1pt)' : 'Fácil (1pt)'}</span>
-                        <span className="block text-lg font-bold">{currentWords.easy}</span>
+                        <span className="text-xs">
+                          {language === "english"
+                            ? "Easy (1pt)"
+                            : "Fácil (1pt)"}
+                        </span>
+                        <span className="block text-lg font-bold">
+                          {currentWords.easy}
+                        </span>
                       </span>
                     </Button>
-                    <Button onClick={() => handleGotIt('hard')} className="flex-1 bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-6 rounded-full shadow-lg hover:scale-105 transition-all duration-300">
+                    <Button
+                      onClick={() => handleGotIt("hard")}
+                      className="flex-1 bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-6 rounded-full shadow-lg hover:scale-105 transition-all duration-300"
+                    >
                       <span className="block">
-                        <span className="text-xs">{language === 'english' ? 'Hard (2pts)' : 'Difícil (2pts)'}</span>
-                        <span className="block text-lg font-bold">{currentWords.hard}</span>
+                        <span className="text-xs">
+                          {language === "english"
+                            ? "Hard (2pts)"
+                            : "Difícil (2pts)"}
+                        </span>
+                        <span className="block text-lg font-bold">
+                          {currentWords.hard}
+                        </span>
                       </span>
                     </Button>
                   </div>
                 </div>
-                <Button onClick={handleSkip} className="w-full bg-red-500 hover:bg-red-600 text-white font-bold py-3 rounded-full shadow-lg hover:scale-105 transition-all duration-300">
-                  {language === 'english' ? 'Skip' : 'Saltar'}
+                <Button
+                  onClick={handleSkip}
+                  className="w-full bg-red-500 hover:bg-red-600 text-white font-bold py-3 rounded-full shadow-lg hover:scale-105 transition-all duration-300"
+                >
+                  {language === "english" ? "Skip" : "Saltar"}
                 </Button>
                 <div className="flex justify-between items-center bg-gray-100 p-4 rounded-lg">
                   <p className="text-lg font-semibold text-indigo-600">
-                    {language === 'english' ? 'Score:' : 'Puntos:'} 
+                    {language === "english" ? "Score:" : "Puntos:"}
                     <span className="ml-2 text-2xl">{score}</span>
                   </p>
-                  {isTimerEnabled && (
+                  {isTimerEnabled ? (
                     <p className="text-lg font-semibold text-pink-600">
-                      {language === 'english' ? 'Time:' : 'Tiempo:'} 
+                      {language === "english" ? "Time:" : "Tiempo:"}
                       <span className="ml-2 text-2xl">{timeLeft}s</span>
                     </p>
+                  ) : (
+                    <Button
+                      onClick={endGame}
+                      className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full shadow-lg hover:scale-105 transition-all duration-300"
+                    >
+                      {language === "english" ? "End Game" : "Terminar Juego"}
+                    </Button>
                   )}
                 </div>
               </div>
             )}
-            {gameState === 'finished' && (
+            {gameState === "finished" && (
               <div className="text-center space-y-6">
                 <p className="text-2xl font-bold text-indigo-600">
-                  {language === 'english' ? 'Game Over!' : '¡Juego Terminado!'}
+                  {language === "english" ? "Game Over!" : "¡Juego Terminado!"}
                 </p>
                 <p className="text-4xl font-extrabold bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">
-                  {language === 'english' ? 'Final Score:' : 'Puntuación Final:'} {score}
+                  {language === "english"
+                    ? "Final Score:"
+                    : "Puntuación Final:"}{" "}
+                  {score}
                 </p>
-                <Button onClick={startGame} className="w-full bg-gradient-to-r from-green-400 to-blue-500 hover:from-green-500 hover:to-blue-600 text-white font-bold py-3 rounded-full shadow-lg hover:scale-105 transition-all duration-300">
-                  {language === 'english' ? 'Play Again' : 'Jugar de Nuevo'}
+                <Button
+                  onClick={startGame}
+                  className="w-full bg-gradient-to-r from-green-400 to-blue-500 hover:from-green-500 hover:to-blue-600 text-white font-bold py-3 rounded-full shadow-lg hover:scale-105 transition-all duration-300"
+                >
+                  {language === "english" ? "Play Again" : "Jugar de Nuevo"}
                 </Button>
               </div>
             )}
@@ -194,9 +246,14 @@ const SounddittoGame = () => {
         </Card>
       </div>
       <Footer />
-      <InstructionsModal isOpen={isInstructionsOpen} onClose={closeInstructions} language={language} />
+      <InstructionsModal
+        isOpen={isInstructionsOpen}
+        onClose={closeInstructions}
+        language={language}
+      />
     </div>
   );
 };
 
-export default SounddittoGame;
\ No newline at end of file
+export default SounddittoGame;
+