wip

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

@@ -0,0 +1,129 @@
+import { NextResponse } from 'next/server';
+import { Mistral } from "@mistralai/mistralai";
+
+const mistral = new Mistral({apiKey: process.env.MISTRAL_API_KEY})
+
+interface Message {
+    content: string;
+    role: 'lawyer' | 'judge';
+    requiredWords?: string[];
+  }
+  
+export async function POST(request: Request) {
+  try {
+    const { language, story, chat } = await request.json();
+    console.log('story:', story)
+    console.log('chat:', chat)
+    // Prepare the context from story and chat history
+    const accusationContext = `Crime description: ${story.accusation.description}\nSuspect's alibi: ${story.accusation.alibi.join(", ")}`;
+    
+    const chatContext = chat.messages
+      .map((msg: Message) => `${msg.role}: ${msg.content}`)
+      .join("\n");
+
+    let prompt; 
+    
+    if (language === 'fr') {
+        prompt = `En tant que juge, sur la base de l'affaire suivante :
+    
+    ${accusationContext}
+
+    Et considérant l'interrogatoire suivant :
+    ${chatContext}
+
+    Vous jouez le rôle d'un juge dans un tribunal. et voici l'affaire que vous jugez.
+    Vous êtes très drôle et n'hésitez pas à faire des blagues.
+    Vous devez me dire si la défense a été suffisamment bonne pour que l'accusé soit acquitté ou au contraire sanctionné.
+    Si le discours n'a aucun sens et qu'il ne répond pas correctement aux questions, prononcez le bon jugement pour lui.
+    Ajoutez un nombre d'années de prison que l'accusé prendra en punition (entre 0 et 10, n'hésitez pas à être sévère si la défense est mauvaise). Si l'accusé est libéré, le chiffre est de 0.
+
+    Verdit est true si l'accusé est acquitté, false si il est sanctionné.
+
+    Soyez concis et répondez en quelques mots. au format json. 
+    RÉPONDEZ UNIQUEMENT AVEC LE JSON
+    
+    JSON Format : {
+        "verdict": Boolean,
+        "argument":String,
+        "prisonYears": Number
+    }`
+    }
+    else if (language === 'en') {
+        prompt = `As a judge, based on the following case:
+    
+    ${accusationContext}
+
+    And considering the following interrogation:
+    ${chatContext}
+
+    You play as a judge in a court. and this is the case you're judging.
+    You are very funny, and don't hesitate to make jokes.
+    You have to tell me if the defense was good enough for the accused to be acquitted or in the other way, has a penalty.
+    If the speech does not make any sense at all, and he is not answering right at the questions, pronounce the correct judgment for him.
+    Add a number of years of prison that the accused will take for punishment (between 0 and 10. Don't hesitate to be harsh if the defense is bad). If the accused is released, the number is 0.
+
+
+    Verdict is true if the accused is acquitted, false if he is sanctioned.
+    Be concise, and answer with only a few words. in a json format. 
+    ANSWER WITH ONLY THE JSON
+    
+    JSON Format : {
+        "verdict": Boolean,
+        "argument":String,
+        "prisonYears": Number
+    }`;
+    } else {
+        prompt = `Como juez, basado en el siguiente caso:
+    
+        ${accusationContext}
+    
+        Y considerando el siguiente interrogatorio
+        ${chatContext}
+    
+        Juegas como juez en un tribunal y este es el caso que estás juzgando.
+        Eres muy gracioso y no dudas en hacer bromas.
+        Tienes que decirme si la defensa fue lo suficientemente buena para que el acusado sea absuelto o por el contrario, tenga una pena.
+        Si el discurso no tiene ningún sentido, y él no está respondiendo a la derecha en las preguntas, pronunciar el juicio correcto para él.
+        Añade un número de años de prisión que el acusado llevará como pena (entre 0 y 10. No dudes en ser duro si la defensa es mala). Si el acusado queda en libertad, el número es 0.
+    
+
+        Verdict is true if the accused is acquitted, false if he is sanctioned.
+
+        Sea conciso, y responda con sólo unas pocas palabras. en formato json. 
+        RESPONDE SÓLO CON EL JSON
+        
+        JSON Format : {
+            "verdict": Boolean,
+            "argument":String,
+            "prisonYears": Number
+        }`
+    }
+
+    const seed = Math.floor(Math.random() * 1000000);
+
+    const response = await mistral.chat.complete({
+      model: "mistral-large-latest",
+      messages: [{ role: "user", content: prompt }],
+      responseFormat: { type: 'json_object' },
+      randomSeed: seed,
+    });
+
+    const functionCall = response.choices?.[0]?.message.content;
+    const JSONResponse = functionCall ? JSON.parse(functionCall as string) : null;
+    console.log('functionCall:', functionCall)
+    console.log('JSONResponse:', JSONResponse)
+    const verdictData = JSONResponse;
+
+    return NextResponse.json({
+        success: true,
+        verdict: verdictData
+    });
+
+  } catch (error) {
+    console.error('Error in verdict route:', error);
+    return NextResponse.json(
+      { error: 'Failed to generate verdict' },
+      { status: 500 }
+    );
+  }
+}

