wip

src/app/api/text/question/route.ts

@@ -21,7 +21,7 @@ export async function POST(request: Request) {
 
         const prompts = {
             fr: `Pouvez-vous trouver 1 question amusante pour réfuter les alibis que le juge pourrait poser à l'avocat de l'accusé dans cette affaire ?
-                (ne demandez pas de dessiner ou de faire des gestes, seulement des réponses textuelles)
+                (ne demandez pas de dessiner ou de faire des gestes, seulement des réponses textuelles), La question doit commencer par "Pourquoi" ou "J'aimerais savoir" ect .
                 Pouvez-vous aussi donner 3 mots aléatoires *mais réels* que l'avocat devra ajouter à son discours. Ces mots doivent être simple, drole, reliés a l'affaire ou des mots ou expressions embarassantes pour un statut d'avocat (ex: "euuuh, et voila quoi..").
                 Je veux un mot en lien avec le case. 
                 Je veux un mot ou expression embarassante pour un avocat.
@@ -32,15 +32,21 @@ export async function POST(request: Request) {
 
                 description de l'histoire : ${story.description}
                 alibis : ${story.alibi.join(', ')}
-                ${chat.messages.length > 0 ? `historique de la discussion : ${chatHistory}` : ''}
+                history : ${chat.messages.length > 0 ? `historique de la discussion : ${chatHistory}` : 'Vide'}
+
+                Je veux egalement une réaction a la derniere réponse de l'avocat. Cela peut etre des "Hmmm, d'accord" ou alors "Vous ne m'avez pas vraiment convaincu... Pourquoi parlez vous de ...".
+                Prends le role du juge et reponds avec condescendance. Cela doit etre dans un champ json "reaction" different de "question".
+                Parcontre la reaction ne doit pas finir par une question. Elle doit finir par trois petits points '...'
+                si history est vide, ne mettez pas reaction dans le json.
 
                 Réponse en JSON avec ce format :
                 {
+                    "reaction" : "Votre réaction incisive ici",
                     "question" : " Votre question incisive de juge ici ",
                     "words" : [" expression1 ", " expression2 ", " expression3 "].
                 }`,
             en: `can you find 1 fun questions to refute the alibis the judge could ask the lawyer of the accused about this case ?
-                (do not ask to draw or to gesture, only text answers)
+                (do not ask to draw or to gesture, only text answers), The question must start with "Why" or "I would like to know" etc.
                 Can you also give 3 random *but real* words for the lawyer to add to his speech. These words should be simple, funny, related to the case or embarrassing words or phrases for a lawyer (e.g. “uh huh, here goes nothing”).
                 I want a word related to the case.
                 I want a word or phrase embarassant for a lawyer.
@@ -51,15 +57,21 @@ export async function POST(request: Request) {
 
                 story description: ${story.description}
                 alibis: ${story.alibi.join(', ')}
-                ${chat.messages.length > 0 ? `discussion history: ${chatHistory}` : ''}
+                history: ${chat.messages.length > 0 ? `discussion history: ${chatHistory}` : 'Empty'}
+
+                I want a reaction to the last answer of the lawyer. This could be "Hmmm, d'accord" or then "Vous ne m'avez pas vraiment convaincu... Pourquoi parlez vous de ...".
+                Take the role of the judge and answer with condescendance. This must be in a json field "reaction" different from "question".
+                The reaction must not end with a question. It has to finish with three dots '...'
+                If history is empty, do not put reaction in the json.
 
                 Answer in JSON with this format:
                 {
+                    "reaction": "Your incisive reaction here",
                     "question": "Your incisive judge question here",
                     "words": ["expression1", "expression2", "expression3"]
                 }`,
             es: `¿puedes encontrar 1 preguntas divertidas para refutar las coartadas que el juez podría hacer al abogado del acusado sobre este caso?
-                (no pidas dibujar o gesticular, sólo respuestas de texto)
+                (no pidas dibujar o gesticular, sólo respuestas de texto), La pregunta debe comenzar con "Por qué" o "Me gustaría saber" etc.
                 También puedes dar 3 palabras aleatorias *pero reales* para que el abogado las añada a su discurso. Estas palabras deben ser sencillas, divertidas, relacionadas con el caso o palabras o frases embarazosas para un abogado (por ejemplo, «uh huh, aquí vamos..»).
                 Quiero una palabra relacionada con el caso.
                 Quiero una palabra o frase embarazosa para un abogado.
@@ -70,10 +82,16 @@ export async function POST(request: Request) {
 
                 descripción de la historia: ${story.description}
                 coartadas: ${story.alibi.join(', ')}
-                ${chat.messages.length > 0 ? `historia de la discusión: ${chatHistory}` : ''}
+                history: ${chat.messages.length > 0 ? `historia de la discusión: ${chatHistory}` : 'vacío'}
+
+                Quiero una reacción a la última respuesta del abogado. Esto podría ser "Hmmm, d'accord" o entonces "Vous ne m'avez pas vraiment convaincu... Pourquoi parlez vous de ...".
+                Toma el papel del juez y responde con condescendencia. Cela debe estar en un campo json "reaction" diferente de "question".
+                La reacción no debe terminar con una pregunta. It has to finish with three dots '...'
+                Si history está vacío, no pongas reacción en el json.
 
                 Respuesta en JSON con este formato:
                 {
+                    "reaction": "Tu reacción incisiva aquí",
                     "question": "Tu incisiva pregunta de juez aquí",
                     "words": ["expresión1", "expresión2", "expresión3"]
                 }`

src/app/page.tsx

@@ -64,6 +64,8 @@ export default function Home() {
 
   const [currentQuestion, setCurrentQuestion] = useState<string>('');
 
+  const [reaction, setReaction] = useState<string>('');
+
   const resetGame = () => {
     setCurrentScene('menu');
     setStory(null);
@@ -75,8 +77,7 @@ export default function Home() {
 
   const setNextScene = () => {
     if (currentScene === 'lawyer') {
-      if (round < 3) {
-        setRound(round + 1);
+      if (round < 4) {
         setCurrentScene('court');
       } else {
         setCurrentScene('end');
@@ -111,6 +112,8 @@ export default function Home() {
     setRequiredWords,
     chat,
     setChat,
+    reaction,
+    setReaction,
   };
 
   useEffect(() => {
@@ -147,6 +150,12 @@ export default function Home() {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentScene]); // on écoute les changements de currentScene
 
+  useEffect(() => {
+    if (reaction !== '') {
+      console.log('reaction:', reaction)
+    }
+  }, [reaction]);
+
   useEffect(() => {
     const fetchQuestion = async () => {
       try {
@@ -164,9 +173,14 @@ export default function Home() {
 
         const data = await response.json();
         console.log('data:', data)
+        console.log('round:', round)
         if (data.question && data.words) {
           setCurrentQuestion(data.question);
           setRequiredWords(data.words);
+          if (data.reaction && data.reaction !== '') {
+            console.log('data.reaction:', data.reaction)
+            setReaction(data.reaction);
+          }
           setChat(prevChat => ({
             messages: [...prevChat.messages, { content: data.question, role: 'judge' }]
           }));

src/components/court/Court.tsx

@@ -5,11 +5,15 @@ import Image from 'next/image';
 interface CourtSceneProps {
   setNextScene: () => void;
   currentQuestion: string;
+  reaction: string;
+  round: number;
 }
 
 const CourtScene: FC<CourtSceneProps> = ({
   setNextScene,
-  currentQuestion
+  currentQuestion,
+  reaction,
+  round
 }) => {
   const [showFirstImage, setShowFirstImage] = useState(true);
 
@@ -47,6 +51,7 @@ const CourtScene: FC<CourtSceneProps> = ({
       <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-[80%] bg-black/60 border border-black border-8 mb-[8vh] p-6">
         <div className="text-white roboto-slab">
           <p className="text-4xl mb-4">
+            {reaction !== '' && round !== 1 ? reaction.replace(/\?/g, '') : ''} <br />
             {currentQuestion ? currentQuestion : '...'}
           </p>
 

src/components/defense/Defense.tsx

@@ -17,7 +17,8 @@ interface DefenseSceneProps {
   setNextScene: () => void;
   setChat: (chat: SetStateAction<Chat>) => void;
   setCurrentQuestion: Dispatch<SetStateAction<string>>;
-  setRequiredWords: Dispatch<SetStateAction<string[]>>
+  setRequiredWords: Dispatch<SetStateAction<string[]>>;
+  setReaction: Dispatch<SetStateAction<string>>;
 }
 
 const DefenseScene: FC<DefenseSceneProps> = ({
@@ -26,13 +27,14 @@ const DefenseScene: FC<DefenseSceneProps> = ({
   setNextScene,
   setCurrentQuestion,
   setRequiredWords,
-  setChat
+  setChat,
+  setReaction
 }) => {
   const [answer, setAnswer] = useState('');
   const [insertedWords, setInsertedWords] = useState<boolean[]>([]);
   const [countdown, setCountdown] = useState(60);
   const [isTimeUp, setIsTimeUp] = useState(false);
-  const [wordPositions, setWordPositions] = useState<Array<{word: string; position: number}>>([]);
+  const [wordPositions, setWordPositions] = useState<Array<{ word: string; position: number }>>([]);
   const [mandatoryWords, setMandatoryWords] = useState(requiredWords);
   const [isLoading, setIsLoading] = useState(true);
 
@@ -41,6 +43,7 @@ const DefenseScene: FC<DefenseSceneProps> = ({
     if (requiredWords.length > 0) {
       setMandatoryWords(requiredWords);
     }
+    setReaction('');
   }, [requiredWords]);
 
   // Génération des positions et initialisation
@@ -224,19 +227,19 @@ const DefenseScene: FC<DefenseSceneProps> = ({
                     <span className="text-5xl text-sky-500 roboto-slab mt-2">
                       {item.word.toUpperCase()}
                     </span>
-                     <span className="text-5xl text-white roboto-slab mt-2">                      {language === 'fr'
-                        ? `dans `
-                        : language === 'en'
+                    <span className="text-5xl text-white roboto-slab mt-2">                      {language === 'fr'
+                      ? `dans `
+                      : language === 'en'
                         ? `in `
                         : `en `
-                      }</span>
-                      <span className="text-5xl text-red-500 roboto-slab mt-2">{remainingWords}</span>
-                      <span className="text-5xl text-white roboto-slab mt-2">                      {language === 'fr'
-                        ? ` mots`
-                        : language === 'en'
+                    }</span>
+                    <span className="text-5xl text-red-500 roboto-slab mt-2">{remainingWords}</span>
+                    <span className="text-5xl text-white roboto-slab mt-2">                      {language === 'fr'
+                      ? ` mots`
+                      : language === 'en'
                         ? ` words`
                         : ` palabras`
-                      }</span>
+                    }</span>
                   </div>
                 );
               }).filter(Boolean)[0]}
@@ -260,11 +263,10 @@ const DefenseScene: FC<DefenseSceneProps> = ({
               <button
                 onClick={() => handleSubmit(answer)}
                 disabled={!isAnswerValid()}
-                className={`absolute bottom-5 right-5 px-8 py-4 rounded-lg text-xl transition-all duration-300 ${
-                  isAnswerValid()
+                className={`absolute bottom-5 right-5 px-8 py-4 rounded-lg text-xl transition-all duration-300 ${isAnswerValid()
                     ? 'bg-sky-500 hover:bg-blue-700 cursor-pointer'
                     : 'bg-gray-600 cursor-not-allowed'
-                }`}
+                  }`}
               >
                 {language === 'fr' ? 'Soumettre' : language === 'en' ? 'Submit' : 'Submit'}
               </button>

src/components/lawyer/Lawyer.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { FC, useState, useEffect } from 'react';
+import { FC, useState, useEffect, Dispatch, SetStateAction } from 'react';
 import Image from 'next/image';
 
 interface Message {
@@ -17,6 +17,7 @@ interface LawyerSceneProps {
   setNextScene: () => void;
   currentQuestion: string;
   round: number;
+  setRound: Dispatch<SetStateAction<number>>;
 }
 
 const LawyerScene: FC<LawyerSceneProps> = ({
@@ -25,13 +26,26 @@ const LawyerScene: FC<LawyerSceneProps> = ({
   setNextScene,
   currentQuestion,
   round,
+  setRound,
 }) => {
   const [visible, setVisible] = useState(false);
   const [buttonEnabled, setButtonEnabled] = useState(false);
   const [countdown, setCountdown] = useState(3);
 
+  const [question, setQuestion] = useState('');
+  const [answer, setAnswer] = useState('');
+
+  useEffect(() => {
+    const lastJudgeMessage = chat.messages.filter((message: Message) => message.role === 'judge').slice(-1)[0]?.content;
+    const lastLawyerMessage = chat.messages.filter((message: Message) => message.role === 'lawyer').slice(-1)[0]?.content;
+    setQuestion(lastJudgeMessage || '');
+    setAnswer(lastLawyerMessage || '');
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Only run once on mount
+
   useEffect(() => {
     setVisible(true);
+    setRound(round + 1);
     const timer = setInterval(() => {
       setCountdown((prev) => {
         if (prev <= 1) {
@@ -69,7 +83,7 @@ const LawyerScene: FC<LawyerSceneProps> = ({
                 {language === 'fr' ? 'Question du juge' : language === 'en' ? 'Judge\'s question' : 'Pregunta del juez'}:
               </h2>
               <p className="text-xl text-white roboto-slab">
-                {chat.messages.filter((message: Message) => message.role === 'judge').slice(-1)[0]?.content}
+                {question}
               </p>
             </div>
 
@@ -79,7 +93,7 @@ const LawyerScene: FC<LawyerSceneProps> = ({
                 {language === 'fr' ? 'Votre réponse' : language === 'en' ? 'Your answer' : 'Tu respuesta'}:
               </h2>
               <p className="text-xl text-white roboto-slab whitespace-pre-wrap mb-8">
-                {chat.messages.filter((message: Message) => message.role === 'lawyer').slice(-1)[0]?.content}
+                {answer}
               </p>
 
               {/* Flèche à droite */}