multi language support

src/App.tsx

@@ -3,22 +3,25 @@ import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { LanguageProvider } from "./contexts/LanguageContext";
 import Index from "./pages/Index";
 
 const queryClient = new QueryClient();
 
 const App = () => (
   <QueryClientProvider client={queryClient}>
-    <TooltipProvider>
-      <Toaster />
-      <Sonner />
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<Index />} />
-        </Routes>
-      </BrowserRouter>
-    </TooltipProvider>
+    <LanguageProvider>
+      <TooltipProvider>
+        <Toaster />
+        <Sonner />
+        <BrowserRouter>
+          <Routes>
+            <Route path="/" element={<Index />} />
+          </Routes>
+        </BrowserRouter>
+      </TooltipProvider>
+    </LanguageProvider>
   </QueryClientProvider>
 );
 
-export default App;
+export default App;

src/components/GameContainer.tsx

@@ -1,4 +1,4 @@
-import { useState, KeyboardEvent, useEffect } from "react";
+import { useState, KeyboardEvent, useEffect, useContext } from "react";
 import { getRandomWord } from "@/lib/words";
 import { motion } from "framer-motion";
 import { generateAIResponse, guessWord } from "@/services/mistralService";
@@ -9,6 +9,8 @@ import { ThemeSelector } from "./game/ThemeSelector";
 import { SentenceBuilder } from "./game/SentenceBuilder";
 import { GuessDisplay } from "./game/GuessDisplay";
 import { GameOver } from "./game/GameOver";
+import { useTranslation } from "@/hooks/useTranslation";
+import { LanguageContext } from "@/contexts/LanguageContext";
 
 type GameState = "welcome" | "theme-selection" | "building-sentence" | "showing-guess" | "game-over";
 
