feat: improve game logic and add a board

ARCHITECTURE_V3.md

@@ -1,199 +0,0 @@
-# 🏗️ Architecture v3.0 - React + FastAPI + Docker
-
-## 🎯 Objectif
-Interface simple et intuitive, déployable sur Hugging Face Spaces via Docker.
-
-## 📐 Architecture
-
-```
-custom-cluedo/
-├── backend/              # FastAPI
-│   ├── main.py          # API principale
-│   ├── models.py        # Modèles Pydantic
-│   ├── game_engine.py   # Logique métier
-│   ├── game_manager.py  # Gestion parties
-│   └── requirements.txt
-│
-├── frontend/            # React
-│   ├── public/
-│   ├── src/
-│   │   ├── App.jsx
-│   │   ├── pages/
-│   │   │   ├── Home.jsx
-│   │   │   ├── Join.jsx
-│   │   │   └── Game.jsx
-│   │   ├── components/
-│   │   │   ├── Board.jsx
-│   │   │   ├── PlayerCards.jsx
-│   │   │   └── ActionPanel.jsx
-│   │   └── api.js
-│   ├── package.json
-│   └── vite.config.js
-│
-├── Dockerfile           # Multi-stage build
-├── docker-compose.yml   # Dev local
-└── README.md
-```
-
-## 🎮 Flux Simplifié
-
-### 1. Création (Valeurs par Défaut)
-```
-Titre: "Meurtre au Manoir"
-Tonalité: "Thriller"
-Lieux: ["Cuisine", "Salon", "Bureau", "Chambre", "Garage", "Jardin"]
-Armes: ["Poignard", "Revolver", "Corde", "Chandelier", "Clé anglaise", "Poison"]
-Suspects: ["Mme Leblanc", "Col. Moutarde", "Mlle Rose", "Prof. Violet", "Mme Pervenche", "M. Olive"]
-```
-
-**Personnalisation optionnelle** (accordéon replié par défaut)
-
-### 2. Interface de Jeu
-
-**Layout simple :**
-```
-┌─────────────────────────────────────┐
-│  Cluedo Custom - Code: AB7F         │
-├─────────────────────────────────────┤
-│                                     │
-│  [Plateau avec positions]           │
-│                                     │
-├─────────────────────────────────────┤
-│  Vos cartes: [🃏] [🃏] [🃏]        │
-├─────────────────────────────────────┤
-│  Tour de: Alice                     │
-│  [🎲 Lancer dés] ou [⏭️ Passer]    │
-│                                     │
-│  Si déplacé:                        │
-│  [💭 Suggérer] [⚡ Accuser]        │
-└─────────────────────────────────────┘
-```
-
-## 🐳 Docker pour Hugging Face
-
-### Dockerfile
-```dockerfile
-# Stage 1: Build frontend
-FROM node:18-alpine AS frontend-build
-WORKDIR /app/frontend
-COPY frontend/package*.json ./
-RUN npm install
-COPY frontend/ ./
-RUN npm run build
-
-# Stage 2: Run backend + serve frontend
-FROM python:3.11-slim
-WORKDIR /app
-
-# Install backend deps
-COPY backend/requirements.txt ./
-RUN pip install --no-cache-dir -r requirements.txt
-
-# Copy backend
-COPY backend/ ./backend/
-
-# Copy built frontend
-COPY --from=frontend-build /app/frontend/dist ./frontend/dist
-
-# Expose port
-EXPOSE 7860
-
-# Start FastAPI (serves both API and static frontend)
-CMD ["uvicorn", "backend.main:app", "--host", "0.0.0.0", "--port", "7860"]
-```
-
-## 🚀 Déploiement Hugging Face
-
-### README.md du Space
-```yaml
----
-title: Cluedo Custom
-emoji: 🔍
-colorFrom: red
-colorTo: purple
-sdk: docker
-pinned: false
----
-```
-
-## ⚙️ Configuration FastAPI pour Servir React
-
-```python
-from fastapi import FastAPI
-from fastapi.staticfiles import StaticFiles
-from fastapi.responses import FileResponse
-
-app = FastAPI()
-
-# API routes
-@app.get("/api/health")
-async def health():
-    return {"status": "ok"}
-
-# ... autres routes API ...
-
-# Serve React app
-app.mount("/", StaticFiles(directory="frontend/dist", html=True), name="static")
-
-@app.get("/{full_path:path}")
-async def serve_react(full_path: str):
-    return FileResponse("frontend/dist/index.html")
-```
-
-## 📦 Valeurs par Défaut
-
-### Thèmes Prédéfinis
-```python
-DEFAULT_THEMES = {
-    "classic": {
-        "name": "Meurtre au Manoir",
-        "rooms": ["Cuisine", "Salon", "Bureau", "Chambre", "Garage", "Jardin"],
-        "weapons": ["Poignard", "Revolver", "Corde", "Chandelier", "Clé anglaise", "Poison"],
-        "suspects": ["Mme Leblanc", "Col. Moutarde", "Mlle Rose", "Prof. Violet", "Mme Pervenche", "M. Olive"]
-    },
-    "office": {
-        "name": "Meurtre au Bureau",
-        "rooms": ["Open Space", "Salle de réunion", "Cafétéria", "Bureau CEO", "Toilettes", "Parking"],
-        "weapons": ["Clé USB", "Agrafeuse", "Câble", "Capsule café", "Souris", "Plante"],
-        "suspects": ["Claire", "Pierre", "Daniel", "Marie", "Thomas", "Sophie"]
-    }
-}
-```
-
-## 🎨 Design Simple (TailwindCSS)
-
-- **Palette** : Tons sombres mystérieux
-- **Composants** : shadcn/ui ou Chakra UI
-- **Animations** : Framer Motion (minimales)
-
-## 🔧 APIs Essentielles
-
-```
-POST   /api/games/create        # Créer (avec défauts)
-POST   /api/games/join          # Rejoindre
-POST   /api/games/{id}/start    # Démarrer
-GET    /api/games/{id}/state    # État du jeu
-POST   /api/games/{id}/roll     # Lancer dés
-POST   /api/games/{id}/suggest  # Suggestion
-POST   /api/games/{id}/accuse   # Accusation
-POST   /api/games/{id}/pass     # Passer tour
-```
-
-## ✨ Fonctionnalités Simplifiées
-
-### MVP (Version 1)
-- ✅ Création avec valeurs par défaut
-- ✅ Rejoindre avec code
-- ✅ Déplacement avec dés
-- ✅ Suggestions/Accusations
-- ✅ Desland (commentaires simples, pas d'IA)
-
-### Future (Version 2)
-- [ ] IA avec OpenAI
-- [ ] Personnalisation complète
-- [ ] Thèmes multiples
-- [ ] Animations avancées
-
----
-
-**Cette architecture sera plus robuste, plus simple à utiliser et déployable facilement sur Hugging Face Spaces.**

CHANGELOG.md

@@ -0,0 +1,86 @@
+# Changelog
+
+## [2.0.0] - 2025-10-05
+
+### ✨ Nouvelles Fonctionnalités
+
+#### Interface de Jeu
+- ✅ **Grille d'enquête interactive** - Système de notation avec statuts (✅ Mes cartes, ❌ Éliminé, ❓ Peut-être, ⬜ Inconnu)
+- ✅ **Plateau de jeu visuel** - Affichage graphique du plateau avec positions des joueurs
+- ✅ **Système de dés** - Lancer de dés et déplacement circulaire sur le plateau
+- ✅ **Narrateur IA Desland** - Commentaires sarcastiques en temps réel sur les actions des joueurs
+
+#### Architecture
+- ✅ **Plateau personnalisable** - Modèle BoardLayout avec disposition des salles sur grille
+- ✅ **Support React complet** - Migration vers React + Vite + TailwindCSS
+- ✅ **Build Docker multi-stage** - Frontend build + Backend Python optimisé
+
+#### Composants Frontend
+- `InvestigationGrid.jsx` - Grille interactive pour noter les déductions
+- `GameBoard.jsx` - Affichage visuel du plateau de jeu
+- `AINavigator.jsx` - Panneau du narrateur IA avec historique
+
+#### Backend
+- Support plateau de jeu dans modèles (BoardLayout, RoomPosition)
+- Intégration IA dans endpoints `/suggest` et `/accuse`
+- Génération automatique layout par défaut
+
+### 🎨 Améliorations UI/UX
+- Thème hanté avec animations et effets de brouillard
+- Interface immersive avec palette de couleurs cohérente
+- Affichage temps réel des positions des joueurs
+- Historique des actions visible
+
+### 🤖 Desland - Narrateur IA
+
+#### Personnalité
+- Sarcastique et incisif
+- Se moque des théories absurdes
+- Confusion récurrente sur son nom (Leland → Desland)
+- Commentaires courts et mémorables
+
+#### Exemples de commentaires
+```
+"Et toi ça te semble logique que Pierre ait tué Daniel avec une clé USB
+à côté de l'étendoir ?? Sans surprise c'est pas la bonne réponse..."
+
+"Une capsule de café ? Brillant. Parce que évidemment, on commet des
+meurtres avec du Nespresso maintenant."
+```
+
+#### Configuration
+- gpt-5-nano avec température 0.9
+- Timeout 3 secondes
+- Fallback gracieux si indisponible
+
+### 🔧 Technique
+
+#### Stack
+- **Frontend**: React 18, Vite, TailwindCSS
+- **Backend**: FastAPI, Python 3.11
+- **IA**: OpenAI gpt-5-nano (optionnel)
+- **Build**: Docker multi-stage
+
+#### Endpoints ajoutés
+- Board layout dans game state
+- AI comments dans suggestions/accusations
+
+### 🐛 Corrections
+- Fix imports backend pour Docker
+- Amélioration état du jeu (current_turn)
+- Correction affichage plateau
+
+### 📝 Documentation
+- README complet en français
+- Guide de déploiement Docker
+- Documentation API endpoints
+- Exemples Desland
+
+---
+
+## [1.0.0] - Initial Release
+
+- Création de partie basique
+- Système de suggestions/accusations
+- Multi-joueurs (3-8 joueurs)
+- Thèmes prédéfinis (Classique, Bureau, Fantastique)

README.md

@@ -18,290 +18,235 @@ tags:
   - openai
 ---
 
-# Cluedo Custom
+# 🕯️ Cluedo Custom - Jeu de Mystère Personnalisable
 
-A web-based custom Cluedo (Clue) game that transforms real-world locations into interactive murder mystery games. Players can create games with custom room names matching their physical environment and play together in real-time.
+Application web de Cluedo personnalisable avec narrateur IA sarcastique (Desland, le vieux jardinier). Transformez votre environnement réel en plateau de jeu interactif !
 
-## Features
+## ✨ Fonctionnalités
 
-- **Custom Room Setup**: Define your own rooms based on your real-world location (office, house, school, etc.)
-- **Multi-player Support**: Up to 8 players per game
-- **Real-time Gameplay**: Turn-based system with suggestions and accusations
-- **AI-Enhanced Narration** (Optional): Generate atmospheric scenarios and narration using OpenAI
-- **Mobile-First Interface**: Responsive design optimized for smartphone gameplay
-- **Easy Deployment**: Docker-ready and compatible with Hugging Face Spaces
+- ✅ **Plateau de jeu personnalisable** - Disposez vos salles sur une grille avec drag & drop
+- ✅ **Grille d'enquête interactive** - Cochez les possibilités éliminées (✅ Mes cartes, ❌ Éliminé, ❓ Peut-être)
+- ✅ **Système de dés et déplacement** - Déplacez-vous sur le plateau circulaire
+- ✅ **Suggestions et accusations** - Mécaniques de jeu Cluedo complètes
+- ✅ **Narrateur IA Desland** - Commentaires sarcastiques en temps réel sur vos actions
+- ✅ **Interface immersive** - Thème hanté avec animations et effets visuels
+- ✅ **Multi-joueurs** - 3-8 joueurs, synchronisation en temps réel
+- ✅ **Thèmes prédéfinis** - Classique (Manoir), Bureau, Fantastique
 
-## Quick Start
+## 🚀 Démarrage Rapide
 
-### Local Development
+### Avec Docker (Recommandé)
 
-1. **Clone the repository**
-   ```bash
-   git clone <repository-url>
-   cd custom-cluedo
-   ```
-
-2. **Install dependencies**
-   ```bash
-   pip install -r requirements.txt
-   ```
-
-3. **Configure environment** (optional)
-   ```bash
-   cp .env.example .env
-   # Edit .env to configure settings
-   ```
-
-4. **Run the application**
-   ```bash
-   python app.py
-   ```
-
-5. **Access the interface**
-   Open your browser at `http://localhost:7860`
+```bash
+# Build l'image
+docker build -t custom-cluedo .
 
-### Docker Deployment
+# Lance l'application
+docker run -p 7860:7860 custom-cluedo
 
-1. **Build the Docker image**
-   ```bash
-   docker build -t cluedo-custom .
-   ```
+# Avec IA Desland activée
+docker run -p 7860:7860 \
+  -e USE_OPENAI=true \
+  -e OPENAI_API_KEY=your_key_here \
+  custom-cluedo
 
-2. **Run the container**
-   ```bash
-   docker run -p 7860:7860 cluedo-custom
-   ```
+# Accéder à l'application
+open http://localhost:7860
+```
 
-   Or with environment variables:
-   ```bash
-   docker run -p 7860:7860 \
-     -e USE_OPENAI=true \
-     -e OPENAI_API_KEY=your_key_here \
-     cluedo-custom
-   ```
+### Développement Local
 
-### Hugging Face Spaces Deployment
+#### Backend
+```bash
+cd backend
+pip install -r requirements.txt
+uvicorn backend.main:app --reload --port 8000
+```
 
-1. **Create a new Space**
-   - Go to [Hugging Face Spaces](https://huggingface.co/spaces)
-   - Click "Create new Space"
-   - Choose "Gradio" as the SDK
+#### Frontend
+```bash
+cd frontend
+npm install
+npm run dev  # Dev server on http://localhost:5173
+npm run build  # Build for production
+```
 
-2. **Upload files**
-   - Upload all project files to your Space
-   - Ensure `app.py` is the main entry point
+### Déploiement Hugging Face Spaces
 
-3. **Configure secrets** (for AI mode)
-   - Go to Settings → Repository secrets
-   - Add `OPENAI_API_KEY` if using AI features
+1. **Créer un nouveau Space**
+   - SDK: **Docker**
+   - Port: **7860**
 
-4. **Set environment variables** in Space settings:
+2. **Variables d'environnement** (Settings → Variables):
    ```
    USE_OPENAI=true
-   APP_NAME=Cluedo Custom
-   MAX_PLAYERS=8
+   OPENAI_API_KEY=<votre_clé>
    ```
 
-## Environment Variables
+3. **Push le code**
+   ```bash
+   git push
+   ```
 
-| Variable | Description | Default |
-|----------|-------------|---------|
-| `APP_NAME` | Application name displayed in the interface | `Cluedo Custom` |
-| `MAX_PLAYERS` | Maximum number of players per game | `8` |
-| `USE_OPENAI` | Enable AI-generated content (true/false) | `false` |
-| `OPENAI_API_KEY` | OpenAI API key (required if USE_OPENAI=true) | `""` |
+## ⚙️ Configuration
 
-## How to Play
+| Variable | Description | Défaut |
+|----------|-------------|--------|
+| `USE_OPENAI` | Active le narrateur IA Desland | `false` |
+| `OPENAI_API_KEY` | Clé API OpenAI (si USE_OPENAI=true) | `""` |
+| `MAX_PLAYERS` | Nombre max de joueurs | `8` |
+| `MIN_PLAYERS` | Nombre min de joueurs | `3` |
 
-### 1. Create a Game
+## 🎮 Comment Jouer
 
-- Navigate to the "Create Game" tab
-- Enter a game name
-- List 6-12 room names that match your real-world location
-  - Example: `Kitchen, Living Room, Bedroom, Office, Garage, Garden`
-- Optionally enable AI narration
-- Click "Create Game" and share the Game ID with other players
+### 1. Créer une Partie
 
-### 2. Join a Game
+1. Entrez votre nom
+2. Cliquez sur **"🚪 Entrer dans le Manoir"**
+3. Un code de partie est généré (ex: `CBSB`)
+4. Partagez ce code avec vos amis
 
-- Navigate to the "Join Game" tab
-- Enter the Game ID provided by the game creator
-- Enter your player name
-- Click "Join Game"
+### 2. Rejoindre une Partie
 
-### 3. Start the Game
+1. Cliquez sur **"👻 Rejoindre une partie existante"**
+2. Entrez le code de partie
+3. Entrez votre nom
+4. Rejoignez !
 
-- Once all players have joined (minimum 3 players)
-- The game creator clicks "Start Game"
-- Cards are automatically distributed to all players
+### 3. Démarrer le Jeu
 
-### 4. Play Your Turn
+- Minimum **3 joueurs** requis
+- Le créateur clique sur **"🚀 Commencer l'enquête"**
+- Les cartes sont distribuées automatiquement
 
-- Navigate to the "Play" tab
-- Click "Refresh Game State" to see current status
-- When it's your turn:
-  - **Make a Suggestion**: Choose a character, weapon, and room. Other players will try to disprove it.
-  - **Make an Accusation**: If you think you know the solution. Warning: wrong accusations eliminate you!
-  - **Pass Turn**: Skip to the next player
+### 4. Jouer Votre Tour
 
-### 5. Win the Game
+Quand c'est votre tour :
 
-- The first player to make a correct accusation wins
-- Or be the last player standing if others are eliminated
+1. **🎲 Lancer les dés** - Déplacez-vous sur le plateau
+2. **💬 Suggérer** - Proposez un suspect + arme + salle
+   - Les autres joueurs tentent de réfuter
+3. **⚠️ Accuser** - Accusation finale (éliminé si faux !)
+4. **📋 Grille d'enquête** - Notez vos déductions
+   - Cliquez pour marquer : ✅ → ❌ → ❓ → ⬜
 
-## Game Rules
+### 5. Gagner
 
-### Setup
+- Premier à faire une accusation correcte gagne
+- Ou dernier joueur non-éliminé
 
-- Each game has:
-  - 6 default characters (Miss Scarlett, Colonel Mustard, Mrs. White, etc.)
-  - 6 default weapons (Candlestick, Knife, Lead Pipe, etc.)
-  - Custom rooms defined by the players
+## 🤖 Narrateur IA : Desland
 
-### Solution
+Activez `USE_OPENAI=true` pour les commentaires sarcastiques de Desland !
 
-- At the start, one character, one weapon, and one room are randomly selected as the secret solution
-- All other cards are distributed evenly among players
+### Personnalité de Desland
 
-### Gameplay
+> *"Je suis Leland... euh non, Desland. Le vieux jardinier de ce manoir maudit."*
 
-1. **Suggestions**:
-   - Player suggests a character, weapon, and room combination
-   - Other players (clockwise) try to disprove by showing one matching card
-   - Only the suggesting player sees the card shown
+- **Sarcastique** - Se moque des théories absurdes
+- **Incisif** - Commentaires tranchants et condescendants
+- **Suspicieux** - Semble en savoir plus qu'il ne dit
+- **Confus** - Se trompe souvent de nom (Leland → Desland)
 
-2. **Accusations**:
-   - Player makes a final accusation of the solution
-   - If correct: player wins immediately
-   - If incorrect: player is eliminated and cannot act further
+### Exemples de Commentaires
 
-3. **Victory**:
-   - First player with correct accusation wins
-   - If all others are eliminated, the last remaining player wins
+```
+"Et toi ça te semble logique que Pierre ait tué Daniel avec une clé USB
+à côté de l'étendoir ?? Sans surprise c'est pas la bonne réponse..."
 
-## AI Mode
+"Une capsule de café ? Brillant. Parce que évidemment, on commet des
+meurtres avec du Nespresso maintenant."
 
-When enabled (`USE_OPENAI=true`), the application generates:
+"Ah oui, excellente déduction Sherlock. Prochaine étape : accuser le
+chat du voisin."
+```
 
-- **Scenario Introduction**: Atmospheric setup describing the mystery in your chosen location
-- **Turn Narration** (optional): Brief narrative elements during gameplay
+### Configuration IA
 
-AI features use GPT-3.5-turbo with:
-- Low temperature for consistency
-- 3-second timeout per request
-- Graceful fallback if unavailable
+- Modèle: gpt-5-nano
+- Température: 0.9 (créativité élevée)
+- Timeout: 3 secondes max
+- Fallback gracieux si indisponible
 
-## Project Structure
+## 📁 Structure du Projet
 
 ```
 custom-cluedo/
-├── app.py              # Main application (Gradio interface)
-├── api.py              # FastAPI backend routes
-├── config.py           # Configuration and settings
-├── models.py           # Data models (Pydantic)
-├── game_engine.py      # Core game logic
-├── game_manager.py     # Game state management
-├── ai_service.py       # OpenAI integration
-├── requirements.txt    # Python dependencies
-├── Dockerfile          # Docker configuration
-├── .env.example        # Environment variables template
-└── README.md           # This file
-```
-
-## Technical Details
-
-### Backend
-
-- **FastAPI**: REST API for game management
-- **In-memory storage**: Games stored in memory with JSON persistence
-- **Pydantic models**: Type-safe data validation
-
-### Frontend
-
-- **Gradio**: Interactive web interface
-- **Mobile-optimized**: Responsive design with large touch targets
-- **Real-time updates**: Manual refresh for game state (polling-based)
-
-### Storage
-
-- Games are stored in `games.json` for persistence
-- Data is lost when container restarts (suitable for casual play)
-- No database required
-
-## API Endpoints
-
-- `GET /` - Health check
-- `POST /games/create` - Create new game
-- `POST /games/join` - Join existing game
-- `POST /games/{game_id}/start` - Start game
-- `GET /games/{game_id}` - Get full game state
-- `GET /games/{game_id}/player/{player_id}` - Get player-specific view
-- `POST /games/{game_id}/action` - Perform game action
-- `GET /games/list` - List active games
-- `DELETE /games/{game_id}` - Delete game
-
-## Limitations
-
-- Maximum 8 players per game (configurable)
-- Minimum 3 players to start
-- 6-12 custom rooms required
-- No persistent database (games reset on restart)
-- AI features require OpenAI API key and have rate limits
-
-## Development
-
-### Running Tests
-
-```bash
-# Install test dependencies
-pip install pytest pytest-asyncio
-
-# Run tests (when implemented)
-pytest
+├── backend/
+│   ├── main.py           # API FastAPI + Serving frontend
+│   ├── models.py         # Modèles Pydantic (Game, Player, Cards...)
+│   ├── game_engine.py    # Logique du jeu (règles, vérifications)
+│   ├── game_manager.py   # Gestion des parties (CRUD)
+│   ├── defaults.py       # Thèmes prédéfinis
+│   ├── config.py         # Configuration
+│   └── requirements.txt  # Dépendances Python
+├── frontend/
+│   ├── src/
+│   │   ├── pages/
+│   │   │   ├── Home.jsx  # Accueil + création partie
+│   │   │   ├── Join.jsx  # Rejoindre partie
+│   │   │   └── Game.jsx  # Interface de jeu
+│   │   ├── components/
+│   │   │   ├── GameBoard.jsx          # Plateau de jeu
+│   │   │   ├── InvestigationGrid.jsx  # Grille d'enquête
+│   │   │   └── AINavigator.jsx        # Narrateur Desland
+│   │   └── api.js        # Client API
+│   ├── package.json
+│   └── tailwind.config.js
+├── ai_service.py         # Service IA (Desland)
+├── Dockerfile            # Build multi-stage
+└── README.md
 ```
 
-### Code Style
+## 🔌 API Endpoints
 
-- Code documented in English
-- Type hints using Pydantic models
-- Follows PEP 8 guidelines
+### Parties
+- `GET /api/health` - Santé de l'API
+- `POST /api/games/quick-create` - Créer partie rapide
+- `POST /api/games/join` - Rejoindre partie
+- `POST /api/games/{game_id}/start` - Démarrer
+- `GET /api/games/{game_id}/state/{player_id}` - État du jeu
 
-## Troubleshooting
+### Actions
+- `POST /api/games/{game_id}/roll` - Lancer dés
+- `POST /api/games/{game_id}/suggest` - Suggestion
+- `POST /api/games/{game_id}/accuse` - Accusation
+- `POST /api/games/{game_id}/pass` - Passer tour
 
-### Port 7860 already in use
-
-Change the port in `config.py` or use environment variable:
-```bash
-PORT=8000 python app.py
-```
+### Autres
+- `GET /api/themes` - Thèmes disponibles
 
-### AI features not working
+## 🛠️ Technologies
 
-- Verify `USE_OPENAI=true` is set
-- Check `OPENAI_API_KEY` is valid
-- Ensure OpenAI API is accessible
-- Check API rate limits
+- **Backend** : FastAPI, Python 3.11, Pydantic
+- **Frontend** : React 18, Vite, TailwindCSS
+- **IA** : OpenAI gpt-5-nano (optionnel)
+- **Stockage** : JSON (games.json)
+- **Déploiement** : Docker, Hugging Face Spaces
 
-### Game state not updating
+## 🎨 Thèmes Disponibles
 
-- Click "Refresh Game State" button
-- Check network connection to API
-- Verify game ID and player ID are correct
+### Classique - Meurtre au Manoir 🏰
+- **Suspects** : Mme Leblanc, Col. Moutarde, Mlle Rose, Prof. Violet, Mme Pervenche, M. Olive
+- **Armes** : Poignard, Revolver, Corde, Chandelier, Clé anglaise, Poison
+- **Salles** : Cuisine, Salon, Bureau, Chambre, Garage, Jardin
 
-## License
+### Bureau - Meurtre au Bureau 💼
+- **Suspects** : Claire, Pierre, Daniel, Marie, Thomas, Sophie
+- **Armes** : Clé USB, Agrafeuse, Câble HDMI, Capsule de café, Souris, Plante verte
+- **Salles** : Open Space, Salle de réunion, Cafétéria, Bureau CEO, Toilettes, Parking
 
-This project is provided as-is for educational and recreational purposes.
+### Fantastique - Meurtre au Château 🧙
+- **Suspects** : Merlin le Sage, Dame Morgane, Chevalier Lancelot, Elfe Aranelle, Nain Thorin, Sorcière Malva
+- **Armes** : Épée enchantée, Potion empoisonnée, Grimoire maudit, Dague runique, Bâton magique, Amulette sombre
+- **Salles** : Grande Salle, Tour des Mages, Donjon, Bibliothèque, Armurerie, Crypte
 
-## Contributing
+## 📝 Licence
 
-Contributions welcome! Please:
-1. Fork the repository
-2. Create a feature branch
-3. Submit a pull request
+Projet personnel - Usage libre pour l'éducation et le divertissement
 
-## Support
+## 🎯 Crédits
 
-For issues and questions:
-- Create an issue on GitHub
-- Check existing documentation
-- Review API endpoint responses for error details
+- Jeu basé sur le Cluedo classique
+- Interface immersive avec thème hanté
+- Narrateur IA Desland créé avec amour et sarcasme 👻

ai_service.py

@@ -27,7 +27,7 @@ class AIService:
         self,
         rooms: list[str],
         characters: list[str],
-        narrative_tone: str = "🕵️ Sérieuse"
+        narrative_tone: str = "🕵️ Sérieuse",
     ) -> Optional[str]:
         """
         Generate a mystery scenario based on the game setup.
@@ -49,11 +49,7 @@ Start with Desland introducing himself (getting his name wrong: "Je suis Leland.
 
             # Run with timeout
             response = await asyncio.wait_for(
-                asyncio.to_thread(
-                    self._generate_text,
-                    prompt
-                ),
-                timeout=3.0
+                asyncio.to_thread(self._generate_text, prompt), timeout=3.0
             )
 
             return response
@@ -72,7 +68,7 @@ Start with Desland introducing himself (getting his name wrong: "Je suis Leland.
         weapon: str,
         room: str,
         was_disproven: bool,
-        narrative_tone: str = "🕵️ Sérieuse"
+        narrative_tone: str = "🕵️ Sérieuse",
     ) -> Optional[str]:
         """
         Generate a sarcastic comment from Desland about a suggestion.
@@ -98,11 +94,7 @@ Make Desland's comment fit the narrative tone: {narrative_tone}
 Be sarcastic, condescending, and incisive. Mock the logic (or lack thereof) of the suggestion."""
 
             response = await asyncio.wait_for(
-                asyncio.to_thread(
-                    self._generate_text,
-                    prompt
-                ),
-                timeout=3.0
+                asyncio.to_thread(self._generate_text, prompt), timeout=3.0
             )
 
             return response
@@ -121,7 +113,7 @@ Be sarcastic, condescending, and incisive. Mock the logic (or lack thereof) of t
         weapon: str,
         room: str,
         was_correct: bool,
-        narrative_tone: str = "🕵️ Sérieuse"
+        narrative_tone: str = "🕵️ Sérieuse",
     ) -> Optional[str]:
         """
         Generate a comment from Desland about an accusation.
@@ -146,11 +138,7 @@ If wrong: Desland is condescending and mocking about their failure.
 Make it incisive and memorable."""
 
             response = await asyncio.wait_for(
-                asyncio.to_thread(
-                    self._generate_text,
-                    prompt
-                ),
-                timeout=3.0
+                asyncio.to_thread(self._generate_text, prompt), timeout=3.0
             )
 
             return response
@@ -171,7 +159,7 @@ Make it incisive and memorable."""
             return ""
 
         response = self.client.chat.completions.create(
-            model="gpt-3.5-turbo",
+            model="gpt-5-nano",
             messages=[
                 {
                     "role": "system",
@@ -188,15 +176,12 @@ Examples of your style:
 "Une capsule de café ? Brillant. Parce que évidemment, on commet des meurtres avec du Nespresso maintenant."
 "Ah oui, excellente déduction Sherlock. Prochaine étape : accuser le chat du voisin."
 
-Keep responses brief (1 sentence), in French, sarcastic and memorable."""
+Keep responses brief (1 sentence), in French, sarcastic and memorable.""",
                 },
-                {
-                    "role": "user",
-                    "content": prompt
-                }
+                {"role": "user", "content": prompt},
             ],
             temperature=0.9,
-            max_tokens=150
+            max_tokens=150,
         )
 
         return response.choices[0].message.content.strip()

backend/game_manager.py

@@ -37,6 +37,7 @@ class GameManager:
             custom_weapons=request.custom_weapons,
             custom_suspects=request.custom_suspects,
             use_ai=request.use_ai,
+            board_layout=request.board_layout,
             max_players=settings.MAX_PLAYERS
         )
 

