wip

.dockerignore

@@ -0,0 +1,26 @@
+# Dépendances
+node_modules
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+
+# Fichiers de build
+.next
+out
+build
+dist
+
+# Fichiers de développement
+.git
+.gitignore
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+README.md
+.vscode
+.idea
+
+# Fichiers système
+.DS_Store
+Thumbs.db

.env

@@ -0,0 +1,2 @@
+ELEVEN_LABS_API_KEY="sk_97fa12a6d73a3b7145dbd5f41affb96f7fcf9452262cd0f1"
+MISTRAL_API_KEY="lyDFvx5djb2d5JqhqrHh1sXr8dovlgnE"

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+public/bg.png filter=lfs diff=lfs merge=lfs -text
+public/court.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

Dockerfile

@@ -0,0 +1,25 @@
+# Image de base
+FROM node:20-alpine
+
+# Définition du répertoire de travail
+WORKDIR /app
+
+# Copie des fichiers de dépendances
+COPY package*.json ./
+
+# Installation des dépendances
+RUN npm install
+
+# Copie du reste du code source
+COPY . .
+
+# Construction de l'application en ignorant les erreurs ESLint et TypeScript
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV NODE_ENV=production
+RUN npm run build || npm run build --no-lint
+
+# Exposition du port
+EXPOSE 7860
+
+# Configuration de la commande de démarrage
+CMD ["npm", "start", "--", "-p", "7860"]

README.md

@@ -1,10 +1,12 @@
 ---
-title: DefendDaniel2
-emoji: 👁
-colorFrom: blue
-colorTo: indigo
+title: DefendDaniel
+emoji: 🎮
+colorFrom: indigo
+colorTo: purple
 sdk: docker
+sdk_version: 3.0.0
+app_file: Dockerfile
+app_port: 7860
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

next.config.js

@@ -0,0 +1,14 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'ik.imagekit.io',
+        pathname: '/z0tzxea0wgx/**',
+      },
+    ],
+  },
+};
+
+module.exports = nextConfig;

next.config.ts

@@ -0,0 +1,14 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'ik.imagekit.io',
+        pathname: '/z0tzxea0wgx/**',
+      },
+    ],
+  },
+};
+
+module.exports = nextConfig;

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "myapp",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@mistralai/mistralai": "^1.4.0",
+    "elevenlabs": "^1.50.4",
+    "elevenlabs-client": "^0.0.13",
+    "ffmpeg-static": "^5.2.0",
+    "fluent-ffmpeg": "^2.1.3",
+    "next": "15.1.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@types/fluent-ffmpeg": "^2.1.27",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.1.6",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

src/app/GameContext.tsx

@@ -0,0 +1,105 @@
+'use client';
+import { createContext, useContext, useState, ReactNode } from 'react';
+
+type Scene = 'menu' | 'intro' | 'court' | 'defense' | 'lawyer' | 'end';
+
+interface GameState {
+  score: number;
+  timeLeft: number;
+  language: 'fr' | 'en' | 'es';
+  round: number;
+  currentScene: Scene;
+  currentAnswer: string;
+  audioEnabled: boolean;
+}
+
+interface GameContextType {
+  gameState: GameState;
+  setLanguage: (lang: GameState['language']) => void;
+  setTimeLeft: (time: number | ((prev: number) => number)) => void;
+  setCurrentAnswer: (answer: string) => void;
+  goToNextScene: () => void;
+  resetGame: () => void;
+}
+
+const defaultGameState: GameState = {
+  score: 0,
+  timeLeft: 40,
+  language: 'fr',
+  round: 1,
+  currentScene: 'menu',
+  currentAnswer: '',
+  audioEnabled: false
+};
+
+const sceneFlow: Scene[] = ['menu', 'intro', 'court', 'defense', 'lawyer'];
+
+const GameContext = createContext<GameContextType | undefined>(undefined);
+
+export function GameProvider({ children }: { children: ReactNode }) {
+  const [gameState, setGameState] = useState<GameState>(defaultGameState);
+
+  const setLanguage = (lang: GameState['language']) => {
+    setGameState(prev => ({ ...prev, language: lang }));
+  };
+
+  const setTimeLeft = (time: number | ((prev: number) => number)) => {
+    setGameState(prev => ({ ...prev, timeLeft: typeof time === 'function' ? time(prev.timeLeft) : time }));
+  };
+
+  const setCurrentAnswer = (answer: string) => {
+    setGameState(prev => ({ ...prev, currentAnswer: answer }));
+  };
+
+  const goToNextScene = () => {
+    setGameState(prev => {
+      const currentIndex = sceneFlow.indexOf(prev.currentScene);
+      let nextScene = sceneFlow[currentIndex + 1];
+      let nextRound = prev.round;
+
+      // Si on vient de finir le lawyer et qu'on n'est pas au dernier round
+      if (prev.currentScene === 'lawyer' && prev.round < 3) {
+        nextScene = 'court';
+        nextRound = prev.round + 1;
+      }
+      // Si on a fini le dernier round
+      else if (prev.currentScene === 'lawyer' && prev.round >= 3) {
+        nextScene = 'end';
+      }
+
+      return {
+        ...prev,
+        currentScene: nextScene,
+        round: nextRound,
+        timeLeft: nextScene === 'defense' ? 40 : prev.timeLeft
+      };
+    });
+  };
+
+  const resetGame = () => {
+    setGameState(defaultGameState);
+  };
+
+  return (
+    <GameContext.Provider
+      value={{
+        gameState,
+        setLanguage,
+        setTimeLeft,
+        setCurrentAnswer,
+        goToNextScene,
+        resetGame
+      }}
+    >
+      {children}
+    </GameContext.Provider>
+  );
+}
+
+export function useGame() {
+  const context = useContext(GameContext);
+  if (!context) {
+    throw new Error('useGame must be used within a GameProvider');
+  }
+  return context;
+}

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

