update

Dockerfile

@@ -1,29 +1,31 @@
 # Use the official Node.js image as the base image
-FROM node:18-alpine
+FROM node:22-alpine
 
 # Set the working directory
 WORKDIR /app
 
-# Copy package.json and package-lock.json
-COPY package*.json ./
+# Install pnpm and serve
+RUN npm install -g pnpm serve
 
 # Install dependencies
-RUN npm install
+COPY package.json ./
+COPY pnpm-lock.yaml ./
+RUN pnpm install
 
 # Copy the rest of the application code
 COPY . .
 
+# Build the Vite application
+RUN pnpm run build
+
 # Ensure the correct ownership and permissions
 RUN chown -R node:node /app
 
 # Switch to the non-root 'node' user
 USER node
 
-# Build the Vite application
-RUN npm run build
-
 # Expose the port the app runs on
 EXPOSE 8080
 
-# Start the Vite development server
-CMD ["npm", "run", "dev"]
+# Start the production server
+CMD ["serve", "-s", "dist", "-l", "8080"]

README.md

@@ -13,13 +13,15 @@ pinned: false
 You will be given a secret word. You aim to describe this secret word so an AI can guess it.
 However, you can only say one word at a time, taking turns with another AI.
 
+Play this game under [think-in-sync.com](https://www.think-in-sync.com/)
+
 ## Develop locally
 
 You need Node.js and npm installed on your system.
 
 ```
 npm i
-npm run dev
+pnpm run dev
 ```
 
 ## What technologies are used for this project?

src/App.tsx

@@ -1,27 +1,40 @@
+
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Index from "@/pages/Index";
 import { AdminIndex } from "@/pages/admin/Index";
 import { AdminLogin } from "@/pages/admin/Login";
+import Login from "@/pages/auth/Login";
+import Register from "@/pages/auth/Register";
 import { Toaster } from "@/components/ui/toaster";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { AuthProvider } from "@/contexts/AuthContext";
+import { ProtectedRoute } from "@/components/auth/ProtectedRoute";
 
 const queryClient = new QueryClient();
 
 function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      <Router>
-        <Routes>
-          <Route path="/" element={<Index />} />
-          <Route path="/game" element={<Index />} />
-          <Route path="/game/:gameId" element={<Index />} />
-          <Route path="/admin" element={<AdminIndex />} />
-          <Route path="/admin/login" element={<AdminLogin />} />
-        </Routes>
-        <Toaster />
-      </Router>
+      <AuthProvider>
+        <Router>
+          <Routes>
+            <Route path="/" element={<Index />} />
+            <Route path="/game" element={<Index />} />
+            <Route path="/game/:gameId" element={<Index />} />
+            <Route path="/auth/login" element={<Login />} />
+            <Route path="/auth/register" element={<Register />} />
+            <Route path="/admin" element={
+              <ProtectedRoute>
+                <AdminIndex />
+              </ProtectedRoute>
+            } />
+            <Route path="/admin/login" element={<AdminLogin />} />
+          </Routes>
+          <Toaster />
+        </Router>
+      </AuthProvider>
     </QueryClientProvider>
   );
 }
 
-export default App;
+export default App;

src/components/GameContainer.tsx

@@ -17,6 +17,7 @@ import { LanguageContext } from "@/contexts/LanguageContext";
 import { supabase } from "@/integrations/supabase/client";
 import { Language } from "@/i18n/translations";
 import { normalizeWord } from "@/lib/wordProcessing";
+import { UserMenu } from "./auth/UserMenu";
 
 type GameState = "welcome" | "theme-selection" | "model-selection" | "building-sentence" | "showing-guess" | "game-review" | "invitation";
 
