app update

src/components/GameContainer.tsx

@@ -1,12 +1,16 @@
-import { useState } from "react";
+import { useState, KeyboardEvent, useEffect } 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 { generateAIResponse, guessWord } from "@/services/mistralService";
 import { useToast } from "@/components/ui/use-toast";
+import { HighScoreBoard } from "./HighScoreBoard";
+import { WelcomeScreen } from "./game/WelcomeScreen";
+import { WordDisplay } from "./game/WordDisplay";
+import { SentenceBuilder } from "./game/SentenceBuilder";
+import { GuessDisplay } from "./game/GuessDisplay";
+import { GameOver } from "./game/GameOver";
 
-type GameState = "welcome" | "showing-word" | "building-sentence" | "showing-guess" | "game-over";
+type GameState = "welcome" | "showing-word" | "building-sentence" | "showing-guess" | "game-over" | "high-scores";
 
 export const GameContainer = () => {
   const [gameState, setGameState] = useState<GameState>("welcome");
@@ -15,12 +19,38 @@ export const GameContainer = () => {
   const [playerInput, setPlayerInput] = useState<string>("");
   const [isAiThinking, setIsAiThinking] = useState(false);
   const [aiGuess, setAiGuess] = useState<string>("");
+  const [successfulRounds, setSuccessfulRounds] = useState<number>(0);
+  const [totalWords, setTotalWords] = useState<number>(0);
   const { toast } = useToast();
 
+  useEffect(() => {
+    const handleKeyPress = (e: KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        if (gameState === 'welcome') {
+          handleStart();
+        } else if (gameState === 'showing-word') {
+          handleContinue();
+        } else if (gameState === 'game-over' || gameState === 'showing-guess') {
+          const correct = isGuessCorrect();
+          if (correct) {
+            handleNextRound();
+          } else {
+            setGameState("high-scores");
+          }
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyPress as any);
+    return () => window.removeEventListener('keydown', handleKeyPress as any);
+  }, [gameState, aiGuess, currentWord]);
+
   const handleStart = () => {
     const word = getRandomWord();
     setCurrentWord(word);
     setGameState("showing-word");
+    setSuccessfulRounds(0);
+    setTotalWords(0);
     console.log("Game started with word:", word);
   };
 
@@ -32,86 +62,63 @@ export const GameContainer = () => {
     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;
-    }
+    setTotalWords(prev => prev + 1);
 
     setIsAiThinking(true);
     try {
       const aiWord = await generateAIResponse(currentWord, newSentence);
       const newSentenceWithAi = [...newSentence, aiWord];
       setSentence(newSentenceWithAi);
+      setTotalWords(prev => prev + 1);
+    } catch (error) {
+      console.error('Error in AI turn:', error);
+      toast({
+        title: "AI Response Delayed",
+        description: "The AI is currently busy. Please try adding another word or wait a moment.",
+        variant: "default",
+      });
+    } finally {
+      setIsAiThinking(false);
+    }
+  };
 
-      // 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 handleMakeGuess = async () => {
+    if (sentence.length === 0) return;
 
-        const guess = await guessWord(finalSentence);
-        setAiGuess(guess);
-        setGameState("showing-guess");
-      }
+    setIsAiThinking(true);
+    try {
+      const finalSentence = sentence.join(' ');
+      const guess = await guessWord(finalSentence);
+      setAiGuess(guess);
+      setGameState("showing-guess");
     } catch (error) {
-      console.error('Error in AI turn:', error);
+      console.error('Error getting AI guess:', error);
       toast({
-        title: "Error",
-        description: "Failed to get AI's response. Please try again.",
-        variant: "destructive",
+        title: "AI Response Delayed",
+        description: "The AI is currently busy. Please try again in a moment.",
+        variant: "default",
       });
     } finally {
       setIsAiThinking(false);
     }
   };
 