@@ -0,0 +1,139 @@
+import { NextResponse } from 'next/server';
+import { Mistral } from "@mistralai/mistralai";
+
+type Language = 'fr' | 'en' | 'es';
+
+const mistral = new Mistral({apiKey: process.env.MISTRAL_API_KEY})
+
+export async function POST(request: Request) {
+    try {
+        const body = await request.json();
+        const { language, story, chat } = body;
+        console.log('language:', language)
+        console.log('story:', story)
+        console.log('chat:', chat)
+
+        const chatHistory = chat.messages
+          .map((m: { role: string; content: string }) =>
+            `${m.role === 'judge' ? 'Judge' : 'Lawyer'}: ${m.content}`
+          )
+          .join('\n');
+
+        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), La question doit commencer par "Pourquoi" ou "J'aimerais savoir" etc.
+                Cette question doit être nouvelle: elle n'apparaît pas dans l'historiques de la discussion.
+                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..").
+                Ces mots doivent aussi être nouveaux: ils n'apparaissent pas dans l'historique de la discussion.
+                Je veux un mot en lien avec le case. 
+                Je veux un mot ou expression embarassante pour un avocat.
+                Je veux un mot simple et drole.
+                RÉPONDEZ UNIQUEMENT AVEC LE JSON
+                N'AJOUTEZ PAS DE MOTS QUI ONT DÉJÀ ÉTÉ ENVOYÉS
+                Voici le contexte de l'affaire :
+
+                description de l'histoire : ${story.description}
+                alibis : ${story.alibi.join(', ')}
+                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), The question must start with "Why" or "I would like to know" etc.
+                This question must be new: it doesn't appear in the history of the discussion.
+                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”).
+                These words must also be new: they don't appear in the discussion history.
+                I want a word related to the case.
+                I want a word or phrase embarassant for a lawyer.
+                I want a simple and funny word.
+                ANSWER WITH ONLY THE JSON
+                DO NOT ADD WORDS THAT HAVE ALREADY BEEN SENT
+                Here is the context of the case :
+
+                story description: ${story.description}
+                alibis: ${story.alibi.join(', ')}
+                history: ${chat.messages.length > 0 ? `discussion history: ${chatHistory}` : 'Empty'}
+
+                I want a reaction to the last answer of the lawyer. This could be "Hmmm, okay.." or then "You didn't really convince me... Why are you talking about ...".
+                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), La pregunta debe comenzar con "Por qué" o "Me gustaría saber" etc.
+                Esta pregunta debe ser nueva: no aparece en la historia del debate.
+                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..»).
+                Estas palabras también deben ser nuevas: no aparecen en la historia del debate.
+                Quiero una palabra relacionada con el caso.
+                Quiero una palabra o frase embarazosa para un abogado.
+                Quiero una palabra simple y divertida.
+                RESPONDA SÓLO CON EL JSON
+                NO AÑADAS PALABRAS QUE YA HAYAN SIDO ENVIADAS
+                Aquí está el contexto del caso :
+
+                descripción de la historia: ${story.description}
+                coartadas: ${story.alibi.join(', ')}
+                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 "Hmmmm, entonces..." o "No me has convencido... ¿Por qué hablas 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"]
+                }`
+        };
+
+        console.log('prompts:', prompts[language as Language])
+
+        const seed = Math.floor(Math.random() * 1000000);
+
+        console.log('seed:', seed)
+
+        const response = await mistral.chat.complete({
+            model: "mistral-large-latest",
+            messages: [{role: 'user', content: prompts[language as Language]}],
+            responseFormat: {type: 'json_object'},
+            randomSeed: seed,
+        });
+
+        console.log('response:', response)
+
+        const functionCall = response.choices?.[0]?.message.content;
+        const JSONResponse = functionCall ? JSON.parse(functionCall as string) : null;
+        console.log('functionCall:', functionCall)
+        console.log('JSONResponse:', JSONResponse)
+
+        return NextResponse.json(JSONResponse || {
+            'question': 'Erreur de génération de question',
+            'words': [],
+            'status': 'error',
+        });
+
+    } catch (error: unknown) {
+        console.log('error:', error)
+        return NextResponse.json(
+            { error: 'Erreur lors de la génération de la question' },
+            { status: 500 }
+        );
+    }
+}

src/app/api/text/route.ts

@@ -0,0 +1,30 @@
+import { NextResponse } from 'next/server';
+
+export async function POST(request: Request) {
+    try {
+        const body = await request.json();
+        const { text } = body;
+
+        if (!text) {
+            return NextResponse.json(
+                { error: 'Le texte est requis' },
+                { status: 400 }
+            );
+        }
+
+        // Logique de traitement du texte ici
+        const processedText = text.toUpperCase(); // exemple simple
+
+        return NextResponse.json({
+            success: true,
+            result: processedText
+        });
+
+    } catch (_error: unknown) {
+        console.log('error:', _error)
+        return NextResponse.json(
+            { error: 'Erreur lors de la génération de la question' },
+            { status: 500 }
+        );
+    }
+}

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

@@ -0,0 +1,84 @@
+import { NextResponse } from 'next/server';
+import { Mistral } from "@mistralai/mistralai";
+
+interface Story {
+    description: string;
+    alibi: string[];
+    problematic: string[];
+}
+
+const mistral = new Mistral({apiKey: process.env.MISTRAL_API_KEY})
+
+export async function POST(request: Request) {
+    try {
+        const body = await request.json();
+        const { language = 'fr' } = body;
+        console.log('body:', body)
+
+        console.log('language:', language)
+
+        const prompts = {
+            fr: `Vous êtes passé maître dans l'art de générer de fausses histoires de procès.
+                Choisissez un mot réel totalement aléatoire et générez une fausse histoire, intégrant ce mot, d'un homme nommé Daniel accusé dans un procès.
+                L'histoire doit être cohérente et tenir en 1 ou 2 phrases.
+                Pouvez-vous donner la réponse dans un format json ?
+                Trouvez 3 alibis. Ils doivent être crédibles et concis.
+                RÉPONDRE UNIQUEMENT AVEC LE JSON`,
+            en: `You're a master in generating fake trial stories.
+                Choose a completly random real word and generate a fake story, integrating this word, of a guy named Daniel accused in trail.
+                The story must be coherent and must fit into 1 or 2 sentences.
+                Can you give the answer in a json format?
+                Find 3 alibis. They must be credible and concise.
+                ANSWER WITH ONLY THE JSON`,
+            es: `Eres un maestro en generar historias falsas de juicios.
+                Elige una palabra real completamente aleatoria y genera una historia falsa, integrando esta palabra, de un tipo llamado Daniel acusado en juicio.
+                La historia debe ser coherente y debe caber en 1 o 2 frases.
+                ¿Puedes dar la respuesta en formato json?
+                Encuentra 3 coartadas. Deben ser creíbles y concisas.
+                RESPONDER SÓLO CON EL JSON`
+        };
+
+        const chatPrompt = `${prompts[language as keyof typeof prompts] || prompts.fr}
+            accusation: {
+                description: String,
+                alibi: [<String>],
+            }`;
+
+        console.log('chatPrompt:', chatPrompt)
+
+        const seed = Math.floor(Math.random() * 1000000);
+
+        console.log('seed:', seed)
+
+        const response = await mistral.chat.complete({
+            model: "mistral-large-latest",
+            messages: [{role: 'user', content: chatPrompt}],
+            responseFormat: {type: 'json_object'},
+            randomSeed: seed,
+        });
+
+        console.log('response:', response)
+
+        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 storyData: Story = JSONResponse?.accusation || {
+            description: "Erreur de génération",
+            alibi: [],
+            problematic: []
+        };
+
+        return NextResponse.json({
+            success: true,
+            story: storyData
+        });
+
+    } catch (error: unknown) {
+        console.log('error:', error)
+        return NextResponse.json(
+            { error: 'Erreur lors de la génération de l\'histoire' },
+            { status: 500 }
+        );
+    }
+}

src/app/api/voice/route.ts

@@ -0,0 +1,103 @@
+import { NextResponse } from 'next/server';
+
+const VOICES = {
+  fr: {
+    LAWYER_VOICE: {
+      id: "XgXB0fxFNJAEDoy7QEp5",
+      volume: 0
+    },
+    GLITCH_VOICE: {
+      id: "MWhJLNn7P7uvQrOTocc8",
+      volume: -10
+    },
+    JUDGE_VOICE: {
+      id: "x2AhtLKBQ202WmP0eMAe",
+      volume: 0
+    }
+  },
+  en: {
+    LAWYER_VOICE: {
+      id: "bGLLbWl0MmTsn5gWQCuZ",
+      volume: 0
+    },
+    GLITCH_VOICE: {
+      id: "ZCgnAThIoaTqZwEGwRb4",
+      volume: -10
+    },
+    JUDGE_VOICE: {
+      id: "e170Z5cpDGpADYBfQKbs",
+      volume: 0
+    }
+  },
+  es: {
+    LAWYER_VOICE: {
+      id: "tozjSvFqKBPpgsJFDfS0",
+      volume: 0
+    },
+    GLITCH_VOICE: {
+      id: "AnLaVu7KDTirBKuGkCZt",
+      volume: -10
+    },
+    JUDGE_VOICE: {
+      id: "I2lWW75NJTSYfUWIunTb",
+      volume: 0
+    }
+  }
+};
+
+export async function POST(request: Request) {
+  try {
+    const { text, language = 'en', role } = await request.json();
+    console.log('language:', language);
+    console.log('text:', text);
+    console.log('role:', role)
+
+    let voice;
+    if (role === 'lawyer') {
+      voice = VOICES[language as keyof typeof VOICES].LAWYER_VOICE.id;
+    } else if (role === 'judge') {
+      voice = VOICES[language as keyof typeof VOICES].JUDGE_VOICE.id;
+    } else if (role === 'glitch') {
+      voice = VOICES[language as keyof typeof VOICES].GLITCH_VOICE.id;
+    }
+    console.log('voice:', voice);
+
+    const response = await fetch(
+      `https://api.elevenlabs.io/v1/text-to-speech/${voice}`,
+      {
+        method: 'POST',
+        headers: {
+          'Accept': 'audio/mpeg',
+          'Content-Type': 'application/json',
+          'xi-api-key': process.env.ELEVEN_LABS_API_KEY!
+        },
+        body: JSON.stringify({
+          text: text,
+          model_id: "eleven_flash_v2_5",
+          voice_settings: {
+            stability: 0.5,
+            similarity_boost: 0.75
+          }
+        })
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error('Failed to generate voice');
+    }
+
+    const audioBuffer = await response.arrayBuffer();
+    return new NextResponse(audioBuffer, {
+      headers: {
+        'Content-Type': 'audio/mpeg'
+      }
+    });
+
+  } catch (error) {
+    console.error('Voice generation error:', error);
+    return NextResponse.json(
+      { error: 'Failed to generate voice' },
+      { status: 500 }
+    );
+  }
+}

