Update UI

app/page.tsx

@@ -36,7 +36,7 @@ export default function Home() {
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const uuid = crypto.randomUUID().slice(0, 6);
-    setSessionId("Game 8 - gpt-4o");
+    setSessionId(uuid);
   }, []);
 
   const handleCustomGame = (words: string[], cardTypes: CardType[]) => {
@@ -200,7 +200,7 @@ export default function Home() {
             ? JSON.parse(guessDataString)
             : guessData;
       } else {
-        // GPT-4 response handling
+        // GPT-4o response handling
         const { response } = await guessResponse.json();
         guessDataFinal = response;
       }
@@ -232,7 +232,8 @@ export default function Home() {
           const wasCorrect = card.type === gameState.currentTeam;
           currentTurn.guesses.push({
             word: guessDataFinal.words,
-            wasCorrect,
+            wasCorrect: wasCorrect,
+            reasoning: guessDataFinal.reasoning,
           });
 
           await delay(1000);
@@ -451,18 +452,9 @@ export default function Home() {
 
   return (
     <main className="min-h-screen p-8">
-      {/* <div className="md:hidden min-h-screen flex items-center justify-center p-8">
-        <div className="text-center space-y-4">
-          <h1 className="text-2xl font-bold">Codenames AI</h1>
-          <p className="text-gray-600">
-            Please view this experience on a desktop browser for the best
-            experience.
-          </p>
-        </div>
-      </div> */}
       <div className="max-w-7xl mx-auto">
         <div className="relative">
-          {process.env.NODE_ENV !== "production" && (
+          {process.env.NEXT_PUBLIC_ENVIRONMENT !== "production" && (
             <button
               onClick={replayTestGame}
               className="hidden md:block fixed right-4 top-4 inline-flex items-center justify-center rounded-xl
@@ -512,6 +504,7 @@ export default function Home() {
                       Start Game
                     </button>
                     <div className="flex items-center gap-2 rounded-xl p-2">
+                      <p className="text-sm font-bold">gpt-4o</p>
                       <Switch
                         checked={isO1}
                         onCheckedChange={setIsO1}

components/ui/switch.tsx

@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-gray-600 data-[state=unchecked]:bg-input",
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center bg-gray-400 rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-gray-400 data-[state=unchecked]:bg-gray-400",
       className,
     )}
     {...props}

package.json

@@ -26,7 +26,7 @@
     "zod": "^3.24.1"
   },
   "devDependencies": {
-    "@types/node": "^20",
+    "@types/node": "20.5.1",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",

types/game.ts

@@ -16,6 +16,7 @@ export interface GameTurn {
   guesses: {
     word: string;
     wasCorrect: boolean;
+    reasoning?: string;
   }[];
   guessesReasoning?: string;
 }

utils/prompts.ts

@@ -20,10 +20,10 @@ export function getSystemPrompt(role: "CLUE_GIVER" | "GUESSER"): string {
 
 export function getSystemPromptO1(role: "CLUE_GIVER" | "GUESSER"): string {
   if (role === "CLUE_GIVER") {
-    return `You are playing Codenames as a Spymaster. Your role is to give one-word clues that can help your team guess multiple words while avoiding the opponent's words and the assassin. 
+    return `You are playing Codenames as a clue giver. Your role is to give one-word clues that can help your guesser who is also a o1 model with the same reasoning process, guess multiple words while avoiding the opponent's words and the assassin. 
     Try to finish the game as soon as possible by connecting multiple words with clever clues.
     You are allowed to use 0 as the number part of your clue. For example, feathers: 0 means, "None of our words relate to feathers." If 0 is the number, the usual limit on guesses does not apply. 
-    Sometimes you may have multiple unguessed words related to clues from the previous rounds. If you want your team to guess more than one of them, you may say 100. For example feathers: 100.
+    Sometimes you may have multiple unguessed words related to clues from the previous rounds. If you want your guesser to guess more than one of them, you may say 100. For example feathers: 100.
 
     Your response must be in the following format:
     {
@@ -34,7 +34,7 @@ export function getSystemPromptO1(role: "CLUE_GIVER" | "GUESSER"): string {
       
     Do not include the word json in your response.`;
   } else {
-    return `You are playing Codenames as a Guesser. Your role is to guess ONE word at a time based on the clue given by your Spymaster.
+    return `You are playing Codenames as a Guesser. Your role is to guess ONE word at a time based on the clue given by your clue giver who is also a o1 model with the same reasoning process. 
     
     Your response must be in the following format:
     {
@@ -87,6 +87,8 @@ export function generatePrompt(
       
       Be creative and take calculated risks - it's better to give ambitious clues that could help win in least number of clues.
       Analyze all the words and make sure there are no other words connected to the clue.
+      The guesser is also an o1 model. Keep in mind that you and your guesser has the same reasoning process. Try to think of connections between the words
+      that the guesser could think of.
       `;
   } else {
     const currentTurn = gameState.history[gameState.history.length - 1];
@@ -129,9 +131,12 @@ export function generatePrompt(
         .join("\n    ")}
         
       Strategically analyze the previous turns and the clue to make your best guess.
+      In your first turn, do not guess more words than the number of words the clue giver gave.
       If the opponent has remaining words from their previous turns, try to internally guess what their words could be and avoid them.
       If you missed guessing words from the previous turns, and you have guesses left, try to guess them now.
-      Try to think how the spymaster is thinking and make your guess accordingly.
+      Try to think how the clue giver is thinking and make your guess accordingly.
+      The clue giver is also an o1 model. Keep in mind that you and your clue giver has the same reasoning process. Try to think what words he would've tried to 
+      connect using the clue.
         `;
   }
 }