feat: add react + vite components

.gitignore

@@ -23,6 +23,10 @@ wheels/
 .installed.cfg
 *.egg
 
+# Node
+node_modules/
+package-lock.json
+
 # Environment
 .env
 .venv

Dockerfile

@@ -1,27 +1,27 @@
-# Use Python 3.11 slim image for smaller size
-FROM python:3.11-slim
+# 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
 
-# Set working directory
+# Stage 2: Python backend
+FROM python:3.11-slim
 WORKDIR /app
 
-# Set environment variables
-ENV PYTHONUNBUFFERED=1 \
-    PYTHONDONTWRITEBYTECODE=1 \
-    PORT=7860
-
-# Install dependencies
-COPY requirements.txt .
+# Install backend deps
+COPY backend/requirements.txt ./
 RUN pip install --no-cache-dir -r requirements.txt
 
-# Copy application files
-COPY . .
+# Copy backend
+COPY backend/ ./backend/
 
-# Expose port
-EXPOSE 7860
+# Copy built frontend
+COPY --from=frontend-build /app/frontend/dist ./frontend/dist
 
-# Health check
-HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
-    CMD python -c "import requests; requests.get('http://localhost:7860/')"
+# Expose port for Hugging Face
+EXPOSE 7860
 
-# Run the application
-CMD ["python", "app.py"]
+# Start server
+CMD ["uvicorn", "backend.main:app", "--host", "0.0.0.0", "--port", "7860"]

SETUP_REACT.md