@@ -24,6 +26,8 @@ export const GameContainer = () => {
   const [totalWords, setTotalWords] = useState<number>(0);
   const [usedWords, setUsedWords] = useState<string[]>([]);
   const { toast } = useToast();
+  const t = useTranslation();
+  const { language } = useContext(LanguageContext);
 
   useEffect(() => {
     const handleKeyPress = (e: KeyboardEvent) => {
@@ -52,13 +56,15 @@ export const GameContainer = () => {
   const handleThemeSelect = async (theme: string) => {
     setCurrentTheme(theme);
     try {
-      const word = theme === "standard" ? getRandomWord() : await getThemedWord(theme, usedWords);
+      const word = theme === "standard" ? 
+        getRandomWord() : 
+        await getThemedWord(theme, usedWords, language);
       setCurrentWord(word);
       setGameState("building-sentence");
       setSuccessfulRounds(0);
       setTotalWords(0);
-      setUsedWords([word]); // Initialize used words with the first word
-      console.log("Game started with word:", word, "theme:", theme);
+      setUsedWords([word]);
+      console.log("Game started with word:", word, "theme:", theme, "language:", language);
     } catch (error) {
       console.error('Error getting themed word:', error);
       toast({
@@ -88,8 +94,8 @@ export const GameContainer = () => {
     } 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.",
+        title: t.game.aiThinking,
+        description: t.game.aiDelayed,
         variant: "default",
       });
     } finally {
@@ -224,4 +230,4 @@ export const GameContainer = () => {
       </motion.div>
     </div>
   );
-};
+};

src/components/HighScoreBoard.tsx

@@ -20,6 +20,7 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from "@/components/ui/pagination";
+import { useTranslation } from "@/hooks/useTranslation";
 
 interface HighScore {
   id: string;
@@ -62,6 +63,7 @@ export const HighScoreBoard = ({
   const [hasSubmitted, setHasSubmitted] = useState(false);
   const [currentPage, setCurrentPage] = useState(1);
   const { toast } = useToast();
+  const t = useTranslation();
 
   const { data: highScores, refetch } = useQuery({
     queryKey: ["highScores"],
@@ -78,11 +80,10 @@ export const HighScoreBoard = ({
   });
 
   const handleSubmitScore = async () => {
-    // Validate player name (only alphanumeric characters allowed)
     if (!playerName.trim() || !/^[a-zA-Z0-9]+$/.test(playerName.trim())) {
       toast({
-        title: "Error",
-        description: "Please enter a valid name (only letters and numbers allowed)",
+        title: t.leaderboard.error.invalidName,
+        description: t.leaderboard.error.invalidName,
         variant: "destructive",
       });
       return;
@@ -90,8 +91,8 @@ export const HighScoreBoard = ({
 
     if (currentScore < 1) {
       toast({
-        title: "Error",
-        description: "You need to complete at least one round to submit a score",
+        title: t.leaderboard.error.noRounds,
+        description: t.leaderboard.error.noRounds,
         variant: "destructive",
       });
       return;
@@ -99,8 +100,8 @@ export const HighScoreBoard = ({
 
     if (hasSubmitted) {
       toast({
-        title: "Error",
-        description: "You have already submitted your score for this game",
+        title: t.leaderboard.error.alreadySubmitted,
+        description: t.leaderboard.error.alreadySubmitted,
         variant: "destructive",
       });
       return;
@@ -108,7 +109,6 @@ export const HighScoreBoard = ({
 
     setIsSubmitting(true);
     try {
-      // Check if player already exists
       const { data: existingScores } = await supabase
         .from("high_scores")
         .select("*")
@@ -117,7 +117,6 @@ export const HighScoreBoard = ({
       const existingScore = existingScores?.[0];
 
       if (existingScore) {
-        // Only update if the new score is better
         if (currentScore > existingScore.score) {
           const { error } = await supabase
             .from("high_scores")
@@ -130,20 +129,20 @@ export const HighScoreBoard = ({
           if (error) throw error;
 
           toast({
-            title: "New High Score!",
-            description: `You beat your previous record of ${existingScore.score} rounds!`,
+            title: t.leaderboard.error.newHighScore,
+            description: t.leaderboard.error.beatRecord.replace("{score}", String(existingScore.score)),
           });
         } else {
           toast({
-            title: "Score Not Updated",
-            description: `Your current score (${currentScore}) is not higher than your best score (${existingScore.score})`,
+            title: t.leaderboard.error.notHigher
+              .replace("{current}", String(currentScore))
+              .replace("{best}", String(existingScore.score)),
             variant: "destructive",
           });
           setIsSubmitting(false);
           return;
         }
       } else {
-        // Insert new score
         const { error } = await supabase.from("high_scores").insert({
           player_name: playerName.trim(),
           score: currentScore,
@@ -151,11 +150,6 @@ export const HighScoreBoard = ({
         });
 
         if (error) throw error;
-
-        toast({
-          title: "Success!",
-          description: "Your score has been recorded",
-        });
       }
       
       setHasSubmitted(true);
@@ -164,8 +158,8 @@ export const HighScoreBoard = ({
     } catch (error) {
       console.error("Error submitting score:", error);
       toast({
-        title: "Error",
-        description: "Failed to submit score. Please try again.",
+        title: t.leaderboard.error.submitError,
+        description: t.leaderboard.error.submitError,
         variant: "destructive",
       });
     } finally {
@@ -212,20 +206,19 @@ export const HighScoreBoard = ({
   return (
     <div className="space-y-6">
       <div className="text-center">
-        <h2 className="text-2xl font-bold mb-2">Leaderboard</h2>
+        <h2 className="text-2xl font-bold mb-2">{t.leaderboard.title}</h2>
         <p className="text-gray-600">
-          Your score: {currentScore} rounds
-          {currentScore > 0 && ` (${avgWordsPerRound.toFixed(1)} words/round)`}
+          {t.leaderboard.yourScore}: {currentScore} {t.leaderboard.roundCount}
+          {currentScore > 0 && ` (${avgWordsPerRound.toFixed(1)} ${t.leaderboard.wordsPerRound})`}
         </p>
       </div>
 
       {!hasSubmitted && currentScore > 0 && (
         <div className="flex gap-4 mb-6">
           <Input
-            placeholder="Enter your name (letters and numbers only)"
+            placeholder={t.leaderboard.enterName}
             value={playerName}
             onChange={(e) => {
-              // Only allow alphanumeric input
               const value = e.target.value.replace(/[^a-zA-Z0-9]/g, '');
               setPlayerName(value);
             }}
@@ -237,7 +230,7 @@ export const HighScoreBoard = ({
             onClick={handleSubmitScore}
             disabled={isSubmitting || !playerName.trim() || hasSubmitted}
           >
-            {isSubmitting ? "Submitting..." : "Submit Score"}
+            {isSubmitting ? t.leaderboard.submitting : t.leaderboard.submit}
           </Button>
         </div>
       )}
@@ -246,10 +239,10 @@ export const HighScoreBoard = ({
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead>Rank</TableHead>
-              <TableHead>Player</TableHead>
-              <TableHead>Rounds</TableHead>
-              <TableHead>Avg Words/Round</TableHead>
+              <TableHead>{t.leaderboard.rank}</TableHead>
+              <TableHead>{t.leaderboard.player}</TableHead>
+              <TableHead>{t.leaderboard.roundsColumn}</TableHead>
+              <TableHead>{t.leaderboard.avgWords}</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -271,7 +264,7 @@ export const HighScoreBoard = ({
             {!paginatedScores?.length && (
               <TableRow>
                 <TableCell colSpan={4} className="text-center">
-                  No high scores yet. Be the first!
+                  {t.leaderboard.noScores}
                 </TableCell>
               </TableRow>
             )}
@@ -287,7 +280,7 @@ export const HighScoreBoard = ({
                 onClick={handlePreviousPage}
                 className={currentPage === 1 ? "pointer-events-none opacity-50" : ""}
               >
-                <span className="hidden sm:inline">Previous</span>
+                <span className="hidden sm:inline">{t.leaderboard.previous}</span>
                 <span className="text-xs text-muted-foreground ml-1">←</span>
               </PaginationPrevious>
             </PaginationItem>
@@ -306,19 +299,13 @@ export const HighScoreBoard = ({
                 onClick={handleNextPage}
                 className={currentPage === totalPages ? "pointer-events-none opacity-50" : ""}
               >
-                <span className="hidden sm:inline">Next</span>
+                <span className="hidden sm:inline">{t.leaderboard.next}</span>
                 <span className="text-xs text-muted-foreground ml-1">→</span>
               </PaginationNext>
             </PaginationItem>
           </PaginationContent>
         </Pagination>
       )}
-
-      <div className="flex justify-end">
-        <Button variant="outline" onClick={onClose}>
-          Close <span className="text-xs text-muted-foreground ml-1">Esc</span>
-        </Button>
-      </div>
     </div>
   );
 };

src/components/game/GuessDisplay.tsx

@@ -7,6 +7,7 @@ import {
 } from "@/components/ui/dialog";
 import { HighScoreBoard } from "@/components/HighScoreBoard";
 import { useState } from "react";
+import { useTranslation } from "@/hooks/useTranslation";
 
 interface GuessDisplayProps {
   sentence: string[];
@@ -29,6 +30,7 @@ export const GuessDisplay = ({
 }: GuessDisplayProps) => {
   const isGuessCorrect = () => aiGuess.toLowerCase() === currentWord.toLowerCase();
   const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const t = useTranslation();
 
   return (
     <motion.div
@@ -36,21 +38,19 @@ export const GuessDisplay = ({
       animate={{ opacity: 1 }}
       className="text-center"
     >
-      <h2 className="mb-4 text-2xl font-semibold text-gray-900">AI's Guess</h2>
+      <h2 className="mb-4 text-2xl font-semibold text-gray-900">{t.guess.title}</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(" ")}
+          {t.guess.sentence}: {sentence.join(" ")}
+        </p>
+        <p className="text-xl font-bold text-primary">
+          {t.guess.aiGuessed}: {aiGuess}
         </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-green-600">{t.guess.correct}</span>
           ) : (
-            <span className="text-red-600">
-              Game Over! Press Enter to play again
-            </span>
+            <span className="text-red-600">{t.guess.incorrect}</span>
           )}
         </p>
       </div>
@@ -60,7 +60,7 @@ export const GuessDisplay = ({
             onClick={onNextRound}
             className="w-full bg-primary text-lg hover:bg-primary/90"
           >
-            Next Round ⏎
+            {t.guess.nextRound} ⏎
           </Button>
         ) : (
           <>
@@ -69,7 +69,7 @@ export const GuessDisplay = ({
                 <Button
                   className="w-full bg-secondary text-lg hover:bg-secondary/90"
                 >
-                  View Leaderboard 🏆 
+                  {t.guess.viewLeaderboard} 🏆
                 </Button>
               </DialogTrigger>
               <DialogContent className="max-w-md bg-white">
@@ -88,11 +88,11 @@ export const GuessDisplay = ({
               onClick={onPlayAgain}
               className="w-full bg-primary text-lg hover:bg-primary/90"
             >
-              Play Again ⏎
+              {t.guess.playAgain} ⏎
             </Button>
           </>
         )}
       </div>
     </motion.div>
   );
-};
+};

src/components/game/LanguageSelector.tsx

@@ -0,0 +1,32 @@
+import { Button } from "@/components/ui/button";
+import { useContext } from "react";
+import { LanguageContext } from "@/contexts/LanguageContext";
+import { Language } from "@/i18n/translations";
+
+const languages: { code: Language; name: string; flag: string }[] = [
+  { code: 'en', name: 'English', flag: '🇬🇧' },
+  { code: 'fr', name: 'Français', flag: '🇫🇷' },
+  { code: 'de', name: 'Deutsch', flag: '🇩🇪' },
+  { code: 'it', name: 'Italiano', flag: '🇮🇹' },
+  { code: 'es', name: 'Español', flag: '🇪🇸' },
+];
+
+export const LanguageSelector = () => {
+  const { language, setLanguage } = useContext(LanguageContext);
+
+  return (
+    <div className="flex flex-wrap justify-center gap-2 mb-4">
+      {languages.map(({ code, name, flag }) => (
+        <Button
+          key={code}
+          variant={language === code ? "default" : "outline"}
+          onClick={() => setLanguage(code)}
+          className="flex items-center gap-2"
+        >
+          <span>{flag}</span>
+          <span>{name}</span>
+        </Button>
+      ))}
+    </div>
+  );
+};

src/components/game/SentenceBuilder.tsx

@@ -3,6 +3,7 @@ import { Input } from "@/components/ui/input";
 import { motion } from "framer-motion";
 import { KeyboardEvent, useRef, useEffect, useState } from "react";
 import { useToast } from "@/hooks/use-toast";
+import { useTranslation } from "@/hooks/useTranslation";
 
 interface SentenceBuilderProps {
   currentWord: string;
@@ -29,6 +30,7 @@ export const SentenceBuilder = ({
   const [imageLoaded, setImageLoaded] = useState(false);
   const imagePath = `/think_in_sync_assets/${currentWord.toLowerCase()}.jpg`;
   const { toast } = useToast();
+  const t = useTranslation();
 
   useEffect(() => {
     const img = new Image();
@@ -37,14 +39,12 @@ export const SentenceBuilder = ({
     console.log("Attempting to load image:", imagePath);
   }, [imagePath]);
 
-  // Focus input on initial render
   useEffect(() => {
     setTimeout(() => {
       inputRef.current?.focus();
     }, 100);
   }, []);
 
-  // Focus input after AI finishes thinking
   useEffect(() => {
     if (!isAiThinking && sentence.length > 0 && sentence.length % 2 === 0) {
       setTimeout(() => {
@@ -59,7 +59,6 @@ export const SentenceBuilder = ({
       if (playerInput.trim()) {
         handleSubmit(e as any);
       }
-      // Make the guess immediately without waiting for AI response
       onMakeGuess();
     }
   };
@@ -69,11 +68,10 @@ export const SentenceBuilder = ({
     const input = playerInput.trim().toLowerCase();
     const target = currentWord.toLowerCase();
 
-    // Check if the input contains only letters
     if (!/^[a-zA-Z]+$/.test(input)) {
       toast({
-        title: "Invalid Word",
-        description: "Please use only letters (no numbers or special characters)",
+        title: t.game.invalidWord,
+        description: t.game.lettersOnly,
         variant: "destructive",
       });
       return;
@@ -81,8 +79,8 @@ export const SentenceBuilder = ({
 
     if (input.includes(target)) {
       toast({
-        title: "Invalid Word",
-        description: `You cannot use words that contain "${currentWord}"`,
+        title: t.game.invalidWord,
+        description: `${t.game.cantUseTargetWord} "${currentWord}"`,
         variant: "destructive",
       });
       return;
@@ -98,10 +96,10 @@ export const SentenceBuilder = ({
       className="text-center"
     >
       <h2 className="mb-4 text-2xl font-semibold text-gray-900">
-        Build a Description
+        {t.game.buildDescription}
       </h2>
       <p className="mb-6 text-sm text-gray-600">
-        Take turns with AI to describe your word without using the word itself!
+        {t.game.buildSubtitle}
       </p>
       <div className="mb-4 overflow-hidden rounded-lg bg-secondary/10">
         {imageLoaded && (
@@ -117,7 +115,7 @@ export const SentenceBuilder = ({
       </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..."}
+          {sentence.length > 0 ? sentence.join(" ") : t.game.startSentence}
         </p>
       </div>
       <form onSubmit={handleSubmit} className="mb-4">
@@ -126,12 +124,11 @@ export const SentenceBuilder = ({
           type="text"
           value={playerInput}
           onChange={(e) => {
-            // Only allow letters in the input
             const value = e.target.value.replace(/[^a-zA-Z]/g, '');
             onInputChange(value);
           }}
           onKeyDown={handleKeyDown}
-          placeholder="Enter your word (letters only)..."
+          placeholder={t.game.inputPlaceholder}
           className="mb-4"
           disabled={isAiThinking}
         />
@@ -141,7 +138,7 @@ export const SentenceBuilder = ({
             className="flex-1 bg-primary text-lg hover:bg-primary/90"
             disabled={!playerInput.trim() || isAiThinking}
           >
-            {isAiThinking ? "AI is thinking..." : "Add Word ⏎"}
+            {isAiThinking ? t.game.aiThinking : t.game.addWord}
           </Button>
           <Button
             type="button"
@@ -149,7 +146,7 @@ export const SentenceBuilder = ({
             className="flex-1 bg-secondary text-lg hover:bg-secondary/90"
             disabled={(!sentence.length && !playerInput.trim()) || isAiThinking}
           >
-            {isAiThinking ? "AI is thinking..." : "Make AI Guess ⇧⏎"}
+            {isAiThinking ? t.game.aiThinking : t.game.makeGuess}
           </Button>
         </div>
       </form>

src/components/game/ThemeSelector.tsx

@@ -2,8 +2,11 @@ import { useState, useEffect, useRef } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { motion } from "framer-motion";
+import { useTranslation } from "@/hooks/useTranslation";
+import { useContext } from "react";
+import { LanguageContext } from "@/contexts/LanguageContext";
 
-type Theme = "standard" | "sports" | "food" | "custom";
+type Theme = "standard" | "technology" | "sports" | "food" | "custom";
 
 interface ThemeSelectorProps {
   onThemeSelect: (theme: string) => void;
@@ -14,14 +17,26 @@ export const ThemeSelector = ({ onThemeSelect }: ThemeSelectorProps) => {
   const [customTheme, setCustomTheme] = useState("");
   const [isGenerating, setIsGenerating] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
+  const t = useTranslation();
+  const { language } = useContext(LanguageContext);
+
+  useEffect(() => {
+    if (language !== 'en') {
+      setSelectedTheme("technology");
+    }
+  }, [language]);
 
   useEffect(() => {
     const handleKeyPress = (e: KeyboardEvent) => {
-      if (e.target instanceof HTMLInputElement) return; // Ignore when typing in input
+      if (e.target instanceof HTMLInputElement) return;
       
       switch(e.key.toLowerCase()) {
         case 'a':
-          setSelectedTheme("standard");
+          if (language === 'en') {
+            setSelectedTheme("standard");
+          } else {
+            setSelectedTheme("technology");
+          }
           break;
         case 'b':
           setSelectedTheme("sports");
@@ -30,7 +45,7 @@ export const ThemeSelector = ({ onThemeSelect }: ThemeSelectorProps) => {
           setSelectedTheme("food");
           break;
         case 'd':
-          e.preventDefault(); // Prevent 'd' from being entered in the input
+          e.preventDefault();
           setSelectedTheme("custom");
           break;
         case 'enter':
@@ -43,7 +58,7 @@ export const ThemeSelector = ({ onThemeSelect }: ThemeSelectorProps) => {
 
     window.addEventListener('keydown', handleKeyPress);
     return () => window.removeEventListener('keydown', handleKeyPress);
-  }, [selectedTheme, customTheme]);
+  }, [selectedTheme, customTheme, language]);
 
   useEffect(() => {
     if (selectedTheme === "custom") {
@@ -77,25 +92,35 @@ export const ThemeSelector = ({ onThemeSelect }: ThemeSelectorProps) => {
       className="space-y-6"
     >
       <div className="text-center space-y-2">
-        <h2 className="text-2xl font-bold text-gray-900">Choose a Theme</h2>
-        <p className="text-gray-600">Select a theme for your word-guessing adventure</p>
+        <h2 className="text-2xl font-bold text-gray-900">{t.themes.title}</h2>
+        <p className="text-gray-600">{t.themes.subtitle}</p>
       </div>
 
       <div className="space-y-4">
-        <Button
-          variant={selectedTheme === "standard" ? "default" : "outline"}
-          className="w-full justify-between"
-          onClick={() => setSelectedTheme("standard")}
-        >
-          Standard <span className="text-sm opacity-50">Press A</span>
-        </Button>
+        {language === 'en' ? (
+          <Button
+            variant={selectedTheme === "standard" ? "default" : "outline"}
+            className="w-full justify-between"
+            onClick={() => setSelectedTheme("standard")}
+          >
+            {t.themes.standard} <span className="text-sm opacity-50">{t.themes.pressKey} A</span>
+          </Button>
+        ) : (
+          <Button
+            variant={selectedTheme === "technology" ? "default" : "outline"}
+            className="w-full justify-between"
+            onClick={() => setSelectedTheme("technology")}
+          >
+            {t.themes.technology} <span className="text-sm opacity-50">{t.themes.pressKey} A</span>
+          </Button>
+        )}
         
         <Button
           variant={selectedTheme === "sports" ? "default" : "outline"}
           className="w-full justify-between"
           onClick={() => setSelectedTheme("sports")}
         >
-          Sports <span className="text-sm opacity-50">Press B</span>
+          {t.themes.sports} <span className="text-sm opacity-50">{t.themes.pressKey} B</span>
         </Button>
         
         <Button
@@ -103,7 +128,7 @@ export const ThemeSelector = ({ onThemeSelect }: ThemeSelectorProps) => {
           className="w-full justify-between"
           onClick={() => setSelectedTheme("food")}
         >
-          Food <span className="text-sm opacity-50">Press C</span>
+          {t.themes.food} <span className="text-sm opacity-50">{t.themes.pressKey} C</span>
         </Button>
 
         <Button
@@ -111,7 +136,7 @@ export const ThemeSelector = ({ onThemeSelect }: ThemeSelectorProps) => {
           className="w-full justify-between"
           onClick={() => setSelectedTheme("custom")}
         >
-          Choose your theme <span className="text-sm opacity-50">Press D</span>
+          {t.themes.custom} <span className="text-sm opacity-50">{t.themes.pressKey} D</span>
         </Button>
 
         {selectedTheme === "custom" && (
@@ -124,7 +149,7 @@ export const ThemeSelector = ({ onThemeSelect }: ThemeSelectorProps) => {
             <Input
               ref={inputRef}
               type="text"
-              placeholder="Enter a theme (e.g., Animals, Movies)"
+              placeholder={t.themes.customPlaceholder}
               value={customTheme}
               onChange={(e) => setCustomTheme(e.target.value)}
               onKeyPress={handleInputKeyPress}
@@ -139,7 +164,7 @@ export const ThemeSelector = ({ onThemeSelect }: ThemeSelectorProps) => {
         className="w-full"
         disabled={selectedTheme === "custom" && !customTheme.trim() || isGenerating}
       >
-        {isGenerating ? "Generating themed words..." : "Continue ⏎"}
+        {isGenerating ? t.themes.generating : `${t.themes.continue} ⏎`}
       </Button>
     </motion.div>
   );

src/components/game/WelcomeScreen.tsx

@@ -3,7 +3,10 @@ import { motion } from "framer-motion";
 import { useState } from "react";
 import { HighScoreBoard } from "../HighScoreBoard";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import { Card, CardContent } from "@/components/ui/card";
+import { LanguageSelector } from "./LanguageSelector";
+import { useTranslation } from "@/hooks/useTranslation";
+import { useContext } from "react";
+import { LanguageContext } from "@/contexts/LanguageContext";
 
 interface WelcomeScreenProps {
   onStart: () => void;
@@ -12,30 +15,8 @@ interface WelcomeScreenProps {
 export const WelcomeScreen = ({ onStart }: WelcomeScreenProps) => {
   const [showHighScores, setShowHighScores] = useState(false);
   const [showHowToPlay, setShowHowToPlay] = useState(false);
-
-  const HowToPlayContent = () => (
-    <div className="space-y-6">
-      <div className="grid gap-4 text-gray-600">
-        <div>
-          <h3 className="font-medium text-gray-800">The Setup</h3>
-          <p>You'll work with two AIs: one as your partner giving clues, and another trying to guess the word.</p>
-        </div>
-        <div>
-          <h3 className="font-medium text-gray-800">Your Goal</h3>
-          <p>Help the AI guess the secret word using one-word clues. Each correct guess earns you a point!</p>
-        </div>
-        <div>
-          <h3 className="font-medium text-gray-800">The Rules</h3>
-          <ul className="list-disc list-inside space-y-1">
-            <li>One word per clue only</li>
-            <li>No parts of the secret word or translations</li>
-            <li>Clues must relate to the word (be creative!)</li>
-            <li>No spelling out the answer</li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  );
+  const t = useTranslation();
+  const { language } = useContext(LanguageContext);
 
   return (
     <>
@@ -44,10 +25,12 @@ export const WelcomeScreen = ({ onStart }: WelcomeScreenProps) => {
         animate={{ opacity: 1 }}
         className="max-w-2xl mx-auto text-center space-y-8"
       >
+        <LanguageSelector />
+        
         <div>
-          <h1 className="mb-4 text-4xl font-bold text-gray-900">Think in Sync</h1>
+          <h1 className="mb-4 text-4xl font-bold text-gray-900">{t.welcome.title}</h1>
           <p className="text-lg text-gray-600">
-            In this game you team up with AI to guess secret words!
+            {t.welcome.subtitle}
           </p>
         </div>
 
@@ -56,7 +39,7 @@ export const WelcomeScreen = ({ onStart }: WelcomeScreenProps) => {
             onClick={onStart}
             className="w-full bg-primary text-lg hover:bg-primary/90"
           >
-            Start Game ⏎
+            {t.welcome.startButton} ⏎
           </Button>
           <div className="grid grid-cols-2 gap-4">
             <Button
@@ -64,14 +47,14 @@ export const WelcomeScreen = ({ onStart }: WelcomeScreenProps) => {
               variant="outline"
               className="text-lg"
             >
-              How to Play 📖
+              {t.welcome.howToPlay} 📖
             </Button>
             <Button
               onClick={() => setShowHighScores(true)}
               variant="outline"
               className="text-lg"
             >
-              Leaderboard 🏆
+              {t.welcome.leaderboard} 🏆
             </Button>
           </div>
         </div>
@@ -91,11 +74,30 @@ export const WelcomeScreen = ({ onStart }: WelcomeScreenProps) => {
       <Dialog open={showHowToPlay} onOpenChange={setShowHowToPlay}>
         <DialogContent className="sm:max-w-[600px]">
           <DialogHeader>
-            <DialogTitle className="text-xl font-semibold text-primary">How to Play</DialogTitle>
+            <DialogTitle className="text-xl font-semibold text-primary">{t.welcome.howToPlay}</DialogTitle>
           </DialogHeader>
-          <HowToPlayContent />
+          <div className="space-y-6">
+            <div className="grid gap-4 text-gray-600">
+              <div>
+                <h3 className="font-medium text-gray-800">{t.howToPlay.setup.title}</h3>
+                <p>{t.howToPlay.setup.description}</p>
+              </div>
+              <div>
+                <h3 className="font-medium text-gray-800">{t.howToPlay.goal.title}</h3>
+                <p>{t.howToPlay.goal.description}</p>
+              </div>
+              <div>
+                <h3 className="font-medium text-gray-800">{t.howToPlay.rules.title}</h3>
+                <ul className="list-disc list-inside space-y-1">
+                  {t.howToPlay.rules.items.map((rule, index) => (
+                    <li key={index}>{rule}</li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </div>
         </DialogContent>
       </Dialog>
     </>
   );
-};
+};

src/contexts/LanguageContext.tsx

@@ -0,0 +1,38 @@
+import { createContext, useState, useEffect, ReactNode } from 'react';
+import { Language } from '@/i18n/translations';
+
+interface LanguageContextType {
+  language: Language;
+  setLanguage: (lang: Language) => void;
+}
+
+export const LanguageContext = createContext<LanguageContextType>({
+  language: 'en',
+  setLanguage: () => {},
+});
+
+interface LanguageProviderProps {
+  children: ReactNode;
+}
+
+export const LanguageProvider = ({ children }: LanguageProviderProps) => {
+  const [language, setLanguage] = useState<Language>('en');
+
+  useEffect(() => {
+    const savedLang = localStorage.getItem('language') as Language;
+    if (savedLang && ['en', 'fr', 'de', 'it', 'es'].includes(savedLang)) {
+      setLanguage(savedLang);
+    }
+  }, []);
+
+  const handleSetLanguage = (lang: Language) => {
+    setLanguage(lang);
+    localStorage.setItem('language', lang);
+  };
+
+  return (
+    <LanguageContext.Provider value={{ language, setLanguage: handleSetLanguage }}>
+      {children}
+    </LanguageContext.Provider>
+  );
+};

src/hooks/useTranslation.ts

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { LanguageContext } from '@/contexts/LanguageContext';
+import { translations } from '@/i18n/translations';
+
+export const useTranslation = () => {
+  const { language } = useContext(LanguageContext);
+  return translations[language];
+};

src/i18n/translations/de.ts

@@ -0,0 +1,94 @@
+export const de = {
+  welcome: {
+    title: "Denken im Einklang",
+    subtitle: "In diesem Spiel arbeiten Sie mit KI zusammen, um geheime Wörter zu erraten!",
+    startButton: "Spiel Starten",
+    howToPlay: "Spielanleitung",
+    leaderboard: "Bestenliste"
+  },
+  howToPlay: {
+    setup: {
+      title: "Der Aufbau",
+      description: "Sie arbeiten mit zwei KIs: eine als Partner, der Hinweise gibt, und eine andere, die versucht, das Wort zu erraten."
+    },
+    goal: {
+      title: "Ihr Ziel",
+      description: "Helfen Sie der KI, das geheime Wort mit Einwort-Hinweisen zu erraten. Jede richtige Vermutung bringt Ihnen einen Punkt!"
+    },
+    rules: {
+      title: "Die Regeln",
+      items: [
+        "Nur ein Wort pro Hinweis",
+        "Keine Teile des geheimen Wortes oder Übersetzungen",
+        "Hinweise müssen sich auf das Wort beziehen (seien Sie kreativ!)",
+        "Keine Buchstabierung der Antwort"
+      ]
+    }
+  },
+  game: {
+    buildDescription: "Beschreibung Erstellen",
+    buildSubtitle: "Wechseln Sie sich mit der KI ab, um Ihr Wort zu beschreiben, ohne das Wort selbst zu verwenden!",
+    startSentence: "Beginnen Sie Ihren Satz...",
+    inputPlaceholder: "Geben Sie Ihr Wort ein (nur Buchstaben)...",
+    addWord: "Wort Hinzufügen",
+    makeGuess: "KI Raten Lassen",
+    aiThinking: "KI denkt nach...",
+    aiDelayed: "Die KI ist derzeit beschäftigt. Bitte versuchen Sie es in einem Moment erneut.",
+    invalidWord: "Ungültiges Wort",
+    cantUseTargetWord: "Sie können keine Wörter verwenden, die enthalten",
+    lettersOnly: "Bitte verwenden Sie nur Buchstaben (keine Zahlen oder Sonderzeichen)"
+  },
+  guess: {
+    title: "KI-Vermutung",
+    sentence: "Ihr Satz",
+    aiGuessed: "KI hat geraten",
+    correct: "Richtig geraten! 🎉 Bereit für die nächste Runde? Drücken Sie Enter",
+    incorrect: "Spiel vorbei! Drücken Sie Enter zum Neustart",
+    nextRound: "Nächste Runde",
+    playAgain: "Erneut Spielen",
+    viewLeaderboard: "Bestenliste Anzeigen"
+  },
+  gameOver: {
+    title: "Spiel Vorbei!",
+    completedRounds: "Sie haben {count} Runden erfolgreich abgeschlossen!",
+    playAgain: "Erneut Spielen"
+  },
+  themes: {
+    title: "Thema Wählen",
+    subtitle: "Wählen Sie ein Thema für Ihr Wörter-Rate-Abenteuer",
+    standard: "",
+    technology: "Technologie",
+    sports: "Sport",
+    food: "Essen",
+    custom: "Wählen Sie Ihr Thema",
+    customPlaceholder: "Geben Sie ein Thema ein (z.B. Tiere, Filme)",
+    continue: "Weiter",
+    generating: "Generiere thematische Wörter...",
+    pressKey: "Drücken Sie"
+  },
+  leaderboard: {
+    title: "Bestenliste",
+    yourScore: "Ihre Punktzahl",
+    roundCount: "Runden",
+    wordsPerRound: "Wörter/Runde",
+    enterName: "Geben Sie Ihren Namen ein (nur Buchstaben und Zahlen)",
+    submit: "Punktzahl Einreichen",
+    submitting: "Wird eingereicht...",
+    rank: "Rang",
+    player: "Spieler",
+    roundsColumn: "Runden",
+    avgWords: "Durchschn. Wörter/Runde",
+    noScores: "Noch keine Highscores. Seien Sie der Erste!",
+    previous: "Zurück",
+    next: "Weiter",
+    error: {
+      invalidName: "Bitte geben Sie einen gültigen Namen ein (nur Buchstaben und Zahlen)",
+      noRounds: "Sie müssen mindestens eine Runde abschließen, um eine Punktzahl einzureichen",
+      alreadySubmitted: "Sie haben Ihre Punktzahl für dieses Spiel bereits eingereicht",
+      newHighScore: "Neuer Highscore!",
+      beatRecord: "Sie haben Ihren bisherigen Rekord von {score} Runden übertroffen!",
+      notHigher: "Ihre aktuelle Punktzahl ({current}) ist nicht höher als Ihre beste Punktzahl ({best})",
+      submitError: "Fehler beim Einreichen der Punktzahl. Bitte versuchen Sie es erneut."
+    }
+  }
+};

src/i18n/translations/en.ts

@@ -0,0 +1,94 @@
+export const en = {
+  welcome: {
+    title: "Think in Sync",
+    subtitle: "In this game you team up with AI to guess secret words!",
+    startButton: "Start Game",
+    howToPlay: "How to Play",
+    leaderboard: "Leaderboard"
+  },
+  howToPlay: {
+    setup: {
+      title: "The Setup",
+      description: "You'll work with two AIs: one as your partner giving clues, and another trying to guess the word."
+    },
+    goal: {
+      title: "Your Goal",
+      description: "Help the AI guess the secret word using one-word clues. Each correct guess earns you a point!"
+    },
+    rules: {
+      title: "The Rules",
+      items: [
+        "One word per clue only",
+        "No parts of the secret word or translations",
+        "Clues must relate to the word (be creative!)",
+        "No spelling out the answer"
+      ]
+    }
+  },
+  game: {
+    buildDescription: "Build a Description",
+    buildSubtitle: "Take turns with AI to describe your word without using the word itself!",
+    startSentence: "Start your sentence...",
+    inputPlaceholder: "Enter your word (letters only)...",
+    addWord: "Add Word",
+    makeGuess: "Make AI Guess",
+    aiThinking: "AI is thinking...",
+    aiDelayed: "The AI is currently busy. Please try again in a moment.",
+    invalidWord: "Invalid Word",
+    cantUseTargetWord: "You cannot use words that contain",
+    lettersOnly: "Please use only letters (no numbers or special characters)"
+  },
+  guess: {
+    title: "AI's Guess",
+    sentence: "Your sentence",
+    aiGuessed: "AI guessed",
+    correct: "Correct guess! 🎉 Ready for the next round? Press Enter",
+    incorrect: "Game Over! Press Enter to play again",
+    nextRound: "Next Round",
+    playAgain: "Play Again",
+    viewLeaderboard: "View Leaderboard"
+  },
+  gameOver: {
+    title: "Game Over!",
+    completedRounds: "You completed {count} rounds successfully!",
+    playAgain: "Play Again"
+  },
+  themes: {
+    title: "Choose a Theme",
+    subtitle: "Select a theme for your word-guessing adventure",
+    standard: "Standard",
+    technology: "Technology",
+    sports: "Sports",
+    food: "Food",
+    custom: "Choose your theme",
+    customPlaceholder: "Enter a theme (e.g., Animals, Movies)",
+    continue: "Continue",
+    generating: "Generating themed words...",
+    pressKey: "Press"
+  },
+  leaderboard: {
+    title: "Leaderboard",
+    yourScore: "Your score",
+    roundCount: "rounds",
+    wordsPerRound: "words/round",
+    enterName: "Enter your name (letters and numbers only)",
+    submit: "Submit Score",
+    submitting: "Submitting...",
+    rank: "Rank",
+    player: "Player",
+    roundsColumn: "Rounds",
+    avgWords: "Avg Words/Round",
+    noScores: "No high scores yet. Be the first!",
+    previous: "Previous",
+    next: "Next",
+    error: {
+      invalidName: "Please enter a valid name (only letters and numbers allowed)",
+      noRounds: "You need to complete at least one round to submit a score",
+      alreadySubmitted: "You have already submitted your score for this game",
+      newHighScore: "New High Score!",
+      beatRecord: "You beat your previous record of {score} rounds!",
+      notHigher: "Your current score ({current}) is not higher than your best score ({best})",
+      submitError: "Failed to submit score. Please try again."
+    }
+  }
+};

src/i18n/translations/es.ts

@@ -0,0 +1,94 @@
+export const es = {
+  welcome: {
+    title: "Pensar en Sintonía",
+    subtitle: "¡En este juego te unes a la IA para adivinar palabras secretas!",
+    startButton: "Comenzar Juego",
+    howToPlay: "Cómo Jugar",
+    leaderboard: "Tabla de Posiciones"
+  },
+  howToPlay: {
+    setup: {
+      title: "La Configuración",
+      description: "Trabajarás con dos IAs: una como compañera dando pistas y otra intentando adivinar la palabra."
+    },
+    goal: {
+      title: "Tu Objetivo",
+      description: "Ayuda a la IA a adivinar la palabra secreta usando pistas de una sola palabra. ¡Cada adivinanza correcta te da un punto!"
+    },
+    rules: {
+      title: "Las Reglas",
+      items: [
+        "Solo una palabra por pista",
+        "No usar partes de la palabra secreta ni traducciones",
+        "Las pistas deben relacionarse con la palabra (¡sé creativo!)",
+        "No deletrear la respuesta"
+      ]
+    }
+  },
+  game: {
+    buildDescription: "Construye una Descripción",
+    buildSubtitle: "¡Alterna con la IA para describir tu palabra sin usar la palabra misma!",
+    startSentence: "Comienza tu frase...",
+    inputPlaceholder: "Ingresa tu palabra (solo letras)...",
+    addWord: "Agregar Palabra",
+    makeGuess: "Hacer que la IA Adivine",
+    aiThinking: "La IA está pensando...",
+    aiDelayed: "La IA está ocupada en este momento. Por favor, inténtalo de nuevo en un momento.",
+    invalidWord: "Palabra Inválida",
+    cantUseTargetWord: "No puedes usar palabras que contengan",
+    lettersOnly: "Por favor usa solo letras (sin números ni caracteres especiales)"
+  },
+  guess: {
+    title: "Intento de la IA",
+    sentence: "Tu frase",
+    aiGuessed: "La IA adivinó",
+    correct: "¡Adivinanza correcta! 🎉 ¿Listo para la siguiente ronda? Presiona Enter",
+    incorrect: "¡Juego terminado! Presiona Enter para jugar de nuevo",
+    nextRound: "Siguiente Ronda",
+    playAgain: "Jugar de Nuevo",
+    viewLeaderboard: "Ver Tabla de Posiciones"
+  },
+  gameOver: {
+    title: "¡Juego Terminado!",
+    completedRounds: "¡Completaste {count} rondas exitosamente!",
+    playAgain: "Jugar de Nuevo"
+  },
+  themes: {
+    title: "Elegir un Tema",
+    subtitle: "Selecciona un tema para tu aventura de adivinanzas",
+    standard: "",
+    technology: "Tecnología",
+    sports: "Deportes",
+    food: "Comida",
+    custom: "Elige tu tema",
+    customPlaceholder: "Ingresa un tema (ej: Animales, Películas)",
+    continue: "Continuar",
+    generating: "Generando palabras temáticas...",
+    pressKey: "Presiona"
+  },
+  leaderboard: {
+    title: "Tabla de Posiciones",
+    yourScore: "Tu puntaje",
+    roundCount: "rondas",
+    wordsPerRound: "palabras/ronda",
+    enterName: "Ingresa tu nombre (solo letras y números)",
+    submit: "Enviar Puntaje",
+    submitting: "Enviando...",
+    rank: "Posición",
+    player: "Jugador",
+    roundsColumn: "Rondas",
+    avgWords: "Prom. Palabras/Ronda",
+    noScores: "Aún no hay puntajes altos. ¡Sé el primero!",
+    previous: "Anterior",
+    next: "Siguiente",
+    error: {
+      invalidName: "Por favor ingresa un nombre válido (solo letras y números)",
+      noRounds: "Necesitas completar al menos una ronda para enviar un puntaje",
+      alreadySubmitted: "Ya has enviado tu puntaje para este juego",
+      newHighScore: "¡Nuevo Récord!",
+      beatRecord: "¡Superaste tu récord anterior de {score} rondas!",
+      notHigher: "Tu puntaje actual ({current}) no es mayor que tu mejor puntaje ({best})",
+      submitError: "Error al enviar el puntaje. Por favor intenta de nuevo."
+    }
+  }
+};

src/i18n/translations/fr.ts

@@ -0,0 +1,94 @@
+export const fr = {
+  welcome: {
+    title: "Penser en Sync",
+    subtitle: "Dans ce jeu, vous faites équipe avec l'IA pour deviner des mots secrets !",
+    startButton: "Commencer",
+    howToPlay: "Comment Jouer",
+    leaderboard: "Classement"
+  },
+  howToPlay: {
+    setup: {
+      title: "La Configuration",
+      description: "Vous travaillerez avec deux IA : une comme partenaire donnant des indices, et une autre essayant de deviner le mot."
+    },
+    goal: {
+      title: "Votre Objectif",
+      description: "Aidez l'IA à deviner le mot secret en utilisant des indices d'un seul mot. Chaque devinette correcte vous rapporte un point !"
+    },
+    rules: {
+      title: "Les Règles",
+      items: [
+        "Un seul mot par indice",
+        "Pas de parties du mot secret ni de traductions",
+        "Les indices doivent être liés au mot (soyez créatif !)",
+        "Ne pas épeler la réponse"
+      ]
+    }
+  },
+  game: {
+    buildDescription: "Construire une Description",
+    buildSubtitle: "Alternez avec l'IA pour décrire votre mot sans utiliser le mot lui-même !",
+    startSentence: "Commencez votre phrase...",
+    inputPlaceholder: "Entrez votre mot (lettres uniquement)...",
+    addWord: "Ajouter un Mot",
+    makeGuess: "Faire Deviner l'IA",
+    aiThinking: "L'IA réfléchit...",
+    aiDelayed: "L'IA est actuellement occupée. Veuillez réessayer dans un moment.",
+    invalidWord: "Mot Invalide",
+    cantUseTargetWord: "Vous ne pouvez pas utiliser des mots qui contiennent",
+    lettersOnly: "Veuillez utiliser uniquement des lettres (pas de chiffres ni de caractères spéciaux)"
+  },
+  guess: {
+    title: "Devinette de l'IA",
+    sentence: "Votre phrase",
+    aiGuessed: "L'IA a deviné",
+    correct: "Devinette correcte ! 🎉 Prêt pour le prochain tour ? Appuyez sur Entrée",
+    incorrect: "Partie terminée ! Appuyez sur Entrée pour rejouer",
+    nextRound: "Tour Suivant",
+    playAgain: "Rejouer",
+    viewLeaderboard: "Voir le Classement"
+  },
+  gameOver: {
+    title: "Partie Terminée !",
+    completedRounds: "Vous avez complété {count} tours avec succès !",
+    playAgain: "Rejouer"
+  },
+  themes: {
+    title: "Choisir un Thème",
+    subtitle: "Sélectionnez un thème pour votre aventure de devinettes",
+    standard: "",
+    technology: "Technologie",
+    sports: "Sports",
+    food: "Nourriture",
+    custom: "Choisissez votre thème",
+    customPlaceholder: "Entrez un thème (ex: Animaux, Films)",
+    continue: "Continuer",
+    generating: "Génération des mots thématiques...",
+    pressKey: "Appuyez sur"
+  },
+  leaderboard: {
+    title: "Classement",
+    yourScore: "Votre score",
+    roundCount: "tours",
+    wordsPerRound: "mots/tour",
+    enterName: "Entrez votre nom (lettres et chiffres uniquement)",
+    submit: "Soumettre le Score",
+    submitting: "Soumission...",
+    rank: "Rang",
+    player: "Joueur",
+    roundsColumn: "Tours",
+    avgWords: "Moy. Mots/Tour",
+    noScores: "Pas encore de scores. Soyez le premier !",
+    previous: "Précédent",
+    next: "Suivant",
+    error: {
+      invalidName: "Veuillez entrer un nom valide (uniquement lettres et chiffres)",
+      noRounds: "Vous devez compléter au moins un tour pour soumettre un score",
+      alreadySubmitted: "Vous avez déjà soumis votre score pour cette partie",
+      newHighScore: "Nouveau Record !",
+      beatRecord: "Vous avez battu votre record précédent de {score} tours !",
+      notHigher: "Votre score actuel ({current}) n'est pas supérieur à votre meilleur score ({best})",
+      submitError: "Échec de la soumission du score. Veuillez réessayer."
+    }
+  }
+};

src/i18n/translations/index.ts

@@ -0,0 +1,16 @@
+import { en } from './en';
+import { fr } from './fr';
+import { de } from './de';
+import { it } from './it';
+import { es } from './es';
+
+export const translations = {
+  en,
+  fr,
+  de,
+  it,
+  es
+} as const;
+
+export type Language = keyof typeof translations;
+export type Translation = typeof en;

src/i18n/translations/it.ts

@@ -0,0 +1,94 @@
+export const it = {
+  welcome: {
+    title: "Pensare in Sincronia",
+    subtitle: "In questo gioco fai squadra con l'IA per indovinare parole segrete!",
+    startButton: "Inizia Gioco",
+    howToPlay: "Come Giocare",
+    leaderboard: "Classifica"
+  },
+  howToPlay: {
+    setup: {
+      title: "La Configurazione",
+      description: "Lavorerai con due IA: una come partner che fornisce indizi e un'altra che cerca di indovinare la parola."
+    },
+    goal: {
+      title: "Il tuo Obiettivo",
+      description: "Aiuta l'IA a indovinare la parola segreta usando indizi di una sola parola. Ogni risposta corretta ti fa guadagnare un punto!"
+    },
+    rules: {
+      title: "Le Regole",
+      items: [
+        "Solo una parola per indizio",
+        "Niente parti della parola segreta o traduzioni",
+        "Gli indizi devono essere correlati alla parola (sii creativo!)",
+        "Non si può sillabare la risposta"
+      ]
+    }
+  },
+  game: {
+    buildDescription: "Costruisci una Descrizione",
+    buildSubtitle: "Alternati con l'IA per descrivere la tua parola senza usare la parola stessa!",
+    startSentence: "Inizia la tua frase...",
+    inputPlaceholder: "Inserisci la tua parola (solo lettere)...",
+    addWord: "Aggiungi Parola",
+    makeGuess: "Fai Indovinare l'IA",
+    aiThinking: "L'IA sta pensando...",
+    aiDelayed: "L'IA è attualmente occupata. Riprova tra un momento.",
+    invalidWord: "Parola Non Valida",
+    cantUseTargetWord: "Non puoi usare parole che contengono",
+    lettersOnly: "Per favore usa solo lettere (no numeri o caratteri speciali)"
+  },
+  guess: {
+    title: "Tentativo dell'IA",
+    sentence: "La tua frase",
+    aiGuessed: "L'IA ha indovinato",
+    correct: "Indovinato correttamente! 🎉 Pronto per il prossimo round? Premi Invio",
+    incorrect: "Game Over! Premi Invio per giocare di nuovo",
+    nextRound: "Prossimo Round",
+    playAgain: "Gioca Ancora",
+    viewLeaderboard: "Vedi Classifica"
+  },
+  gameOver: {
+    title: "Game Over!",
+    completedRounds: "Hai completato {count} round con successo!",
+    playAgain: "Gioca Ancora"
+  },
+  themes: {
+    title: "Scegli un Tema",
+    subtitle: "Seleziona un tema per la tua avventura di indovinelli",
+    standard: "",
+    technology: "Tecnologia",
+    sports: "Sport",
+    food: "Cibo",
+    custom: "Scegli il tuo tema",
+    customPlaceholder: "Inserisci un tema (es: Animali, Film)",
+    continue: "Continua",
+    generating: "Generazione parole tematiche...",
+    pressKey: "Premi"
+  },
+  leaderboard: {
+    title: "Classifica",
+    yourScore: "Il tuo punteggio",
+    roundCount: "round",
+    wordsPerRound: "parole/round",
+    enterName: "Inserisci il tuo nome (solo lettere e numeri)",
+    submit: "Invia Punteggio",
+    submitting: "Invio in corso...",
+    rank: "Posizione",
+    player: "Giocatore",
+    roundsColumn: "Round",
+    avgWords: "Media Parole/Round",
+    noScores: "Ancora nessun punteggio. Sii il primo!",
+    previous: "Precedente",
+    next: "Successivo",
+    error: {
+      invalidName: "Inserisci un nome valido (solo lettere e numeri)",
+      noRounds: "Devi completare almeno un round per inviare un punteggio",
+      alreadySubmitted: "Hai già inviato il tuo punteggio per questa partita",
+      newHighScore: "Nuovo Record!",
+      beatRecord: "Hai battuto il tuo record precedente di {score} round!",
+      notHigher: "Il tuo punteggio attuale ({current}) non è superiore al tuo miglior punteggio ({best})",
+      submitError: "Errore nell'invio del punteggio. Riprova."
+    }
+  }
+};

src/services/themeService.ts

@@ -1,14 +1,15 @@
 import { supabase } from "@/integrations/supabase/client";
+import { Language } from "@/i18n/translations";
 
-export const getThemedWord = async (theme: string, usedWords: string[] = []): Promise<string> => {
+export const getThemedWord = async (theme: string, usedWords: string[] = [], language: Language = 'en'): Promise<string> => {
   if (theme === "standard") {
     throw new Error("Standard theme should use the words list");
   }
 
-  console.log('Getting themed word for:', theme, 'excluding:', usedWords);
+  console.log('Getting themed word for:', theme, 'language:', language, 'excluding:', usedWords);
   
   const { data, error } = await supabase.functions.invoke('generate-themed-word', {
-    body: { theme, usedWords }
+    body: { theme, usedWords, language }
   });
 
   if (error) {

supabase/functions/generate-themed-word/index.ts

@@ -7,39 +7,54 @@ const corsHeaders = {
   'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
 };
 
+const languagePrompts = {
+  en: {
+    systemPrompt: "You are helping generate words for a word-guessing game. Generate a single word in English related to the theme",
+    requirements: "The word should be:\n- A single word (no spaces or hyphens)\n- Common enough that people would know it\n- Specific enough to be interesting\n- Related to the theme\n- Between 4 and 12 letters\n- A noun\n- NOT be any of these previously used words:"
+  },
+  fr: {
+    systemPrompt: "Vous aidez à générer des mots pour un jeu de devinettes. Générez un seul mot en français lié au thème",
+    requirements: "Le mot doit être :\n- Un seul mot (pas d'espaces ni de traits d'union)\n- Assez courant pour que les gens le connaissent\n- Suffisamment spécifique pour être intéressant\n- En rapport avec le thème\n- Entre 4 et 12 lettres\n- Un nom\n- NE PAS être l'un de ces mots déjà utilisés :"
+  },
+  de: {
+    systemPrompt: "Sie helfen bei der Generierung von Wörtern für ein Worträtselspiel. Generieren Sie ein einzelnes Wort auf Deutsch zum Thema",
+    requirements: "Das Wort sollte:\n- Ein einzelnes Wort sein (keine Leerzeichen oder Bindestriche)\n- Häufig genug, dass Menschen es kennen\n- Spezifisch genug, um interessant zu sein\n- Zum Thema passen\n- Zwischen 4 und 12 Buchstaben lang sein\n- Ein Substantiv sein\n- NICHT eines dieser bereits verwendeten Wörter sein:"
+  },
+  it: {
+    systemPrompt: "Stai aiutando a generare parole per un gioco di indovinelli. Genera una singola parola in italiano legata al tema",
+    requirements: "La parola deve essere:\n- Una singola parola (senza spazi o trattini)\n- Abbastanza comune da essere conosciuta\n- Sufficientemente specifica da essere interessante\n- Correlata al tema\n- Tra 4 e 12 lettere\n- Un sostantivo\n- NON essere una di queste parole già utilizzate:"
+  },
+  es: {
+    systemPrompt: "Estás ayudando a generar palabras para un juego de adivinanzas. Genera una sola palabra en español relacionada con el tema",
+    requirements: "La palabra debe ser:\n- Una sola palabra (sin espacios ni guiones)\n- Lo suficientemente común para que la gente la conozca\n- Lo suficientemente específica para ser interesante\n- Relacionada con el tema\n- Entre 4 y 12 letras\n- Un sustantivo\n- NO ser ninguna de estas palabras ya utilizadas:"
+  }
+};
+
 serve(async (req) => {
   if (req.method === 'OPTIONS') {
     return new Response(null, { headers: corsHeaders });
   }
 
   try {
-    const { theme, usedWords = [] } = await req.json();
-    console.log('Generating word for theme:', theme, 'excluding:', usedWords);
+    const { theme, usedWords = [], language = 'en' } = await req.json();
+    console.log('Generating word for theme:', theme, 'language:', language, 'excluding:', usedWords);
 
     const client = new Mistral({
       apiKey: Deno.env.get('MISTRAL_API_KEY'),
     });
 
+    const prompts = languagePrompts[language as keyof typeof languagePrompts] || languagePrompts.en;
+
     const response = await client.chat.complete({
       model: "mistral-large-latest",
       messages: [
         {
           role: "system",
-          content: `You are helping generate words for a word-guessing game. Generate a single word related to the theme "${theme}". 
-          The word should be:
-          - A single word (no spaces or hyphens)
-          - Common enough that people would know it
-          - Specific enough to be interesting
-          - Related to the theme "${theme}"
-          - Between 4 and 12 letters
-          - A noun
-          - NOT be any of these previously used words: ${usedWords.join(', ')}
-          
-          Respond with just the word in UPPERCASE, nothing else.`
+          content: `${prompts.systemPrompt} "${theme}".\n${prompts.requirements} ${usedWords.join(', ')}\n\nRespond with just the word in UPPERCASE, nothing else.`
         }
       ],
-      maxTokens: 10,
-      temperature: 0.9
+      maxTokens: 15,
+      temperature: 0.99
     });
 
     const word = response.choices[0].message.content.trim();

supabase/functions/generate-word/index.ts

@@ -6,23 +6,50 @@ const corsHeaders = {
   'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
 };
 
+const languagePrompts = {
+  en: {
+    systemPrompt: "You are helping in a word game. The secret word is",
+    task: "Your task is to find a sentence to describe this word without using it directly.",
+    instruction: "Answer with a complete, grammatically correct sentence that starts with"
+  },
+  fr: {
+    systemPrompt: "Vous aidez dans un jeu de mots. Le mot secret est",
+    task: "Votre tâche est de trouver une phrase pour décrire ce mot sans l'utiliser directement.",
+    instruction: "Répondez avec une phrase complète et grammaticalement correcte qui commence par"
+  },
+  de: {
+    systemPrompt: "Sie helfen bei einem Wortspiel. Das geheime Wort ist",
+    task: "Ihre Aufgabe ist es, einen Satz zu finden, der dieses Wort beschreibt, ohne es direkt zu verwenden.",
+    instruction: "Antworten Sie mit einem vollständigen, grammatikalisch korrekten Satz, der beginnt mit"
+  },
+  it: {
+    systemPrompt: "Stai aiutando in un gioco di parole. La parola segreta è",
+    task: "Il tuo compito è trovare una frase per descrivere questa parola senza usarla direttamente.",
+    instruction: "Rispondi con una frase completa e grammaticalmente corretta che inizia con"
+  },
+  es: {
+    systemPrompt: "Estás ayudando en un juego de palabras. La palabra secreta es",
+    task: "Tu tarea es encontrar una frase para describir esta palabra sin usarla directamente.",
+    instruction: "Responde con una frase completa y gramaticalmente correcta que comience con"
+  }
+};
+
 serve(async (req) => {
   if (req.method === 'OPTIONS') {
     return new Response(null, { headers: corsHeaders });
   }
 
   try {
-    const { currentWord, currentSentence } = await req.json();
-    console.log('Generating word for:', { currentWord, currentSentence });
+    const { currentWord, currentSentence, language = 'en' } = await req.json();
+    console.log('Generating word for:', { currentWord, currentSentence, language });
 
-    // currentSentence is already a string from the client
     const existingSentence = currentSentence || '';
+    const prompts = languagePrompts[language as keyof typeof languagePrompts] || languagePrompts.en;
 
     const client = new Mistral({
       apiKey: Deno.env.get('MISTRAL_API_KEY'),
     });
 
-    // Add retry logic with exponential backoff
     const maxRetries = 3;
     let retryCount = 0;
     let lastError = null;
@@ -34,25 +61,21 @@ serve(async (req) => {
           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 "${existingSentence}".
-                    Do not add quotes or backticks. Just answer with the sentence.`
+              content: `${prompts.systemPrompt} "${currentWord}". ${prompts.task} ${prompts.instruction} "${existingSentence}". Do not add quotes or backticks. Just answer with the sentence.`
             }
           ],
-          maxTokens: 10,
+          maxTokens: 200,
           temperature: 0.5
         });
 
         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 newWord = aiResponse
           .slice(existingSentence.length)
           .trim()
           .split(' ')[0]
-          .replace(/[.,!?]$/, ''); // Remove any punctuation at the end
+          .replace(/[.,!?]$/, '');
         
         console.log('Extracted new word:', newWord);
 
@@ -64,27 +87,23 @@ serve(async (req) => {
         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
+          const waitTime = Math.pow(2, retryCount) * 1000;
           console.log(`Rate limit hit, waiting ${waitTime}ms before retry`);
           await new Promise(resolve => setTimeout(resolve, waitTime));
           retryCount++;
           continue;
         }
         
-        // If it's not a rate limit error, throw immediately
         throw error;
       }
     }
 
-    // If we've exhausted all retries
     throw new Error(`Failed after ${maxRetries} attempts. Last error: ${lastError?.message}`);
 
   } 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.";

supabase/functions/guess-word/index.ts

@@ -6,20 +6,44 @@ const corsHeaders = {
   'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
 };
 
+const languagePrompts = {
+  en: {
+    systemPrompt: "You are playing a word guessing game in English. Given a descriptive sentence, your task is to guess the single word being described.",
+    instruction: "Based on this description, what single word is being described:"
+  },
+  fr: {
+    systemPrompt: "Vous jouez à un jeu de devinettes de mots en français. À partir d'une phrase descriptive, votre tâche est de deviner le mot unique décrit.",
+    instruction: "D'après cette description, quel mot unique est décrit :"
+  },
+  de: {
+    systemPrompt: "Sie spielen ein Worträtselspiel auf Deutsch. Anhand eines beschreibenden Satzes ist es Ihre Aufgabe, das beschriebene einzelne Wort zu erraten.",
+    instruction: "Welches einzelne Wort wird basierend auf dieser Beschreibung beschrieben:"
+  },
+  it: {
+    systemPrompt: "Stai giocando a un gioco di indovinelli in italiano. Data una frase descrittiva, il tuo compito è indovinare la singola parola descritta.",
+    instruction: "In base a questa descrizione, quale singola parola viene descritta:"
+  },
+  es: {
+    systemPrompt: "Estás jugando a un juego de adivinanzas de palabras en español. Dada una frase descriptiva, tu tarea es adivinar la única palabra que se describe.",
+    instruction: "Según esta descripción, ¿qué palabra única se está describiendo:"
+  }
+};
+
 serve(async (req) => {
   if (req.method === 'OPTIONS') {
     return new Response(null, { headers: corsHeaders });
   }
 
   try {
-    const { sentence } = await req.json();
-    console.log('Trying to guess word from sentence:', sentence);
+    const { sentence, language = 'en' } = await req.json();
+    console.log('Trying to guess word from sentence:', sentence, 'language:', language);
 
     const client = new Mistral({
       apiKey: Deno.env.get('MISTRAL_API_KEY'),
     });
 
-    // Add retry logic with exponential backoff
+    const prompts = languagePrompts[language as keyof typeof languagePrompts] || languagePrompts.en;
+
     const maxRetries = 3;
     let retryCount = 0;
     let lastError = null;
@@ -31,13 +55,11 @@ serve(async (req) => {
           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.`
+              content: `${prompts.systemPrompt} 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}"`
+              content: `${prompts.instruction} "${sentence}"`
             }
           ],
           maxTokens: 10,
@@ -55,27 +77,23 @@ serve(async (req) => {
         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
+          const waitTime = Math.pow(2, retryCount) * 1000;
           console.log(`Rate limit hit, waiting ${waitTime}ms before retry`);
           await new Promise(resolve => setTimeout(resolve, waitTime));
           retryCount++;
           continue;
         }
         
-        // If it's not a rate limit error, throw immediately
         throw error;
       }
     }
 
-    // If we've exhausted all retries
     throw new Error(`Failed after ${maxRetries} attempts. Last error: ${lastError?.message}`);
 
   } 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.";