wip

src/components/court/Court.tsx

@@ -23,6 +23,12 @@ const CourtScene: FC<CourtSceneProps> = ({
       try {
         if (!currentQuestion) return;
 
+        // Cleanup previous audio if exists
+        if (audioRef.current) {
+          audioRef.current.pause();
+          audioRef.current = null;
+        }
+
         const response = await fetch('/api/voice', {
           method: 'POST',
           headers: {
@@ -43,15 +49,13 @@ const CourtScene: FC<CourtSceneProps> = ({
         const audioUrl = URL.createObjectURL(audioBlob);
         const audio = new Audio(audioUrl);
         audioRef.current = audio;
-        audio.play();
+        await audio.play();
       } catch (error) {
         console.error('Error playing audio:', error);
       }
     };
 
-    if (currentQuestion) {
-      playAudio();
-    }
+    playAudio();
 
     return () => {
       if (audioRef.current) {
@@ -59,7 +63,8 @@ const CourtScene: FC<CourtSceneProps> = ({
         audioRef.current = null;
       }
     };
-  }, [currentQuestion, reaction]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentQuestion]);
 
   const handleNextScene = () => {
     if (audioRef.current) {

src/components/end/End.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 Verdict {
@@ -20,14 +20,66 @@ const EndScene: FC<EndSceneProps> = ({
   verdict
 }) => {
   const [isLoading, setIsLoading] = useState(true);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
 
   useEffect(() => {
     if (verdict) {
-      console.log('End verdict:', verdict)
+      console.log('End verdict:', verdict);
       setIsLoading(false);
+
+      const playVerdict = async () => {
+        try {
+          if (audioRef.current) {
+            audioRef.current.pause();
+            audioRef.current = null;
+          }
+
+          const response = await fetch('/api/voice', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              language,
+              text: verdict.argument,
+              role: 'judge'
+            })
+          });
+
+          if (!response.ok) {
+            throw new Error('Failed to generate audio');
+          }
+
+          const audioBlob = await response.blob();
+          const audioUrl = URL.createObjectURL(audioBlob);
+          const audio = new Audio(audioUrl);
+          audioRef.current = audio;
+          await audio.play();
+        } catch (error) {
+          console.error('Error playing verdict audio:', error);
+        }
+      };
+
+      playVerdict();
     }
+
+    return () => {
+      if (audioRef.current) {
+        audioRef.current.pause();
+        audioRef.current = null;
+      }
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [verdict]);
 
+  const handleNextScene = () => {
+    if (audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current = null;
+    }
+    setNextScene();
+  };
+
   const getLoadingText = () => {
     if (language === 'fr') {
       return 'Le juge délibère...';
@@ -77,7 +129,7 @@ const EndScene: FC<EndSceneProps> = ({
         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">
+        <div className="bg-black/60 border-8 border-black w-[600px] p-10 m-8 flex flex-col items-center justify-center">
           {isLoading ? (
             <div className="text-center">
               <h1 className="text-4xl text-white roboto-slab mb-8">
@@ -113,7 +165,7 @@ const EndScene: FC<EndSceneProps> = ({
               </p>
 
               <button
-                onClick={setNextScene}
+                onClick={handleNextScene}
                 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' ? 'Try again' : 'Jugar de nuevo'}