@@ -1,252 +0,0 @@
-# 🚀 Setup React + Docker - Cluedo Custom v3
-
-## ✅ Ce qui est fait
-
-### Backend
-- ✅ `backend/main.py` - API FastAPI complète
-- ✅ `backend/defaults.py` - 3 thèmes prédéfinis (classic, office, fantasy)
-- ✅ `backend/models.py`, `game_engine.py`, `game_manager.py` - Logique métier
-- ✅ `backend/requirements.txt` - Dépendances Python
-
-### Frontend (structure)
-- ✅ `frontend/package.json` - Config React + Vite + Tailwind
-- ✅ `frontend/vite.config.js` - Config Vite avec proxy API
-- ✅ `frontend/tailwind.config.js` - Theme sombre
-- ✅ `frontend/src/api.js` - Client API
-
-## 📋 Ce qu'il reste à faire
-
-### 1. Créer les composants React
-
-Créer ces fichiers dans `frontend/src/` :
-
-#### `main.jsx`
-```jsx
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
-import './index.css'
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
-```
-
-#### `App.jsx`
-```jsx
-import { BrowserRouter, Routes, Route } from 'react-router-dom'
-import Home from './pages/Home'
-import Join from './pages/Join'
-import Game from './pages/Game'
-
-function App() {
-  return (
-    <BrowserRouter>
-      <div className="min-h-screen bg-gradient-to-br from-dark-950 via-dark-900 to-dark-950">
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/join" element={<Join />} />
-          <Route path="/game/:gameId/:playerId" element={<Game />} />
-        </Routes>
-      </div>
-    </BrowserRouter>
-  )
-}
-
-export default App
-```
-
-#### `pages/Home.jsx` - Page d'accueil
-- Bouton "Créer une partie" (thème classic par défaut)
-- Input nom du joueur
-- Lien vers "Rejoindre une partie"
-
-#### `pages/Join.jsx` - Rejoindre une partie
-- Input code de partie (4 caractères)
-- Input nom du joueur
-- Bouton rejoindre
-
-#### `pages/Game.jsx` - Interface de jeu
-- Plateau avec positions
-- Cartes du joueur
-- Actions (Dés, Suggestion, Accusation, Passer)
-- Historique
-- Bouton "Démarrer" (si créateur et 3+ joueurs)
-
-### 2. Créer le 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: Python backend
-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 for Hugging Face
-EXPOSE 7860
-
-# Start server
-CMD ["uvicorn", "backend.main:app", "--host", "0.0.0.0", "--port", "7860"]
-```
-
-### 3. Créer docker-compose.yml (pour test local)
-
-```yaml
-version: '3.8'
-
-services:
-  backend:
-    build: .
-    ports:
-      - "7860:7860"
-    volumes:
-      - ./backend:/app/backend
-      - ./frontend/dist:/app/frontend/dist
-    environment:
-      - PYTHONUNBUFFERED=1
-```
-
-### 4. Créer README.md pour Hugging Face
-
-```yaml
----
-title: Cluedo Custom
-emoji: 🔍
-colorFrom: red
-colorTo: purple
-sdk: docker
-pinned: false
-app_port: 7860
----
-
-# 🔍 Cluedo Custom
-
-Créez votre propre jeu de Cluedo avec des suspects, armes et lieux personnalisés !
-
-## 🎮 Comment jouer
-
-1. **Créer une partie** : Choisissez un thème (Manoir classique, Bureau, Château)
-2. **Partager le code** : Envoyez le code à 4 caractères à vos amis
-3. **Jouer** : Lancez les dés, déplacez-vous, faites des suggestions !
-
-## 🛠️ Développement local
-
-\`\`\`bash
-# Build et lancer avec Docker
-docker-compose up --build
-
-# Ou séparément :
-# Backend
-cd backend && pip install -r requirements.txt && uvicorn main:app --port 8000
-
-# Frontend
-cd frontend && npm install && npm run dev
-\`\`\`
-```
-
-### 5. Commandes pour tester
-
-```bash
-# 1. Installer frontend
-cd frontend
-npm install
-
-# 2. Builder frontend
-npm run build
-
-# 3. Tester backend seul (sert le frontend builded)
-cd ../backend
-pip install -r requirements.txt
-uvicorn main:app --port 7860
-
-# Ouvrir http://localhost:7860
-
-# 4. Build Docker
-cd ..
-docker build -t cluedo-custom .
-docker run -p 7860:7860 cluedo-custom
-
-# 5. Deploy sur Hugging Face
-# - Créer un nouveau Space (SDK: Docker)
-# - Push le code
-# - Hugging Face va build automatiquement
-```
-
-## 🎨 Templates de composants React simplifiés
-
-Les composants doivent être **ultra-simples** :
-
-### Home.jsx (minimal)
-- Titre "Cluedo Custom"
-- Input "Votre nom"
-- Bouton "Créer une partie"
-- Lien "Rejoindre une partie existante"
-
-### Game.jsx (minimal)
-- Section "Plateau" : Liste des pièces avec icônes joueurs
-- Section "Mes cartes" : Liste simple
-- Section "Actions" :
-  - Si mon tour : Bouton "Lancer dés" OU "Passer"
-  - Si déplacé : Selects (suspect/arme/pièce) + "Suggérer" / "Accuser"
-- Section "Historique" : 5 dernières actions
-
-## ⚡ Quick Start (après avoir créé les composants)
-
-```bash
-# Terminal 1 - Backend
-cd backend
-pip install -r requirements.txt
-uvicorn main:app --reload --port 8000
-
-# Terminal 2 - Frontend (dev mode)
-cd frontend
-npm install
-npm run dev
-# Ouvre http://localhost:3000
-
-# Pour production (single server)
-cd frontend
-npm run build
-cd ../backend
-uvicorn main:app --port 7860
-# Ouvre http://localhost:7860
-```
-
-## 🐳 Déployer sur Hugging Face
-
-1. Créer un Space : https://huggingface.co/new-space
-2. Choisir SDK: **Docker**
-3. Cloner le repo du Space
-4. Copier tous les fichiers dedans
-5. Ajouter `README.md` avec le header YAML
-6. Push:
-```bash
-git add .
-git commit -m "Initial commit"
-git push
-```
-
-7. Attendre le build (~5-10 min)
-8. Votre jeu est en ligne ! 🎉
-
----
-
-**Note** : Les composants React sont volontairement simplifiés pour aller vite. Tu pourras les améliorer après le déploiement.

docker-compose.yml

@@ -0,0 +1,12 @@
+version: '3.8'
+
+services:
+  app:
+    build: .
+    ports:
+      - "7860:7860"
+    environment:
+      - PYTHONUNBUFFERED=1
+    volumes:
+      - ./backend:/app/backend
+      - ./frontend/dist:/app/frontend/dist

frontend/src/App.jsx

