import { useState } from "react"; import { getRandomWord } from "@/lib/words"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { motion } from "framer-motion"; import { generateAIResponse, guessWord, validateSentence } from "@/services/mistralService"; import { useToast } from "@/components/ui/use-toast"; type GameState = "welcome" | "showing-word" | "building-sentence" | "showing-guess" | "game-over"; export const GameContainer = () => { const [gameState, setGameState] = useState("welcome"); const [currentWord, setCurrentWord] = useState(""); const [sentence, setSentence] = useState([]); const [playerInput, setPlayerInput] = useState(""); const [isAiThinking, setIsAiThinking] = useState(false); const [aiGuess, setAiGuess] = useState(""); const { toast } = useToast(); const handleStart = () => { const word = getRandomWord(); setCurrentWord(word); setGameState("showing-word"); console.log("Game started with word:", word); }; const handlePlayerWord = async (e: React.FormEvent) => { e.preventDefault(); if (!playerInput.trim()) return; const word = playerInput.trim(); const newSentence = [...sentence, word]; setSentence(newSentence); setPlayerInput(""); // Check if the sentence is complete (ends with a period) if (word.endsWith('.')) { setIsAiThinking(true); try { const finalSentence = newSentence.join(' '); // Validate the sentence const isValid = await validateSentence(finalSentence); if (!isValid) { toast({ title: "Invalid Sentence", description: "The sentence is not grammatically correct. Game Over!", variant: "destructive", }); setGameState("game-over"); setIsAiThinking(false); return; } const guess = await guessWord(finalSentence); setAiGuess(guess); setGameState("showing-guess"); } catch (error) { console.error('Error getting AI guess:', error); toast({ title: "Error", description: "Failed to get AI's guess. Please try again.", variant: "destructive", }); } finally { setIsAiThinking(false); } return; } setIsAiThinking(true); try { const aiWord = await generateAIResponse(currentWord, newSentence); const newSentenceWithAi = [...newSentence, aiWord]; setSentence(newSentenceWithAi); // Check if AI ended the sentence if (aiWord.endsWith('.')) { const finalSentence = newSentenceWithAi.join(' '); // Validate the sentence const isValid = await validateSentence(finalSentence); if (!isValid) { toast({ title: "Invalid Sentence", description: "The AI generated an invalid sentence. Game Over!", variant: "destructive", }); setGameState("game-over"); setIsAiThinking(false); return; } const guess = await guessWord(finalSentence); setAiGuess(guess); setGameState("showing-guess"); } } catch (error) { console.error('Error in AI turn:', error); toast({ title: "Error", description: "Failed to get AI's response. Please try again.", variant: "destructive", }); } finally { setIsAiThinking(false); } }; const handlePlayAgain = () => { setGameState("welcome"); setSentence([]); setAiGuess(""); setCurrentWord(""); }; const handleContinue = () => { setGameState("building-sentence"); setSentence([]); }; return (
{gameState === "welcome" ? (

Word Game

Ready to play? Click start to begin!

) : gameState === "showing-word" ? (

Your Word

{currentWord}

Remember this word! You'll take turns with AI to create a sentence that describes it. End the sentence with a period when you're done, and another AI will try to guess it!

) : gameState === "building-sentence" ? (

Build a Description

Take turns with AI to describe "{currentWord}" without using the word itself!

{currentWord}

{sentence.length > 0 ? sentence.join(" ") : "Start your sentence..."}

setPlayerInput(e.target.value.replace(/\s/g, ''))} placeholder="Enter your word (end with . to finish)..." className="mb-4" disabled={isAiThinking} />
) : gameState === "game-over" ? (

Game Over

Your sentence was not grammatically correct:

{sentence.join(" ")}

) : (

AI's Guess

Your sentence: {sentence.join(" ")}

AI guessed: {aiGuess}

{aiGuess.toLowerCase() === currentWord.toLowerCase() ? ( Correct guess! 🎉 ) : ( Wrong! The word was {currentWord} )}

)}
); };