app update

README.md

@@ -7,7 +7,11 @@ sdk: docker
 app_port: 8080
 pinned: false
 ---
+# Think in Sync
 
+This game is a variation of a classical childrens game.
+You will be given a secret word. Your goal is to describe this secret word so that an AI can guess it.
+However, you are only allowed to say one word at the time, taking turns with another AI.
 
 ## Develop locally
 
@@ -16,4 +20,14 @@ Add a .env file with `VITE_MISTRAL_API_KEY=xxx`
 ```
 npm i
 npm run dev
-```
+```
+
+## What technologies are used for this project?
+
+This project is built with .
+
+- Vite
+- TypeScript
+- React
+- shadcn-ui
+- Tailwind CSS

src/components/GameContainer.tsx

@@ -3,14 +3,13 @@ import { getRandomWord } from "@/lib/words";
 import { motion } from "framer-motion";
 import { generateAIResponse, guessWord } from "@/services/mistralService";
 import { useToast } from "@/components/ui/use-toast";
-import { HighScoreBoard } from "./HighScoreBoard";
 import { WelcomeScreen } from "./game/WelcomeScreen";
 import { WordDisplay } from "./game/WordDisplay";
 import { SentenceBuilder } from "./game/SentenceBuilder";
 import { GuessDisplay } from "./game/GuessDisplay";
 import { GameOver } from "./game/GameOver";
 
-type GameState = "welcome" | "showing-word" | "building-sentence" | "showing-guess" | "game-over" | "high-scores";
+type GameState = "welcome" | "showing-word" | "building-sentence" | "showing-guess" | "game-over";
 
 export const GameContainer = () => {
   const [gameState, setGameState] = useState<GameState>("welcome");
@@ -35,7 +34,7 @@ export const GameContainer = () => {
           if (correct) {
             handleNextRound();
           } else {
-            setGameState("high-scores");
+            setGameState("game-over");
           }
         }
       }
@@ -104,12 +103,16 @@ export const GameContainer = () => {
   };
 
   const handleNextRound = () => {
-    const word = getRandomWord();
-    setCurrentWord(word);
-    setGameState("showing-word");
-    setSentence([]);
-    setAiGuess("");
-    console.log("Next round started with word:", word);
+    if (handleGuessComplete()) {
+      const word = getRandomWord();
+      setCurrentWord(word);
+      setGameState("showing-word");
+      setSentence([]);
+      setAiGuess("");
+      console.log("Next round started with word:", word);
+    } else {
+      setGameState("game-over");
+    }
   };
 
   const handlePlayAgain = () => {
@@ -135,13 +138,12 @@ export const GameContainer = () => {
       setSuccessfulRounds(prev => prev + 1);
       return true;
     }
-    setGameState("high-scores");
     return false;
   };
 
   const getAverageWordsPerRound = () => {
     if (successfulRounds === 0) return 0;
-    return totalWords / successfulRounds;
+    return totalWords / successfulRounds + 1; // The total words include the ones in the failed last round, so we also count it in the denominator
   };
 
   return (
@@ -175,27 +177,18 @@ export const GameContainer = () => {
             sentence={sentence}
             aiGuess={aiGuess}
             currentWord={currentWord}
-            onNextRound={() => {
-              handleGuessComplete();
-              handleNextRound();
-            }}
+            onNextRound={handleNextRound}
             onPlayAgain={handlePlayAgain}
-          />
-        ) : gameState === "high-scores" ? (
-          <HighScoreBoard
             currentScore={successfulRounds}
             avgWordsPerRound={getAverageWordsPerRound()}
-            onClose={() => setGameState("game-over")}
-            onPlayAgain={handlePlayAgain}
           />
         ) : gameState === "game-over" ? (
           <GameOver
             successfulRounds={successfulRounds}
-            onViewHighScores={() => setGameState("high-scores")}
             onPlayAgain={handlePlayAgain}
           />
         ) : null}
       </motion.div>
     </div>
   );
-};
+};

src/components/HighScoreBoard.tsx

@@ -12,6 +12,14 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { useToast } from "@/components/ui/use-toast";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
 
 interface HighScore {
   id: string;
@@ -28,6 +36,8 @@ interface HighScoreBoardProps {
   onPlayAgain: () => void;
 }
 
+const ITEMS_PER_PAGE = 10;
+
 export const HighScoreBoard = ({
   currentScore,
   avgWordsPerRound,
@@ -36,6 +46,8 @@ export const HighScoreBoard = ({
 }: HighScoreBoardProps) => {
   const [playerName, setPlayerName] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [hasSubmitted, setHasSubmitted] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
   const { toast } = useToast();
 
   const { data: highScores, refetch } = useQuery({
@@ -62,6 +74,24 @@ export const HighScoreBoard = ({
       return;
     }
 
+    if (currentScore < 1) {
+      toast({
+        title: "Error",
+        description: "You need to complete at least one round to submit a score",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    if (hasSubmitted) {
+      toast({
+        title: "Error",
+        description: "You have already submitted your score for this game",
+        variant: "destructive",
+      });
+      return;
+    }
+
     setIsSubmitting(true);
     try {
       const { error } = await supabase.from("high_scores").insert({
@@ -77,6 +107,7 @@ export const HighScoreBoard = ({
         description: "Your score has been recorded",
       });
       
+      setHasSubmitted(true);
       await refetch();
       setPlayerName("");
     } catch (error) {
@@ -91,6 +122,22 @@ export const HighScoreBoard = ({
     }
   };
 
+  const totalPages = highScores ? Math.ceil(highScores.length / ITEMS_PER_PAGE) : 0;
+  const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+  const paginatedScores = highScores?.slice(startIndex, startIndex + ITEMS_PER_PAGE);
+
+  const handlePreviousPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(p => p - 1);
+    }
+  };
+
+  const handleNextPage = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(p => p + 1);
+    }
+  };
+
   return (
     <div className="space-y-6">
       <div className="text-center">
@@ -101,20 +148,22 @@ export const HighScoreBoard = ({
         </p>
       </div>
 
-      <div className="flex gap-4 mb-6">
-        <Input
-          placeholder="Enter your name"
-          value={playerName}
-          onChange={(e) => setPlayerName(e.target.value)}
-          className="flex-1"
-        />
-        <Button
-          onClick={handleSubmitScore}
-          disabled={isSubmitting || !playerName.trim()}
-        >
-          {isSubmitting ? "Submitting..." : "Submit Score"}
-        </Button>
-      </div>
+      {!hasSubmitted && currentScore > 0 && (
+        <div className="flex gap-4 mb-6">
+          <Input
+            placeholder="Enter your name"
+            value={playerName}
+            onChange={(e) => setPlayerName(e.target.value)}
+            className="flex-1"
+          />
+          <Button
+            onClick={handleSubmitScore}
+            disabled={isSubmitting || !playerName.trim() || hasSubmitted}
+          >
+            {isSubmitting ? "Submitting..." : "Submit Score"}
+          </Button>
+        </div>
+      )}
 
       <div className="rounded-md border">
         <Table>
@@ -127,15 +176,15 @@ export const HighScoreBoard = ({
             </TableRow>
           </TableHeader>
           <TableBody>
-            {highScores?.map((score, index) => (
+            {paginatedScores?.map((score, index) => (
               <TableRow key={score.id}>
-                <TableCell>{index + 1}</TableCell>
+                <TableCell>{startIndex + index + 1}</TableCell>
                 <TableCell>{score.player_name}</TableCell>
                 <TableCell>{score.score}</TableCell>
                 <TableCell>{score.avg_words_per_round.toFixed(1)}</TableCell>
               </TableRow>
             ))}
-            {!highScores?.length && (
+            {!paginatedScores?.length && (
               <TableRow>
                 <TableCell colSpan={4} className="text-center">
                   No high scores yet. Be the first!
@@ -146,6 +195,35 @@ export const HighScoreBoard = ({
         </Table>
       </div>
 
+      {totalPages > 1 && (
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious 
+                onClick={handlePreviousPage}
+                className={currentPage === 1 ? "pointer-events-none opacity-50" : ""}
+              />
+            </PaginationItem>
+            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+              <PaginationItem key={page}>
+                <PaginationLink
+                  onClick={() => setCurrentPage(page)}
+                  isActive={currentPage === page}
+                >
+                  {page}
+                </PaginationLink>
+              </PaginationItem>
+            ))}
+            <PaginationItem>
+              <PaginationNext
+                onClick={handleNextPage}
+                className={currentPage === totalPages ? "pointer-events-none opacity-50" : ""}
+              />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      )}
+
       <div className="flex justify-end gap-4">
         <Button variant="outline" onClick={onClose}>
           Close

src/components/game/GameOver.tsx

@@ -3,13 +3,11 @@ import { motion } from "framer-motion";
 
 interface GameOverProps {
   successfulRounds: number;
-  onViewHighScores: () => void;
   onPlayAgain: () => void;
 }
 
 export const GameOver = ({
   successfulRounds,
-  onViewHighScores,
   onPlayAgain,
 }: GameOverProps) => {
   return (
@@ -23,12 +21,6 @@ export const GameOver = ({
         You completed {successfulRounds} rounds successfully!
       </p>
       <div className="flex gap-4">
-        <Button
-          onClick={onViewHighScores}
-          className="flex-1 bg-secondary text-lg hover:bg-secondary/90"
-        >
-          View High Scores
-        </Button>
         <Button
           onClick={onPlayAgain}
           className="flex-1 bg-primary text-lg hover:bg-primary/90"

src/components/game/GuessDisplay.tsx

@@ -1,5 +1,12 @@
 import { Button } from "@/components/ui/button";
 import { motion } from "framer-motion";
+import {
+  Dialog,
+  DialogContent,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { HighScoreBoard } from "@/components/HighScoreBoard";
+import { useState } from "react";
 
 interface GuessDisplayProps {
   sentence: string[];
@@ -7,6 +14,8 @@ interface GuessDisplayProps {
   currentWord: string;
   onNextRound: () => void;
   onPlayAgain: () => void;
+  currentScore: number;
+  avgWordsPerRound: number;
 }
 
 export const GuessDisplay = ({
@@ -15,8 +24,11 @@ export const GuessDisplay = ({
   currentWord,
   onNextRound,
   onPlayAgain,
+  currentScore,
+  avgWordsPerRound,
 }: GuessDisplayProps) => {
   const isGuessCorrect = () => aiGuess.toLowerCase() === currentWord.toLowerCase();
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
 
   return (
     <motion.div
@@ -42,12 +54,45 @@ export const GuessDisplay = ({
           )}
         </p>
       </div>
-      <Button
-        onClick={isGuessCorrect() ? onNextRound : onPlayAgain}
-        className="w-full bg-primary text-lg hover:bg-primary/90"
-      >
-        {isGuessCorrect() ? "Next Round ⏎" : "Play Again ⏎"}
-      </Button>
+      <div className="flex flex-col gap-4">
+        {isGuessCorrect() ? (
+          <Button
+            onClick={onNextRound}
+            className="w-full bg-primary text-lg hover:bg-primary/90"
+          >
+            Next Round ⏎
+          </Button>
+        ) : (
+          <>
+            <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+              <DialogTrigger asChild>
+                <Button
+                  className="w-full bg-secondary text-lg hover:bg-secondary/90"
+                >
+                  View High Scores
+                </Button>
+              </DialogTrigger>
+              <DialogContent className="max-w-md bg-white">
+                <HighScoreBoard
+                  currentScore={currentScore}
+                  avgWordsPerRound={avgWordsPerRound}
+                  onClose={() => setIsDialogOpen(false)}
+                  onPlayAgain={() => {
+                    setIsDialogOpen(false);
+                    onPlayAgain();
+                  }}
+                />
+              </DialogContent>
+            </Dialog>
+            <Button
+              onClick={onPlayAgain}
+              className="w-full bg-primary text-lg hover:bg-primary/90"
+            >
+              Play Again ⏎
+            </Button>
+          </>
+        )}
+      </div>
     </motion.div>
   );
 };

src/components/game/SentenceBuilder.tsx

@@ -1,7 +1,7 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { motion } from "framer-motion";
-import { KeyboardEvent, useRef, useEffect } from "react";
+import { KeyboardEvent, useRef, useEffect, useState } from "react";
 
 interface SentenceBuilderProps {
   currentWord: string;
@@ -25,19 +25,53 @@ export const SentenceBuilder = ({
   onMakeGuess,
 }: SentenceBuilderProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const imagePath = `/think_in_sync_assets/${currentWord.toLowerCase()}.jpg`;
 
+  useEffect(() => {
+    const img = new Image();
+    img.onload = () => setImageLoaded(true);
+    img.src = imagePath;
+    console.log("Attempting to load image:", imagePath);
+  }, [imagePath]);
+
+  // Focus input on initial render
   useEffect(() => {
     setTimeout(() => {
       inputRef.current?.focus();
     }, 100);
   }, []);
 
+  // Focus input after AI finishes thinking
+  useEffect(() => {
+    if (!isAiThinking && sentence.length > 0 && sentence.length % 2 === 0) {
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 100);
+    }
+  }, [isAiThinking, sentence.length]);
+
   const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.shiftKey && e.key === 'Enter') {
       e.preventDefault();
-      if (sentence.length > 0 && !isAiThinking) {
+      handleMakeGuess();
+    }
+  };
+
+  const handleMakeGuess = () => {
+    if (playerInput.trim()) {
+      // Create a synthetic form event to add the current word
+      const syntheticEvent = {
+        preventDefault: () => {},
+      } as React.FormEvent;
+      onSubmitWord(syntheticEvent);
+      
+      // Wait a brief moment for the state to update before making the guess
+      setTimeout(() => {
         onMakeGuess();
-      }
+      }, 100);
+    } else {
+      onMakeGuess();
     }
   };
 
@@ -53,8 +87,15 @@ export const SentenceBuilder = ({
       <p className="mb-6 text-sm text-gray-600">
         Take turns with AI to describe your word without using the word itself!
       </p>
-      <div className="mb-4 rounded-lg bg-secondary/10 p-4">
-        <p className="text-2xl font-bold tracking-wider text-secondary">
+      <div className="mb-4 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>
       </div>
@@ -89,9 +130,9 @@ export const SentenceBuilder = ({
           </Button>
           <Button
             type="button"
-            onClick={onMakeGuess}
+            onClick={handleMakeGuess}
             className="flex-1 bg-secondary text-lg hover:bg-secondary/90"
-            disabled={sentence.length === 0 || isAiThinking}
+            disabled={(!sentence.length && !playerInput.trim()) || isAiThinking}
           >
             {isAiThinking ? "AI is thinking..." : "Make AI Guess ⇧⏎"}
           </Button>

src/components/game/WelcomeScreen.tsx

@@ -12,9 +12,11 @@ export const WelcomeScreen = ({ onStart }: WelcomeScreenProps) => {
       animate={{ opacity: 1 }}
       className="text-center"
     >
-      <h1 className="mb-6 text-4xl font-bold text-gray-900">Word Game</h1>
+      <h1 className="mb-6 text-4xl font-bold text-gray-900">Think in Sync</h1>
       <p className="mb-8 text-gray-600">
-        Ready to play? Click start or press Enter to begin!
+        This game is a variation of a classical childrens game.
+        You will be given a secret word. Your goal is to describe this secret word so that an AI can guess it.
+        However, you are only allowed to say one word at the time, taking turns with another AI.
       </p>
       <Button
         onClick={onStart}
@@ -24,4 +26,4 @@ export const WelcomeScreen = ({ onStart }: WelcomeScreenProps) => {
       </Button>
     </motion.div>
   );
-};
+};

src/components/game/WordDisplay.tsx

@@ -1,5 +1,6 @@
 import { Button } from "@/components/ui/button";
 import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
 
 interface WordDisplayProps {
   currentWord: string;
@@ -8,6 +9,16 @@ interface WordDisplayProps {
 }
 
 export const WordDisplay = ({ currentWord, successfulRounds, onContinue }: WordDisplayProps) => {
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const imagePath = `/think_in_sync_assets/${currentWord.toLowerCase()}.jpg`;
+
+  useEffect(() => {
+    const img = new Image();
+    img.onload = () => setImageLoaded(true);
+    img.src = imagePath;
+    console.log("Attempting to load image:", imagePath);
+  }, [imagePath]);
+
   return (
     <motion.div
       initial={{ opacity: 0 }}
@@ -15,8 +26,15 @@ export const WordDisplay = ({ currentWord, successfulRounds, onContinue }: WordD
       className="text-center"
     >
       <h2 className="mb-4 text-2xl font-semibold text-gray-900">Your Word</h2>
-      <div className="mb-4 rounded-lg bg-secondary/10 p-6">
-        <p className="text-4xl font-bold tracking-wider text-secondary">
+      <div className="mb-4 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-6 text-4xl font-bold tracking-wider text-secondary">
           {currentWord}
         </p>
       </div>

src/services/mistralService.ts

@@ -1,8 +1,13 @@
 import { supabase } from "@/integrations/supabase/client";
 
 export const generateAIResponse = async (currentWord: string, currentSentence: string[]): Promise<string> => {
+  console.log('Calling generate-word function with:', { currentWord, currentSentence });
+  
   const { data, error } = await supabase.functions.invoke('generate-word', {
-    body: { currentWord, currentSentence }
+    body: { 
+      currentWord, 
+      currentSentence: currentSentence.join(' ') 
+    }
   });
 
   if (error) {
@@ -13,7 +18,8 @@ export const generateAIResponse = async (currentWord: string, currentSentence: s
     throw error;
   }
 
-  if (!data.word) {
+  if (!data?.word) {
+    console.error('No word generated in response:', data);
     throw new Error('No word generated');
   }
 
@@ -22,6 +28,8 @@ export const generateAIResponse = async (currentWord: string, currentSentence: s
 };
 
 export const guessWord = async (sentence: string): Promise<string> => {
+  console.log('Calling guess-word function with sentence:', sentence);
+  
   const { data, error } = await supabase.functions.invoke('guess-word', {
     body: { sentence }
   });
@@ -34,7 +42,8 @@ export const guessWord = async (sentence: string): Promise<string> => {
     throw error;
   }
 
-  if (!data.guess) {
+  if (!data?.guess) {
+    console.error('No guess generated in response:', data);
     throw new Error('No guess generated');
   }
 

supabase/functions/generate-word/index.ts

@@ -15,6 +15,9 @@ serve(async (req) => {
     const { currentWord, currentSentence } = await req.json();
     console.log('Generating word for:', { currentWord, currentSentence });
 
+    // currentSentence is already a string from the client
+    const existingSentence = currentSentence || '';
+
     const client = new Mistral({
       apiKey: Deno.env.get('MISTRAL_API_KEY'),
     });
@@ -33,7 +36,7 @@ serve(async (req) => {
               role: "system",
               content: `You are helping in a word game. The secret word is "${currentWord}". 
                     Your task is to find a sentence to describe this word without using it directly. 
-                    Answer with a complete, grammatically correct sentence that starts with "${currentSentence.join(' ')}".
+                    Answer with a complete, grammatically correct sentence that starts with "${existingSentence}".
                     Do not add quotes or backticks. Just answer with the sentence.`
             }
           ],
@@ -45,9 +48,8 @@ serve(async (req) => {
         console.log('AI full response:', aiResponse);
         
         // Extract the new word by comparing with the existing sentence
-        const existingWords = currentSentence.join(' ');
         const newWord = aiResponse
-          .slice(existingWords.length)
+          .slice(existingSentence.length)
           .trim()
           .split(' ')[0]
           .replace(/[.,!?]$/, ''); // Remove any punctuation at the end