navigation

src/components/GameContainer.tsx

@@ -235,6 +235,7 @@ export const GameContainer = () => {
             currentScore={successfulRounds}
             avgWordsPerRound={getAverageWordsPerRound()}
             sessionId={sessionId}
+            onBack={handleBack}
           />
         )}
       </motion.div>

src/components/game/GuessDisplay.tsx

@@ -1,5 +1,5 @@
 import { motion } from "framer-motion";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useTranslation } from "@/hooks/useTranslation";
 import { Button } from "@/components/ui/button";
 import {
@@ -40,6 +40,18 @@ export const GuessDisplay = ({
   const [showConfirmDialog, setShowConfirmDialog] = useState(false);
   const [hasSubmittedScore, setHasSubmittedScore] = useState(false);
   const t = useTranslation();
+
+  console.log("GuessDisplay - Rendering with showConfirmDialog:", showConfirmDialog);
+
+  const handleSetShowConfirmDialog = (show: boolean) => {
+    console.log("GuessDisplay - Setting showConfirmDialog to:", show);
+    setShowConfirmDialog(show);
+  };
+
+  useEffect(() => {
+    console.log("GuessDisplay - showConfirmDialog changed to:", showConfirmDialog);
+  }, [showConfirmDialog]);
+
   const isGuessCorrect = () => aiGuess.toLowerCase() === currentWord.toLowerCase();
 
   const handleScoreSubmitted = () => {
@@ -55,9 +67,9 @@ export const GuessDisplay = ({
     >
       <RoundHeader 
         successfulRounds={currentScore} 
-        goToWelcomeScreen={onBack}
+        onBack={onBack}
         showConfirmDialog={showConfirmDialog}
-        setShowConfirmDialog={setShowConfirmDialog}
+        setShowConfirmDialog={handleSetShowConfirmDialog}
       />
 
       <WordDisplay currentWord={currentWord} />

src/components/game/SentenceBuilder.tsx

@@ -44,7 +44,8 @@ export const SentenceBuilder = ({
   const [containsTargetWord, setContainsTargetWord] = useState(false);
   const t = useTranslation();
 
-  // Input validation
+  console.log("SentenceBuilder - Rendering with showConfirmDialog:", showConfirmDialog);
+
   const validateInput = (input: string) => {
     setHasMultipleWords(input.trim().split(/\s+/).length > 1);
     setContainsTargetWord(
@@ -57,6 +58,11 @@ export const SentenceBuilder = ({
     onInputChange(value);
   };
 
+  const handleSetShowConfirmDialog = (show: boolean) => {
+    console.log("SentenceBuilder - Setting showConfirmDialog to:", show);
+    setShowConfirmDialog(show);
+  };
+
   const isValidInput = !playerInput || /^[\p{L} ]+$/u.test(playerInput);
 
   return (
@@ -67,9 +73,9 @@ export const SentenceBuilder = ({
     >
       <RoundHeader
         successfulRounds={successfulRounds}
-        goToWelcomeScreen={onBack}
+        onBack={onBack}
         showConfirmDialog={showConfirmDialog}
-        setShowConfirmDialog={setShowConfirmDialog}
+        setShowConfirmDialog={handleSetShowConfirmDialog}
       />
 
       <WordDisplay currentWord={currentWord} />
@@ -88,7 +94,7 @@ export const SentenceBuilder = ({
         sentence={sentence}
       />
 
-      <AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
+      <AlertDialog open={showConfirmDialog} onOpenChange={handleSetShowConfirmDialog}>
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>{t.game.leaveGameTitle}</AlertDialogTitle>

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

@@ -7,7 +7,6 @@ interface GuessDescriptionProps {
 
 export const GuessDescription = ({ sentence, aiGuess }: GuessDescriptionProps) => {
   const t = useTranslation();
-  const isCheating = () => aiGuess === 'CHEATING';
 
   return (
     <div className="space-y-2">
@@ -17,10 +16,6 @@ export const GuessDescription = ({ sentence, aiGuess }: GuessDescriptionProps) =
           {sentence.join(" ")}
         </p>
       </div>
-
-      <p className="text-sm text-gray-600">
-        {isCheating() ? t.guess.cheatingDetected : t.guess.aiGuessedDescription}
-      </p>
     </div>
   );
 };

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

@@ -1,14 +1,23 @@
+import { useTranslation } from "@/hooks/useTranslation";
+
 interface GuessResultProps {
   aiGuess: string;
   isCorrect: boolean;
 }
 
 export const GuessResult = ({ aiGuess, isCorrect }: GuessResultProps) => {
+  const t = useTranslation();
+  
   return (
-    <div className={`rounded-lg ${isCorrect ? 'bg-green-50' : 'bg-red-50'}`}>
-      <p className={`p-4 text-2xl font-bold tracking-wider ${isCorrect ? 'text-green-600' : 'text-red-600'}`}>
-        {aiGuess}
-      </p>
+    <div className="space-y-2">
+      <p className="text-sm text-gray-600">
+        {t.guess.aiGuessedDescription}
+      </p> 
+      <div className={`rounded-lg ${isCorrect ? 'bg-green-50' : 'bg-red-50'}`}>
+        <p className={`p-4 text-2xl font-bold tracking-wider ${isCorrect ? 'text-green-600' : 'text-red-600'}`}>
+          {aiGuess}
+        </p>
+      </div>
     </div>
   );
 };

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

@@ -1,27 +1,49 @@
 import { House } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useTranslation } from "@/hooks/useTranslation";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 
 interface RoundHeaderProps {
   successfulRounds: number;
-  goToWelcomeScreen?: () => void;
+  onBack?: () => void;
   showConfirmDialog: boolean;
   setShowConfirmDialog: (show: boolean) => void;
 }
 
 export const RoundHeader = ({ 
   successfulRounds, 
-  goToWelcomeScreen,
+  onBack,
   showConfirmDialog,
   setShowConfirmDialog
 }: RoundHeaderProps) => {
   const t = useTranslation();
-
+  
   const handleHomeClick = () => {
+    console.log("RoundHeader - Home button clicked, successful rounds:", successfulRounds);
     if (successfulRounds > 0) {
+      console.log("RoundHeader - Setting showConfirmDialog to true");
       setShowConfirmDialog(true);
     } else {
-      goToWelcomeScreen?.();
+      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?.();
     }
   };
 
@@ -43,8 +65,23 @@ export const RoundHeader = ({
       </Button>
 
       <h2 className="mb-4 text-2xl font-semibold text-gray-900">
-        Think in Sync
+        {t.game.title}
       </h2>
+
+      <AlertDialog open={showConfirmDialog} onOpenChange={handleDialogChange}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t.game.leaveGameTitle}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t.game.leaveGameDescription}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t.game.cancel}</AlertDialogCancel>
+            <AlertDialogAction>{t.game.confirm}</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 };

src/i18n/translations/de.ts

@@ -1,5 +1,6 @@
 export const de = {
     game: {
+      title: "Think in Sync",
       round: "Runde",
       buildDescription: "Baut gemeinsam einen Satz",
       buildSubtitle: "Fügt abwechselnd Wörter hinzu, um einen Satz zu bilden",

src/i18n/translations/en.ts

@@ -1,5 +1,6 @@
 export const en = {
     game: {
+      title: "Think in Sync",
       round: "Round",
       buildDescription: "Build a sentence together",
       buildSubtitle: "Take turns adding words to create a sentence",
@@ -98,4 +99,4 @@ export const en = {
         ]
       }
     }
-};
+};

src/i18n/translations/es.ts

@@ -1,5 +1,6 @@
 export const es = {
     game: {
+      title: "Think in Sync",
       round: "Ronda",
       buildDescription: "Construyan una frase juntos",
       buildSubtitle: "Añadan palabras por turnos para crear una frase",
@@ -98,4 +99,4 @@ export const es = {
         ]
       }
     }
-};
+};

src/i18n/translations/fr.ts

@@ -1,5 +1,6 @@
 export const fr = {
     game: {
+      title: "Think in Sync",
       round: "Tour",
       buildDescription: "Construisez une phrase ensemble",
       startSentence: "Commencez à construire votre phrase...",

src/i18n/translations/it.ts

@@ -1,5 +1,6 @@
 export const it = {
     game: {
+      title: "Think in Sync",
       round: "Turno",
       buildDescription: "Costruite una frase insieme",
       buildSubtitle: "Aggiungete parole a turno per creare una frase",