+  const handleNextRound = () => {
+    const word = getRandomWord();
+    setCurrentWord(word);
+    setGameState("showing-word");
+    setSentence([]);
+    setAiGuess("");
+    console.log("Next round started with word:", word);
+  };
+
   const handlePlayAgain = () => {
     setGameState("welcome");
     setSentence([]);
     setAiGuess("");
     setCurrentWord("");
+    setSuccessfulRounds(0);
+    setTotalWords(0);
   };
 
   const handleContinue = () => {
@@ -119,6 +126,24 @@ export const GameContainer = () => {
     setSentence([]);
   };
 
+  const isGuessCorrect = () => {
+    return aiGuess.toLowerCase() === currentWord.toLowerCase();
+  };
+
+  const handleGuessComplete = () => {
+    if (isGuessCorrect()) {
+      setSuccessfulRounds(prev => prev + 1);
+      return true;
+    }
+    setGameState("high-scores");
+    return false;
+  };
+
+  const getAverageWordsPerRound = () => {
+    if (successfulRounds === 0) return 0;
+    return totalWords / successfulRounds;
+  };
+
   return (
     <div className="flex min-h-screen items-center justify-center p-4">
       <motion.div
@@ -127,145 +152,50 @@ export const GameContainer = () => {
         className="w-full max-w-md rounded-xl bg-white p-8 shadow-lg"
       >
         {gameState === "welcome" ? (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-center"
-          >
-            <h1 className="mb-6 text-4xl font-bold text-gray-900">Word Game</h1>
-            <p className="mb-8 text-gray-600">
-              Ready to play? Click start to begin!
-            </p>
-            <Button
-              onClick={handleStart}
-              className="w-full bg-primary text-lg hover:bg-primary/90"
-            >
-              Start Game
-            </Button>
-          </motion.div>
+          <WelcomeScreen onStart={handleStart} />
         ) : gameState === "showing-word" ? (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-center"
-          >
-            <h2 className="mb-4 text-2xl font-semibold text-gray-900">
-              Your Word
-            </h2>
-            <div className="mb-8 rounded-lg bg-secondary/10 p-6">
-              <p className="text-4xl font-bold tracking-wider text-secondary">
-                {currentWord}
-              </p>
-            </div>
-            <p className="mb-8 text-gray-600">
-              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!
-            </p>
-            <Button
-              onClick={handleContinue}
-              className="w-full bg-primary text-lg hover:bg-primary/90"
-            >
-              Continue
-            </Button>
-          </motion.div>
+          <WordDisplay
+            currentWord={currentWord}
+            successfulRounds={successfulRounds}
+            onContinue={handleContinue}
+          />
         ) : gameState === "building-sentence" ? (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-center"
-          >
-            <h2 className="mb-4 text-2xl font-semibold text-gray-900">
-              Build a Description
-            </h2>
-            <p className="text-sm text-gray-600">
-              Take turns with AI to describe "{currentWord}" without using the word
-              itself!
-            </p>
-            <div className="mb-4 rounded-lg bg-secondary/10 p-4">
-              <p className="text-2xl font-bold tracking-wider text-secondary">
-                {currentWord}
-              </p>
-            </div>
-            <div className="mb-6 rounded-lg bg-gray-50 p-4">
-              <p className="text-lg text-gray-800">
-                {sentence.length > 0 ? sentence.join(" ") : "Start your sentence..."}
-              </p>
-            </div>
-            <form onSubmit={handlePlayerWord} className="mb-4">
-              <Input
-                type="text"
-                value={playerInput}
-                onChange={(e) => setPlayerInput(e.target.value.replace(/\s/g, ''))}
-                placeholder="Enter your word (end with . to finish)..."
-                className="mb-4"
-                disabled={isAiThinking}
-              />
-              <Button
-                type="submit"
-                className="w-full bg-primary text-lg hover:bg-primary/90"
-                disabled={!playerInput.trim() || isAiThinking}
-              >
-                {isAiThinking ? "AI is thinking..." : "Add Word"}
-              </Button>
-            </form>
-          </motion.div>
+          <SentenceBuilder
+            currentWord={currentWord}
+            successfulRounds={successfulRounds}
+            sentence={sentence}
+            playerInput={playerInput}
+            isAiThinking={isAiThinking}
+            onInputChange={setPlayerInput}
+            onSubmitWord={handlePlayerWord}
+            onMakeGuess={handleMakeGuess}
+          />
+        ) : gameState === "showing-guess" ? (
+          <GuessDisplay
+            sentence={sentence}
+            aiGuess={aiGuess}
+            currentWord={currentWord}
+            onNextRound={() => {
+              handleGuessComplete();
+              handleNextRound();
+            }}
+            onPlayAgain={handlePlayAgain}
+          />
+        ) : gameState === "high-scores" ? (
+          <HighScoreBoard
+            currentScore={successfulRounds}
+            avgWordsPerRound={getAverageWordsPerRound()}
+            onClose={() => setGameState("game-over")}
+            onPlayAgain={handlePlayAgain}
+          />
         ) : gameState === "game-over" ? (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-center"
-          >
-            <h2 className="mb-4 text-2xl font-semibold text-gray-900">
-              Game Over
-            </h2>
-            <div className="mb-6 rounded-lg bg-gray-50 p-4">
-              <p className="mb-4 text-lg text-gray-800">
-                Your sentence was not grammatically correct:
-              </p>
-              <p className="italic text-gray-600">
-                {sentence.join(" ")}
-              </p>
-            </div>
-            <Button
-              onClick={handlePlayAgain}
-              className="w-full bg-primary text-lg hover:bg-primary/90"
-            >
-              Play Again
-            </Button>
-          </motion.div>
-        ) : (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="text-center"
-          >
-            <h2 className="mb-4 text-2xl font-semibold text-gray-900">
-              AI's Guess
-            </h2>
-            <div className="mb-6 rounded-lg bg-gray-50 p-4">
-              <p className="mb-4 text-lg text-gray-800">
-                Your sentence: {sentence.join(" ")}
-              </p>
-              <p className="text-xl font-bold text-primary">
-                AI guessed: {aiGuess}
-              </p>
-              <p className="mt-4 text-lg">
-                {aiGuess.toLowerCase() === currentWord.toLowerCase() ? (
-                  <span className="text-green-600">Correct guess! 🎉</span>
-                ) : (
-                  <span className="text-red-600">Wrong! The word was {currentWord}</span>
-                )}
-              </p>
-            </div>
-            <Button
-              onClick={handlePlayAgain}
-              className="w-full bg-primary text-lg hover:bg-primary/90"
-            >
-              Play Again
-            </Button>
-          </motion.div>
-        )}
+          <GameOver
+            successfulRounds={successfulRounds}
+            onViewHighScores={() => setGameState("high-scores")}
+            onPlayAgain={handlePlayAgain}
+          />
+        ) : null}
       </motion.div>
     </div>
   );
