Skip to content

Commit

Permalink
Add end game button
Browse files Browse the repository at this point in the history
  • Loading branch information
@instantfred
instantfred committed Aug 20, 2024
1 parent 5dbe706 commit 8ed14f4
Showing 1 changed file with 107 additions and 50 deletions.
157 changes: 107 additions & 50 deletions src/SounddittoGame.js
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -39,19 +39,24 @@ 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);
}
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);
Expand All @@ -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>
Expand All @@ -126,77 +139,121 @@ const SounddittoGame = () => {
<Info className="h-6 w-6" />
</Button>
</div>
{gameState === 'waiting' && (
{gameState === "waiting" && (
<>
{renderLanguageToggle()}
{renderTimerToggle()}
</>
)}
</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>
)}
</CardContent>
</Card>
</div>
<Footer />
<InstructionsModal isOpen={isInstructionsOpen} onClose={closeInstructions} language={language} />
<InstructionsModal
isOpen={isInstructionsOpen}
onClose={closeInstructions}
language={language}
/>
</div>
);
};

export default SounddittoGame;
export default SounddittoGame;

0 comments on commit 8ed14f4

Please sign in to comment.