src/app/page.tsx

@@ -30,6 +30,11 @@ interface Chat {
   messages: Message[];
 }
 
+interface Verdict {
+  verdict: boolean;
+  argument: string;
+  prisonYears: number;
+}
 
 const intro = {
   fr: {
@@ -67,6 +72,8 @@ export default function Home() {
 
   const [reaction, setReaction] = useState<string>('');
 
+
+  const [verdict, setVerdict] = useState<Verdict | null>(null);
   const resetGame = () => {
     setCurrentScene('menu');
     setStory(null);
@@ -76,11 +83,42 @@ export default function Home() {
     setRequiredWords([]);
   };
 
-  const setNextScene = () => {
+  const setNextScene = async () => {
     if (currentScene === 'lawyer') {
       if (round < 4) {
         setCurrentScene('court');
       } else {
+        // Generate judge's verdict before ending
+        const generateVerdict = async () => {
+          try {
+            const response = await fetch('/api/text/verdict', {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+              },
+              body: JSON.stringify({
+                language,
+                story,
+                chat
+              })
+            });
+
+            const data = await response.json();
+
+            if (!data.success) {
+              throw new Error('Failed to generate verdict');
+            }
+
+            console.log('data.verdict:', data.verdict)
+
+            setVerdict(data.verdict);
+          } catch (error) {
+            console.error('Error generating verdict:', error);
+          }
+        };
+
+        await generateVerdict();
+
         setCurrentScene('end');
       }
       return;
@@ -115,6 +153,8 @@ export default function Home() {
     setChat,
     reaction,
     setReaction,
+    verdict,
+    setVerdict
   };
 
   useEffect(() => {

src/components/court/Court.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { FC, useEffect, useState } from 'react';
+import { FC, useEffect, useState, useRef } from 'react';
 import Image from 'next/image';
 
 interface CourtSceneProps {
@@ -16,6 +16,7 @@ const CourtScene: FC<CourtSceneProps> = ({
   round
 }) => {
   const [showFirstImage, setShowFirstImage] = useState(true);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
 
   useEffect(() => {
     const playAudio = async () => {
@@ -28,7 +29,7 @@ const CourtScene: FC<CourtSceneProps> = ({
             'Content-Type': 'application/json',
           },
           body: JSON.stringify({
-            language: 'en', // You may want to make this configurable
+            language: 'en',
             text: reaction !== '' ? reaction + currentQuestion : currentQuestion,
             role: 'judge'
           })
@@ -41,6 +42,7 @@ const CourtScene: FC<CourtSceneProps> = ({
         const audioBlob = await response.blob();
         const audioUrl = URL.createObjectURL(audioBlob);
         const audio = new Audio(audioUrl);
+        audioRef.current = audio;
         audio.play();
       } catch (error) {
         console.error('Error playing audio:', error);
@@ -48,10 +50,24 @@ const CourtScene: FC<CourtSceneProps> = ({
     };
 
     if (currentQuestion) {
-    playAudio();
+      playAudio();
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentQuestion]);
+
+    return () => {
+      if (audioRef.current) {
+        audioRef.current.pause();
+        audioRef.current = null;
+      }
+    };
+  }, [currentQuestion, reaction]);
+
+  const handleNextScene = () => {
+    if (audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current = null;
+    }
+    setNextScene();
+  };
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -94,7 +110,7 @@ const CourtScene: FC<CourtSceneProps> = ({
           {/* Flèche à droite */}
           <div className="flex justify-end">
             <button
-              onClick={setNextScene}
+              onClick={handleNextScene}
               className="text-white hover:text-blue-400 transition-colors"
               aria-label="Continuer"
             >

src/components/end/End.tsx

@@ -1,46 +1,125 @@
 'use client';
-import { FC } from 'react';
+import { FC, useEffect, useState } from 'react';
 import Image from 'next/image';
 
+interface Verdict {
+  verdict: boolean;
+  argument: string;
+  prisonYears: number;
+}
+
 interface EndSceneProps {
   language: 'fr' | 'en' | 'es';
   setNextScene: () => void;
+  verdict: Verdict | null;
 }
 
 const EndScene: FC<EndSceneProps> = ({
   language,
   setNextScene,
+  verdict
 }) => {
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    if (verdict) {
+      console.log('End verdict:', verdict)
+      setIsLoading(false);
+    }
+  }, [verdict]);
+
+  const getLoadingText = () => {
+    if (language === 'fr') {
+      return 'Le juge délibère...';
+    } else if (language === 'en') {
+      return 'The judge is deliberating...';
+    } else {
+      return 'El juez está deliberando...';
+    }
+  };
+
+  const getVerdictText = () => {
+    if (language === 'fr') {
+      return verdict?.verdict ? 'NON COUPABLE' : 'COUPABLE';
+    } else if (language === 'en') {
+      return verdict?.verdict ? 'NOT GUILTY' : 'GUILTY';
+    } else {
+      return verdict?.verdict ? 'NO CULPABLE' : 'CULPABLE';
+    }
+  };
+
+  const getSentenceText = () => {
+    if (language === 'fr') {
+      return verdict?.prisonYears && verdict?.prisonYears > 0 
+          ? `${verdict?.prisonYears} ans de prison` 
+        : 'Libéré';
+    } else if (language === 'en') {
+      return verdict?.prisonYears && verdict?.prisonYears > 0 
+        ? `${verdict?.prisonYears} years in prison` 
+        : 'Released';
+    } else {
+      return verdict?.prisonYears && verdict?.prisonYears > 0 
+        ? `${verdict?.prisonYears} años de prisión` 
+        : 'Liberado';
+    }
+  };
+
   return (
     <div className="relative w-screen h-screen">
-      {/* Image de fond */}
       <Image
-        src="https://ik.imagekit.io/z0tzxea0wgx/MistralGameJam/court_M-RO6txqB.png?updatedAt=1737835884433"
+        src={isLoading 
+          ? "https://ik.imagekit.io/z0tzxea0wgx/MistralGameJam/court_M-RO6txqB.png?updatedAt=1737835884433"
+          : "https://ik.imagekit.io/z0tzxea0wgx/MistralGameJam/DD_judge1_Bn04jNl_E.png?updatedAt=1737835883169"
+        }
         alt="Background"
         fill
         className="object-cover"
         priority
       />
+      <div className="absolute inset-0 flex items-center justify-center">
+        <div className="bg-black/60 border-8 border-black w-[600px] aspect-square p-8 m-8 flex flex-col items-center justify-center">
+          {isLoading ? (
+            <div className="text-center">
+              <h1 className="text-4xl text-white roboto-slab mb-8">
+                {getLoadingText()}
+              </h1>
+              <div className="animate-bounce">
+                <svg className="w-16 h-16 text-white mx-auto" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" stroke="currentColor">
+                  <path d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
+                </svg>
+              </div>
+            </div>
+          ) : (
+            <div className="text-center flex flex-col items-center justify-between h-full">
+              <h1 className="text-5xl text-white roboto-slab mb-8">
+                {language === 'fr'
+                  ? 'Verdict'
+                  : language === 'en'
+                  ? 'Verdict'
+                  : 'Veredicto'
+                }
+              </h1>
+              
+              <h2 className={`text-7xl mb-8 roboto-slab ${verdict?.verdict ? 'text-green-500' : 'text-red-500'}`}>
+                {getVerdictText()}
+              </h2>
+
+              <p className="text-3xl text-white mb-8 roboto-slab">
+                {getSentenceText()}
+              </p>
+
+              <p className="text-2xl text-white mb-8 roboto-slab italic max-w-[80%]">
+                {verdict?.argument}
+              </p>
 
-      {/* Contenu avec overlay noir */}
-      <div className="absolute inset-0 bg-black/70">
-        <div className="flex flex-col items-center justify-center h-full p-8">
-          <div className="bg-black/60 border border-black border-8 p-6 w-[80%] text-center">
-            <h1 className="text-4xl text-white roboto-slab mb-8">
-              {language === 'fr'
-                ? 'Fin du procès'
-                : language === 'en'
-                ? 'End of trial'
-                : 'Fin del juicio'
-              }
-            </h1>
-            <button
-              onClick={setNextScene}
-              className="px-8 py-4 text-xl font-bold text-white bg-sky-500 hover:bg-blue-700 transition-colors roboto-slab"
-            >
-              {language === 'fr' ? 'Rejouer' : language === 'en' ? 'Play again' : 'Jugar de nuevo'}
-            </button>
-          </div>
+              <button
+                onClick={setNextScene}
+                className="px-12 py-6 text-2xl font-bold text-white bg-sky-500 hover:bg-blue-700 transition-colors roboto-slab mt-auto"
+              >
+                {language === 'fr' ? 'Rejouer' : language === 'en' ? 'Play again' : 'Jugar de nuevo'}
+              </button>
+            </div>
+          )}
         </div>
       </div>
     </div>

src/components/lawyer/Lawyer.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { FC, useState, useEffect, Dispatch, SetStateAction } from 'react';
+import { FC, useState, useEffect, Dispatch, SetStateAction, useRef } from 'react';
 import Image from 'next/image';
 
 interface Message {
@@ -37,6 +37,8 @@ const LawyerScene: FC<LawyerSceneProps> = ({
   const [question, setQuestion] = useState('');
   const [answer, setAnswer] = useState('');
 
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
   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;
@@ -48,6 +50,7 @@ const LawyerScene: FC<LawyerSceneProps> = ({
   useEffect(() => {
     const playAudio = async () => {
       try {
+        if (!answer) return;
 
         const response = await fetch('/api/voice', {
           method: 'POST',
@@ -68,17 +71,22 @@ const LawyerScene: FC<LawyerSceneProps> = ({
         const audioBlob = await response.blob();
         const audioUrl = URL.createObjectURL(audioBlob);
         const audio = new Audio(audioUrl);
+        audioRef.current = audio;
         audio.play();
       } catch (error) {
         console.error('Error playing audio:', error);
       }
     };
 
-    if (answer !== '') {
-      playAudio();
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [answer])
+    playAudio();
+
+    return () => {
+      if (audioRef.current) {
+        audioRef.current.pause();
+        audioRef.current = null;
+      }
+    };
+  }, [answer, language]);
 
   useEffect(() => {
     setVisible(true);
@@ -97,6 +105,14 @@ const LawyerScene: FC<LawyerSceneProps> = ({
     return () => clearInterval(timer);
   }, []);
 
+  const handleNextScene = () => {
+    if (audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current = null;
+    }
+    setNextScene();
+  };
+
   return (
     <div className="relative w-screen h-screen">
       {/* Image de fond */}
@@ -136,7 +152,7 @@ const LawyerScene: FC<LawyerSceneProps> = ({
               {/* Flèche à droite */}
               <div className="absolute bottom-5 right-5">
                 <button
-                  onClick={setNextScene}
+                  onClick={handleNextScene}
                   disabled={!buttonEnabled || (currentQuestion === "" && round < 3)}
                   className={`text-white transition-colors ${
                     buttonEnabled && (currentQuestion !== "" || round === 3)