-};
+};

src/components/HighScoreBoard.tsx

@@ -0,0 +1,157 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { supabase } from "@/integrations/supabase/client";
+import { useQuery } from "@tanstack/react-query";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { useToast } from "@/components/ui/use-toast";
+
+interface HighScore {
+  id: string;
+  player_name: string;
+  score: number;
+  avg_words_per_round: number;
+  created_at: string;
+}
+
+interface HighScoreBoardProps {
+  currentScore: number;
+  avgWordsPerRound: number;
+  onClose: () => void;
+  onPlayAgain: () => void;
+}
+
+export const HighScoreBoard = ({
+  currentScore,
+  avgWordsPerRound,
+  onClose,
+  onPlayAgain,
+}: HighScoreBoardProps) => {
+  const [playerName, setPlayerName] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { toast } = useToast();
+
+  const { data: highScores, refetch } = useQuery({
+    queryKey: ["highScores"],
+    queryFn: async () => {
+      const { data, error } = await supabase
+        .from("high_scores")
+        .select("*")
+        .order("score", { ascending: false })
+        .order("avg_words_per_round", { ascending: true });
+
+      if (error) throw error;
+      return data as HighScore[];
+    },
+  });
+
+  const handleSubmitScore = async () => {
+    if (!playerName.trim()) {
+      toast({
+        title: "Error",
+        description: "Please enter your name",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const { error } = await supabase.from("high_scores").insert({
+        player_name: playerName.trim(),
+        score: currentScore,
+        avg_words_per_round: avgWordsPerRound,
+      });
+
+      if (error) throw error;
+
+      toast({
+        title: "Success!",
+        description: "Your score has been recorded",
+      });
+      
+      await refetch();
+      setPlayerName("");
+    } catch (error) {
+      console.error("Error submitting score:", error);
+      toast({
+        title: "Error",
+        description: "Failed to submit score. Please try again.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="text-center">
+        <h2 className="text-2xl font-bold mb-2">High Scores</h2>
+        <p className="text-gray-600">
+          Your score: {currentScore} rounds
+          {currentScore > 0 && ` (${avgWordsPerRound.toFixed(1)} words/round)`}
+        </p>
+      </div>
+
+      <div className="flex gap-4 mb-6">
+        <Input
+          placeholder="Enter your name"
+          value={playerName}
+          onChange={(e) => setPlayerName(e.target.value)}
+          className="flex-1"
+        />
+        <Button
+          onClick={handleSubmitScore}
+          disabled={isSubmitting || !playerName.trim()}
+        >
+          {isSubmitting ? "Submitting..." : "Submit Score"}
+        </Button>
+      </div>
+
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Rank</TableHead>
+              <TableHead>Player</TableHead>
+              <TableHead>Rounds</TableHead>
+              <TableHead>Avg Words/Round</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {highScores?.map((score, index) => (
+              <TableRow key={score.id}>
+                <TableCell>{index + 1}</TableCell>
+                <TableCell>{score.player_name}</TableCell>
+                <TableCell>{score.score}</TableCell>
+                <TableCell>{score.avg_words_per_round.toFixed(1)}</TableCell>
+              </TableRow>
+            ))}
+            {!highScores?.length && (
+              <TableRow>
+                <TableCell colSpan={4} className="text-center">
+                  No high scores yet. Be the first!
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className="flex justify-end gap-4">
+        <Button variant="outline" onClick={onClose}>
+          Close
+        </Button>
+        <Button onClick={onPlayAgain}>Play Again</Button>
+      </div>
+    </div>
+  );
+};

src/components/game/GameOver.tsx

@@ -0,0 +1,41 @@
+import { Button } from "@/components/ui/button";
+import { motion } from "framer-motion";
+
+interface GameOverProps {
+  successfulRounds: number;
+  onViewHighScores: () => void;
+  onPlayAgain: () => void;
+}
+
+export const GameOver = ({
+  successfulRounds,
+  onViewHighScores,
+  onPlayAgain,
+}: GameOverProps) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      className="text-center"
+    >
+      <h2 className="mb-4 text-2xl font-semibold text-gray-900">Game Over!</h2>
+      <p className="mb-6 text-lg text-gray-800">
+        You completed {successfulRounds} rounds successfully!
+      </p>
+      <div className="flex gap-4">
+        <Button
+          onClick={onViewHighScores}
+          className="flex-1 bg-secondary text-lg hover:bg-secondary/90"
+        >
+          View High Scores
+        </Button>
+        <Button
+          onClick={onPlayAgain}
+          className="flex-1 bg-primary text-lg hover:bg-primary/90"
+        >
+          Play Again ⏎
+        </Button>
+      </div>
+    </motion.div>
+  );
+};

src/components/game/GuessDisplay.tsx

@@ -0,0 +1,53 @@
+import { Button } from "@/components/ui/button";
+import { motion } from "framer-motion";
+
+interface GuessDisplayProps {
+  sentence: string[];
+  aiGuess: string;
+  currentWord: string;
+  onNextRound: () => void;
+  onPlayAgain: () => void;
+}
+
+export const GuessDisplay = ({
+  sentence,
+  aiGuess,
+  currentWord,
+  onNextRound,
+  onPlayAgain,
+}: GuessDisplayProps) => {
+  const isGuessCorrect = () => aiGuess.toLowerCase() === currentWord.toLowerCase();
+
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      className="text-center"
+    >
+      <h2 className="mb-4 text-2xl font-semibold text-gray-900">AI's Guess</h2>
+      <div className="mb-6 rounded-lg bg-gray-50 p-4">
+        <p className="mb-4 text-lg text-gray-800">
+          Your sentence: {sentence.join(" ")}
+        </p>
+        <p className="text-xl font-bold text-primary">AI guessed: {aiGuess}</p>
+        <p className="mt-4 text-lg">
+          {isGuessCorrect() ? (
+            <span className="text-green-600">
+              Correct guess! 🎉 Ready for the next round? Press Enter
+            </span>
+          ) : (
+            <span className="text-red-600">
+              Game Over! Press Enter to play again
+            </span>
+          )}
+        </p>
+      </div>
+      <Button
+        onClick={isGuessCorrect() ? onNextRound : onPlayAgain}
+        className="w-full bg-primary text-lg hover:bg-primary/90"
+      >
+        {isGuessCorrect() ? "Next Round ⏎" : "Play Again ⏎"}
+      </Button>
+    </motion.div>
+  );
+};

src/components/game/SentenceBuilder.tsx

@@ -0,0 +1,102 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { motion } from "framer-motion";
+import { KeyboardEvent, useRef, useEffect } from "react";
+
+interface SentenceBuilderProps {
+  currentWord: string;
+  successfulRounds: number;
+  sentence: string[];
+  playerInput: string;
+  isAiThinking: boolean;
+  onInputChange: (value: string) => void;
+  onSubmitWord: (e: React.FormEvent) => void;
+  onMakeGuess: () => void;
+}
+
+export const SentenceBuilder = ({
+  currentWord,
+  successfulRounds,
+  sentence,
+  playerInput,
+  isAiThinking,
+  onInputChange,
+  onSubmitWord,
+  onMakeGuess,
+}: SentenceBuilderProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setTimeout(() => {
+      inputRef.current?.focus();
+    }, 100);
+  }, []);
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.shiftKey && e.key === 'Enter') {
+      e.preventDefault();
+      if (sentence.length > 0 && !isAiThinking) {
+        onMakeGuess();
+      }
+    }
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      className="text-center"
+    >
+      <h2 className="mb-4 text-2xl font-semibold text-gray-900">
+        Build a Description
+      </h2>
+      <p className="mb-6 text-sm text-gray-600">
+        Take turns with AI to describe your word without using the word itself!
+      </p>
+      <div className="mb-4 rounded-lg bg-secondary/10 p-4">
+        <p className="text-2xl font-bold tracking-wider text-secondary">
+          {currentWord}
+        </p>
+      </div>
+      {successfulRounds > 0 && (
+        <p className="mb-4 text-green-600">
+          Successful rounds: {successfulRounds}
+        </p>
+      )}
+      <div className="mb-6 rounded-lg bg-gray-50 p-4">
+        <p className="text-lg text-gray-800">
+          {sentence.length > 0 ? sentence.join(" ") : "Start your sentence..."}
+        </p>
+      </div>
+      <form onSubmit={onSubmitWord} className="mb-4">
+        <Input
+          ref={inputRef}
+          type="text"
+          value={playerInput}
+          onChange={(e) => onInputChange(e.target.value.replace(/\s/g, ''))}
+          onKeyDown={handleKeyDown}
+          placeholder="Enter your word..."
+          className="mb-4"
+          disabled={isAiThinking}
+        />
+        <div className="flex gap-4">
+          <Button
+            type="submit"
+            className="flex-1 bg-primary text-lg hover:bg-primary/90"
+            disabled={!playerInput.trim() || isAiThinking}
+          >
+            {isAiThinking ? "AI is thinking..." : "Add Word ⏎"}
+          </Button>
+          <Button
+            type="button"
+            onClick={onMakeGuess}
+            className="flex-1 bg-secondary text-lg hover:bg-secondary/90"
+            disabled={sentence.length === 0 || isAiThinking}
+          >
+            {isAiThinking ? "AI is thinking..." : "Make AI Guess ⇧⏎"}
+          </Button>
+        </div>
+      </form>
+    </motion.div>
+  );
+};