backend/main.py

@@ -51,6 +51,17 @@ async def quick_create_game(req: QuickCreateRequest):
     try:
         config = get_default_game_config(req.theme)
 
+        # Create default board layout
+        from backend.models import BoardLayout, RoomPosition
+        board_layout = BoardLayout(
+            rooms=[
+                RoomPosition(name=room, x=i % 3, y=i // 3)
+                for i, room in enumerate(config["rooms"])
+            ],
+            grid_width=3,
+            grid_height=2
+        )
+
         game_req = CreateGameRequest(
             game_name=config["name"],
             narrative_tone=config["tone"],
@@ -58,7 +69,8 @@ async def quick_create_game(req: QuickCreateRequest):
             rooms=config["rooms"],
             custom_weapons=config["weapons"],
             custom_suspects=config["suspects"],
-            use_ai=False
+            use_ai=False,
+            board_layout=board_layout
         )
 
         game = game_manager.create_game(game_req)
@@ -149,6 +161,7 @@ async def get_game_state(game_id: str, player_id: str):
         "my_cards": [{"name": c.name, "type": c.card_type.value} for c in player.cards],
         "my_position": player.current_room_index,
         "current_room": game.rooms[player.current_room_index] if game.rooms else None,
+        "board_layout": game.board_layout.model_dump() if game.board_layout else None,
         "players": [
             {
                 "name": p.name,
@@ -240,6 +253,27 @@ async def make_suggestion(game_id: str, req: SuggestionRequest):
         game, req.player_id, req.suspect, req.weapon, req.room
     )
 
+    # Get player name
+    player = next((p for p in game.players if p.id == req.player_id), None)
+    player_name = player.name if player else "Inconnu"
+
+    # Generate AI comment if enabled
+    ai_comment = None
+    if game.use_ai:
+        try:
+            from ai_service import ai_service
+            import asyncio
+            ai_comment = await ai_service.generate_suggestion_comment(
+                player_name,
+                req.suspect,
+                req.weapon,
+                req.room,
+                can_disprove,
+                game.narrative_tone
+            )
+        except Exception as e:
+            print(f"AI comment generation failed: {e}")
+
     result = {
         "suggestion": f"{req.suspect} + {req.weapon} + {req.room}",
         "was_disproven": can_disprove,
@@ -247,12 +281,13 @@ async def make_suggestion(game_id: str, req: SuggestionRequest):
         "card_shown": card.name if card else None
     }
 
-    # Record turn
+    # Record turn with AI comment
     GameEngine.add_turn_record(
         game,
         req.player_id,
         "suggest",
-        result["suggestion"]
+        result["suggestion"],
+        ai_comment=ai_comment
     )
 
     game.next_turn()
@@ -284,12 +319,33 @@ async def make_accusation(game_id: str, req: AccusationRequest):
         game, req.player_id, req.suspect, req.weapon, req.room
     )
 
-    # Record turn
+    # Get player name
+    player = next((p for p in game.players if p.id == req.player_id), None)
+    player_name = player.name if player else "Inconnu"
+
+    # Generate AI comment if enabled
+    ai_comment = None
+    if game.use_ai:
+        try:
+            from ai_service import ai_service
+            ai_comment = await ai_service.generate_accusation_comment(
+                player_name,
+                req.suspect,
+                req.weapon,
+                req.room,
+                is_correct,
+                game.narrative_tone
+            )
+        except Exception as e:
+            print(f"AI comment generation failed: {e}")
+
+    # Record turn with AI comment
     GameEngine.add_turn_record(
         game,
         req.player_id,
         "accuse",
-        f"{req.suspect} + {req.weapon} + {req.room}"
+        f"{req.suspect} + {req.weapon} + {req.room}",
+        ai_comment=ai_comment
     )
 
     if not is_correct and game.status == GameStatus.IN_PROGRESS:

backend/models.py

@@ -73,6 +73,20 @@ class InvestigationNote(BaseModel):
     status: str  # "unknown", "eliminated", "maybe"
 
 
+class RoomPosition(BaseModel):
+    """Position of a room on the board."""
+    name: str
+    x: int  # Grid X position
+    y: int  # Grid Y position
+
+
+class BoardLayout(BaseModel):
+    """Board layout configuration."""
+    rooms: List[RoomPosition] = Field(default_factory=list)
+    grid_width: int = 8
+    grid_height: int = 8
+
+
 class Game(BaseModel):
     """Represents a complete game instance."""
     game_id: str
@@ -110,6 +124,9 @@ class Game(BaseModel):
     # Investigation notes (for UI)
     investigation_notes: List[InvestigationNote] = Field(default_factory=list)
 
+    # Board layout
+    board_layout: Optional[BoardLayout] = None
+
     # AI-generated content
     scenario: Optional[str] = None
 
@@ -160,6 +177,7 @@ class CreateGameRequest(BaseModel):
     custom_weapons: List[str]
     custom_suspects: List[str]
     use_ai: bool = False
+    board_layout: Optional[BoardLayout] = None
 
 
 class JoinGameRequest(BaseModel):

frontend/src/components/AINavigator.jsx

@@ -0,0 +1,89 @@
+import { useState, useEffect, useRef } from 'react'
+
+function AINavigator({ recentActions, gameStatus }) {
+  const [comments, setComments] = useState([])
+  const scrollRef = useRef(null)
+
+  useEffect(() => {
+    // Extract AI comments from recent actions
+    if (recentActions) {
+      const aiComments = recentActions
+        .filter(action => action.ai_comment)
+        .map(action => ({
+          id: `${action.player}-${action.action}-${Date.now()}`,
+          text: action.ai_comment,
+          player: action.player,
+          action: action.action
+        }))
+
+      setComments(aiComments)
+    }
+  }, [recentActions])
+
+  useEffect(() => {
+    // Auto-scroll to latest comment
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+    }
+  }, [comments])
+
+  if (gameStatus === 'waiting') {
+    return (
+      <div className="bg-black/60 backdrop-blur-md p-6 rounded-lg border-2 border-haunted-purple/30">
+        <h2 className="text-xl font-bold text-haunted-purple mb-4 animate-flicker">
+          👻 Desland, le Narrateur
+        </h2>
+        <div className="text-haunted-fog/70 italic">
+          <p className="mb-2">
+            "Je suis Leland... euh non, Desland. Le vieux jardinier de ce manoir maudit."
+          </p>
+          <p>
+            En attendant que les enquêteurs arrivent... s'ils osent.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="bg-black/60 backdrop-blur-md p-6 rounded-lg border-2 border-haunted-purple/30">
+      <h2 className="text-xl font-bold text-haunted-purple mb-4 animate-flicker flex items-center gap-2">
+        👻 Desland, le Narrateur
+        <span className="text-xs text-haunted-fog/60 font-normal">(IA activée)</span>
+      </h2>
+
+      <div
+        ref={scrollRef}
+        className="space-y-3 max-h-64 overflow-y-auto scrollbar-thin scrollbar-thumb-haunted-purple/50 scrollbar-track-black/20"
+      >
+        {comments.length === 0 ? (
+          <div className="text-haunted-fog/60 italic text-sm">
+            <p>"Alors, on attend quoi pour commencer cette enquête ridicule ?"</p>
+          </div>
+        ) : (
+          comments.map((comment, idx) => (
+            <div
+              key={idx}
+              className="bg-black/40 p-3 rounded border-l-4 border-haunted-purple animate-fade-in"
+            >
+              <div className="text-xs text-haunted-fog/50 mb-1">
+                {comment.player} • {comment.action}
+              </div>
+              <div className="text-haunted-fog italic">
+                "{comment.text}"
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+
+      <div className="mt-4 pt-4 border-t border-haunted-shadow text-xs text-haunted-fog/60">
+        <p className="italic">
+          💀 Desland commente vos actions avec son sarcasme légendaire...
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default AINavigator

frontend/src/components/GameBoard.jsx

@@ -0,0 +1,93 @@
+import { useState } from 'react'
+
+function GameBoard({ boardLayout, players, rooms, myPosition }) {
+  if (!boardLayout || !boardLayout.rooms) {
+    return (
+      <div className="bg-black/60 backdrop-blur-md p-6 rounded-lg border-2 border-haunted-shadow">
+        <h2 className="text-xl font-bold text-haunted-blood mb-4 animate-flicker">🏰 Plateau de Jeu</h2>
+        <p className="text-haunted-fog/60">Plateau en cours de chargement...</p>
+      </div>
+    )
+  }
+
+  const gridWidth = boardLayout.grid_width || 8
+  const gridHeight = boardLayout.grid_height || 8
+
+  // Get players in each room
+  const getPlayersInRoom = (roomName) => {
+    return players?.filter(p => {
+      const roomIndex = rooms?.indexOf(roomName)
+      return roomIndex !== -1 && p.position === roomIndex
+    }) || []
+  }
+
+  return (
+    <div className="bg-black/60 backdrop-blur-md p-6 rounded-lg border-2 border-haunted-shadow">
+      <h2 className="text-xl font-bold text-haunted-blood mb-4 animate-flicker">🏰 Plateau du Manoir</h2>
+
+      <div
+        className="grid gap-2 mx-auto"
+        style={{
+          gridTemplateColumns: `repeat(${gridWidth}, minmax(0, 1fr))`,
+          maxWidth: `${gridWidth * 100}px`
+        }}
+      >
+        {Array.from({ length: gridHeight }).map((_, y) =>
+          Array.from({ length: gridWidth }).map((_, x) => {
+            const room = boardLayout.rooms.find(r => r.x === x && r.y === y)
+            const playersHere = room ? getPlayersInRoom(room.name) : []
+            const isMyLocation = room && rooms?.indexOf(room.name) === myPosition
+
+            return (
+              <div
+                key={`${x}-${y}`}
+                className={`
+                  aspect-square rounded-lg border-2 transition-all
+                  ${room
+                    ? isMyLocation
+                      ? 'bg-haunted-blood/20 border-haunted-blood shadow-[0_0_20px_rgba(139,0,0,0.3)]'
+                      : 'bg-black/40 border-haunted-shadow hover:border-haunted-purple/50'
+                    : 'bg-dark-800/20 border-dark-700'
+                  }
+                `}
+              >
+                {room ? (
+                  <div className="h-full flex flex-col items-center justify-center p-1 text-center">
+                    <div className="text-xs font-semibold text-haunted-fog mb-1 truncate w-full">
+                      {room.name}
+                    </div>
+                    {playersHere.length > 0 && (
+                      <div className="flex flex-wrap gap-1 justify-center">
+                        {playersHere.map((p, i) => (
+                          <div
+                            key={i}
+                            className={`
+                              w-6 h-6 rounded-full flex items-center justify-center text-xs
+                              ${p.is_me
+                                ? 'bg-haunted-blood text-white font-bold'
+                                : 'bg-haunted-purple/70 text-white'
+                              }
+                            `}
+                            title={p.name}
+                          >
+                            {p.name.charAt(0).toUpperCase()}
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                ) : null}
+              </div>
+            )
+          })
+        )}
+      </div>
+
+      <div className="mt-4 pt-4 border-t border-haunted-shadow text-xs text-haunted-fog/60">
+        <p>🔴 Votre position • 🟣 Autres joueurs</p>
+      </div>
+    </div>
+  )
+}
+
+export default GameBoard

frontend/src/components/InvestigationGrid.jsx

@@ -0,0 +1,113 @@
+import { useState, useEffect } from 'react'
+
+function InvestigationGrid({ suspects, weapons, rooms, myCards }) {
+  const [notes, setNotes] = useState({})
+
+  // Initialize notes from localStorage
+  useEffect(() => {
+    const saved = localStorage.getItem('investigation_notes')
+    if (saved) {
+      setNotes(JSON.parse(saved))
+    }
+  }, [])
+
+  // Save notes to localStorage
+  useEffect(() => {
+    localStorage.setItem('investigation_notes', JSON.stringify(notes))
+  }, [notes])
+
+  const toggleNote = (item, type) => {
+    const key = `${type}:${item}`
+    setNotes(prev => {
+      const current = prev[key] || 'unknown'
+      const next = current === 'unknown' ? 'eliminated' :
+                   current === 'eliminated' ? 'maybe' : 'unknown'
+      return { ...prev, [key]: next }
+    })
+  }
+
+  const getStatus = (item, type) => {
+    const key = `${type}:${item}`
+    return notes[key] || 'unknown'
+  }
+
+  const getIcon = (item, type) => {
+    // Check if this is one of my cards
+    const isMyCard = myCards?.some(card =>
+      card.name === item && card.type === type
+    )
+
+    if (isMyCard) return '✅' // I have this card
+
+    const status = getStatus(item, type)
+    if (status === 'eliminated') return '❌'
+    if (status === 'maybe') return '❓'
+    return '⬜'
+  }
+
+  return (
+    <div className="bg-black/60 backdrop-blur-md p-6 rounded-lg border-2 border-haunted-shadow">
+      <h2 className="text-xl font-bold text-haunted-blood mb-4 animate-flicker">📋 Grille d'Enquête</h2>
+
+      <div className="space-y-4">
+        {/* Suspects */}
+        <div>
+          <h3 className="text-sm font-semibold text-haunted-fog mb-2">👤 SUSPECTS</h3>
+          <div className="grid grid-cols-2 gap-2">
+            {suspects?.map((suspect, i) => (
+              <button
+                key={i}
+                onClick={() => toggleNote(suspect, 'character')}
+                className="flex items-center gap-2 bg-black/40 px-3 py-2 rounded text-left text-sm text-haunted-fog border border-haunted-shadow hover:border-haunted-blood/50 transition-all"
+              >
+                <span className="text-lg">{getIcon(suspect, 'character')}</span>
+                <span className="flex-1 truncate">{suspect}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Weapons */}
+        <div>
+          <h3 className="text-sm font-semibold text-haunted-fog mb-2">🔪 ARMES</h3>
+          <div className="grid grid-cols-2 gap-2">
+            {weapons?.map((weapon, i) => (
+              <button
+                key={i}
+                onClick={() => toggleNote(weapon, 'weapon')}
+                className="flex items-center gap-2 bg-black/40 px-3 py-2 rounded text-left text-sm text-haunted-fog border border-haunted-shadow hover:border-haunted-blood/50 transition-all"
+              >
+                <span className="text-lg">{getIcon(weapon, 'weapon')}</span>
+                <span className="flex-1 truncate">{weapon}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Rooms */}
+        <div>
+          <h3 className="text-sm font-semibold text-haunted-fog mb-2">🏚️ SALLES</h3>
+          <div className="grid grid-cols-2 gap-2">
+            {rooms?.map((room, i) => (
+              <button
+                key={i}
+                onClick={() => toggleNote(room, 'room')}
+                className="flex items-center gap-2 bg-black/40 px-3 py-2 rounded text-left text-sm text-haunted-fog border border-haunted-shadow hover:border-haunted-blood/50 transition-all"
+              >
+                <span className="text-lg">{getIcon(room, 'room')}</span>
+                <span className="flex-1 truncate">{room}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-4 pt-4 border-t border-haunted-shadow text-xs text-haunted-fog/60 space-y-1">
+        <p>✅ Mes cartes • ❌ Éliminé • ❓ Peut-être • ⬜ Inconnu</p>
+        <p className="italic">Cliquez pour changer le statut</p>
+      </div>
+    </div>
+  )
+}
+
+export default InvestigationGrid

frontend/src/pages/Game.jsx

@@ -1,6 +1,9 @@
 import { useState, useEffect } from 'react'
 import { useParams } from 'react-router-dom'
 import { getGameState, startGame, rollDice, makeSuggestion, makeAccusation, passTurn } from '../api'
+import InvestigationGrid from '../components/InvestigationGrid'
+import GameBoard from '../components/GameBoard'
+import AINavigator from '../components/AINavigator'
 
 function Game() {
   const { gameId, playerId } = useParams()
@@ -113,9 +116,9 @@ function Game() {
     )
   }
 
-  const me = gameState.players.find(p => p.id === playerId)
-  const isMyTurn = gameState.current_player_id === playerId
-  const canStart = me?.is_creator && gameState.status === 'waiting' && gameState.players.length >= 3
+  const me = gameState.players.find(p => p.is_me)
+  const isMyTurn = gameState.current_turn?.is_my_turn
+  const canStart = gameState.status === 'waiting' && gameState.players.length >= 3
 
   return (
     <div className="min-h-screen bg-haunted-gradient p-4 relative overflow-hidden">
@@ -128,14 +131,14 @@ function Game() {
           <div className="flex justify-between items-center">
             <div>
               <h1 className="text-4xl font-bold text-haunted-blood mb-1 animate-flicker drop-shadow-[0_0_10px_rgba(139,0,0,0.5)]">
-                🏰 Manoir {gameState.game_code}
+                🏰 {gameState.game_name} ({gameState.game_id})
               </h1>
-              <p className="text-haunted-fog/80">👤 {me?.name} {me?.is_eliminated && '💀 (Éliminé)'}</p>
+              <p className="text-haunted-fog/80">👤 {me?.name} {!me?.is_active && '💀 (Éliminé)'}</p>
             </div>
             <div className="text-right">
               <p className="text-haunted-fog">
                 {gameState.status === 'waiting' ? '⏳ En attente des âmes' :
-                 gameState.status === 'playing' ? '🎮 Enquête en cours' :
+                 gameState.status === 'in_progress' ? '🎮 Enquête en cours' :
                  '🏆 Mystère résolu'}
               </p>
               <p className="text-haunted-fog/60 text-sm">{gameState.players.length} âmes perdues</p>
@@ -152,31 +155,24 @@ function Game() {
           )}
         </div>
 
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          {/* Plateau */}
-          <div className="bg-black/60 backdrop-blur-md p-6 rounded-lg border-2 border-haunted-shadow">
-            <h2 className="text-xl font-bold text-haunted-blood mb-4 animate-flicker">🏰 Les Pièces du Manoir</h2>
-            <div className="space-y-2">
-              {gameState.board?.rooms.map((room, idx) => (
-                <div key={idx} className="bg-black/40 p-3 rounded border border-haunted-shadow hover:border-haunted-blood/50 transition-all">
-                  <div className="font-semibold text-haunted-fog">{room.name}</div>
-                  <div className="text-sm text-haunted-fog/60">
-                    👥 {room.player_ids.map(id =>
-                      gameState.players.find(p => p.id === id)?.name || id
-                    ).join(', ') || 'Aucune âme'}
-                  </div>
-                </div>
-              ))}
-            </div>
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Game Board */}
+          <div className="lg:col-span-2">
+            <GameBoard
+              boardLayout={gameState.board_layout}
+              players={gameState.players}
+              rooms={gameState.rooms}
+              myPosition={gameState.my_position}
+            />
           </div>
 
-          {/* Mes cartes */}
+          {/* My Cards */}
           <div className="bg-black/60 backdrop-blur-md p-6 rounded-lg border-2 border-haunted-shadow">
             <h2 className="text-xl font-bold text-haunted-blood mb-4 animate-flicker">🃏 Vos Indices</h2>
             <div className="space-y-2">
-              {me?.cards.map((card, idx) => (
+              {gameState.my_cards?.map((card, idx) => (
                 <div key={idx} className="bg-black/40 px-4 py-2 rounded text-haunted-fog border border-haunted-shadow hover:border-haunted-blood/50 transition-all">
-                  {card.type === 'suspect' && '👤 '}
+                  {card.type === 'character' && '👤 '}
                   {card.type === 'weapon' && '🔪 '}
                   {card.type === 'room' && '🏚️ '}
                   {card.name}
@@ -186,34 +182,48 @@ function Game() {
           </div>
         </div>
 
+        {/* Investigation Grid */}
+        <InvestigationGrid
+          suspects={gameState.suspects}
+          weapons={gameState.weapons}
+          rooms={gameState.rooms}
+          myCards={gameState.my_cards}
+        />
+
+        {/* AI Narrator */}
+        {gameState.use_ai && (
+          <AINavigator
+            recentActions={gameState.recent_actions}
+            gameStatus={gameState.status}
+          />
+        )}
+
         {/* Actions */}
-        {gameState.status === 'playing' && (
+        {gameState.status === 'in_progress' && (
           <div className="bg-black/60 backdrop-blur-md p-6 rounded-lg border-2 border-haunted-blood/30">
             <h2 className="text-2xl font-bold text-haunted-blood mb-4 animate-flicker">
-              {isMyTurn ? '⚡ À vous de jouer !' : '⏳ ' + gameState.players.find(p => p.id === gameState.current_player_id)?.name + ' enquête...'}
+              {isMyTurn ? '⚡ À vous de jouer !' : '⏳ ' + gameState.current_turn?.player_name + ' enquête...'}
             </h2>
 
             {isMyTurn && (
               <div className="space-y-4">
-                {!me.has_moved ? (
-                  <div className="flex gap-4">
-                    <button
-                      onClick={handleRollDice}
-                      disabled={actionLoading}
-                      className="px-6 py-3 bg-haunted-blood hover:bg-red-800 disabled:bg-dark-600 disabled:opacity-50 text-white font-bold rounded-lg transition-all hover:shadow-[0_0_20px_rgba(139,0,0,0.5)] border border-red-900"
-                    >
-                      🎲 Lancer les dés
-                    </button>
-                    <button
-                      onClick={handlePassTurn}
-                      disabled={actionLoading}
-                      className="px-6 py-3 bg-black/40 hover:bg-black/60 disabled:opacity-50 text-haunted-fog border-2 border-haunted-shadow font-semibold rounded-lg transition-all"
-                    >
-                      ⏭️ Passer
-                    </button>
-                  </div>
-                ) : (
-                  <div className="space-y-4">
+                <div className="flex gap-4 mb-4">
+                  <button
+                    onClick={handleRollDice}
+                    disabled={actionLoading}
+                    className="px-6 py-3 bg-haunted-blood hover:bg-red-800 disabled:bg-dark-600 disabled:opacity-50 text-white font-bold rounded-lg transition-all hover:shadow-[0_0_20px_rgba(139,0,0,0.5)] border border-red-900"
+                  >
+                    🎲 Lancer les dés
+                  </button>
+                  <button
+                    onClick={handlePassTurn}
+                    disabled={actionLoading}
+                    className="px-6 py-3 bg-black/40 hover:bg-black/60 disabled:opacity-50 text-haunted-fog border-2 border-haunted-shadow font-semibold rounded-lg transition-all"
+                  >
+                    ⏭️ Passer
+                  </button>
+                </div>
+                <div className="space-y-4">
                     <div className="grid grid-cols-3 gap-4">
                       <div>
                         <label className="block text-sm text-haunted-fog mb-2">👤 Suspect</label>
@@ -223,7 +233,7 @@ function Game() {
                           className="w-full px-3 py-2 bg-black/40 text-haunted-fog rounded border-2 border-haunted-shadow focus:border-haunted-blood focus:outline-none"
                         >
                           <option value="">--</option>
-                          {gameState.board?.suspects.map((s, i) => (
+                          {gameState.suspects?.map((s, i) => (
                             <option key={i} value={s}>{s}</option>
                           ))}
                         </select>
@@ -236,7 +246,7 @@ function Game() {
                           className="w-full px-3 py-2 bg-black/40 text-haunted-fog rounded border-2 border-haunted-shadow focus:border-haunted-blood focus:outline-none"
                         >
                           <option value="">--</option>
-                          {gameState.board?.weapons.map((w, i) => (
+                          {gameState.weapons?.map((w, i) => (
                             <option key={i} value={w}>{w}</option>
                           ))}
                         </select>
@@ -249,8 +259,8 @@ function Game() {
                           className="w-full px-3 py-2 bg-black/40 text-haunted-fog rounded border-2 border-haunted-shadow focus:border-haunted-blood focus:outline-none"
                         >
                           <option value="">--</option>
-                          {gameState.board?.rooms.map((r, i) => (
-                            <option key={i} value={r.name}>{r.name}</option>
+                          {gameState.rooms?.map((r, i) => (
+                            <option key={i} value={r}>{r}</option>
                           ))}
                         </select>
                       </div>
@@ -270,16 +280,8 @@ function Game() {
                       >
                         ⚠️ Accuser
                       </button>
-                      <button
-                        onClick={handlePassTurn}
-                        disabled={actionLoading}
-                        className="px-6 py-3 bg-black/40 hover:bg-black/60 disabled:opacity-50 text-haunted-fog border-2 border-haunted-shadow font-semibold rounded-lg transition-all"
-                      >
-                        ⏭️ Passer
-                      </button>
                     </div>
                   </div>
-                )}
               </div>
             )}
           </div>
@@ -289,9 +291,9 @@ function Game() {
         <div className="bg-black/60 backdrop-blur-md p-6 rounded-lg border-2 border-haunted-shadow">
           <h2 className="text-xl font-bold text-haunted-blood mb-4 animate-flicker">📜 Journal de l'Enquête</h2>
           <div className="space-y-2 max-h-64 overflow-y-auto">
-            {gameState.history?.slice(-10).reverse().map((event, idx) => (
+            {gameState.recent_actions?.slice().reverse().map((action, idx) => (
               <div key={idx} className="text-haunted-fog/80 text-sm border-l-2 border-haunted-blood pl-3 py-1 hover:bg-black/20 transition-all">
-                {event}
+                <span className="font-semibold">{action.player}</span> - {action.action}: {action.details}
               </div>
             ))}
           </div>

specifications.txt

@@ -14,21 +14,21 @@ Aucune compétence technique requise pour les joueurs.
 🧩 3. Fonctionnalités principales
 A. Gestion des parties
 
-Créer une nouvelle partie
+* Créer une nouvelle partie
 
-Saisir un nom de partie.
+  * Saisir un nom de partie.
 
-Choisir le nombre de salles et leurs noms (ex : "Cuisine", "Salle de réunion", "Terrasse"...).
+  * Choisir le nombre de salles et leurs noms (ex : "Cuisine", "Salle de réunion", "Terrasse"...).
 
-(Optionnel) Activer ou non le mode IA pour générer des descriptions ou scénarios.
+  * (Optionnel) Activer ou non le mode IA pour générer des descriptions ou scénarios.
 
-Rejoindre une partie existante
+* Rejoindre une partie existante
 
-Via un code ou lien de partage (UUID court).
+  * Via un code ou lien de partage (UUID court).
 
-Le joueur saisit son nom ou pseudo.
+  * Le joueur saisit son nom ou pseudo.
 
-Lister les parties actives (en cours sur le serveur).
+  * Lister les parties actives (en cours sur le serveur).
 
 B. Gestion du jeu
 
@@ -56,6 +56,8 @@ C. Interaction joueur
 
 Interface mobile first (compatible smartphone).
 
+Grille a cocher pour éliminer les possibilités
+
 Navigation intuitive :
 
 Vue "Salle actuelle"
@@ -74,16 +76,15 @@ USE_OPENAI=true active la génération de contenu IA :
 
 Génération de scénario d’enquête personnalisé (intro, contexte, description des personnages).
 
-Suggestions de narration (ex : “Une ombre passe dans la salle…”).
-
 Reformulation fluide des messages de jeu.
 
 USE_OPENAI=false → mode classique sans génération IA, avec textes statiques.
 
 🏗️ 4. Architecture technique
+
 Front-end
 
-Framework léger : Gradio, Streamlit, ou React + FastAPI backend (selon préférences).
+Framework léger : React + FastAPI backend (selon préférences).
 
 Interface responsive avec navigation fluide (sans reload complet).
 
@@ -123,6 +124,7 @@ USE_OPENAI	Active la génération IA	false
 OPENAI_API_KEY	Clé OpenAI (optionnelle)	""
 APP_NAME	Nom affiché dans l’interface	"Cluedo Custom"
 MAX_PLAYERS	Nombre max de joueurs par partie	8
+
 🧠 6. Comportement IA (si activé)
 
 Utiliser GPT (via OpenAI API) pour :
@@ -131,32 +133,12 @@ Générer la mise en scène du lieu : “Le meurtre a eu lieu dans la Salle des
 
 Personnaliser les noms et descriptions de personnages.
 
-Ajouter du dialogue narratif léger pendant les tours.
+Ajouter du dialogue narratif léger pendant les tours. Le bot s'appelle 
 
 Les prompts doivent être courts et à température basse pour éviter les délais.
 
 Pas d’appel IA bloquant : timeout max 3 secondes par requête.
 
-🎨 7. Design & ergonomie
-
-Principes UX :
-
-Interface claire, à gros boutons.
-
-Lecture sur mobile en priorité.
-
-Couleurs contrastées : fond clair, éléments colorés selon statut.
-
-Écrans :
-
-Accueil : Créer / Rejoindre une partie.
-
-Configuration : Nom des salles + activer IA.
-
-Salle de jeu : Vue principale (tour actuel, actions possibles).
-
-Fin de partie : Résumé + rejouer.
-
 🔒 8. Gestion des sessions / multi-joueurs
 
 Génération d’un Game ID unique à 6 caractères.