@@ -0,0 +1,20 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import Home from './pages/Home'
+import Join from './pages/Join'
+import Game from './pages/Game'
+
+function App() {
+  return (
+    <BrowserRouter>
+      <div className="min-h-screen bg-gradient-to-br from-dark-950 via-dark-900 to-dark-950">
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/join" element={<Join />} />
+          <Route path="/game/:gameId/:playerId" element={<Game />} />
+        </Routes>
+      </div>
+    </BrowserRouter>
+  )
+}
+
+export default App

frontend/src/api.js

@@ -9,6 +9,57 @@ const api = axios.create({
   },
 });
 
+// Helper functions for easier usage
+export const createQuickGame = async (playerName, theme = 'classic') => {
+  const response = await api.post('/games/quick-create', { theme, player_name: playerName });
+  return response.data;
+};
+
+export const joinGame = async (gameId, playerName) => {
+  const response = await api.post('/games/join', { game_id: gameId, player_name: playerName });
+  return response.data;
+};
+
+export const startGame = async (gameId, playerId) => {
+  const response = await api.post(`/games/${gameId}/start`, { player_id: playerId });
+  return response.data;
+};
+
+export const getGameState = async (gameId, playerId) => {
+  const response = await api.get(`/games/${gameId}/state/${playerId}`);
+  return response.data;
+};
+
+export const rollDice = async (gameId, playerId) => {
+  const response = await api.post(`/games/${gameId}/roll`, { player_id: playerId });
+  return response.data;
+};
+
+export const makeSuggestion = async (gameId, playerId, suspect, weapon, room) => {
+  const response = await api.post(`/games/${gameId}/suggest`, {
+    player_id: playerId,
+    suspect,
+    weapon,
+    room,
+  });
+  return response.data;
+};
+
+export const makeAccusation = async (gameId, playerId, suspect, weapon, room) => {
+  const response = await api.post(`/games/${gameId}/accuse`, {
+    player_id: playerId,
+    suspect,
+    weapon,
+    room,
+  });
+  return response.data;
+};
+
+export const passTurn = async (gameId, playerId) => {
+  const response = await api.post(`/games/${gameId}/pass`, { player_id: playerId });
+  return response.data;
+};
+
 export const gameAPI = {
   // Get available themes
   getThemes: () => api.get('/themes'),

frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

frontend/src/pages/Game.jsx

@@ -0,0 +1,295 @@
+import { useState, useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import { getGameState, startGame, rollDice, makeSuggestion, makeAccusation, passTurn } from '../api'
+
+function Game() {
+  const { gameId, playerId } = useParams()
+  const [gameState, setGameState] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [actionLoading, setActionLoading] = useState(false)
+
+  // Suggestion form
+  const [selectedSuspect, setSelectedSuspect] = useState('')
+  const [selectedWeapon, setSelectedWeapon] = useState('')
+  const [selectedRoom, setSelectedRoom] = useState('')
+
+  useEffect(() => {
+    loadGameState()
+    const interval = setInterval(loadGameState, 2000)
+    return () => clearInterval(interval)
+  }, [gameId, playerId])
+
+  const loadGameState = async () => {
+    try {
+      const state = await getGameState(gameId, playerId)
+      setGameState(state)
+      setLoading(false)
+    } catch (error) {
+      console.error('Erreur chargement:', error)
+    }
+  }
+
+  const handleStartGame = async () => {
+    setActionLoading(true)
+    try {
+      await startGame(gameId, playerId)
+      await loadGameState()
+    } catch (error) {
+      alert(error.response?.data?.detail || 'Erreur au démarrage')
+    } finally {
+      setActionLoading(false)
+    }
+  }
+
+  const handleRollDice = async () => {
+    setActionLoading(true)
+    try {
+      await rollDice(gameId, playerId)
+      await loadGameState()
+    } catch (error) {
+      alert(error.response?.data?.detail || 'Erreur lors du lancer de dés')
+    } finally {
+      setActionLoading(false)
+    }
+  }
+
+  const handleSuggestion = async () => {
+    if (!selectedSuspect || !selectedWeapon || !selectedRoom) {
+      alert('Sélectionnez tous les éléments')
+      return
+    }
+    setActionLoading(true)
+    try {
+      await makeSuggestion(gameId, playerId, selectedSuspect, selectedWeapon, selectedRoom)
+      await loadGameState()
+      setSelectedSuspect('')
+      setSelectedWeapon('')
+      setSelectedRoom('')
+    } catch (error) {
+      alert(error.response?.data?.detail || 'Erreur lors de la suggestion')
+    } finally {
+      setActionLoading(false)
+    }
+  }
+
+  const handleAccusation = async () => {
+    if (!selectedSuspect || !selectedWeapon || !selectedRoom) {
+      alert('Sélectionnez tous les éléments')
+      return
+    }
+    if (!confirm('⚠️ Une accusation incorrecte vous élimine. Continuer ?')) return
+
+    setActionLoading(true)
+    try {
+      await makeAccusation(gameId, playerId, selectedSuspect, selectedWeapon, selectedRoom)
+      await loadGameState()
+      setSelectedSuspect('')
+      setSelectedWeapon('')
+      setSelectedRoom('')
+    } catch (error) {
+      alert(error.response?.data?.detail || 'Erreur lors de l\'accusation')
+    } finally {
+      setActionLoading(false)
+    }
+  }
+
+  const handlePassTurn = async () => {
+    setActionLoading(true)
+    try {
+      await passTurn(gameId, playerId)
+      await loadGameState()
+    } catch (error) {
+      alert(error.response?.data?.detail || 'Erreur')
+    } finally {
+      setActionLoading(false)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-accent-400 text-xl">Chargement...</div>
+      </div>
+    )
+  }
+
+  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
+
+  return (
+    <div className="min-h-screen p-4">
+      <div className="max-w-6xl mx-auto space-y-6">
+        {/* Header */}
+        <div className="bg-dark-800 p-6 rounded-lg border border-dark-700">
+          <div className="flex justify-between items-center">
+            <div>
+              <h1 className="text-3xl font-bold text-accent-400">🔍 Partie {gameState.game_code}</h1>
+              <p className="text-dark-300">Joueur: {me?.name}</p>
+            </div>
+            <div className="text-right">
+              <p className="text-dark-300">Status: {gameState.status === 'waiting' ? '⏳ En attente' : gameState.status === 'playing' ? '🎮 En cours' : '🏆 Terminée'}</p>
+              <p className="text-dark-400 text-sm">{gameState.players.length} joueurs</p>
+            </div>
+          </div>
+          {canStart && (
+            <button
+              onClick={handleStartGame}
+              disabled={actionLoading}
+              className="mt-4 px-6 py-2 bg-green-600 hover:bg-green-700 disabled:bg-dark-600 text-white font-semibold rounded-lg"
+            >
+              🚀 Démarrer la partie
+            </button>
+          )}
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Plateau */}
+          <div className="bg-dark-800 p-6 rounded-lg border border-dark-700">
+            <h2 className="text-xl font-bold text-accent-400 mb-4">🏰 Plateau</h2>
+            <div className="space-y-2">
+              {gameState.board?.rooms.map((room, idx) => (
+                <div key={idx} className="bg-dark-700 p-3 rounded">
+                  <div className="font-semibold text-white">{room.name}</div>
+                  <div className="text-sm text-dark-300">
+                    Joueurs: {room.player_ids.map(id =>
+                      gameState.players.find(p => p.id === id)?.name || id
+                    ).join(', ') || 'Aucun'}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Mes cartes */}
+          <div className="bg-dark-800 p-6 rounded-lg border border-dark-700">
+            <h2 className="text-xl font-bold text-accent-400 mb-4">🃏 Mes cartes</h2>
+            <div className="space-y-2">
+              {me?.cards.map((card, idx) => (
+                <div key={idx} className="bg-dark-700 px-4 py-2 rounded text-white">
+                  {card.type === 'suspect' && '👤 '}
+                  {card.type === 'weapon' && '🔪 '}
+                  {card.type === 'room' && '🏠 '}
+                  {card.name}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Actions */}
+        {gameState.status === 'playing' && (
+          <div className="bg-dark-800 p-6 rounded-lg border border-dark-700">
+            <h2 className="text-xl font-bold text-accent-400 mb-4">
+              {isMyTurn ? '⚡ À votre tour !' : '⏳ Tour de ' + gameState.players.find(p => p.id === gameState.current_player_id)?.name}
+            </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-accent-600 hover:bg-accent-700 disabled:bg-dark-600 text-white font-semibold rounded-lg"
+                    >
+                      🎲 Lancer les dés
+                    </button>
+                    <button
+                      onClick={handlePassTurn}
+                      disabled={actionLoading}
+                      className="px-6 py-3 bg-dark-600 hover:bg-dark-500 text-white font-semibold rounded-lg"
+                    >
+                      ⏭️ Passer
+                    </button>
+                  </div>
+                ) : (
+                  <div className="space-y-4">
+                    <div className="grid grid-cols-3 gap-4">
+                      <div>
+                        <label className="block text-sm text-dark-300 mb-2">Suspect</label>
+                        <select
+                          value={selectedSuspect}
+                          onChange={(e) => setSelectedSuspect(e.target.value)}
+                          className="w-full px-3 py-2 bg-dark-700 text-white rounded border border-dark-600"
+                        >
+                          <option value="">--</option>
+                          {gameState.board?.suspects.map((s, i) => (
+                            <option key={i} value={s}>{s}</option>
+                          ))}
+                        </select>
+                      </div>
+                      <div>
+                        <label className="block text-sm text-dark-300 mb-2">Arme</label>
+                        <select
+                          value={selectedWeapon}
+                          onChange={(e) => setSelectedWeapon(e.target.value)}
+                          className="w-full px-3 py-2 bg-dark-700 text-white rounded border border-dark-600"
+                        >
+                          <option value="">--</option>
+                          {gameState.board?.weapons.map((w, i) => (
+                            <option key={i} value={w}>{w}</option>
+                          ))}
+                        </select>
+                      </div>
+                      <div>
+                        <label className="block text-sm text-dark-300 mb-2">Pièce</label>
+                        <select
+                          value={selectedRoom}
+                          onChange={(e) => setSelectedRoom(e.target.value)}
+                          className="w-full px-3 py-2 bg-dark-700 text-white rounded border border-dark-600"
+                        >
+                          <option value="">--</option>
+                          {gameState.board?.rooms.map((r, i) => (
+                            <option key={i} value={r.name}>{r.name}</option>
+                          ))}
+                        </select>
+                      </div>
+                    </div>
+                    <div className="flex gap-4">
+                      <button
+                        onClick={handleSuggestion}
+                        disabled={actionLoading}
+                        className="px-6 py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-dark-600 text-white font-semibold rounded-lg"
+                      >
+                        💬 Suggérer
+                      </button>
+                      <button
+                        onClick={handleAccusation}
+                        disabled={actionLoading}
+                        className="px-6 py-3 bg-red-600 hover:bg-red-700 disabled:bg-dark-600 text-white font-semibold rounded-lg"
+                      >
+                        ⚠️ Accuser
+                      </button>
+                      <button
+                        onClick={handlePassTurn}
+                        disabled={actionLoading}
+                        className="px-6 py-3 bg-dark-600 hover:bg-dark-500 text-white font-semibold rounded-lg"
+                      >
+                        ⏭️ Passer
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Historique */}
+        <div className="bg-dark-800 p-6 rounded-lg border border-dark-700">
+          <h2 className="text-xl font-bold text-accent-400 mb-4">📜 Historique</h2>
+          <div className="space-y-2">
+            {gameState.history?.slice(-10).reverse().map((event, idx) => (
+              <div key={idx} className="text-dark-300 text-sm border-l-2 border-accent-600 pl-3 py-1">
+                {event}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Game

frontend/src/pages/Home.jsx

@@ -0,0 +1,78 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { createQuickGame } from '../api'
+
+function Home() {
+  const [playerName, setPlayerName] = useState('')
+  const [loading, setLoading] = useState(false)
+  const navigate = useNavigate()
+
+  const handleCreateGame = async () => {
+    if (!playerName.trim()) {
+      alert('Veuillez entrer votre nom')
+      return
+    }
+
+    setLoading(true)
+    try {
+      const response = await createQuickGame(playerName.trim())
+      navigate(`/game/${response.game_id}/${response.player_id}`)
+    } catch (error) {
+      alert('Erreur lors de la création de la partie')
+      console.error(error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4">
+      <div className="max-w-md w-full space-y-8 bg-dark-800 p-8 rounded-lg shadow-2xl border border-dark-700">
+        <div className="text-center">
+          <h1 className="text-5xl font-bold text-accent-400 mb-2">🔍 Cluedo Custom</h1>
+          <p className="text-dark-300">Créez votre partie et invitez vos amis</p>
+        </div>
+
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-dark-200 mb-2">
+              Votre nom
+            </label>
+            <input
+              type="text"
+              value={playerName}
+              onChange={(e) => setPlayerName(e.target.value)}
+              onKeyPress={(e) => e.key === 'Enter' && handleCreateGame()}
+              placeholder="Entrez votre nom"
+              className="w-full px-4 py-3 bg-dark-700 border border-dark-600 rounded-lg text-white placeholder-dark-400 focus:outline-none focus:ring-2 focus:ring-accent-500"
+            />
+          </div>
+
+          <button
+            onClick={handleCreateGame}
+            disabled={loading}
+            className="w-full py-3 px-4 bg-accent-600 hover:bg-accent-700 disabled:bg-dark-600 text-white font-semibold rounded-lg transition-colors"
+          >
+            {loading ? 'Création...' : '🎮 Créer une partie'}
+          </button>
+
+          <div className="text-center pt-4">
+            <button
+              onClick={() => navigate('/join')}
+              className="text-accent-400 hover:text-accent-300 underline"
+            >
+              Rejoindre une partie existante
+            </button>
+          </div>
+        </div>
+
+        <div className="mt-8 pt-6 border-t border-dark-700 text-center text-sm text-dark-400">
+          <p>Thème par défaut : Manoir Classique</p>
+          <p className="mt-1">3-6 joueurs recommandés</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Home

frontend/src/pages/Join.jsx

@@ -0,0 +1,88 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { joinGame } from '../api'
+
+function Join() {
+  const [gameCode, setGameCode] = useState('')
+  const [playerName, setPlayerName] = useState('')
+  const [loading, setLoading] = useState(false)
+  const navigate = useNavigate()
+
+  const handleJoinGame = async () => {
+    if (!gameCode.trim() || !playerName.trim()) {
+      alert('Veuillez remplir tous les champs')
+      return
+    }
+
+    setLoading(true)
+    try {
+      const response = await joinGame(gameCode.trim(), playerName.trim())
+      navigate(`/game/${response.game_id}/${response.player_id}`)
+    } catch (error) {
+      alert('Erreur : ' + (error.response?.data?.detail || 'Impossible de rejoindre la partie'))
+      console.error(error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4">
+      <div className="max-w-md w-full space-y-8 bg-dark-800 p-8 rounded-lg shadow-2xl border border-dark-700">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold text-accent-400 mb-2">🚪 Rejoindre une partie</h1>
+          <p className="text-dark-300">Entrez le code partagé par votre hôte</p>
+        </div>
+
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-dark-200 mb-2">
+              Code de partie
+            </label>
+            <input
+              type="text"
+              value={gameCode}
+              onChange={(e) => setGameCode(e.target.value.toUpperCase())}
+              placeholder="Ex: ABC4"
+              maxLength={4}
+              className="w-full px-4 py-3 bg-dark-700 border border-dark-600 rounded-lg text-white text-center text-2xl font-mono placeholder-dark-400 focus:outline-none focus:ring-2 focus:ring-accent-500 uppercase"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-dark-200 mb-2">
+              Votre nom
+            </label>
+            <input
+              type="text"
+              value={playerName}
+              onChange={(e) => setPlayerName(e.target.value)}
+              onKeyPress={(e) => e.key === 'Enter' && handleJoinGame()}
+              placeholder="Entrez votre nom"
+              className="w-full px-4 py-3 bg-dark-700 border border-dark-600 rounded-lg text-white placeholder-dark-400 focus:outline-none focus:ring-2 focus:ring-accent-500"
+            />
+          </div>
+
+          <button
+            onClick={handleJoinGame}
+            disabled={loading}
+            className="w-full py-3 px-4 bg-accent-600 hover:bg-accent-700 disabled:bg-dark-600 text-white font-semibold rounded-lg transition-colors"
+          >
+            {loading ? 'Connexion...' : '✅ Rejoindre'}
+          </button>
+
+          <div className="text-center pt-4">
+            <button
+              onClick={() => navigate('/')}
+              className="text-accent-400 hover:text-accent-300 underline"
+            >
+              ← Retour à l'accueil
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Join