src/components/game/WelcomeScreen.tsx

@@ -0,0 +1,27 @@
+import { Button } from "@/components/ui/button";
+import { motion } from "framer-motion";
+
+interface WelcomeScreenProps {
+  onStart: () => void;
+}
+
+export const WelcomeScreen = ({ onStart }: WelcomeScreenProps) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      className="text-center"
+    >
+      <h1 className="mb-6 text-4xl font-bold text-gray-900">Word Game</h1>
+      <p className="mb-8 text-gray-600">
+        Ready to play? Click start or press Enter to begin!
+      </p>
+      <Button
+        onClick={onStart}
+        className="w-full bg-primary text-lg hover:bg-primary/90"
+      >
+        Start Game ⏎
+      </Button>
+    </motion.div>
+  );
+};

src/components/game/WordDisplay.tsx

@@ -0,0 +1,42 @@
+import { Button } from "@/components/ui/button";
+import { motion } from "framer-motion";
+
+interface WordDisplayProps {
+  currentWord: string;
+  successfulRounds: number;
+  onContinue: () => void;
+}
+
+export const WordDisplay = ({ currentWord, successfulRounds, onContinue }: WordDisplayProps) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      className="text-center"
+    >
+      <h2 className="mb-4 text-2xl font-semibold text-gray-900">Your Word</h2>
+      <div className="mb-4 rounded-lg bg-secondary/10 p-6">
+        <p className="text-4xl font-bold tracking-wider text-secondary">
+          {currentWord}
+        </p>
+      </div>
+      {successfulRounds > 0 && (
+        <p className="mb-4 text-green-600">
+          Successful rounds: {successfulRounds}
+        </p>
+      )}
+      <p className="mb-8 text-gray-600">
+        You'll take turns with AI to create a sentence that describes this word.
+      </p>
+      <p className="mb-8 text-gray-600">
+        Click the "Make AI Guess" button to see if another AI can guess it!
+      </p>
+      <Button
+        onClick={onContinue}
+        className="w-full bg-primary text-lg hover:bg-primary/90"
+      >
+        Continue ⏎
+      </Button>
+    </motion.div>
+  );
+};