src/app/globals.css

@@ -0,0 +1,46 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --font-shadows: var(--font-shadows-into-light);
+  }
+}
+
+@layer utilities {
+  .shadows-into-light-regular {
+    font-family: var(--font-shadows);
+  }
+  .font-crimson {
+    font-family: var(--font-crimson);
+  }
+}
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.shadows-into-light-regular {
+  font-family: "Shadows Into Light", serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.poppins {
+  font-family: var(--font-poppins);
+  font-weight: 400;
+  font-style: normal;
+}
+
+.roboto {
+  font-family: var(--font-roboto);
+  font-weight: 400;
+  font-style: normal;
+}
+
+.roboto-slab {
+  font-family: var(--font-roboto-slab);
+  font-weight: 400;
+  font-style: normal;
+}

src/app/layout.tsx

@@ -0,0 +1,63 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono, Crimson_Text, Poppins, Roboto, Roboto_Slab } from "next/font/google";
+import { Shadows_Into_Light } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+const shadowsIntoLight = Shadows_Into_Light({
+  weight: '400',
+  subsets: ['latin'],
+  variable: '--font-shadows',
+});
+
+const crimsonText = Crimson_Text({
+  weight: ['400', '700'],
+  subsets: ['latin'],
+  variable: '--font-crimson',
+});
+
+const poppins = Poppins({
+  weight: ['400', '700'],
+  subsets: ['latin'],
+  variable: '--font-poppins',
+});
+
+const roboto = Roboto({
+  weight: ['400', '700'],
+  subsets: ['latin'],
+  variable: '--font-roboto',
+});
+
+const robotoSlab = Roboto_Slab({
+  weight: ['400', '700'],
+  subsets: ['latin'],
+  variable: '--font-roboto-slab',
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable} ${shadowsIntoLight.variable} ${crimsonText.variable} antialiased ${poppins.variable} ${roboto.variable} ${robotoSlab.variable}`}>
+        {children}
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,226 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import MenuScene from '../components/menu/Menu';
+import IntroScene from '../components/intro/Intro';
+import CourtScene from '../components/court/Court';
+import DefenseScene from '../components/defense/Defense';
+import LawyerScene from '../components/lawyer/Lawyer';
+import EndScene from '../components/end/End';
+import AccusationScene from '../components/accusation/Accusation';
+
+// Types pour notre état
+type Language = 'fr' | 'en' | 'es';
+
+type Scene = 'menu' | 'intro' | 'accusation' | 'court' | 'defense' | 'lawyer' | 'end';
+interface Story {
+  accusation: {
+    description: string;
+    alibi: string[];
+  };
+}
+
+interface Message {
+  content: string;
+  role: 'lawyer' | 'judge';
+  requiredWords?: string[];
+}
+
+interface Chat {
+  messages: Message[];
+}
+
+
+const intro = {
+  fr: {
+    title: "L'Avocat de l'IA",
+    description: `Daniel est un homme ordinaire. Il n'a rien fait de mal.\nPourtant, il est convoqué au tribunal aujourd'hui. Pauvre Daniel...`,
+    start: "Commencer"
+  },
+  en: {
+    title: "The AI Lawyer", 
+    description: `Daniel is an ordinary guy. He hasn't done anything wrong.\nYet he's been summoned to court today. Poor Daniel...`,
+    start: "Start"
+  },
+  es: {
+    title: "El Abogado de la IA",
+    description: `Daniel es un tipo corriente. No ha hecho nada malo.\nSin embargo, ha sido convocado a la corte hoy. Pobre Daniel...`,
+    start: "Empezar"
+  }
+}
+
+const sceneOrder: Scene[] = ['menu', 'intro', 'accusation', 'court', 'defense', 'lawyer'];
+
+export default function Home() {
+  // Gestion des scènes
+  const [currentScene, setCurrentScene] = useState<Scene>('menu');
+  const [story, setStory] = useState<Story | null>(null);
+  const [chat, setChat] = useState<Chat>({ messages: [] });
+  // États principaux du jeu
+  const [language, setLanguage] = useState<Language>('fr');
+
+  const [round, setRound] = useState<number>(1);
+
+  const [requiredWords, setRequiredWords] = useState<string[]>([])
+
+  const [currentQuestion, setCurrentQuestion] = useState<string>('');
+
+  const [reaction, setReaction] = useState<string>('');
+
+  const resetGame = () => {
+    setCurrentScene('menu');
+    setStory(null);
+    setChat({ messages: [] });
+    setLanguage('fr');
+    setRound(1);
+    setRequiredWords([]);
+  };
+
+  const setNextScene = () => {
+    if (currentScene === 'lawyer') {
+      if (round < 4) {
+        setCurrentScene('court');
+      } else {
+        setCurrentScene('end');
+      }
+      return;
+    }
+
+    if (currentScene === 'end') {
+      resetGame();
+      return;
+    }
+
+    const currentIndex = sceneOrder.indexOf(currentScene);
+    if (currentIndex !== -1 && currentIndex < sceneOrder.length - 1) {
+      setCurrentScene(sceneOrder[currentIndex + 1]);
+    }
+  };
+
+  // Props communs à passer aux composants
+  const commonProps = {
+    intro,
+    language,
+    setLanguage,
+    round,
+    setRound,
+    setCurrentScene,
+    setNextScene,
+    story,
+    currentQuestion,
+    setCurrentQuestion,
+    requiredWords,
+    setRequiredWords,
+    chat,
+    setChat,
+    reaction,
+    setReaction,
+  };
+
+  useEffect(() => {
+    const fetchStory = async () => {
+      try {
+        const response = await fetch('/api/text/story', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ language })
+        });
+
+        const data = await response.json();
+
+        if (data.success && data.story) {
+          setStory({
+            accusation: {
+              description: data.story.description,
+              alibi: data.story.alibi,
+            }
+          });
+        }
+      } catch (error) {
+        console.error('Erreur lors de la récupération de l\'histoire:', error);
+      }
+    };
+
+    console.log('currentScene:', currentScene)
+
+    if (currentScene === 'intro') {
+      fetchStory();
+    }
+  // 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 {
+        const response = await fetch('/api/text/question', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            language,
+            story: story?.accusation,
+            chat: chat
+          })
+        });
+
+        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' }]
+          }));
+        }
+      } catch (error) {
+        console.error('Erreur lors de la récupération de la question:', error);
+      }
+    };
+
+    if ((currentScene === 'accusation' && story) || (currentScene === 'lawyer' && round < 3 && story)) {
+      console.log('fetchQuestion')
+      fetchQuestion();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentScene]);
+
+  useEffect(() => {
+    if (currentQuestion && requiredWords.length > 0) {
+      console.log('currentQuestion:', currentQuestion)
+      console.log('requiredWords:', requiredWords)
+    }
+  }, [currentQuestion, requiredWords])
+
+  switch (currentScene) {
+    case 'menu':
+      return <MenuScene {...commonProps} />;
+    case 'intro':
+      return <IntroScene {...commonProps} />;
+    case 'accusation':
+      return <AccusationScene {...commonProps} />;
+    case 'court':
+      return <CourtScene {...commonProps} />;
+    case 'defense':
+      return <DefenseScene {...commonProps} />;
+    case 'lawyer':
+      return <LawyerScene {...commonProps} />;
+    case 'end':
+      return <EndScene {...commonProps} />;
+    default:
+      return <MenuScene {...commonProps} />;
+  }
+}

src/components/accusation/Accusation.tsx

@@ -0,0 +1,74 @@
+'use client';
+import { FC } from 'react';
+import Image from 'next/image';
+
+interface Story {
+  accusation: {
+    description: string;
+    alibi: string[];
+  };
+}
+
+interface AccusationSceneProps {
+  language: 'fr' | 'en' | 'es';
+  story: Story | null;
+  setNextScene: () => void;
+}
+
+const AccusationScene: FC<AccusationSceneProps> = ({
+  language,
+  story,
+  setNextScene,
+}) => {
+  return (
+    <div className="relative w-screen h-screen">
+      {/* Image de fond */}
+      <Image
+        src="https://ik.imagekit.io/z0tzxea0wgx/MistralGameJam/DD_BG1_rva-mKDVA.jpg?updatedAt=1737835881047"
+        alt="Background"
+        fill
+        className="object-cover"
+        priority
+      />
+
+      {/* Overlay noir */}
+      <div className="absolute inset-0 bg-black/70">
+        {/* Contenu */}
+        <div className="relative z-10 flex flex-col items-center justify-center h-full p-8 space-y-8">
+          <div className="max-w-3xl w-full space-y-8">
+            {/* Description */}
+            <div>
+              <h2 className="text-4xl font-bold text-white mb-4 roboto-slab">
+                {language === 'fr' ? "Chef d'accusation" : language === 'en' ? 'Indictment' : 'Acusación'}
+              </h2>
+              <p className="text-xl text-white roboto-slab">
+                {story?.accusation.description}
+              </p>
+            </div>
+
+            {/* Alibis */}
+            <div>
+              <h2 className="text-4xl font-bold text-white mb-4 roboto-slab">
+                {language === 'fr' ? 'Alibis' : language === 'en' ? 'Alibis' : 'Coartadas'}
+              </h2>
+              <ul className="list-disc list-inside text-white space-y-2 roboto-slab">
+                {story?.accusation.alibi.map((alibi, index) => (
+                  <li key={index} className="text-xl">{alibi}</li>
+                ))}
+              </ul>
+            </div>
+          </div>
+
+          <button
+            onClick={setNextScene}
+            className="px-8 py-4 text-xl font-bold text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors roboto-slab"
+          >
+            {language === 'fr' ? 'Allez au tribunal !' : language === 'en' ? 'Go to court!' : '¡A los tribunales!'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AccusationScene;

src/components/common/Layout.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { FC, ReactNode } from 'react';
+
+interface LayoutProps {
+  children: ReactNode;
+}
+
+const Layout: FC<LayoutProps> = ({ children }) => {
+  return (
+    <div className="w-screen h-screen bg-black overflow-hidden">
+      <div className="w-full h-full overflow-y-auto">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Layout;

src/components/components/LanguageSelector.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+type Language = {
+  code: string;
+  name: string;
+};
+
+const languages: Language[] = [
+  { code: 'fr', name: 'Français' },
+  { code: 'en', name: 'English' },
+  { code: 'es', name: 'Español' },
+];
+
+export const LanguageSelector = ({ onSelect }: { onSelect: (lang: string) => void }) => {
+  return (
+    <select
+      onChange={(e) => onSelect(e.target.value)}
+      className="px-4 py-2 rounded-lg border-2 border-gray-300"
+    >
+      {languages.map((lang) => (
+        <option key={lang.code} value={lang.code}>
+          {lang.name}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+export default LanguageSelector;

src/components/court/Court.tsx

@@ -0,0 +1,123 @@
+'use client';
+import { FC, useEffect, useState } from 'react';
+import Image from 'next/image';
+
+interface CourtSceneProps {
+  setNextScene: () => void;
+  currentQuestion: string;
+  reaction: string;
+  round: number;
+}
+
+const CourtScene: FC<CourtSceneProps> = ({
+  setNextScene,
+  currentQuestion,
+  reaction,
+  round
+}) => {
+  const [showFirstImage, setShowFirstImage] = useState(true);
+
+  useEffect(() => {
+    const playAudio = async () => {
+      try {
+        if (!currentQuestion) return;
+
+        const response = await fetch('/api/voice', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            language: 'en', // You may want to make this configurable
+            text: reaction !== '' ? reaction + currentQuestion : currentQuestion,
+            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);
+        audio.play();
+      } catch (error) {
+        console.error('Error playing audio:', error);
+      }
+    };
+
+    if (currentQuestion) {
+    playAudio();
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentQuestion]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowFirstImage(false);
+    }, 2000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <div className="relative w-screen h-screen">
+      {/* Image de fond statique */}
+      <Image
+        src="https://ik.imagekit.io/z0tzxea0wgx/MistralGameJam/DD_judge2_FoYazvSFmu.png?updatedAt=1737835883172"
+        alt="Background"
+        fill
+        className="object-cover"
+        priority
+      />
+
+      {/* Image superposée avec transition */}
+      <div className={`absolute inset-0 transition-opacity duration-500 ${showFirstImage ? 'opacity-100' : 'opacity-0'}`}>
+        <Image
+          src="https://ik.imagekit.io/z0tzxea0wgx/MistralGameJam/DD_judge1_Bn04jNl_E.png?updatedAt=1737835883169"
+          alt="Overlay"
+          fill
+          className="object-cover"
+          priority
+        />
+      </div>
+
+      {/* Rectangle noir en bas */}
+      <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>
+
+          {/* Flèche à droite */}
+          <div className="flex justify-end">
+            <button
+              onClick={setNextScene}
+              className="text-white hover:text-blue-400 transition-colors"
+              aria-label="Continuer"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-12 w-12"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M14 5l7 7m0 0l-7 7m7-7H3"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CourtScene;

src/components/defense/Defense.tsx

@@ -0,0 +1,291 @@
+'use client';
+import { FC, useState, useEffect, Dispatch, SetStateAction } from 'react';
+import Image from 'next/image';
+
+interface Message {
+  content: string;
+  role: 'lawyer' | 'judge';
+}
+
+interface Chat {
+  messages: Message[];
+}
+
+interface DefenseSceneProps {
+  language: 'fr' | 'en' | 'es';
+  requiredWords: string[];
+  setNextScene: () => void;
+  setChat: (chat: SetStateAction<Chat>) => void;
+  setCurrentQuestion: Dispatch<SetStateAction<string>>;
+  setReaction: Dispatch<SetStateAction<string>>;
+  setRequiredWords: Dispatch<SetStateAction<string[]>>;
+}
+
+const DefenseScene: FC<DefenseSceneProps> = ({
+  language,
+  requiredWords,
+  setNextScene,
+  setCurrentQuestion,
+  setChat,
+  setReaction,
+  setRequiredWords
+}) => {
+  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 [mandatoryWords, setMandatoryWords] = useState(requiredWords);
+  const [isLoading, setIsLoading] = useState(true);
+  const [ words ] = useState(requiredWords);
+
+  // Initialisation des mots obligatoires
+  useEffect(() => {
+    if (requiredWords.length > 0) {
+      setMandatoryWords(requiredWords);
+    }
+    setReaction('');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [requiredWords]);
+
+  // Génération des positions et initialisation
+  useEffect(() => {
+    if (mandatoryWords.length > 0) {
+      const positions = generateWordPositions(mandatoryWords);
+      setWordPositions(positions);
+      setInsertedWords(new Array(mandatoryWords.length).fill(false));
+      setCurrentQuestion("");
+      setIsLoading(false);
+    }
+  }, [mandatoryWords]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    // Reset des required words après initialisation
+  useEffect(() => {
+    if (!isLoading && wordPositions.length > 0) {
+      setRequiredWords([]);
+    }
+  }, [isLoading, wordPositions.length]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    if (isTimeUp) {
+      handleSubmit();
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isTimeUp])    
+
+  // Timer et reset de la question
+  useEffect(() => {
+    // Timer
+    const timer = setInterval(() => {
+      setCountdown((prev) => {
+        console.log('prev:', prev)
+        if (prev === 0) {
+          clearInterval(timer);
+          setIsTimeUp(true);
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    return () => clearInterval(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // On garde uniquement la dépendance answer car handleSubmit est stable
+
+  // Génère un nombre aléatoire entre 9 et 15
+  const generateRandomNumber = () => {
+    return Math.floor(Math.random() * (15 - 9 + 1)) + 9;
+  };
+
+  // Génère les positions pour les mots requis
+  const generateWordPositions = (words: string[]) => {
+    let currentPosition = generateRandomNumber(); // On commence à une position aléatoire
+    return words.map(word => {
+      const position = currentPosition;
+      currentPosition += generateRandomNumber(); // Ajoute un nombre aléatoire de mots pour le prochain mot requis
+      return {
+        word,
+        position
+      };
+    });
+  };
+
+  // Fonction pour compter les mots
+  const countWords = (text: string) => {
+    // Remplacer temporairement les expressions requises par un seul mot
+    let modifiedText = text;
+    wordPositions.forEach(({ word }) => {
+      if (modifiedText.includes(word)) {
+        // Remplace l'expression complète par un placeholder unique
+        modifiedText = modifiedText.replace(word, 'SINGLEWORD');
+      }
+    });
+
+    // Maintenant compte les mots normalement
+    return modifiedText.trim().split(/\s+/).length || 0;
+  };
+
+  // Fonction pour vérifier si on doit insérer un mot obligatoire
+  const checkAndInsertRequiredWord = (text: string) => {
+    const currentWordCount = countWords(text);
+    let newText = text;
+    const newInsertedWords = [...insertedWords];
+    let wordInserted = false;
+
+    wordPositions.forEach((word, index) => {
+      if (!insertedWords[index] && currentWordCount === word.position && text.endsWith(' ')) {
+        newText = `${text}${word.word} `;
+        newInsertedWords[index] = true;
+        wordInserted = true;
+      }
+    });
+
+    if (wordInserted) {
+      setInsertedWords(newInsertedWords);
+    }
+
+    return newText;
+  };
+
+  // Fonction pour vérifier si on peut supprimer du texte
+  const canDeleteAt = (text: string, cursorPosition: number) => {
+    // const textBeforeCursor = text.substring(0, cursorPosition);
+    // const wordsBeforeCursor = countWords(textBeforeCursor);
+
+    return !wordPositions.some((word, index) => {
+      if (!insertedWords[index]) return false;
+
+      const wordStartPosition = text.indexOf(word.word);
+      const wordEndPosition = wordStartPosition + word.word.length;
+
+      return cursorPosition > wordStartPosition && cursorPosition <= wordEndPosition;
+    });
+  };
+
+  const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newText = e.target.value;
+    setAnswer(newText);
+    const cursorPosition = e.target.selectionStart;
+
+    // Si c'est une suppression
+    if (newText.length < answer.length) {
+      if (!canDeleteAt(answer, cursorPosition)) {
+        return;
+      }
+    }
+
+    // Insertion normale + vérification des mots obligatoires
+    const processedText = checkAndInsertRequiredWord(newText);
+    setAnswer(processedText);
+  };
+
+  const handleSubmit = () => {
+    setChat(prevChat => ({
+      messages: [...prevChat.messages, { content: answer, role: 'lawyer', requiredWords: words }]
+    }));
+    setNextScene();
+  };
+
+  const formatTime = (seconds: number) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  // Vérifie si la réponse est valide pour soumission
+  const isAnswerValid = () => {
+    const lastWordPosition = Math.max(...wordPositions.map(word => word.position));
+    const currentWordCount = countWords(answer);
+    return currentWordCount >= lastWordPosition && insertedWords.every(inserted => inserted);
+  };
+
+  return (
+    <div className="relative w-screen h-screen">
+      {/* Image de fond */}
+      <Image
+        src="https://ik.imagekit.io/z0tzxea0wgx/MistralGameJam/DD_attorney2_gbcNJRrYM.png?updatedAt=1737835883087"
+        alt="Background"
+        fill
+        className="object-cover"
+        priority
+      />
+
+      {/* Contenu avec overlay noir */}
+      <div className="absolute inset-0">
+        {isLoading ? (
+          <div className="flex items-center justify-center h-full">
+            <div className="text-2xl text-gray-300">
+              {language === 'fr' ? 'Chargement...' : language === 'en' ? 'Loading...' : 'Cargando...'}
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col justify-end p-8 h-full">
+            {/* Header avec le compte à rebours */}
+            <div className="flex justify-between items-center mb-6">
+              <div className={`text-8xl roboto-slab ${countdown < 10 ? 'text-red-500' : 'text-white'}`}>
+                {formatTime(countdown)}
+              </div>
+            </div>
+
+            {/* Prochain mot requis */}
+            <div className="mb-6">
+              {wordPositions.map((item, index) => {
+                // Ne montrer que le premier mot non inséré
+                if (insertedWords[index] || index > 0 && !insertedWords[index - 1]) return null;
+                const remainingWords = item.position - countWords(answer);
+                return (
+                  <div key={index} className="bg-black/60 border border-black border-8 p-6 text-white">
+                    <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'
+                        ? `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'
+                        ? ` words`
+                        : ` palabras`
+                    }</span>
+                  </div>
+                );
+              }).filter(Boolean)[0]}
+            </div>
+
+            {/* Zone de texte avec bouton submit en position absolue */}
+            <div className="relative w-full mb-6">
+              <textarea
+                value={answer}
+                onChange={handleTextChange}
+                disabled={isTimeUp}
+                placeholder={language === 'fr'
+                  ? "Écrivez votre défense ici..."
+                  : language === 'en'
+                    ? "Write your defense here..."
+                    : "Write your defense here..."}
+                className="w-full p-6 bg-black/60 border border-black border-8 text-white text-4xl rounded-none focus:outline-none roboto-slab h-[30vh]"
+              />
+
+              {/* Bouton de soumission */}
+              <button
+                onClick={() => handleSubmit()}
+                disabled={!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>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default DefenseScene;

src/components/end/End.tsx

@@ -0,0 +1,50 @@
+'use client';
+import { FC } from 'react';
+import Image from 'next/image';
+
+interface EndSceneProps {
+  language: 'fr' | 'en' | 'es';
+  setNextScene: () => void;
+}
+
+const EndScene: FC<EndSceneProps> = ({
+  language,
+  setNextScene,
+}) => {
+  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"
+        alt="Background"
+        fill
+        className="object-cover"
+        priority
+      />
+
+      {/* 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>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EndScene;

src/components/intro/Intro.tsx

@@ -0,0 +1,79 @@
+'use client';
+import { FC } from 'react';
+import Image from 'next/image';
+
+
+interface Story {
+  accusation: {
+    description: string;
+    alibi: string[];
+  };
+}
+
+interface IntroSceneProps {
+  intro: {
+    fr: {
+      title: string;
+      description: string;
+      start: string;
+    };
+    en: {
+      title: string;
+      description: string;
+      start: string;
+    };
+    es: {
+      title: string;
+      description: string;
+      start: string;
+    };
+  },
+  language: 'fr' | 'en' | 'es';
+  setNextScene: () => void;
+  story: Story | null;
+}
+
+const IntroScene: FC<IntroSceneProps> = ({
+  intro,
+  language,
+  setNextScene,
+  story,
+}) => {
+  const handleContinue = () => {
+    setNextScene();
+  };
+
+  return (
+    <div className="relative w-screen h-screen">
+      {/* Image de fond */}
+      <Image
+        src="https://ik.imagekit.io/z0tzxea0wgx/MistralGameJam/DD_BG1_rva-mKDVA.jpg?updatedAt=1737835881047https://ik.imagekit.io/z0tzxea0wgx/MistralGameJam/DD_BG1_rva-mKDVA.jpg?updatedAt=1737835881047"
+        alt="Background"
+        fill
+        className="object-cover"
+        priority
+      />
+
+      {/* Overlay noir */}
+      <div className="absolute inset-0 bg-black/70">
+        {/* Contenu */}
+        <div className="relative z-10 flex flex-col items-center justify-center h-full p-4">
+          <p className="text-4xl text-white text-center mb-8 roboto-slab max-w-2xl">
+            {intro[language].description}
+          </p>
+
+          <button
+            onClick={handleContinue}
+            className={`px-8 py-4 text-xl font-bold text-white rounded-lg transition-colors roboto-slab
+              ${story ? 'bg-blue-600 hover:bg-blue-700' : 'bg-gray-500 cursor-not-allowed'}`}
+            disabled={!story}
+          >
+            {intro[language].start}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default IntroScene;

src/components/lawyer/Lawyer.tsx

@@ -0,0 +1,176 @@
+'use client';
+import { FC, useState, useEffect, Dispatch, SetStateAction } from 'react';
+import Image from 'next/image';
+
+interface Message {
+  content: string;
+  role: 'lawyer' | 'judge';
+  requiredWords?: string[];
+}
+
+
+interface Chat {
+  messages: Message[];
+}
+
+interface LawyerSceneProps {
+  language: 'fr' | 'en' | 'es';
+  chat: Chat;
+  setNextScene: () => void;
+  currentQuestion: string;
+  round: number;
+  setRound: Dispatch<SetStateAction<number>>;
+}
+
+const LawyerScene: FC<LawyerSceneProps> = ({
+  language,
+  chat,
+  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(() => {
+    const playAudio = async () => {
+      try {
+
+        const response = await fetch('/api/voice', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            language,
+            text: answer,
+            role: 'lawyer'
+          })
+        });
+
+        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);
+        audio.play();
+      } catch (error) {
+        console.error('Error playing audio:', error);
+      }
+    };
+
+    if (answer !== '') {
+      playAudio();
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [answer])
+
+  useEffect(() => {
+    setVisible(true);
+    setRound(round + 1);
+    const timer = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          setButtonEnabled(true);
+          clearInterval(timer);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <div className="relative w-screen h-screen">
+      {/* Image de fond */}
+      <Image
+        src="https://ik.imagekit.io/z0tzxea0wgx/MistralGameJam/DD_attorney1_k5DWtEzcV.png?updatedAt=1737835883169"
+        alt="Background"
+        fill
+        className="object-cover"
+        priority
+      />
+
+      {/* Contenu avec overlay noir */}
+      <div className="absolute inset-0">
+        <div className="flex flex-col items-center justify-end h-full p-8">
+          <div className={`flex flex-col items-center justify-center space-y-8 transition-opacity duration-1000 ${
+            visible ? 'opacity-100' : 'opacity-0'
+          }`}>
+            {/* Question du juge */}
+            <div className="bg-black/60 border border-black border-8 p-6 mb-8 w-[80%]">
+              <h2 className="text-2xl font-bold mb-4 roboto-slab text-white">
+                {language === 'fr' ? 'Question du juge' : language === 'en' ? 'Judge\'s question' : 'Pregunta del juez'}:
+              </h2>
+              <p className="text-xl text-white roboto-slab">
+                {question}
+              </p>
+            </div>
+
+            {/* Réponse de l'avocat avec flèche */}
+            <div className="relative bg-black/60 border border-black border-8 p-6 mb-8 w-[80%]">
+              <h2 className="text-2xl font-bold mb-4 roboto-slab text-white">
+                {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">
+                {answer}
+              </p>
+
+              {/* Flèche à droite */}
+              <div className="absolute bottom-5 right-5">
+                <button
+                  onClick={setNextScene}
+                  disabled={!buttonEnabled || (currentQuestion === "" && round < 3)}
+                  className={`text-white transition-colors ${
+                    buttonEnabled && (currentQuestion !== "" || round === 3)
+                      ? 'hover:text-blue-400 cursor-pointer'
+                      : 'text-gray-600 cursor-not-allowed'
+                  }`}
+                  aria-label="Continuer"
+                >
+                  {!buttonEnabled ? (
+                    <span className="text-2xl">{countdown}s</span>
+                  ) : (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="h-12 w-12"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M14 5l7 7m0 0l-7 7m7-7H3"
+                      />
+                    </svg>
+                  )}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LawyerScene;

src/components/menu/Menu.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { FC } from 'react';
+import Image from 'next/image';
+
+interface MenuSceneProps {
+  language: 'fr' | 'en' | 'es';
+  setLanguage: (lang: 'fr' | 'en' | 'es') => void;
+  setNextScene: () => void;
+}
+
+const MenuScene: FC<MenuSceneProps> = ({ setLanguage, setNextScene }) => {
+
+  const handleLanguageSelect = (language: 'fr' | 'en' | 'es') => {
+    setLanguage(language);
+    setNextScene();
+  };
+
+  return (
+    <div className="relative w-screen h-screen">
+      {/* Image de fond */}
+      <Image
+        src="https://ik.imagekit.io/z0tzxea0wgx/MistralGameJam/DD_start_P_osNnWmM.png?updatedAt=1737835883339"
+        alt="Background"
+        fill
+        className="object-cover"
+        priority
+      />
+
+      {/* Contenu du menu avec un fond semi-transparent */}
+      <div className="relative z-10 flex flex-col items-end justify-center h-full w-full">
+        <div className="flex flex-col gap-10 mr-[20vw]">
+          <button
+            onClick={() => handleLanguageSelect('en')}
+            className="text-8xl text-white roboto-slab hover:text-sky-500 transition-colors"
+          >
+            English
+          </button>
+          <button
+            onClick={() => handleLanguageSelect('fr')}
+            className="text-8xl text-white roboto-slab hover:text-sky-500 transition-colors"
+          >
+            Français
+          </button>
+          <button
+            onClick={() => handleLanguageSelect('es')}
+            className="text-8xl text-white roboto-slab hover:text-sky-500 transition-colors"
+          >
+            Español
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MenuScene;

tailwind.config.ts

@@ -0,0 +1,18 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}