@@ -44,6 +45,8 @@ export const GameContainer = () => {
   const [aiGuess, setAiGuess] = useState<string>("");
   const [aiModel, setAiModel] = useState<string>("");
   const [successfulRounds, setSuccessfulRounds] = useState<number>(0);
+  const [wrongGuesses, setWrongGuesses] = useState<number>(0);
+  const [guessSequence, setGuessSequence] = useState<Array<'success' | 'wrong'>>([]);
   const [totalWordsInSuccessfulRounds, setTotalWordsInSuccessfulRounds] = useState<number>(0);
   const { toast } = useToast();
   const t = useTranslation();
@@ -141,6 +144,8 @@ export const GameContainer = () => {
     setAiGuess("");
     setCurrentTheme("standard");
     setSuccessfulRounds(0);
+    setWrongGuesses(0);
+    setGuessSequence([]);
     setTotalWordsInSuccessfulRounds(0);
     setWords([]);
     setCurrentWordIndex(0);
@@ -209,6 +214,8 @@ export const GameContainer = () => {
       setCurrentWordIndex(0);
       setGameState("building-sentence");
       setSuccessfulRounds(0);
+      setWrongGuesses(0);
+      setGuessSequence([]);
       setTotalWordsInSuccessfulRounds(0);
       console.log("Game started with theme:", currentTheme, "language:", language, "model:", model);
     } catch (error) {
@@ -308,19 +315,21 @@ export const GameContainer = () => {
   };
 
   const handleNextRound = () => {
-    if (isGuessCorrect()) {
+    const wasCorrect = isGuessCorrect();
+    if (wasCorrect) {
       setSuccessfulRounds(prev => prev + 1);
-      if (currentWordIndex < words.length - 1) {
-        setCurrentWordIndex(prev => prev + 1);
-        setGameState("building-sentence");
-        setSentence([]);
-        setAiGuess("");
-        console.log("Next round started with word:", words[currentWordIndex + 1]);
-      } else {
-        handleGameReview();
-      }
     } else {
-      setGameState("game-review");
+      setWrongGuesses(prev => prev + 1);
+    }
+    setGuessSequence(prev => [...prev, wasCorrect ? 'success' : 'wrong']);
+
+    if (currentWordIndex < words.length - 1) {
+      setCurrentWordIndex(prev => prev + 1);
+      setGameState("building-sentence");
+      setSentence([]);
+      setAiGuess("");
+    } else {
+      handleGameReview();
     }
   };
 
@@ -328,6 +337,8 @@ export const GameContainer = () => {
     setSentence([]);
     setAiGuess("");
     setSuccessfulRounds(0);
+    setWrongGuesses(0);
+    setGuessSequence([]);
     setTotalWordsInSuccessfulRounds(0);
     setWords([]);
     setCurrentWordIndex(0);
@@ -364,6 +375,11 @@ export const GameContainer = () => {
 
   return (
     <div className="flex min-h-screen items-center justify-center p-1 md:p-4">
+      {gameState === "welcome" && (
+        <div className="absolute top-2 right-2 flex items-center gap-4">
+          <UserMenu />
+        </div>
+      )}
       <motion.div
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
@@ -381,6 +397,9 @@ export const GameContainer = () => {
           <SentenceBuilder
             currentWord={currentWord}
             successfulRounds={successfulRounds}
+            totalRounds={words.length}
+            wrongGuesses={wrongGuesses}
+            guessSequence={guessSequence}
             sentence={sentence}
             playerInput={playerInput}
             isAiThinking={isAiThinking}
@@ -389,7 +408,7 @@ export const GameContainer = () => {
             onMakeGuess={handleMakeGuess}
             normalizeWord={(word: string) => normalizeWord(word, language)}
             onBack={handleBack}
-            onClose={handleBack}
+            onClose={handleGameReview}
           />
         ) : gameState === "showing-guess" ? (
           <GuessDisplay
@@ -400,6 +419,9 @@ export const GameContainer = () => {
             onGameReview={handleGameReview}
             onBack={handleBack}
             currentScore={successfulRounds}
+            totalRounds={words.length}
+            wrongGuesses={wrongGuesses}
+            guessSequence={guessSequence}
             avgWordsPerRound={getAverageWordsPerSuccessfulRound()}
             sessionId={sessionId}
             currentTheme={currentTheme}
@@ -409,6 +431,8 @@ export const GameContainer = () => {
         ) : (
           <GameReview
             currentScore={successfulRounds}
+            wrongGuesses={wrongGuesses}
+            totalRounds={words.length}
             avgWordsPerRound={getAverageWordsPerSuccessfulRound()}
             onPlayAgain={handlePlayAgain}
             onBack={handleBack}
@@ -416,6 +440,8 @@ export const GameContainer = () => {
             sessionId={sessionId}
             currentTheme={currentTheme}
             fromSession={fromSession}
+            words={words}
+            guessSequence={guessSequence}
           />
         )}
       </motion.div>

src/components/auth/ProtectedRoute.tsx

@@ -0,0 +1,22 @@
+
+import { ReactNode } from "react";
+import { Navigate } from "react-router-dom";
+import { useAuth } from "@/contexts/AuthContext";
+
+interface ProtectedRouteProps {
+  children: ReactNode;
+}
+
+export const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
+  const { user, loading } = useAuth();
+
+  if (loading) {
+    return <div className="flex h-screen items-center justify-center">Loading...</div>;
+  }
+
+  if (!user) {
+    return <Navigate to="/auth/login" />;
+  }
+
+  return <>{children}</>;
+};

src/components/auth/UserMenu.tsx

@@ -0,0 +1,79 @@
+
+import { useEffect, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useAuth } from "@/contexts/AuthContext";
+import { Button } from "@/components/ui/button";
+import { useToast } from "@/hooks/use-toast";
+import { LogIn, LogOut, User } from "lucide-react";
+import { useTranslation } from "@/hooks/useTranslation";
+
+export const UserMenu = () => {
+  const { user, signOut } = useAuth();
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  const t = useTranslation();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  const handleSignOut = async () => {
+    await signOut();
+    toast({
+      title: t.auth.logoutSuccess.title,
+      description: t.auth.logoutSuccess.description,
+    });
+    navigate("/");
+  };
+
+  return (
+    <div className="flex items-center gap-4">
+      {user ? (
+        <div className="flex items-center gap-2">
+          <span className="text-sm hidden md:inline-block">
+            {user.email}
+          </span>
+          <Button 
+            variant="outline" 
+            size="sm" 
+            onClick={handleSignOut}
+            className="flex items-center gap-2"
+          >
+            <LogOut className="h-4 w-4" />
+            <span className="hidden md:inline-block">
+              {t.auth.form.logout || "Logout"}
+            </span>
+          </Button>
+        </div>
+      ) : (
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            asChild
+            className="flex items-center gap-2"
+          >
+            <Link to="/auth/login">
+              <LogIn className="h-4 w-4" />
+              <span className="hidden md:inline-block">{t.auth.login.linkText}</span>
+            </Link>
+          </Button>
+          <Button
+            variant="default"
+            size="sm"
+            asChild
+            className="flex items-center gap-2"
+          >
+            <Link to="/auth/register">
+              <User className="h-4 w-4" />
+              <span className="hidden md:inline-block">{t.auth.register.linkText}</span>
+            </Link>
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};

src/components/game/GameReview.tsx

@@ -3,7 +3,7 @@ import { motion } from "framer-motion";
 import { useTranslation } from "@/hooks/useTranslation";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Copy } from "lucide-react";
+import { Copy, Home } from "lucide-react";
 import {
   Dialog,
   DialogContent,
@@ -18,6 +18,8 @@ import { RoundHeader } from "./sentence-builder/RoundHeader";
 
 interface GameReviewProps {
   currentScore: number;
+  wrongGuesses: number;
+  totalRounds: number;
   avgWordsPerRound: number;
   onPlayAgain: (game_id?: string, fromSession?: string) => void;
   onBack?: () => void;
@@ -25,10 +27,13 @@ interface GameReviewProps {
   sessionId: string;
   currentTheme: string;
   fromSession?: string | null;
+  words: string[];
 }
 
 export const GameReview = ({
   currentScore,
+  wrongGuesses,
+  totalRounds,
   avgWordsPerRound,
   onPlayAgain,
   onBack,
@@ -36,6 +41,7 @@ export const GameReview = ({
   sessionId,
   currentTheme,
   fromSession,
+  words,
 }: GameReviewProps) => {
   const t = useTranslation();
   const { toast } = useToast();
@@ -147,6 +153,12 @@ export const GameReview = ({
     onPlayAgain();
   };
 
+  const handleHomeClick = () => {
+    if (onBack) {
+      onBack();
+    }
+  };
+
   const renderComparisonResult = () => {
     if (!friendData) return null;
 
@@ -171,24 +183,58 @@ export const GameReview = ({
       animate={{ opacity: 1 }}
       className="text-center space-y-6"
     >
-      <RoundHeader
-        successfulRounds={currentScore}
-        onBack={onBack}
-        showConfirmDialog={showConfirmDialog}
-        setShowConfirmDialog={setShowConfirmDialog}
-        onCancel={() => setShowConfirmDialog(false)}
-      />
+      <div className="relative flex items-center justify-center">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="absolute left-0 text-gray-600 hover:text-primary"
+          onClick={handleHomeClick}
+        >
+          <Home className="h-5 w-5" />
+        </Button>
+        <h2 className="text-2xl font-bold text-gray-900">
+          {t.game.review.title}
+        </h2>
+      </div>
 
       <div className="space-y-4">
-        <div className="bg-gray-100 p-4 rounded-lg">
-          <p className="text-lg">
-            {t.game.review.successfulRounds}: <span className="font-bold">{currentScore}</span>
-          </p>
-          <p className="text-sm text-gray-600">
-            {t.leaderboard.wordsPerRound}: {avgWordsPerRound.toFixed(1)}
-          </p>
-          {renderComparisonResult()}
+        <div className="space-y-2">
+          <div className="rounded-lg bg-gray-50 p-6">
+            <div className="flex justify-center items-center gap-8">
+              <div className="text-center">
+                <div className="text-3xl font-bold text-green-600">{currentScore}</div>
+                <div className="text-sm text-gray-600">{t.game.review.correct}</div>
+              </div>
+              <div className="text-center">
+                <div className="text-3xl font-bold text-red-600">{wrongGuesses}</div>
+                <div className="text-sm text-gray-600">{t.game.review.wrong}</div>
+              </div>
+              <div className="text-center">
+                <div className="text-3xl font-bold text-gray-600">{totalRounds}</div>
+                <div className="text-sm text-gray-600">{t.game.review.total}</div>
+              </div>
+            </div>
+            <div className="mt-4 space-y-1">
+              <div className="w-full bg-gray-200 rounded-full h-2">
+                <div
+                  className="bg-gradient-to-r from-green-500 to-green-600 h-2 rounded-full"
+                  style={{ width: `${(currentScore / totalRounds) * 100}%` }}
+                />
+                <div
+                  className="bg-gradient-to-r from-red-500 to-red-600 h-2 rounded-full -mt-2"
+                  style={{ 
+                    width: `${(wrongGuesses / totalRounds) * 100}%`,
+                    marginLeft: `${(currentScore / totalRounds) * 100}%`
+                  }}
+                />
+              </div>
+              <p className="text-sm text-gray-600 text-center">
+                {t.game.review.avgWords}: {avgWordsPerRound.toFixed(1)}
+              </p>
+            </div>
+          </div>
         </div>
+        {renderComparisonResult()}
 
         <GameDetailsView gameResults={gameResults} fromSession={fromSession} />
 

src/components/game/GuessDisplay.tsx

@@ -7,14 +7,22 @@ import { GuessDescription } from "./guess-display/GuessDescription";
 import { GuessResult } from "./guess-display/GuessResult";
 import { ActionButtons } from "./guess-display/ActionButtons";
 
+interface SentenceWord {
+  word: string;
+  provider: 'player' | 'ai';
+}
+
 interface GuessDisplayProps {
   currentScore: number;
   currentWord: string;
-  sentence: string[];
+  sentence: SentenceWord[];
   aiGuess: string;
   avgWordsPerRound: number;
   sessionId: string;
   currentTheme: string;
+  totalRounds: number;
+  wrongGuesses: number;
+  guessSequence: Array<'success' | 'wrong'>;
   onNextRound: () => void;
   onGameReview: () => void;
   onBack?: () => void;
@@ -30,6 +38,9 @@ export const GuessDisplay = ({
   avgWordsPerRound,
   sessionId,
   currentTheme,
+  totalRounds,
+  wrongGuesses,
+  guessSequence,
   onNextRound,
   onBack,
   onGameReview,
@@ -48,17 +59,13 @@ export const GuessDisplay = ({
   useEffect(() => {
     const handleKeyPress = (e: KeyboardEvent) => {
       if (e.key === 'Enter') {
-        if (isGuessCorrect()) {
-          onNextRound();
-        } else {
-          onGameReview();
-        }
+        onNextRound();
       }
     };
 
     window.addEventListener('keydown', handleKeyPress);
     return () => window.removeEventListener('keydown', handleKeyPress);
-  }, [isGuessCorrect, onNextRound, onGameReview]);
+  }, [onNextRound]);
 
   return (
     <motion.div
@@ -68,6 +75,9 @@ export const GuessDisplay = ({
     >
       <RoundHeader
         successfulRounds={currentScore}
+        totalRounds={totalRounds}
+        wrongGuesses={wrongGuesses}
+        guessSequence={guessSequence}
         onBack={onBack}
         showConfirmDialog={showConfirmDialog}
         setShowConfirmDialog={handleSetShowConfirmDialog}

src/components/game/ModelSelector.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { motion } from "framer-motion";
 import { useTranslation } from "@/hooks/useTranslation";
@@ -6,6 +6,15 @@ import { useContext } from "react";
 import { LanguageContext } from "@/contexts/LanguageContext";
 import { ArrowLeft } from "lucide-react";
 import { modelNames } from "@/lib/modelNames";
+import { useAuth } from "@/contexts/AuthContext";
+import { Link } from "react-router-dom";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 interface ModelSelectorProps {
   onModelSelect: (model: string) => void;
@@ -16,23 +25,34 @@ interface ModelSelectorProps {
 // based on the user's subscription level
 const AVAILABLE_MODELS = [
   "google/gemini-2.0-flash-lite-001",
-  // "x-ai/grok-2-1212",
   "deepseek/deepseek-chat:free",
   "meta-llama/llama-3.3-70b-instruct:free",
+  "custom",
+];
+
+// A larger set of models that can be selected
+const SEARCHABLE_MODELS = [
+  "google/gemini-2.0-flash-001",
+  "anthropic/claude-3.7-sonnet",
+  "openai/gpt-4o",
+  "mistralai/mistral-large-2411",
+  "x-ai/grok-beta",
 ];
 
 export const ModelSelector = ({ onModelSelect, onBack }: ModelSelectorProps) => {
   const [selectedModel, setSelectedModel] = useState<string>(AVAILABLE_MODELS[0]);
+  const [customModel, setCustomModel] = useState<string>("");
   const [isGenerating, setIsGenerating] = useState(false);
   const t = useTranslation();
   const { language } = useContext(LanguageContext);
+  const { user } = useAuth();
 
   const handleSubmit = async () => {
     if (!selectedModel) return;
     
     setIsGenerating(true);
     try {
-      await onModelSelect(selectedModel);
+      await onModelSelect(selectedModel === "custom" ? customModel : selectedModel);
     } finally {
       setIsGenerating(false);
     }
@@ -64,6 +84,10 @@ export const ModelSelector = ({ onModelSelect, onBack }: ModelSelectorProps) =>
         case 'c':
           setSelectedModel(AVAILABLE_MODELS[2]);
           break;
+        case 'd':
+          e.preventDefault();
+          setSelectedModel("custom");
+          break;
         case 'enter':
           if (selectedModel) {
             handleSubmit();
@@ -74,7 +98,7 @@ export const ModelSelector = ({ onModelSelect, onBack }: ModelSelectorProps) =>
 
     window.addEventListener('keydown', handleKeyPress);
     return () => window.removeEventListener('keydown', handleKeyPress);
-  }, [selectedModel, onBack, handleSubmit]);
+  }, [selectedModel, customModel, onBack, handleSubmit]);
 
   return (
     <motion.div
@@ -105,15 +129,59 @@ export const ModelSelector = ({ onModelSelect, onBack }: ModelSelectorProps) =>
             className="w-full justify-between"
             onClick={() => setSelectedModel(modelId)}
           >
-            {modelNames[modelId]} <span className="text-sm opacity-50">{t.themes.pressKey} {String.fromCharCode(65 + index)}</span>
+            <div className="flex items-center gap-2">
+              {modelId === "custom" ? t.models.custom : modelNames[modelId]}
+              {modelId === "custom" && !user}
+            </div>
+            <span className="text-sm opacity-50">{t.themes.pressKey} {String.fromCharCode(65 + index)}</span>
           </Button>
         ))}
+
+        {selectedModel === "custom" && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.2 }}
+          >
+            {user ? (
+              <Select
+                value={customModel}
+                onValueChange={setCustomModel}
+              >
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder={t.models.searchPlaceholder} />
+                </SelectTrigger>
+                <SelectContent>
+                  {SEARCHABLE_MODELS.map((model) => (
+                    <SelectItem key={model} value={model}>
+                      {modelNames[model] || model}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            ) : (
+              <div className="text-center text-sm text-gray-600">
+                <p>{t.models.loginRequired}</p>
+                <div className="mt-2 flex justify-center gap-2">
+                  <Link to="/auth/login" className="text-primary hover:underline">
+                    {t.auth.login.linkText}
+                  </Link>
+                  <span>or</span>
+                  <Link to="/auth/register" className="text-primary hover:underline">
+                    {t.auth.register.linkText}
+                  </Link>
+                </div>
+              </div>
+            )}
+          </motion.div>
+        )}
       </div>
 
       <Button
         onClick={handleSubmit}
         className="w-full"
-        disabled={!selectedModel || isGenerating}
+        disabled={!selectedModel || (selectedModel === "custom" && !customModel && user !== null) || isGenerating}
       >
         {isGenerating ? t.models.generating : `${t.models.continue} ⏎`}
       </Button>

src/components/game/SentenceBuilder.tsx

@@ -25,6 +25,9 @@ interface SentenceWord {
 interface SentenceBuilderProps {
   currentWord: string;
   successfulRounds: number;
+  totalRounds: number;
+  wrongGuesses: number;
+  guessSequence: Array<'success' | 'wrong'>;
   sentence: SentenceWord[];
   playerInput: string;
   isAiThinking: boolean;
@@ -39,6 +42,9 @@ interface SentenceBuilderProps {
 export const SentenceBuilder = ({
   currentWord,
   successfulRounds,
+  totalRounds,
+  wrongGuesses,
+  guessSequence,
   sentence,
   playerInput,
   isAiThinking,
@@ -55,8 +61,6 @@ export const SentenceBuilder = ({
   const [isTooLong, setIsTooLong] = useState(false);
   const t = useTranslation();
 
-  console.log("SentenceBuilder - Rendering with showConfirmDialog:", showConfirmDialog);
-
   const validateInput = (input: string) => {
     setHasMultipleWords(input.trim().split(/\s+/).length > 1);
     setContainsTargetWord(
@@ -85,6 +89,9 @@ export const SentenceBuilder = ({
     >
       <RoundHeader
         successfulRounds={successfulRounds}
+        totalRounds={totalRounds}
+        wrongGuesses={wrongGuesses}
+        guessSequence={guessSequence}
         onBack={onBack}
         showConfirmDialog={showConfirmDialog}
         setShowConfirmDialog={handleSetShowConfirmDialog}
@@ -107,6 +114,16 @@ export const SentenceBuilder = ({
         sentence={sentence}
       />
 
+      <div className="mt-4 flex justify-center gap-4 text-sm">
+        <Button
+          variant="link"
+          className="text-muted-foreground hover:text-primary"
+          onClick={onClose}
+        >
+          {t.game.finishGame}
+        </Button>
+      </div>
+
       <AlertDialog open={showConfirmDialog} onOpenChange={handleSetShowConfirmDialog}>
         <AlertDialogContent>
           <AlertDialogHeader>

src/components/game/WelcomeScreen.tsx

@@ -1,3 +1,4 @@
+
 import { motion } from "framer-motion";
 import { useState, useEffect } from "react";
 import { HighScoreBoard } from "../HighScoreBoard";
@@ -9,8 +10,9 @@ import { HuggingFaceLink } from "./welcome/HuggingFaceLink";
 import { MainActions } from "./welcome/MainActions";
 import { HowToPlayDialog } from "./welcome/HowToPlayDialog";
 import { CreditsDialog } from "./welcome/CreditsDialog";
-import { Mail } from "lucide-react";
+import { Mail, Award, BarChart } from "lucide-react";
 import { StatsDialog } from "./welcome/StatsDialog";
+import { UserMenu } from "../auth/UserMenu";
 
 interface WelcomeScreenProps {
   onStartDaily: () => void;
@@ -44,7 +46,7 @@ export const WelcomeScreen = ({ onStartDaily, onStartNew }: WelcomeScreenProps)
       >
         <div className="relative">
           <h1 className="mb-4 text-4xl font-bold text-gray-900">{t.welcome.title}</h1>
-          <div className="absolute top-0 right-0">
+          <div className="absolute top-0 right-0 flex items-center gap-4">
             <LanguageSelector />
           </div>
           <p className="text-lg text-gray-600">
@@ -70,9 +72,10 @@ export const WelcomeScreen = ({ onStartDaily, onStartNew }: WelcomeScreenProps)
           <div className="flex justify-center items-center gap-4">
             <button
               onClick={() => setShowCredits(true)}
-              className="text-primary hover:text-primary/80 transition-colors"
+              className="inline-flex items-center gap-2 text-primary hover:text-primary/80 transition-colors"
             >
-              Made by M1X
+              <Award className="w-4 h-4" />
+              Credits
             </button>
             <span>•</span>
             <a
@@ -86,9 +89,10 @@ export const WelcomeScreen = ({ onStartDaily, onStartNew }: WelcomeScreenProps)
             <span>•</span>
             <button
               onClick={() => setShowStats(true)}
-              className="text-primary hover:text-primary/80 transition-colors"
+              className="inline-flex items-center gap-2 text-primary hover:text-primary/80 transition-colors"
             >
-              {t.welcome.stats.title}
+              <BarChart className="w-4 h-4" />
+              <span>{t.welcome.stats.title}</span>
             </button>
           </div>
         </div>

src/components/game/WordDisplay.tsx

@@ -10,18 +10,6 @@ interface WordDisplayProps {
 }
 
 export const WordDisplay = ({ currentWord, successfulRounds, onContinue }: WordDisplayProps) => {
-  const [imageLoaded, setImageLoaded] = useState(false);
-  const imagePath = `/think_in_sync_assets/${currentWord.toLowerCase()}.jpg`;
-  const isMobile = useIsMobile();
-
-  useEffect(() => {
-    if (!isMobile) {
-      const img = new Image();
-      img.onload = () => setImageLoaded(true);
-      img.src = imagePath;
-      console.log("Attempting to load image:", imagePath);
-    }
-  }, [imagePath, isMobile]);
 
   return (
     <motion.div
@@ -31,13 +19,6 @@ export const WordDisplay = ({ currentWord, successfulRounds, onContinue }: WordD
     >
       <h2 className="mb-4 text-2xl font-semibold text-gray-900">Your Word</h2>
       <div className="mb-4 overflow-hidden rounded-lg bg-secondary/10">
-        {!isMobile && imageLoaded && (
-          <img
-            src={imagePath}
-            alt={currentWord}
-            className="mx-auto h-48 w-full object-cover"
-          />
-        )}
         <p className="p-6 text-4xl font-bold tracking-wider text-secondary">
           {currentWord}
         </p>

src/components/game/guess-display/ActionButtons.tsx

@@ -21,11 +21,9 @@ export const ActionButtons = ({
 
   return (
     <div className="flex justify-center gap-4">
-      {isCorrect ? (
-        <Button onClick={onNextRound} className="text-white">{t.game.nextRound} ⏎</Button>
-      ) : (
-        <Button onClick={onGameReview} className="text-white">{t.game.review.title} ⏎</Button>
-      )}
+      <Button onClick={onNextRound} className="text-white">
+        {isCorrect ? t.game.nextRound : t.game.nextWord} ⏎
+      </Button>
     </div>
   );
 };

src/components/game/sentence-builder/RoundHeader.tsx

@@ -1,5 +1,5 @@
-import { House } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Home } from "lucide-react";
 import { useTranslation } from "@/hooks/useTranslation";
 import {
   AlertDialog,
@@ -14,6 +14,9 @@ import {
 
 interface RoundHeaderProps {
   successfulRounds: number;
+  totalRounds: number;
+  wrongGuesses: number;
+  guessSequence: Array<'success' | 'wrong'>;
   onBack?: () => void;
   showConfirmDialog: boolean;
   setShowConfirmDialog: (show: boolean) => void;
@@ -22,53 +25,75 @@ interface RoundHeaderProps {
 
 export const RoundHeader = ({
   successfulRounds,
+  totalRounds,
+  wrongGuesses,
+  guessSequence,
   onBack,
   showConfirmDialog,
   setShowConfirmDialog,
   onCancel
 }: RoundHeaderProps) => {
   const t = useTranslation();
+  const currentRound = successfulRounds + wrongGuesses;
+  const remainingRounds = totalRounds - currentRound;
+  const isShortGame = totalRounds <= 10;
 
   const handleHomeClick = () => {
-    console.log("RoundHeader - Home button clicked, successful rounds:", successfulRounds);
-    if (successfulRounds > 0) {
-      console.log("RoundHeader - Setting showConfirmDialog to true");
+    if (successfulRounds > 0 || wrongGuesses > 0) {
       setShowConfirmDialog(true);
     } else {
-      console.log("RoundHeader - No successful rounds, navigating directly");
       onBack?.();
     }
   };
 
   const handleDialogChange = (open: boolean) => {
-    console.log("RoundHeader - Dialog state changing to:", open);
     setShowConfirmDialog(open);
-    if (!open) {  // Dialog is closing
-      console.log("RoundHeader - Dialog closing, triggering navigation");
-      onBack?.();
+    if (!open && onBack) {
+      onBack();
     }
   };
 
-  return (
-    <div className="relative">
-      <div className="absolute right-0 top-0 bg-primary/10 px-3 py-1 rounded-lg">
-        <span className="text-sm font-medium text-primary">
-          {t.game.round} {successfulRounds + 1}
-        </span>
-      </div>
+  // Create an array of results in sequence for games with 10 or fewer words
+  const results = Array(totalRounds).fill('pending').map((_, index) => {
+    return guessSequence[index] || 'pending';
+  });
 
+  return (
+    <div className="relative mb-2 min-h-[3rem]">
       <Button
         variant="ghost"
         size="icon"
         className="absolute left-0 top-0 text-gray-600 hover:text-white"
         onClick={handleHomeClick}
       >
-        <House className="h-5 w-5" />
+        <Home className="h-5 w-5" />
       </Button>
 
-      <h2 className="mb-4 text-2xl font-semibold text-gray-900">
-        {t.game.title}
-      </h2>
+      {isShortGame ? (
+        <div className="flex justify-center items-center h-12">
+          {results.map((result, index) => (
+            <div
+              key={index}
+              className={`h-2.5 w-2.5 rounded-full transition-colors duration-300 mx-1 ${
+                result === 'success' ? 'bg-green-500' :
+                result === 'wrong' ? 'bg-red-500' :
+                'bg-gray-300'
+              }`}
+            />
+          ))}
+        </div>
+      ) : (
+        <div className="absolute right-0 top-0 flex items-center gap-3 bg-primary/5 px-3 py-1.5 rounded-lg">
+          <div className="flex items-center gap-1.5">
+            <div className="h-2.5 w-2.5 rounded-full bg-green-500" />
+            <span className="text-sm font-medium text-green-700">{successfulRounds}</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <div className="h-2.5 w-2.5 rounded-full bg-red-500" />
+            <span className="text-sm font-medium text-red-700">{wrongGuesses}</span>
+          </div>
+        </div>
+      )}
 
       <AlertDialog open={showConfirmDialog} onOpenChange={handleDialogChange}>
         <AlertDialogContent>

src/components/game/sentence-builder/WordDisplay.tsx

@@ -6,30 +6,14 @@ interface WordDisplayProps {
 }
 
 export const WordDisplay = ({ currentWord }: WordDisplayProps) => {
-  const [imageLoaded, setImageLoaded] = useState(false);
-  const imagePath = `/think_in_sync_assets/${currentWord.toLowerCase()}.jpg`;
   const t = useTranslation();
 
-  useEffect(() => {
-    const img = new Image();
-    img.onload = () => setImageLoaded(true);
-    img.src = imagePath;
-    console.log("Attempting to load image:", imagePath);
-  }, [imagePath]);
-
   return (
     <div>
       <p className="mb-1 text-sm text-gray-600">
         {t.game.describeWord}
       </p>
       <div className="mb-6 overflow-hidden rounded-lg bg-secondary/10">
-        {imageLoaded && (
-          <img
-            src={imagePath}
-            alt={currentWord}
-            className="mx-auto h-48 w-full object-cover"
-          />
-        )}
         <p className="p-4 text-2xl font-bold tracking-wider text-secondary">
           {currentWord}
         </p>

src/components/game/welcome/CreditsDialog.tsx

@@ -1,5 +1,5 @@
-
 import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { Github } from "lucide-react";
 
 interface CreditsDialogProps {
   open: boolean;
@@ -11,7 +11,7 @@ export const CreditsDialog = ({ open, onOpenChange }: CreditsDialogProps) => {
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-md">
         <h2 className="text-2xl font-bold mb-4">Credits</h2>
-        <div className="space-y-2 text-gray-600">
+        <div className="space-y-4 text-gray-600">
           <p>
             Made by M1X. We are{" "}
             <a href="https://www.linkedin.com/in/sandro-mikautadze/" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">Sandro</a>,{" "}
@@ -21,6 +21,17 @@ export const CreditsDialog = ({ open, onOpenChange }: CreditsDialogProps) => {
             <a href="https://www.linkedin.com/in/michael-sheroubi/" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">Emiliano</a>,{" "}
             and <a href="https://felixzieger.de/" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">Felix</a>.
           </p>
+          <div className="flex items-center justify-center pt-2">
+            <a
+              href="https://github.com/felixzieger/think-in-sync/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 text-primary hover:text-primary/80 transition-colors"
+            >
+              <Github className="w-5 h-5" />
+              <span>View source on GitHub</span>
+            </a>
+          </div>
         </div>
       </DialogContent>
     </Dialog>

src/components/game/welcome/HowToPlayDialog.tsx

@@ -33,6 +33,13 @@ export const HowToPlayDialog = ({ open, onOpenChange }: HowToPlayDialogProps) =>
                 ))}
               </ul>
             </div>
+            <div>
+              <h3 className="font-medium text-gray-800">{t.howToPlay.gameModes.title}</h3>
+              <ul className="list-disc list-inside space-y-1">
+                <li>{t.howToPlay.gameModes.daily}</li>
+                <li>{t.howToPlay.gameModes.custom}</li>
+              </ul>
+            </div>
           </div>
         </div>
       </DialogContent>

src/contexts/AuthContext.tsx

@@ -0,0 +1,134 @@
+import { createContext, useState, useEffect, useContext, ReactNode } from "react";
+import { supabase } from "@/integrations/supabase/client";
+import { Session, User } from "@supabase/supabase-js";
+
+type AuthContextType = {
+  session: Session | null;
+  user: User | null;
+  loading: boolean;
+  signIn: (email: string, password: string) => Promise<{
+    error: Error | null;
+    success: boolean;
+  }>;
+  signUp: (email: string, password: string) => Promise<{
+    error: Error | null;
+    success: boolean;
+  }>;
+  signInWithGoogle: () => Promise<{
+    error: Error | null;
+    success: boolean;
+  }>;
+  signInWithGitHub: () => Promise<{
+    error: Error | null;
+    success: boolean;
+  }>;
+  signOut: () => Promise<void>;
+};
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const AuthProvider = ({ children }: { children: ReactNode }) => {
+  const [session, setSession] = useState<Session | null>(null);
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Set up auth state listener FIRST
+    const { data: { subscription } } = supabase.auth.onAuthStateChange(
+      (event, session) => {
+        setSession(session);
+        setUser(session?.user ?? null);
+      }
+    );
+
+    // THEN check for existing session
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setSession(session);
+      setUser(session?.user ?? null);
+      setLoading(false);
+    });
+
+    return () => subscription.unsubscribe();
+  }, []);
+
+  const signIn = async (email: string, password: string) => {
+    try {
+      const { error } = await supabase.auth.signInWithPassword({
+        email,
+        password,
+      });
+      return { error, success: !error };
+    } catch (error) {
+      return { error: error as Error, success: false };
+    }
+  };
+
+  const signUp = async (email: string, password: string) => {
+    try {
+      const { error } = await supabase.auth.signUp({
+        email,
+        password,
+      });
+      return { error, success: !error };
+    } catch (error) {
+      return { error: error as Error, success: false };
+    }
+  };
+
+  const signInWithGoogle = async () => {
+    try {
+      const { data, error } = await supabase.auth.signInWithOAuth({
+        provider: 'google',
+        options: {
+          queryParams: {
+            access_type: 'offline',
+            prompt: 'consent',
+          },
+        },
+      });
+      return { error, success: !error };
+    } catch (error) {
+      return { error: error as Error, success: false };
+    }
+  };
+
+  const signInWithGitHub = async () => {
+    try {
+      const { data, error } = await supabase.auth.signInWithOAuth({
+        provider: 'github',
+      });
+      return { error, success: !error };
+    } catch (error) {
+      return { error: error as Error, success: false };
+    }
+  };
+
+  const signOut = async () => {
+    await supabase.auth.signOut();
+  };
+
+  return (
+    <AuthContext.Provider
+      value={{
+        session,
+        user,
+        loading,
+        signIn,
+        signUp,
+        signInWithGoogle,
+        signInWithGitHub,
+        signOut,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+};

src/contexts/LanguageContext.tsx

@@ -20,17 +20,14 @@ export const LanguageProvider = ({ children }: LanguageProviderProps) => {
 
   useEffect(() => {
     const savedLang = localStorage.getItem('language') as Language;
-    console.log('[LanguageContext] Initial load - Saved language:', savedLang);
     if (savedLang && ['en', 'fr', 'de', 'it', 'es', 'pt'].includes(savedLang)) {
       setLanguage(savedLang);
     }
   }, []);
 
   const handleSetLanguage = (lang: Language) => {
-    console.log('[LanguageContext] Setting new language:', lang);
     setLanguage(lang);
     localStorage.setItem('language', lang);
-    console.log('[LanguageContext] Updated localStorage:', localStorage.getItem('language'));
   };
 
   return (

src/env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_GOOGLE_CLIENT_ID: string
+  // Add other env variables here if needed
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+} 

src/i18n/translations/de.ts

@@ -21,9 +21,12 @@ export const de = {
     confirm: "Bestätigen",
     describeWord: "Dein Ziel ist es folgendes Wort zu beschreiben",
     nextRound: "Nächste Runde",
+    nextWord: "Nächstes Wort",
     playAgain: "Erneut spielen",
     saveScore: "Punktzahl speichern",
     playNewWords: "Neue Wörter spielen",
+    skipWord: "Wort überspringen",
+    finishGame: "Spiel beenden",
     review: {
       title: "Spielübersicht",
       successfulRounds: "Erfolgreiche Runden",
@@ -48,7 +51,8 @@ export const de = {
       yourDescription: "Deine Beschreibung",
       friendDescription: "Beschreibung des Freundes",
       aiGuessed: "KI hat geraten",
-      words: "Wörter"
+      words: "Wörter",
+      avgWords: "Durchschnittliche Wörter pro Runde"
     },
     invitation: {
       title: "Spieleinladung",
@@ -83,7 +87,7 @@ export const de = {
     scoreSubmitted: "Punktzahl eingereicht!",
     scoreSubmittedDesc: "Deine Punktzahl wurde zur Bestenliste hinzugefügt",
     modes: {
-      daily: "Tägliche Herausforderung",
+      daily: "Die heutigen Täglichen 10",
       "all-time": "Bestenliste"
     },
     error: {
@@ -133,8 +137,8 @@ export const de = {
     title: "Think in Sync",
     subtitle: "Arbeite mit KI zusammen, um einen Hinweis zu erstellen und lass eine andere KI dein geheimes Wort erraten!",
     startButton: "Spiel starten",
-    startDailyButton: "Tägliche Herausforderung",
-    startNewButton: "Neues Spiel",
+    startDailyButton: "Spiele die Täglichen 10",
+    startNewButton: "Freestyle spielen",
     dailyLeaderboard: "Tagesranking",
     howToPlay: "Spielanleitung",
     leaderboard: "Bestenliste",
@@ -186,12 +190,70 @@ export const de = {
         "Sei kreativ und beschreibend",
         "Die KI wird nach jedem Satz versuchen, dein Wort zu erraten"
       ]
+    },
+    gameModes: {
+      title: "Spielmodi",
+      daily: "Tägliche 10: Alle Spieler erhalten die gleiche Wortliste, die sich alle 24 Stunden erneuert",
+      custom: "Freestyle: Wähle dein eigenes Thema und spiele dein persönliches Spiel"
     }
   },
   models: {
     title: "KI-Modell wählen",
     subtitle: "Wähle das KI-Modell, das mit dir zusammen spielen wird",
     continue: "Weiter",
-    generating: "Wird generiert..."
+    generating: "Wird generiert...",
+    custom: "Benutzerdefiniertes Modell",
+    searchPlaceholder: "Nach einem Modell suchen...",
+    loginRequired: "Bitte melde dich an oder registriere dich, um benutzerdefinierte Modelle zu verwenden"
+  },
+  auth: {
+    login: {
+      linkText: "Anmelden",
+      title: "Anmelden",
+      subtitle: "Melde dich bei deinem Konto an",
+      email: "E-Mail",
+      password: "Passwort",
+      submit: "Anmelden",
+      loggingIn: "Wird angemeldet...",
+      noAccount: "Noch kein Konto?",
+      register: "Registrieren"
+    },
+    loginSuccess: {
+      title: "Anmeldung erfolgreich",
+      description: "Du wurdest erfolgreich angemeldet"
+    },
+    loginError: {
+      title: "Anmeldung fehlgeschlagen",
+      description: "Bei der Anmeldung ist ein Fehler aufgetreten"
+    },
+    register: {
+      linkText: "Registrieren",
+      title: "Registrieren",
+      description: "Erstelle ein neues Konto",
+      email: "E-Mail",
+      password: "Passwort",
+      confirmPassword: "Passwort bestätigen",
+      submit: "Registrieren",
+      registering: "Registrieren...",
+      haveAccount: "Bereits ein Konto?",
+      login: "Anmelden"
+    },
+    registerSuccess: {
+      title: "Registrierung erfolgreich",
+      description: "Dein Konto wurde erfolgreich erstellt"
+    },
+    registerError: {
+      title: "Registrierung fehlgeschlagen",
+      description: "Bei der Registrierung ist ein Fehler aufgetreten"
+    },
+    logoutSuccess: {
+      title: "Abgemeldet",
+      description: "Du wurdest erfolgreich abgemeldet"
+    },
+    form: {
+      email: "E-Mail",
+      password: "Passwort",
+      logout: "Abmelden"
+    }
   }
 };

src/i18n/translations/en.ts

@@ -21,8 +21,11 @@ export const en = {
     confirm: "Confirm",
     describeWord: "Your goal is to describe the word",
     nextRound: "Next Round",
+    nextWord: "Next Word",
     playAgain: "Play Again",
     saveScore: "Save Score",
+    skipWord: "Skip word",
+    finishGame: "Finish game",
     review: {
       title: "Game Review",
       successfulRounds: "Successful Rounds",
@@ -37,6 +40,10 @@ export const en = {
       urlCopyErrorDesc: "Please try copying the URL manually",
       youWin: "You Won!",
       youLost: "You Lost!",
+      correct: "Correct",
+      wrong: "Wrong",
+      total: "Total",
+      avgWords: "Average Words per Round",
       friendScore: (score: number, avgWords: string) =>
         `The person that challenged you completed ${score} rounds successfully with an average of ${avgWords} words.`,
       word: "Word",
@@ -82,7 +89,7 @@ export const en = {
     scoreSubmitted: "Score Submitted!",
     scoreSubmittedDesc: "Your score has been added to the leaderboard",
     modes: {
-      daily: "Daily Challenge",
+      daily: "Daily 10",
       "all-time": "All Time"
     },
     error: {
@@ -132,8 +139,8 @@ export const en = {
     title: "Think in Sync",
     subtitle: "Team up with AI to craft a clue and have a different AI guess your secret word!",
     startButton: "Start Game",
-    startDailyButton: "Daily Challenge",
-    startNewButton: "New Game",
+    startDailyButton: "Play Daily 10",
+    startNewButton: "Play Freestyle",
     dailyLeaderboard: "Today's Ranking",
     howToPlay: "How to Play",
     leaderboard: "Leaderboard",
@@ -185,12 +192,70 @@ export const en = {
         "Try to be creative and descriptive",
         "The AI will try to guess your word after each sentence"
       ]
+    },
+    gameModes: {
+      title: "Game Modes",
+      daily: "Daily 10: Everyone gets the same wordlist, refreshed every 24 hours",
+      custom: "Freestyle: Choose your own theme and play a personal game"
     }
   },
   models: {
     title: "Choose an AI Model",
     subtitle: "Select the AI model that will play together with you",
     continue: "Continue",
-    generating: "Generating..."
+    generating: "Generating...",
+    custom: "Custom Model",
+    searchPlaceholder: "Search for a model...",
+    loginRequired: "Please log in or register to use custom models"
+  },
+  auth: {
+    login: {
+      linkText: "Login",
+      title: "Login",
+      subtitle: "Sign in to your account",
+      email: "Email",
+      password: "Password",
+      submit: "Login",
+      loggingIn: "Logging in...",
+      noAccount: "Don't have an account?",
+      register: "Register"
+    },
+    loginSuccess: {
+      title: "Login successful",
+      description: "You have been successfully logged in"
+    },
+    loginError: {
+      title: "Login failed",
+      description: "An error occurred while trying to log in"
+    },
+    register: {
+      linkText: "Register",
+      title: "Register",
+      description: "Create a new account",
+      email: "Email",
+      password: "Password",
+      confirmPassword: "Confirm Password",
+      submit: "Register",
+      registering: "Registering...",
+      haveAccount: "Already have an account?",
+      login: "Login"
+    },
+    registerSuccess: {
+      title: "Registration successful",
+      description: "Your account has been created successfully"
+    },
+    registerError: {
+      title: "Registration failed",
+      description: "An error occurred while trying to register"
+    },
+    logoutSuccess: {
+      title: "Logged out",
+      description: "You have been successfully logged out"
+    },
+    form: {
+      email: "Email",
+      password: "Password",
+      logout: "Logout"
+    }
   }
 };

src/i18n/translations/es.ts

@@ -20,10 +20,13 @@ export const es = {
     cancel: "Cancelar",
     confirm: "Confirmar",
     describeWord: "Tu objetivo es describir la palabra",
-    nextRound: "Siguiente Ronda",
-    playAgain: "Jugar de Nuevo",
+    nextRound: "Siguiente ronda",
+    nextWord: "Siguiente palabra",
+    playAgain: "Jugar de nuevo",
     saveScore: "Guardar Puntuación",
     playNewWords: "Jugar nuevas palabras",
+    skipWord: "Saltar palabra",
+    finishGame: "Terminar juego",
     review: {
       title: "Resumen del Juego",
       successfulRounds: "Rondas Exitosas",
@@ -45,10 +48,11 @@ export const es = {
       friendWords: "Amigo",
       result: "Resultado",
       details: "Detalles",
-      yourDescription: "Tu Descripción",
-      friendDescription: "Descripción del Amigo",
-      aiGuessed: "La IA adivinó",
-      words: "Palabras"
+      yourDescription: "Tu descripción",
+      friendDescription: "Descripción del amigo",
+      aiGuessed: "IA adivinó",
+      words: "Palabras",
+      avgWords: "Promedio de palabras por ronda"
     },
     invitation: {
       title: "Invitación al Juego",
@@ -83,7 +87,7 @@ export const es = {
     scoreSubmitted: "¡Puntuación enviada!",
     scoreSubmittedDesc: "Tu puntuación ha sido añadida a la tabla de clasificación",
     modes: {
-      daily: "Desafío Diario",
+      daily: "Diario 10 de hoy",
       "all-time": "Histórico"
     },
     error: {
@@ -133,8 +137,8 @@ export const es = {
     title: "Think in Sync",
     subtitle: "¡Forma equipo con la IA para crear una pista y deja que otra IA adivine tu palabra secreta!",
     startButton: "Comenzar juego",
-    startDailyButton: "Desafío Diario",
-    startNewButton: "Nuevo Juego",
+    startDailyButton: "Jugar Diario 10",
+    startNewButton: "Jugar Freestyle",
     dailyLeaderboard: "Ranking diario",
     howToPlay: "Cómo jugar",
     leaderboard: "Clasificación",
@@ -186,6 +190,70 @@ export const es = {
         "Sé creativo y descriptivo",
         "La IA intentará adivinar tu palabra después de cada frase"
       ]
+    },
+    gameModes: {
+      title: "Modos de Juego",
+      daily: "Diario 10: La misma lista de palabras para todos, renovada cada 24 horas",
+      custom: "Freestyle: Elige un tema y juega tu partida personal"
+    }
+  },
+  models: {
+    title: "Elige un Modelo de IA",
+    subtitle: "Selecciona el modelo de IA que jugará contigo",
+    continue: "Continuar",
+    generating: "Generando...",
+    custom: "Modelo Personalizado",
+    searchPlaceholder: "Buscar un modelo...",
+    loginRequired: "Por favor inicia sesión o regístrate para usar modelos personalizados"
+  },
+  auth: {
+    login: {
+      linkText: "Iniciar sesión",
+      title: "Iniciar sesión",
+      subtitle: "Inicia sesión en tu cuenta",
+      email: "Correo electrónico",
+      password: "Contraseña",
+      submit: "Iniciar sesión",
+      loggingIn: "Iniciando sesión...",
+      noAccount: "¿No tienes una cuenta?",
+      register: "Registrarse"
+    },
+    loginSuccess: {
+      title: "Inicio de sesión exitoso",
+      description: "Has iniciado sesión correctamente"
+    },
+    loginError: {
+      title: "Error de inicio de sesión",
+      description: "Ocurrió un error al intentar iniciar sesión"
+    },
+    register: {
+      linkText: "Registrarse",
+      title: "Registrarse",
+      description: "Crea una nueva cuenta",
+      email: "Correo electrónico",
+      password: "Contraseña",
+      confirmPassword: "Confirmar contraseña",
+      submit: "Registrarse",
+      registering: "Registrando...",
+      haveAccount: "¿Ya tienes una cuenta?",
+      login: "Iniciar sesión"
+    },
+    registerSuccess: {
+      title: "Registro exitoso",
+      description: "Tu cuenta ha sido creada exitosamente"
+    },
+    registerError: {
+      title: "Error de registro",
+      description: "Ocurrió un error al intentar registrarse"
+    },
+    logoutSuccess: {
+      title: "Sesión cerrada",
+      description: "Has cerrado la sesión correctamente"
+    },
+    form: {
+      email: "Correo electrónico",
+      password: "Contraseña",
+      logout: "Cerrar sesión"
     }
   }
 };

src/i18n/translations/fr.ts

@@ -20,9 +20,12 @@ export const fr = {
     cancel: "Annuler",
     confirm: "Confirmer",
     describeWord: "Votre objectif est de décrire le mot",
-    nextRound: "Tour Suivant",
+    nextRound: "Ronde suivante",
+    nextWord: "Mot suivant",
     playAgain: "Rejouer",
     saveScore: "Sauvegarder le Score",
+    skipWord: "Passer le mot",
+    finishGame: "Terminer la partie",
     review: {
       title: "Résumé de la Partie",
       successfulRounds: "Manches Réussies",
@@ -38,16 +41,17 @@ export const fr = {
       youWin: "Vous avez gagné !",
       youLost: "Vous avez perdu !",
       friendScore: (score: number, avgWords: string) =>
-        `La personne qui vous a défié a complété ${score} manches avec une moyenne de ${avgWords} mots.`,
+        `La personne qui vous a mis au défi a complété ${score} rondes avec succès avec une moyenne de ${avgWords} mots.`,
       word: "Mot",
       yourWords: "Vous",
       friendWords: "Ami",
       result: "Résultat",
       details: "Détails",
-      yourDescription: "Votre Description",
-      friendDescription: "Description de l'Ami",
-      aiGuessed: "L'IA a deviné",
-      words: "Mots"
+      yourDescription: "Votre description",
+      friendDescription: "Description de l'ami",
+      aiGuessed: "IA a deviné",
+      words: "Mots",
+      avgWords: "Moyenne de mots par ronde"
     },
     invitation: {
       title: "Invitation au Jeu",
@@ -82,7 +86,7 @@ export const fr = {
     scoreSubmitted: "Score soumis !",
     scoreSubmittedDesc: "Votre score a été ajouté au classement",
     modes: {
-      daily: "Défi du Jour",
+      daily: "Quotidien 10 d'aujourd'hui",
       "all-time": "Historique"
     },
     error: {
@@ -128,8 +132,8 @@ export const fr = {
     title: "Think in Sync",
     subtitle: "Collaborez avec une IA pour créer un indice, puis laissez-en une autre deviner votre mot secret !",
     startButton: "Commencer",
-    startDailyButton: "Défi du Jour",
-    startNewButton: "Nouvelle Partie",
+    startDailyButton: "Jouer Quotidien 10",
+    startNewButton: "Jouer Freestyle",
     dailyLeaderboard: "Classement du jour",
     howToPlay: "Comment Jouer",
     leaderboard: "Classement",
@@ -181,12 +185,70 @@ export const fr = {
         "Soyez créatif et descriptif",
         "L'IA essaiera de deviner votre mot après chaque phrase"
       ]
+    },
+    gameModes: {
+      title: "Modes de Jeu",
+      daily: "Quotidien 10 : La même liste de mots pour tous, renouvelée toutes les 24 heures",
+      custom: "Freestyle : Choisissez un thème et jouez votre partie personnelle"
     }
   },
   models: {
-    title: "Choisissez un Modèle IA",
-    subtitle: "Sélectionnez le modèle IA qui jouera avec vous",
+    title: "Choisissez un Modèle d'IA",
+    subtitle: "Sélectionnez le modèle d'IA qui jouera avec vous",
     continue: "Continuer",
-    generating: "Génération en cours..."
+    generating: "Génération en cours...",
+    custom: "Modèle Personnalisé",
+    searchPlaceholder: "Rechercher un modèle...",
+    loginRequired: "Veuillez vous connecter ou vous inscrire pour utiliser des modèles personnalisés"
+  },
+  auth: {
+    login: {
+      linkText: "Se connecter",
+      title: "Se connecter",
+      subtitle: "Connectez-vous à votre compte",
+      email: "Email",
+      password: "Mot de passe",
+      submit: "Se connecter",
+      loggingIn: "Connexion en cours...",
+      noAccount: "Vous n'avez pas de compte ?",
+      register: "S'inscrire"
+    },
+    loginSuccess: {
+      title: "Connexion réussie",
+      description: "Vous êtes connecté avec succès"
+    },
+    loginError: {
+      title: "Échec de la connexion",
+      description: "Une erreur s'est produite lors de la tentative de connexion"
+    },
+    register: {
+      linkText: "S'inscrire",
+      title: "S'inscrire",
+      description: "Créez un nouveau compte",
+      email: "Email",
+      password: "Mot de passe",
+      confirmPassword: "Confirmer le mot de passe",
+      submit: "S'inscrire",
+      registering: "Inscription en cours...",
+      haveAccount: "Vous avez déjà un compte ?",
+      login: "Se connecter"
+    },
+    registerSuccess: {
+      title: "Inscription réussie",
+      description: "Votre compte a été créé avec succès"
+    },
+    registerError: {
+      title: "Échec de l'inscription",
+      description: "Une erreur s'est produite lors de la tentative d'inscription"
+    },
+    logoutSuccess: {
+      title: "Déconnexion",
+      description: "Vous avez été déconnecté avec succès"
+    },
+    form: {
+      email: "Email",
+      password: "Mot de passe",
+      logout: "Se déconnecter"
+    }
   }
 };

src/i18n/translations/it.ts

@@ -20,9 +20,12 @@ export const it = {
     cancel: "Annulla",
     confirm: "Conferma",
     describeWord: "Il tuo obiettivo è descrivere la parola",
-    nextRound: "Prossimo Turno",
-    playAgain: "Gioca Ancora",
+    nextRound: "Round successivo",
+    nextWord: "Prossima parola",
+    playAgain: "Gioca di nuovo",
     saveScore: "Salva Punteggio",
+    skipWord: "Salta parola",
+    finishGame: "Termina gioco",
     review: {
       title: "Riepilogo Partita",
       successfulRounds: "Turni Riusciti",
@@ -38,16 +41,17 @@ export const it = {
       youWin: "Hai vinto!",
       youLost: "Hai perso!",
       friendScore: (score: number, avgWords: string) =>
-        `La persona che ti ha sfidato ha completato ${score} turni con una media di ${avgWords} parole.`,
+        `La persona che ti ha sfidato ha completato ${score} round con successo con una media di ${avgWords} parole.`,
       word: "Parola",
       yourWords: "Tu",
       friendWords: "Amico",
       result: "Risultato",
       details: "Dettagli",
-      yourDescription: "La Tua Descrizione",
-      friendDescription: "Descrizione dell'Amico",
-      aiGuessed: "L'IA ha indovinato",
-      words: "Parole"
+      yourDescription: "La tua descrizione",
+      friendDescription: "Descrizione dell'amico",
+      aiGuessed: "IA ha indovinato",
+      words: "Parole",
+      avgWords: "Media di parole per round"
     },
     invitation: {
       title: "Invito al Gioco",
@@ -82,7 +86,7 @@ export const it = {
     scoreSubmitted: "Punteggio inviato!",
     scoreSubmittedDesc: "Il tuo punteggio è stato aggiunto alla classifica",
     modes: {
-      daily: "Sfida Giornaliera",
+      daily: "Giornaliero 10 di oggi",
       "all-time": "Classifica Generale"
     },
     error: {
@@ -134,8 +138,8 @@ export const it = {
     title: "Think in Sync",
     subtitle: "Fai squadra con l'IA per creare un indizio e lascia che un'altra IA indovini la tua parola segreta!",
     startButton: "Inizia gioco",
-    startDailyButton: "Sfida Giornaliera",
-    startNewButton: "Nuova Partita",
+    startDailyButton: "Gioca Giornaliero 10",
+    startNewButton: "Gioca Freestyle",
     dailyLeaderboard: "Classifica di oggi",
     howToPlay: "Come giocare",
     leaderboard: "Classifica",
@@ -187,12 +191,70 @@ export const it = {
         "Sii creativo e descrittivo",
         "L'IA cercherà di indovinare la tua parola dopo ogni frase"
       ]
+    },
+    gameModes: {
+      title: "Modalità di Gioco",
+      daily: "Giornaliero 10: La stessa lista di parole per tutti, rinnovata ogni 24 ore",
+      custom: "Freestyle: Scegli un tema e gioca la tua partita personale"
     }
   },
   models: {
     title: "Scegli un Modello IA",
-    subtitle: "Seleziona il modello IA che giocherà insieme a te",
+    subtitle: "Seleziona il modello IA che giocherà con te",
     continue: "Continua",
-    generating: "Generazione in corso..."
+    generating: "Generazione...",
+    custom: "Modello Personalizzato",
+    searchPlaceholder: "Cerca un modello...",
+    loginRequired: "Accedi o registrati per utilizzare modelli personalizzati"
+  },
+  auth: {
+    login: {
+      linkText: "Accedi",
+      title: "Accedi",
+      subtitle: "Accedi al tuo account",
+      email: "Email",
+      password: "Password",
+      submit: "Accedi",
+      loggingIn: "Accesso in corso...",
+      noAccount: "Non hai un account?",
+      register: "Registrati"
+    },
+    loginSuccess: {
+      title: "Accesso riuscito",
+      description: "Hai effettuato l'accesso con successo"
+    },
+    loginError: {
+      title: "Accesso fallito",
+      description: "Si è verificato un errore durante l'accesso"
+    },
+    register: {
+      linkText: "Registrati",
+      title: "Registrati",
+      description: "Crea un nuovo account",
+      email: "Email",
+      password: "Password",
+      confirmPassword: "Conferma password",
+      submit: "Registrati",
+      registering: "Registrazione in corso...",
+      haveAccount: "Hai già un account?",
+      login: "Accedi"
+    },
+    registerSuccess: {
+      title: "Registrazione completata",
+      description: "Il tuo account è stato creato con successo"
+    },
+    registerError: {
+      title: "Registrazione fallita",
+      description: "Si è verificato un errore durante la registrazione"
+    },
+    logoutSuccess: {
+      title: "Disconnesso",
+      description: "Hai effettuato la disconnessione con successo"
+    },
+    form: {
+      email: "Email",
+      password: "Password",
+      logout: "Disconnetti"
+    }
   }
 };

src/i18n/translations/pt.ts

@@ -20,10 +20,13 @@ export const pt = {
         cancel: "Cancelar",
         confirm: "Confirmar",
         describeWord: "Seu objetivo é descrever a palavra",
-        nextRound: "Próxima Rodada",
-        playAgain: "Jogar Novamente",
+        nextRound: "Próxima rodada",
+        nextWord: "Próxima palavra",
+        playAgain: "Jogar novamente",
         saveScore: "Salvar Pontuação",
         playNewWords: "Jogar novas palavras",
+        skipWord: "Pular palavra",
+        finishGame: "Terminar jogo",
         review: {
             title: "Resumo do Jogo",
             successfulRounds: "Rodadas Bem-sucedidas",
@@ -45,10 +48,11 @@ export const pt = {
             friendWords: "Amigo",
             result: "Resultado",
             details: "Detalhes",
-            yourDescription: "Sua Descrição",
-            friendDescription: "Descrição do Amigo",
-            aiGuessed: "A IA adivinhou",
-            words: "Palavras"
+            yourDescription: "Sua descrição",
+            friendDescription: "Descrição do amigo",
+            aiGuessed: "IA adivinhou",
+            words: "Palavras",
+            avgWords: "Média de palavras por rodada"
         },
         invitation: {
             title: "Convite para o Jogo",
@@ -83,7 +87,7 @@ export const pt = {
         scoreSubmitted: "Pontuação enviada!",
         scoreSubmittedDesc: "Sua pontuação foi adicionada ao placar",
         modes: {
-            daily: "Desafio Diário",
+            daily: "Diário 10 de hoje",
             "all-time": "Histórico"
         },
         error: {
@@ -133,8 +137,8 @@ export const pt = {
         title: "Think in Sync",
         subtitle: "Forme uma equipe com a IA para criar uma pista e deixe outra IA adivinhar sua palavra secreta!",
         startButton: "Iniciar jogo",
-        startDailyButton: "Desafio Diário",
-        startNewButton: "Novo Jogo",
+        startDailyButton: "Jogar Diário 10",
+        startNewButton: "Jogar Freestyle",
         dailyLeaderboard: "Placar diário",
         howToPlay: "Como jogar",
         leaderboard: "Placar",
@@ -186,12 +190,70 @@ export const pt = {
                 "Seja criativo e descritivo",
                 "A IA tentará adivinhar sua palavra após cada frase"
             ]
+        },
+        gameModes: {
+            title: "Modos de Jogo",
+            daily: "Diário 10: A mesma lista de palavras para todos, atualizada a cada 24 horas",
+            custom: "Freestyle: Escolha um tema e jogue seu jogo pessoal"
         }
     },
     models: {
         title: "Escolha um Modelo de IA",
-        subtitle: "Selecione o modelo de IA que jogará junto com você",
+        subtitle: "Selecione o modelo de IA que jogará com você",
         continue: "Continuar",
-        generating: "Gerando..."
+        generating: "Gerando...",
+        custom: "Modelo Personalizado",
+        searchPlaceholder: "Pesquisar um modelo...",
+        loginRequired: "Por favor, faça login ou registre-se para usar modelos personalizados"
+    },
+    auth: {
+        login: {
+            linkText: "Entrar",
+            title: "Entrar",
+            subtitle: "Entre na sua conta",
+            email: "Email",
+            password: "Senha",
+            submit: "Entrar",
+            loggingIn: "Entrando...",
+            noAccount: "Não tem uma conta?",
+            register: "Registrar"
+        },
+        loginSuccess: {
+            title: "Login bem-sucedido",
+            description: "Você entrou com sucesso"
+        },
+        loginError: {
+            title: "Falha no login",
+            description: "Ocorreu um erro ao tentar fazer login"
+        },
+        register: {
+            linkText: "Registrar",
+            title: "Registrar",
+            description: "Crie uma nova conta",
+            email: "Email",
+            password: "Senha",
+            confirmPassword: "Confirmar senha",
+            submit: "Registrar",
+            registering: "Registrando...",
+            haveAccount: "Já tem uma conta?",
+            login: "Entrar"
+        },
+        registerSuccess: {
+            title: "Registro bem-sucedido",
+            description: "Sua conta foi criada com sucesso"
+        },
+        registerError: {
+            title: "Falha no registro",
+            description: "Ocorreu um erro ao tentar se registrar"
+        },
+        logoutSuccess: {
+            title: "Desconectado",
+            description: "Você foi desconectado com sucesso"
+        },
+        form: {
+            email: "Email",
+            password: "Senha",
+            logout: "Sair"
+        }
     }
 };

src/lib/words-standard.ts

@@ -76,7 +76,6 @@ export const englishWords = [
   "NEST",
   "ROCK",
   "LEAF",
-  "BRUSH",
   "TOOTH",
   "HAND",
   "FOOT",
@@ -129,7 +128,7 @@ export const englishWords = [
   "DRYER",
   "FURNACE",
   "FAN",
-  "PAINTBRUSH",
+  "BRUSH",
   "BUCKET",
   "SPONGE",
   "SOAP",

src/pages/auth/Login.tsx

@@ -0,0 +1,276 @@
+import { useState, useEffect } from "react";
+import { useNavigate, Link } from "react-router-dom";
+import { useAuth } from "@/contexts/AuthContext";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { useToast } from "@/hooks/use-toast";
+import { useTranslation } from "@/hooks/useTranslation";
+import { Loader2 } from "lucide-react";
+
+declare global {
+  interface Window {
+    handleSignInWithGoogle: (response: { credential: string }) => Promise<void>;
+    google?: {
+      accounts: {
+        id: {
+          initialize: (config: {
+            client_id: string;
+            callback: (response: { credential: string }) => Promise<void>;
+          }) => void;
+          prompt: () => void;
+        };
+      };
+    };
+  }
+}
+
+const formSchema = z.object({
+  email: z.string().email(),
+  password: z.string().min(6),
+});
+
+export const Login = () => {
+  const { signIn, signInWithGoogle, signInWithGitHub, user } = useAuth();
+  const navigate = useNavigate();
+  const [isLoading, setIsLoading] = useState(false);
+  const [isOAuthLoading, setIsOAuthLoading] = useState(false);
+  const { toast } = useToast();
+  const t = useTranslation();
+  
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+
+  useEffect(() => {
+    // Add Google Sign-In script
+    const script = document.createElement('script');
+    script.src = 'https://accounts.google.com/gsi/client';
+    script.async = true;
+    script.onload = () => {
+      // Initialize Google Identity Services
+      window.google?.accounts.id.initialize({
+        client_id: import.meta.env.VITE_GOOGLE_CLIENT_ID,
+        callback: window.handleSignInWithGoogle,
+      });
+    };
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (user && isOAuthLoading) {
+      setIsOAuthLoading(false);
+      toast({
+        title: t.auth.loginSuccess.title,
+        description: t.auth.loginSuccess.description,
+      });
+      navigate("/");
+    }
+  }, [user, isOAuthLoading, navigate, toast, t.auth.loginSuccess]);
+
+  useEffect(() => {
+    // Initialize Google One Tap
+    window.handleSignInWithGoogle = async (response) => {
+      try {
+        if (!response.credential) {
+          throw new Error('No credential received from Google');
+        }
+        
+        setIsOAuthLoading(true);
+        const { error } = await signInWithGoogle();
+        
+        if (error) {
+          setIsOAuthLoading(false);
+          toast({
+            variant: "destructive",
+            title: t.auth.loginError.title,
+            description: error.message,
+          });
+        }
+      } catch (error) {
+        setIsOAuthLoading(false);
+        toast({
+          variant: "destructive",
+          title: t.auth.loginError.title,
+          description: t.auth.loginError.description,
+        });
+      }
+    };
+  }, [signInWithGoogle, toast, t.auth.loginError]);
+
+  const handleGitHubLogin = async () => {
+    try {
+      setIsOAuthLoading(true);
+      const { error } = await signInWithGitHub();
+      
+      if (error) {
+        setIsOAuthLoading(false);
+        toast({
+          variant: "destructive",
+          title: t.auth.loginError.title,
+          description: error.message,
+        });
+      }
+    } catch (error) {
+      setIsOAuthLoading(false);
+      toast({
+        variant: "destructive",
+        title: t.auth.loginError.title,
+        description: t.auth.loginError.description,
+      });
+    }
+  };
+
+  const onSubmit = async (values: z.infer<typeof formSchema>) => {
+    try {
+      setIsLoading(true);
+      const { error, success } = await signIn(values.email, values.password);
+      
+      if (success) {
+        toast({
+          title: t.auth.loginSuccess.title,
+          description: t.auth.loginSuccess.description,
+        });
+        navigate("/");
+      } else if (error) {
+        toast({
+          variant: "destructive",
+          title: t.auth.loginError.title,
+          description: error.message,
+        });
+      }
+    } catch (error) {
+      toast({
+        variant: "destructive",
+        title: t.auth.loginError.title,
+        description: t.auth.loginError.description,
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center px-4 py-12">
+      {isOAuthLoading ? (
+        <div className="flex flex-col items-center gap-4">
+          <Loader2 className="h-8 w-8 animate-spin" />
+          <p className="text-sm text-muted-foreground">Authenticating...</p>
+        </div>
+      ) : (
+        <div className="w-full max-w-md space-y-8">
+          <div className="text-center">
+            <h1 className="text-2xl font-bold">{t.auth.login.title}</h1>
+            <p className="mt-2 text-sm text-gray-600">{t.auth.login.subtitle}</p>
+          </div>
+          
+          <div className="flex flex-col gap-4">
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full flex items-center justify-center gap-2"
+              onClick={() => {
+                window.google?.accounts.id.prompt();
+              }}
+              disabled={isLoading}
+            >
+              <img src="https://www.google.com/favicon.ico" alt="Google" className="w-4 h-4" />
+              Continue with Google
+            </Button>
+
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full flex items-center justify-center gap-2"
+              onClick={handleGitHubLogin}
+              disabled={isLoading}
+            >
+              <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+              </svg>
+              Continue with GitHub
+            </Button>
+          </div>
+
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <span className="w-full border-t" />
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
+              <span className="bg-background px-2 text-muted-foreground">
+                Or continue with email
+              </span>
+            </div>
+          </div>
+          
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t.auth.form.email}</FormLabel>
+                    <FormControl>
+                      <Input 
+                        placeholder="[email protected]" 
+                        {...field} 
+                        disabled={isLoading}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              
+              <FormField
+                control={form.control}
+                name="password"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t.auth.form.password}</FormLabel>
+                    <FormControl>
+                      <Input 
+                        type="password" 
+                        placeholder="••••••••" 
+                        {...field} 
+                        disabled={isLoading}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              
+              <Button type="submit" className="w-full" disabled={isLoading}>
+                {isLoading ? t.auth.login.loggingIn : t.auth.login.submit}
+              </Button>
+            </form>
+          </Form>
+          
+          <div className="mt-4 text-center text-sm">
+            <p>
+              {t.auth.login.noAccount}{" "}
+              <Link to="/auth/register" className="font-medium text-primary hover:underline">
+                {t.auth.register.linkText}
+              </Link>
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Login;

src/pages/auth/Register.tsx

@@ -0,0 +1,302 @@
+import { useState, useEffect } from "react";
+import { useNavigate, Link } from "react-router-dom";
+import { useAuth } from "@/contexts/AuthContext";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { useToast } from "@/hooks/use-toast";
+import { useTranslation } from "@/hooks/useTranslation";
+import { Loader2 } from "lucide-react";
+
+declare global {
+  interface Window {
+    handleSignInWithGoogle: (response: { credential: string }) => Promise<void>;
+    google?: {
+      accounts: {
+        id: {
+          initialize: (config: {
+            client_id: string;
+            callback: (response: { credential: string }) => Promise<void>;
+          }) => void;
+          prompt: () => void;
+        };
+      };
+    };
+  }
+}
+
+const formSchema = z.object({
+  email: z.string().email(),
+  password: z.string().min(6),
+  confirmPassword: z.string().min(6),
+}).refine((data) => data.password === data.confirmPassword, {
+  message: "Passwords don't match",
+  path: ["confirmPassword"],
+});
+
+export const Register = () => {
+  const { signUp, signInWithGoogle, signInWithGitHub, user } = useAuth();
+  const navigate = useNavigate();
+  const [isLoading, setIsLoading] = useState(false);
+  const [isOAuthLoading, setIsOAuthLoading] = useState(false);
+  const { toast } = useToast();
+  const t = useTranslation();
+  
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: "",
+      password: "",
+      confirmPassword: "",
+    },
+  });
+
+  useEffect(() => {
+    // Add Google Sign-In script
+    const script = document.createElement('script');
+    script.src = 'https://accounts.google.com/gsi/client';
+    script.async = true;
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (user && isOAuthLoading) {
+      setIsOAuthLoading(false);
+      toast({
+        title: t.auth.loginSuccess.title,
+        description: t.auth.loginSuccess.description,
+      });
+      navigate("/");
+    }
+  }, [user, isOAuthLoading, navigate, toast, t.auth.loginSuccess]);
+
+  useEffect(() => {
+    // Initialize Google One Tap
+    window.handleSignInWithGoogle = async (response) => {
+      try {
+        if (!response.credential) {
+          throw new Error('No credential received from Google');
+        }
+        
+        setIsOAuthLoading(true);
+        const { error } = await signInWithGoogle();
+        
+        if (error) {
+          setIsOAuthLoading(false);
+          toast({
+            variant: "destructive",
+            title: t.auth.loginError.title,
+            description: error.message,
+          });
+        }
+      } catch (error) {
+        setIsOAuthLoading(false);
+        toast({
+          variant: "destructive",
+          title: t.auth.loginError.title,
+          description: t.auth.loginError.description,
+        });
+      }
+    };
+  }, [signInWithGoogle, toast, t.auth.loginError]);
+
+  const handleGitHubLogin = async () => {
+    try {
+      setIsOAuthLoading(true);
+      const { error } = await signInWithGitHub();
+      
+      if (error) {
+        setIsOAuthLoading(false);
+        toast({
+          variant: "destructive",
+          title: t.auth.loginError.title,
+          description: error.message,
+        });
+      }
+    } catch (error) {
+      setIsOAuthLoading(false);
+      toast({
+        variant: "destructive",
+        title: t.auth.loginError.title,
+        description: t.auth.loginError.description,
+      });
+    }
+  };
+
+  const onSubmit = async (values: z.infer<typeof formSchema>) => {
+    try {
+      setIsLoading(true);
+      const { error, success } = await signUp(values.email, values.password);
+      
+      if (success) {
+        toast({
+          title: t.auth.registerSuccess.title,
+          description: t.auth.registerSuccess.description,
+        });
+        navigate("/auth/login");
+      } else if (error) {
+        toast({
+          variant: "destructive",
+          title: t.auth.registerError.title,
+          description: error.message,
+        });
+      }
+    } catch (error) {
+      toast({
+        variant: "destructive",
+        title: t.auth.registerError.title,
+        description: t.auth.registerError.description,
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center px-4 py-12">
+      {isOAuthLoading ? (
+        <div className="flex flex-col items-center gap-4">
+          <Loader2 className="h-8 w-8 animate-spin" />
+          <p className="text-sm text-muted-foreground">Authenticating...</p>
+        </div>
+      ) : (
+        <div className="w-full max-w-md space-y-8">
+          <div className="text-center">
+            <h1 className="text-2xl font-bold">{t.auth.register.title}</h1>
+            <p className="mt-2 text-sm text-gray-600">{t.auth.register.description}</p>
+          </div>
+          
+          <div className="flex flex-col gap-4">
+            <div
+              id="g_id_onload"
+              data-client_id={import.meta.env.VITE_GOOGLE_CLIENT_ID}
+              data-context="signin"
+              data-ux_mode="popup"
+              data-callback="handleSignInWithGoogle"
+              data-itp_support="true"
+            />
+            
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full flex items-center justify-center gap-2"
+              onClick={() => {
+                window.google?.accounts.id.prompt();
+              }}
+              disabled={isLoading}
+            >
+              <img src="https://www.google.com/favicon.ico" alt="Google" className="w-4 h-4" />
+              Continue with Google
+            </Button>
+
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full flex items-center justify-center gap-2"
+              onClick={handleGitHubLogin}
+              disabled={isLoading}
+            >
+              <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+              </svg>
+              Continue with GitHub
+            </Button>
+          </div>
+
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <span className="w-full border-t" />
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
+              <span className="bg-background px-2 text-muted-foreground">
+                Or continue with email
+              </span>
+            </div>
+          </div>
+          
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t.auth.register.email}</FormLabel>
+                    <FormControl>
+                      <Input 
+                        placeholder="[email protected]" 
+                        {...field} 
+                        disabled={isLoading}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              
+              <FormField
+                control={form.control}
+                name="password"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t.auth.register.password}</FormLabel>
+                    <FormControl>
+                      <Input 
+                        type="password" 
+                        placeholder="••••••••" 
+                        {...field} 
+                        disabled={isLoading}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              
+              <FormField
+                control={form.control}
+                name="confirmPassword"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t.auth.register.confirmPassword}</FormLabel>
+                    <FormControl>
+                      <Input 
+                        type="password" 
+                        placeholder="••••••••" 
+                        {...field} 
+                        disabled={isLoading}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              
+              <Button type="submit" className="w-full" disabled={isLoading}>
+                {isLoading ? t.auth.register.registering : t.auth.register.submit}
+              </Button>
+            </form>
+          </Form>
+          
+          <div className="mt-4 text-center text-sm">
+            <p>
+              {t.auth.register.haveAccount}{" "}
+              <Link to="/auth/login" className="font-medium text-primary hover:underline">
+                {t.auth.register.login}
+              </Link>
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Register;

src/services/gameService.ts

@@ -60,10 +60,14 @@ export const createGame = async (theme: string, language: Language = 'en'): Prom
 export const createSession = async (gameId: string): Promise<string> => {
   console.log('Creating new session for game:', gameId);
 
+  // Get the current user
+  const { data: { user } } = await supabase.auth.getUser();
+
   const { data: session, error } = await supabase
     .from('sessions')
     .insert({
-      game_id: gameId
+      game_id: gameId,
+      user_id: user?.id
     })
     .select()
     .single();

supabase/functions/generate-daily-challenge/index.ts

@@ -152,7 +152,6 @@ const wordTranslations: Record<string, Record<string, string>> = {
   "DRYER": { de: "TROCKNER", fr: "SÈCHE-LINGE", it: "ASCUGATRICE", es: "SECADORA", pt: "SECADORA" },
   "FURNACE": { de: "OFEN", fr: "FOURNAISE", it: "FORNACE", es: "HORNO", pt: "FORNALHA" },
   "FAN": { de: "VENTILATOR", fr: "VENTILATEUR", it: "VENTILATORE", es: "VENTILADOR", pt: "VENTILADOR" },
-  "PAINTBRUSH": { de: "PINSEL", fr: "PINCEAU", it: "PENNELLO", es: "Pincel", pt: "Pincel" },
   "BUCKET": { de: "EIMER", fr: "SEAU", it: "SECCHIO", es: "CUBO", pt: "BALDE" },
   "SPONGE": { de: "SCHWAMM", fr: "ÉPONGE", it: "SPUGNA", es: "ESPONJA", pt: "ESPONJA" },
   "SOAP": { de: "SEIFE", fr: "SAVON", it: "SAPONE", es: "JABÓN", pt: "SABÃO" },