src/integrations/supabase/types.ts

@@ -9,7 +9,30 @@ export type Json =
 export type Database = {
   public: {
     Tables: {
-      [_ in never]: never
+      high_scores: {
+        Row: {
+          avg_words_per_round: number
+          created_at: string
+          id: string
+          player_name: string
+          score: number
+        }
+        Insert: {
+          avg_words_per_round: number
+          created_at?: string
+          id?: string
+          player_name: string
+          score: number
+        }
+        Update: {
+          avg_words_per_round?: number
+          created_at?: string
+          id?: string
+          player_name?: string
+          score?: number
+        }
+        Relationships: []
+      }
     }
     Views: {
       [_ in never]: never

src/lib/words.ts

@@ -1,4 +1,3 @@
-// A small list of random words for the game
 export const words = [
   "ELEPHANT",
   "SUNSHINE",
@@ -12,7 +11,7 @@ export const words = [
   "DIAMOND",
   "STARDUST",
   "MEADOW",
-  "WILDFLOWER",
+  "FLOWER",
   "HORIZON",
   "JOURNEY",
   "FEATHER",
@@ -34,7 +33,7 @@ export const words = [
   "COMET",
   "WILDERNESS",
   "FREEDOM",
-  "NIGHTFALL",
+  "NIGHT",
   "FANTASY",
   "ADVENTURE",
   "SERENITY",
@@ -51,8 +50,57 @@ export const words = [
   "CRESCENT",
   "WATERFALL",
   "CITADEL",
+  "AURORA",
+  "BLISS",
+  "CASCADE",
+  "DAWN",
+  "ECLIPSE",
+  "FIRELIGHT",
+  "GARDEN",
+  "HAVEN",
+  "INFINITY",
+  "JUBILEE",
+  "KALEIDOSCOPE",
+  "LULLABY",
+  "MARVEL",
+  "NEBULA",
+  "OASIS",
+  "PARADISE",
+  "QUIETUDE",
+  "RADIANCE",
+  "SANCTUARY",
+  "TRanquility",
+  "UNIVERSE",
+  "VELVET",
+  "WONDERLAND",
+  "YIELD",
+  "ABYSS",
+  "BALANCE",
+  "CALM",
+  "DAZZLE",
+  "EMBRACE",
+  "FLICKER",
+  "GLIMMER",
+  "HALO",
+  "ILLUMINATE",
+  "JEWEL",
+  "KINDLE",
+  "LUMINOUS",
+  "MYSTIC",
+  "NIRVANA",
+  "OPULENCE",
+  "PEACE",
+  "QUIET",
+  "RAPTURE",
+  "SERENE",
+  "TRANQUIL",
+  "UNITY",
+  "VISION",
+  "WONDERMENT",
+  "YEARNING",
+  "ZEAL"
 ];
 
 export const getRandomWord = () => {
   return words[Math.floor(Math.random() * words.length)];
-};
+};

src/services/mistralService.ts

@@ -7,6 +7,9 @@ export const generateAIResponse = async (currentWord: string, currentSentence: s
 
   if (error) {
     console.error('Error generating AI response:', error);
+    if (error.message?.includes('rate limit')) {
+      throw new Error('The AI service is currently busy. Please try again in a few moments.');
+    }
     throw error;
   }
 
@@ -25,6 +28,9 @@ export const guessWord = async (sentence: string): Promise<string> => {
 
   if (error) {
     console.error('Error getting AI guess:', error);
+    if (error.message?.includes('rate limit')) {
+      throw new Error('The AI service is currently busy. Please try again in a few moments.');
+    }
     throw error;
   }
 
@@ -34,18 +40,4 @@ export const guessWord = async (sentence: string): Promise<string> => {
 
   console.log('AI guessed:', data.guess);
   return data.guess;
-};
-
-export const validateSentence = async (sentence: string): Promise<boolean> => {
-  const { data, error } = await supabase.functions.invoke('validate-sentence', {
-    body: { sentence }
-  });
-
-  if (error) {
-    console.error('Error validating sentence:', error);
-    throw error;
-  }
-
-  console.log('Sentence validation result:', data.isValid);
-  return data.isValid;
 };

supabase/functions/generate-word/index.ts

@@ -19,44 +19,81 @@ serve(async (req) => {
       apiKey: Deno.env.get('MISTRAL_API_KEY'),
     });
 
-    const response = await client.chat.complete({
-      model: "mistral-large-latest",
-      messages: [
-        {
-          role: "system",
-          content: `You are helping in a word game. The secret word is "${currentWord}". 
+    // Add retry logic with exponential backoff
+    const maxRetries = 3;
+    let retryCount = 0;
+    let lastError = null;
+
+    while (retryCount < maxRetries) {
+      try {
+        const response = await client.chat.complete({
+          model: "mistral-large-latest",
+          messages: [
+            {
+              role: "system",
+              content: `You are helping in a word game. The secret word is "${currentWord}". 
                     Your task is to find a sentence to describe this word without using it directly. 
                     Answer with a complete, grammatically correct sentence that starts with "${currentSentence.join(' ')}".
                     Do not add quotes or backticks. Just answer with the sentence.`
+            }
+          ],
+          maxTokens: 10,
+          temperature: 0.7
+        });
+
+        const aiResponse = response.choices[0].message.content.trim();
+        console.log('AI full response:', aiResponse);
+        
+        // Extract the new word by comparing with the existing sentence
+        const existingWords = currentSentence.join(' ');
+        const newWord = aiResponse
+          .slice(existingWords.length)
+          .trim()
+          .split(' ')[0]
+          .replace(/[.,!?]$/, ''); // Remove any punctuation at the end
+        
+        console.log('Extracted new word:', newWord);
+
+        return new Response(
+          JSON.stringify({ word: newWord }),
+          { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
+        );
+      } catch (error) {
+        console.error(`Attempt ${retryCount + 1} failed:`, error);
+        lastError = error;
+        
+        // If it's a rate limit error, wait before retrying
+        if (error.message?.includes('rate limit') || error.status === 429) {
+          const waitTime = Math.pow(2, retryCount) * 1000; // Exponential backoff: 1s, 2s, 4s
+          console.log(`Rate limit hit, waiting ${waitTime}ms before retry`);
+          await new Promise(resolve => setTimeout(resolve, waitTime));
+          retryCount++;
+          continue;
         }
-      ],
-      maxTokens: 10,
-      temperature: 0.7
-    });
+        
+        // If it's not a rate limit error, throw immediately
+        throw error;
+      }
+    }
 
-    const aiResponse = response.choices[0].message.content.trim();
-    console.log('AI full response:', aiResponse);
-    
-    // Extract the new word by comparing with the existing sentence
-    const existingWords = currentSentence.join(' ');
-    const newWord = aiResponse
-      .slice(existingWords.length)
-      .trim()
-      .split(' ')[0]
-      .replace(/[.,!?]$/, ''); // Remove any punctuation at the end
-    
-    console.log('Extracted new word:', newWord);
+    // If we've exhausted all retries
+    throw new Error(`Failed after ${maxRetries} attempts. Last error: ${lastError?.message}`);
 
-    return new Response(
-      JSON.stringify({ word: newWord }),
-      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
-    );
   } catch (error) {
     console.error('Error generating word:', error);
+    
+    // Provide a more user-friendly error message
+    const errorMessage = error.message?.includes('rate limit') 
+      ? "The AI service is currently busy. Please try again in a few moments."
+      : "Sorry, there was an error generating the word. Please try again.";
+
     return new Response(
-      JSON.stringify({ error: error.message }),
+      JSON.stringify({ 
+        error: errorMessage,
+        details: error.message 
+      }),
       { 
-        status: 500,
+        status: error.message?.includes('rate limit') ? 429 : 500,
         headers: { ...corsHeaders, 'Content-Type': 'application/json' }
       }
     );

supabase/functions/guess-word/index.ts

@@ -19,37 +19,74 @@ serve(async (req) => {
       apiKey: Deno.env.get('MISTRAL_API_KEY'),
     });
 
-    const response = await client.chat.complete({
-      model: "mistral-large-latest",
-      messages: [
-        {
-          role: "system",
-          content: `You are playing a word guessing game. Given a descriptive sentence, your task is to guess the single word being described.
+    // Add retry logic with exponential backoff
+    const maxRetries = 3;
+    let retryCount = 0;
+    let lastError = null;
+
+    while (retryCount < maxRetries) {
+      try {
+        const response = await client.chat.complete({
+          model: "mistral-large-latest",
+          messages: [
+            {
+              role: "system",
+              content: `You are playing a word guessing game. Given a descriptive sentence, your task is to guess the single word being described.
                     Respond with ONLY the word you think is being described, in uppercase letters.
                     Do not add any explanation or punctuation.`
-        },
-        {
-          role: "user",
-          content: `Based on this description, what single word is being described: "${sentence}"`
+            },
+            {
+              role: "user",
+              content: `Based on this description, what single word is being described: "${sentence}"`
+            }
+          ],
+          maxTokens: 10,
+          temperature: 0.2
+        });
+
+        const guess = response.choices[0].message.content.trim().toUpperCase();
+        console.log('AI guess:', guess);
+
+        return new Response(
+          JSON.stringify({ guess }),
+          { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
+        );
+      } catch (error) {
+        console.error(`Attempt ${retryCount + 1} failed:`, error);
+        lastError = error;
+        
+        // If it's a rate limit error, wait before retrying
+        if (error.message?.includes('rate limit') || error.status === 429) {
+          const waitTime = Math.pow(2, retryCount) * 1000; // Exponential backoff: 1s, 2s, 4s
+          console.log(`Rate limit hit, waiting ${waitTime}ms before retry`);
+          await new Promise(resolve => setTimeout(resolve, waitTime));
+          retryCount++;
+          continue;
         }
-      ],
-      maxTokens: 10,
-      temperature: 0.2
-    });
+        
+        // If it's not a rate limit error, throw immediately
+        throw error;
+      }
+    }
 
-    const guess = response.choices[0].message.content.trim().toUpperCase();
-    console.log('AI guess:', guess);
+    // If we've exhausted all retries
+    throw new Error(`Failed after ${maxRetries} attempts. Last error: ${lastError?.message}`);
 
-    return new Response(
-      JSON.stringify({ guess }),
-      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
-    );
   } catch (error) {
     console.error('Error generating guess:', error);
+    
+    // Provide a more user-friendly error message
+    const errorMessage = error.message?.includes('rate limit') 
+      ? "The AI service is currently busy. Please try again in a few moments."
+      : "Sorry, there was an error generating the guess. Please try again.";
+
     return new Response(
-      JSON.stringify({ error: error.message }),
+      JSON.stringify({ 
+        error: errorMessage,
+        details: error.message 
+      }),
       { 
-        status: 500,
+        status: error.message?.includes('rate limit') ? 429 : 500,
         headers: { ...corsHeaders, 'Content-Type': 'application/json' }
       }
     );