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="rqjQLRrhjdjh4wjBVJNaAxMWiCPqjWcn"
+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: green
-colorTo: yellow
+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,28 @@
+{
+  "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",
+    "next": "15.1.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@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,103 @@
+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: `En tant que juge, génère une question difficile concernant cette affaire:
+                ${story.description}
+
+                Alibis du suspect: ${story.alibi.join(', ')}
+                Problèmes dans sa défense: ${story.problematic.join(', ')}
+                ${chat.messages.length > 0 ? `\nHistorique de la discussion:\n${chatHistory}` : ''}
+
+                Génère aussi une liste de 3 mots ou expressions absurdes que l'avocat devra obligatoirement utiliser dans sa réponse.
+                Ces expressions doivent être décalées et mettre l'avocat dans l'embarras mais etre relativement réaliste à l'affaire.
+
+                Réponds en JSON avec ce format:
+                {
+                    "question": "Ta question incisive de juge ici",
+                    "words": ["expression1", "expression2", "expression3"]
+                }`,
+            en: `As a judge, generate a tough question about this case:
+                ${story.description}
+
+                Suspect's alibis: ${story.alibi.join(', ')}
+                Issues in their defense: ${story.problematic.join(', ')}
+                ${chat.messages.length > 0 ? `Previous answers:\n${chatHistory}` : ''}
+
+                Also generate a list of 3 absurd words or expressions that the lawyer must use in their response.
+                These expressions should be quirky and put the lawyer in an awkward position but be relatively realistic to the case.
+
+                Answer in JSON with this format:
+                {
+                    "question": "Your incisive judge question here",
+                    "words": ["expression1", "expression2", "expression3"]
+                }`,
+            es: `Como juez, genera una pregunta difícil sobre este caso:
+                ${story.description}
+
+                Coartadas del sospechoso: ${story.alibi.join(', ')}
+                Problemas en su defensa: ${story.problematic.join(', ')}
+                ${chat.messages.length > 0 ? `Respuestas previas:\n${chatHistory}` : ''}
+
+                También genera una lista de 3 palabras o expresiones absurdas que el abogado deberá usar en su respuesta.
+                Estas expresiones deben ser extrañas y poner al abogado en una situación incómoda pero realista à l'affaire.
+
+                Responde en JSON con este formato:
+                {
+                    "question": "Tu pregunta incisiva 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-small-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,76 @@
+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: `Daniel est accusé. Génère une histoire d'accusation criminelle.
+                L'histoire doit être cohérente et détaillée, avec des alibis crédibles et des problématiques pertinentes.
+                Réponds en français avec le JSON format :`,
+            en: `Daniel is accused. Generate a criminal accusation story.
+                The story must be coherent and detailed, with credible alibis and relevant issues.
+                Answer in English with the JSON format:`,
+            es: `Daniel está acusado. Genera una historia de acusación criminal.
+                La historia debe ser coherente y detallada, con coartadas creíbles y problemas relevantes.
+                Responde en español con el formato JSON:`
+        };
+
+        const chatPrompt = `${prompts[language as keyof typeof prompts] || prompts.fr}
+            accusation: {
+                description: String,
+                alibi: [<String>],
+                problematic: [<String>],
+            }`;
+
+        console.log('chatPrompt:', chatPrompt)
+
+        const seed = Math.floor(Math.random() * 1000000);
+
+        console.log('seed:', seed)
+
+        const response = await mistral.chat.complete({
+            model: "mistral-small-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,134 @@
+import { NextResponse } from 'next/server';
+
+const VOICES = {
+  fr: {
+    LAWYER_VOICE: {
+      id: "ThT5KcBeYPX3keUQqHPh",
+      volume: 0
+    },
+    GLITCH_VOICE: {
+      id: "XrExE9yKIg1WjnnlVkGX",
+      volume: -10
+    }
+  },
+  en: {
+    LAWYER_VOICE: {
+      id: "ThT5KcBeYPX3keUQqHPh",
+      volume: 0
+    },
+    GLITCH_VOICE: {
+      id: "XrExE9yKIg1WjnnlVkGX",
+      volume: -10
+    }
+  },
+  es: {
+    LAWYER_VOICE: {
+      id: "ThT5KcBeYPX3keUQqHPh",
+      volume: 0
+    },
+    GLITCH_VOICE: {
+      id: "XrExE9yKIg1WjnnlVkGX",
+      volume: -10
+    }
+  }
+};
+
+
+export async function POST(request: Request) {
+  try {
+    const { text, language = 'en' } = await request.json();
+
+    if (!VOICES[language as keyof typeof VOICES]) {
+      return NextResponse.json(
+        { error: 'Language not supported' },
+        { status: 400 }
+      );
+    }
+
+    const segments = text.split('*');
+    let finalText = '';
+
+    for (let i = 0; i < segments.length; i++) {
+      const segment = segments[i].trim();
+      if (segment !== "") {
+        if (i % 2 === 1) {
+          // Pour les segments glitch, on utilise une voix différente
+          const voiceConfig = VOICES[language as keyof typeof VOICES].GLITCH_VOICE;
+          const response = await fetch(
+            `https://api.elevenlabs.io/v1/text-to-speech/${voiceConfig.id}`,
+            {
+              method: 'POST',
+              headers: {
+                'Accept': 'audio/mpeg',
+                'Content-Type': 'application/json',
+                'xi-api-key': process.env.ELEVEN_LABS_API_KEY!
+              },
+              body: JSON.stringify({
+                text: segment,
+                model_id: "eleven_monolingual_v1",
+                voice_settings: {
+                  stability: 0.5,
+                  similarity_boost: 0.75
+                }
+              })
+            }
+          );
+
+          if (!response.ok) {
+            throw new Error('Failed to generate glitch voice');
+          }
+
+          const audioBuffer = await response.arrayBuffer();
+          return new NextResponse(audioBuffer, {
+            headers: {
+              'Content-Type': 'audio/mpeg'
+            }
+          });
+        } else {
+          // Pour les segments normaux
+          // const voiceConfig = VOICES[language as keyof typeof VOICES].LAWYER_VOICE;
+          finalText += "..." + segment + "...";
+        }
+      }
+    }
+
+    // Si aucun segment glitch n'a été trouvé, on génère la voix normale
+    const response = await fetch(
+      `https://api.elevenlabs.io/v1/text-to-speech/${VOICES[language as keyof typeof VOICES].LAWYER_VOICE.id}`,
+      {
+        method: 'POST',
+        headers: {
+          'Accept': 'audio/mpeg',
+          'Content-Type': 'application/json',
+          'xi-api-key': process.env.ELEVEN_LABS_API_KEY!
+        },
+        body: JSON.stringify({
+          text: finalText,
+          model_id: "eleven_monolingual_v1",
+          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,213 @@
+'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[];
+    problematic: string[];
+  };
+}
+
+interface Message {
+  content: string;
+  role: 'lawyer' | 'judge';
+}
+
+interface Chat {
+  messages: Message[];
+}
+
+
+const intro = {
+  fr: {
+    title: "L'Avocat de l'IA",
+    description: "Vous êtes un avocat de l'intelligence artificielle. Votre client est accusé d'un crime. Défendez-le devant le tribunal.",
+    start: "Commencer"
+  },
+  en: {
+    title: "The AI Lawyer",
+    description: "You are an artificial intelligence lawyer. Your client is accused of a crime. Defend them in court.",
+    start: "Start"
+  },
+  es: {
+    title: "El Abogado de la IA",
+    description: "Eres un abogado de inteligencia artificial. Tu cliente está acusado de un crimen. Defiéndelo en la corte.",
+    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 resetGame = () => {
+    setCurrentScene('menu');
+    setStory(null);
+    setChat({ messages: [] });
+    setLanguage('fr');
+    setRound(1);
+    setRequiredWords([]);
+  };
+
+  const setNextScene = () => {
+    if (currentScene === 'lawyer') {
+      if (round < 3) {
+        setRound(round + 1);
+        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,
+  };
+
+  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,
+              problematic: data.story.problematic,
+            }
+          });
+        }
+      } 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(() => {
+    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)
+        if (data.question && data.words) {
+          setCurrentQuestion(data.question);
+          setRequiredWords(data.words);
+          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,87 @@
+'use client';
+import { FC } from 'react';
+import Image from 'next/image';
+
+interface Story {
+  accusation: {
+    description: string;
+    alibi: string[];
+    problematic: 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-2xl font-bold text-white mb-4 roboto-slab">
+                {language === 'fr' ? "Chef d'accusation" : language === 'en' ? 'Accusation' : 'Acusación'}
+              </h2>
+              <p className="text-xl text-white roboto-slab">
+                {story?.accusation.description}
+              </p>
+            </div>
+
+            {/* Alibis */}
+            <div>
+              <h2 className="text-2xl 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>
+
+            {/* Points problématiques */}
+            <div>
+              <h2 className="text-2xl font-bold text-white mb-4 roboto-slab">
+                {language === 'fr' ? 'Points problématiques' : language === 'en' ? 'Problematic points' : 'Puntos problemáticos'}
+              </h2>
+              <ul className="list-disc list-inside text-white space-y-2 roboto-slab">
+                {story?.accusation.problematic.map((point, index) => (
+                  <li key={index} className="text-xl">{point}</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' ? 'Continuer' : language === 'en' ? 'Continue' : 'Continuar'}
+          </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,82 @@
+'use client';
+import { FC, useEffect, useState } from 'react';
+import Image from 'next/image';
+
+interface CourtSceneProps {
+  setNextScene: () => void;
+  currentQuestion: string;
+}
+
+const CourtScene: FC<CourtSceneProps> = ({
+  setNextScene,
+  currentQuestion
+}) => {
+  const [showFirstImage, setShowFirstImage] = useState(true);
+
+  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">
+            {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,285 @@
+'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>>;
+  setRequiredWords: Dispatch<SetStateAction<string[]>>
+}
+
+const DefenseScene: FC<DefenseSceneProps> = ({
+  language,
+  requiredWords,
+  setNextScene,
+  setCurrentQuestion,
+  setRequiredWords,
+  setChat
+}) => {
+  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);
+
+  // Initialisation des mots obligatoires
+  useEffect(() => {
+    if (requiredWords.length > 0) {
+      setMandatoryWords(requiredWords);
+    }
+  }, [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
+
+  // Timer et reset de la question
+  useEffect(() => {
+    // Timer
+    const timer = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          clearInterval(timer);
+          setIsTimeUp(true);
+
+          // Mettre à jour le chat et passer à la scène suivante
+          setChat(prevChat => ({
+            messages: [...prevChat.messages, { content: answer, role: 'lawyer' }]
+          }));
+          setNextScene();
+
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    return () => clearInterval(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Suppression de la dépendance answer
+
+  // Génère les positions pour les mots requis
+  const generateWordPositions = (words: string[]) => {
+    let currentPosition = 3; // On commence au 3ème mot minimum
+    return words.map((word, index) => {
+      const randomIncrement = Math.floor(Math.random() * 4) + 3; // Entre 3 et 6 mots d'écart
+      currentPosition += randomIncrement;
+      // Pour le dernier mot, assurons-nous qu'il n'est pas trop loin
+      if (index === words.length - 1) {
+        currentPosition = Math.min(currentPosition, 20); // Maximum 20 mots
+      }
+      return {
+        word,
+        position: currentPosition
+      };
+    });
+  };
+
+  // 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;
+    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 = (text: string) => {
+    setChat(prevChat => ({
+      messages: [...prevChat.messages, { content: text, role: 'lawyer' }]
+    }));
+    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(answer)}
+                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,80 @@
+'use client';
+import { FC } from 'react';
+import Image from 'next/image';
+
+
+interface Story {
+  accusation: {
+    description: string;
+    alibi: string[];
+    problematic: 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,125 @@
+'use client';
+import { FC, useState, useEffect } from 'react';
+import Image from 'next/image';
+
+interface Message {
+  content: string;
+  role: 'lawyer' | 'judge';
+}
+
+interface Chat {
+  messages: Message[];
+}
+
+interface LawyerSceneProps {
+  language: 'fr' | 'en' | 'es';
+  chat: Chat;
+  setNextScene: () => void;
+  currentQuestion: string;
+  round: number;
+}
+
+const LawyerScene: FC<LawyerSceneProps> = ({
+  language,
+  chat,
+  setNextScene,
+  currentQuestion,
+  round,
+}) => {
+  const [visible, setVisible] = useState(false);
+  const [buttonEnabled, setButtonEnabled] = useState(false);
+  const [countdown, setCountdown] = useState(3);
+
+  useEffect(() => {
+    setVisible(true);
+    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">
+                {chat.messages.find((message: Message) => message.role === 'judge')?.content}
+              </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">
+                {chat.messages.find((message: Message) => message.role === 'lawyer')?.content}
+              </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,55 @@
+'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> = ({ language, setLanguage, 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">
+        {/* Sélecteur de langue */}
+
+        <div className='flex flex-col items-center justify-center w-[20%] mr-[20%]'>
+          <div className='w-full'>
+            <select
+              value={language}
+              onChange={(e) => setLanguage(e.target.value as 'fr' | 'en' | 'es')}
+              className="w-full px-4 py-2 rounded-lg bg-white text-slate-900 border border-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="fr">Français</option>
+              <option value="en">English</option>
+              <option value="es">Espanol</option>
+            </select>
+          </div>
+
+          {/* Bouton Play */}
+          <button
+            onClick={setNextScene}
+            className="px-8 py-4 text-xl w-full font-bold text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors mt-8"
+          >
+            {language === 'fr' ? 'Jouer' : language === 'en' ? 'Play' : 'Jugar'}
+          </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"]
+}