retrait du bouton restart

.env

@@ -1,9 +0,0 @@
-POSTGRES_PASSWORD=coucou
-JWT_SECRET=superlongsecretkeyatleast32characterspleasenevercommitthis
-POSTGRES_DB=database
-POSTGRES_HOST=database
-POSTGRES_USER=user
-
-GITHUB_CLIENT_ID=Ov23liYIX8bJcdamjQJm
-GITHUB_CLIENT_SECRET=9db75e695a8c028a80bb2e9b5604b2e44f76fb26
-GITHUB_CALLBACK_URL=http://localhost:8080/api/auth/github/callback

.gitignore

@@ -0,0 +1,37 @@
+# macOS
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Environment / secrets
+.env
+.env.*
+.env.local
+.env.production
+
+# Node
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Logs
+*.log
+logs/
+
+# Build output
+dist/
+build/
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Docker volumes / data
+postgres-data/
+data/
+
+# OS
+Thumbs.db

Transcendence/.gitignore

@@ -1,3 +1,35 @@
+# macOS
+.DS_Store
 srcs/.DS_Store
 *.DS_Store
+
+# Environment / secrets
+.env
+.env.*
+
+# Node
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+
+# Logs
+*.log
+logs/
+
+# Build output
+dist/
+build/
+
+# Uploads utilisateurs (garder uniquement default.png)
 srcs/backend/avatar/*
+!srcs/backend/avatar/default.png
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Docker volumes / data
+postgres-data/
+data/

Transcendence/README.md

@@ -1,54 +0,0 @@
-# Transcendence
-
-Exemple d'../.env fonctionnel:
-
-POSTGRES_PASSWORD=coucou
-JWT_SECRET=superlongsecretkeyatleast32characterspleasenevercommitthis
-POSTGRES_DB=database
-POSTGRES_HOST=database
-POSTGRES_USER=user
-
-GITHUB_CLIENT_ID=Iv1.xxxxxxxxxxxxxxxxxxxxxxxxxxx
-GITHUB_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-GITHUB_CALLBACK_URL=http://localhost:8080/api/auth/github/callback
-
-Les Variables d'env GITHUB_* sont a generer sur ce lien 'https://github.com/settings/applications/new'
-
-
-Gestion de friendship dans POSTGRESQL:
-'pending' → demande envoyée
-'accepted' → amis
-'blocked' → bloqué
-'rejected' → refusé
-
-Ressource:
-    https://www.postgresql.org/docs/
-    https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/authorizing-oauth-apps
-    https://docs.github.com/fr/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app
-
-/////////////////////////////////////////////////////////////////////////////////////////
-
-BACKEND
-
-17/01   - Ajout du service/route pour le systeme de game_room
-        permet aux joueurs de creer et rejoindre des rooms
-        une room vide est automatiquement detruite.
-        - Presence d'une fonction affichant toutes les rooms joignables
-        ainsi qu'une autre fonction pour afficher tous les joueurs de la room avec
-        leur scores et leur etat actuel.
-        - Aucun moyen de changer l'etat de la room de waiting a en cours ou finished
-        ca attendra le systeme du jeu
-
-21/01   - Ajout du service/route pour le systeme d'avatar
-        permet aux utilisateurs de changer ou supprimer leur avatar actuel
-        - Ajout egalement d'une simple fonction pour recuperer l'avatar d'un utilisateur (pour le frontend)
-
-DATABASE
-
-17/01   Ajout des tables game_rooms, game_players, game_rounds, words
-        - nom, status et parametres de la game
-        - joueurs dans la game, leur scores et leur role actuel (dessinateur, devineur)
-        - historique de la game, qui a dessine quoi precedemment ainsi que les timers des rounds, sera aussi utile si on veut faire les stats de compte a l'avenir.
-        - contient la liste des mots utilisable par les joueurs
-
-21/01   Ajout de avatar_url dans la table users

Transcendence/a_faire.txt

@@ -0,0 +1,64 @@
+le you win apparait sur la grille de l'adversaire, elle doit apparaitre sur la grille principale du joueur qui gagne FIXED ? [OUI]
+
+undefined is not an object (evaluating 'grid[ny][nx]')
+a la ligne 56 de renderer.js FIXED ? [CA_EN_A_L'AIR]
+A tester plusieurs game, si ca freeze et que l'erreur reviens, NAN, j'ai changer les limite
+sur les bord gauche droit de la grid, a voir
+
+Quand je fais pause, 
+ca ne fait pas pose pour tout le monde FIXED[OUI]
+
+Quand je fait stop, 
+ca ne fais pas stop pour tout le monde FIXED[OUI]
+
+durant le duel du tetris en ligne:
+j'ai plusieurs probleme:
+
+
+Les parametre doivent etre les memes pour tout le monde
+FIXED[OUI]
+
+
+DES GAMES OVER ARRIVE COMME CA SANS RAISON durant le duel FIXED[OUI]
+
+ est-ce du au valid-block ? au addGarbage ?
+
+Bug A — Faux game over via garbage (tetris.js)
+
+addGarbageLines appelait _isValidPosition() qui retourne false si gy < 0. 
+Or après garbage, la pièce monte légitimement au-dessus de la grille 
+(y négatif). 
+Fix : nouvelle méthode _isValidPositionAllowTop() qui 
+ignore les cellules au-dessus de la grille (zone tampon) et 
+ne vérifie que les collisions réelles dans la grille.
+
+Bug B — Crash si la pièce est au-dessus de la grille (tetris.js)
+
+_canMoveDown, _canMoveLeft, _canMoveRight, et _lockPiece accèdent à grid[y + row] 
+sans vérifier si y + row < 0 → undefined → crash. Fix : 
+skip des rangées hors grille avec continue.
+
+Bug C — Game over par garbage ne termine pas le duel (duel.js)
+
+onLocalGameOver ne faisait endDuel() que si validBlock=true. Un game over réel dû à du garbage (validBlock=false) laissait le duel dans un état cassé et l'adversaire ne voyait jamais "YOU WIN". Fix : endDuel() systématique, et OPPONENT_GAME_OVER affiche toujours "YOU WIN".
+
+
+
+separer le code tetris du reste, de meme pour les sockets. FAIT[?]
+
+
+error:
+renderer.js:56 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
+    at drawGhost (renderer.js:56:71)
+    at render (renderer.js:101:9)
+    at Tetris.onRender (ui.js:107:9)
+    at gameLoop (tetris.js:115:18)
+
+FIXED[ON DIRAIS BIEN]
+
+Il faut verifier si le garbage si retrouve a la premiere ligne,
+si c'est le cas, game-over
+
+Il faut un bouton restart
+
+system d'attribution de point et d'enregistrement de point

Transcendence/srcs/backend/services/socket.js

@@ -7,6 +7,9 @@ import playerStatsService from './player_stats.js';
 // Store game state per room
 const gameRooms = new Map();
 
+// Store tetris duel rooms  { roomCode → Map<socketId, socket> }
+const tetrisRooms = new Map();
+
 // Store io instance globally for use in routes
 let ioInstance = null;
 
@@ -422,8 +425,119 @@ function setupSocketIO(io)
 			io.to(roomId).emit('game-ended');
 		});
 
+		// ============================================
+		// TETRIS DUEL EVENTS
+		// ============================================
+
+		socket.on('tetris:join', ({ roomCode }) => {
+			const code = String(roomCode).toUpperCase().slice(0, 8);
+
+			// Quitter l'ancienne room tetris si besoin
+			if (socket.tetrisRoomCode) {
+				_tetrisLeave(socket);
+			}
+
+			if (!tetrisRooms.has(code)) {
+				tetrisRooms.set(code, new Map());
+			}
+			const room = tetrisRooms.get(code);
+
+			if (room.size >= 2) {
+				socket.emit('tetris:room-status', { status: 'full', players: [] });
+				return;
+			}
+
+			room.set(socket.id, socket);
+			socket.tetrisRoomCode = code;
+
+			const players = [...room.values()].map(s => s.user.username);
+
+			if (room.size === 1) {
+				socket.emit('tetris:room-status', { status: 'waiting', players });
+			} else {
+				// Notifier les deux joueurs
+				for (const s of room.values()) {
+					s.emit('tetris:room-status', { status: 'ready', players });
+				}
+				// Notifier l'adversaire qu'un nouveau joueur a rejoint
+				for (const [id, s] of room) {
+					if (id !== socket.id) {
+						s.emit('tetris:opponent-joined', { username: socket.user.username });
+					}
+				}
+			}
+		});
+
+		socket.on('tetris:leave', () => {
+			_tetrisLeave(socket);
+		});
+
+		// Relay pur : grid-update → adversaire uniquement
+		socket.on('tetris:grid-update', (data) => {
+			_tetrisRelayToOpponent(socket, 'tetris:grid-update', data);
+		});
+
+		// Relay pur : lines-cleared → adversaire uniquement
+		socket.on('tetris:lines-cleared', (data) => {
+			_tetrisRelayToOpponent(socket, 'tetris:lines-cleared', data);
+		});
+
+		// start-duel → relayé aux DEUX joueurs de la room (inclut l'émetteur)
+		socket.on('tetris:start-duel', () => {
+			const code = socket.tetrisRoomCode;
+			if (!code) return;
+			const room = tetrisRooms.get(code);
+			if (!room || room.size < 2) return;
+			for (const s of room.values()) {
+				s.emit('tetris:start-duel');
+			}
+		});
+
+		// pause → relayé aux DEUX joueurs de la room
+		socket.on('tetris:pause', () => {
+			const code = socket.tetrisRoomCode;
+			if (!code) return;
+			const room = tetrisRooms.get(code);
+			if (!room) return;
+			for (const s of room.values()) {
+				s.emit('tetris:pause');
+			}
+		});
+
+		// stop → relayé aux DEUX joueurs de la room
+		socket.on('tetris:stop', () => {
+			const code = socket.tetrisRoomCode;
+			if (!code) return;
+			const room = tetrisRooms.get(code);
+			if (!room) return;
+			for (const s of room.values()) {
+				s.emit('tetris:stop');
+			}
+		});
+
+		// settings → relayé aux DEUX joueurs de la room
+		socket.on('tetris:settings', (data) => {
+			const code = socket.tetrisRoomCode;
+			if (!code) return;
+			const room = tetrisRooms.get(code);
+			if (!room) return;
+			for (const s of room.values()) {
+				s.emit('tetris:settings', data);
+			}
+		});
+
+		// game-over → relayé en opponent-game-over chez l'adversaire
+		socket.on('tetris:game-over', (data) => {
+			_tetrisRelayToOpponent(socket, 'tetris:opponent-game-over', data);
+		});
+
 		socket.on('disconnect', async () =>
 		{
+			// Nettoyage room tetris
+			if (socket.tetrisRoomCode) {
+				_tetrisLeave(socket);
+			}
+
 			console.log(`User disconnected: ${socket.user.username}`);
 
 			// Notify game room if player was in one
@@ -453,5 +567,33 @@ function setupSocketIO(io)
 	});
 }
 
+// ── Helpers tetris duel ──────────────────────────────────────────────────
+
+function _tetrisLeave(socket) {
+	const code = socket.tetrisRoomCode;
+	if (!code) return;
+	const room = tetrisRooms.get(code);
+	if (room) {
+		room.delete(socket.id);
+		// Notifier l'adversaire restant
+		for (const s of room.values()) {
+			s.emit('tetris:opponent-left');
+			s.emit('tetris:room-status', { status: 'waiting', players: [s.user.username] });
+		}
+		if (room.size === 0) tetrisRooms.delete(code);
+	}
+	socket.tetrisRoomCode = null;
+}
+
+function _tetrisRelayToOpponent(socket, event, data) {
+	const code = socket.tetrisRoomCode;
+	if (!code) return;
+	const room = tetrisRooms.get(code);
+	if (!room) return;
+	for (const [id, s] of room) {
+		if (id !== socket.id) s.emit(event, data);
+	}
+}
+
 export { broadcastRoomsList };
 export default setupSocketIO;

Transcendence/srcs/frontend/src/duel.js

@@ -0,0 +1,192 @@
+// ─────────────────────────────────────────────
+// DUEL
+// ─────────────────────────────────────────────
+
+class Duel {
+    constructor(socket, tetrisGame, onStatusChange, onStart) {
+        this.socket         = socket;
+        this.tetrisGame     = tetrisGame;
+        this.onStatusChange = onStatusChange;   // (status, opponentName) => void
+        this.onStart        = onStart;          // () => void — déclenche le début du jeu local
+
+        this.action_queue   = [];
+        this.opponentGrid   = this._emptyGrid();
+        this.opponentScore  = 0;
+        this.roomCode       = null;
+        this.isReady        = false;
+
+        this._bindSocketEvents();
+    }
+
+    // ─── Connexion ────────────────────────────
+
+    join(roomCode) {
+        this.roomCode = roomCode;
+        this.socket.emit('tetris:join', { roomCode });
+    }
+
+    startDuel() {
+        if (!this.isReady) return;
+        this.socket.emit('tetris:start-duel');
+    }
+
+    leave() {
+        if (!this.roomCode) return;
+        this.socket.emit('tetris:leave');
+        this.roomCode  = null;
+        this.isReady   = false;
+        this.opponentGrid = this._emptyGrid();
+        this.opponentScore = 0;
+    }
+
+    // ─── Hooks appelés par tetris.js ──────────
+
+    onLocalBlockPlaced(grid, score) {
+        if (!this.isReady) return;
+        this.socket.emit('tetris:grid-update', { grid, score });
+    }
+
+    onLocalLinesCleared(count, holeCol) {
+        if (!this.isReady) return;
+        const garbageLines = [];
+        for (let i = 0; i < count; i++)
+            garbageLines.push(this._buildGarbageLine(holeCol));
+        this.socket.emit('tetris:lines-cleared', { count, holeCol, garbageLines });
+    }
+
+    onLocalGameOver(score, validBlock) {
+        if (!this.isReady) return;
+        this.socket.emit('tetris:game-over', { score, validBlock });
+        this.endDuel();
+    }
+
+    endDuel() {
+        this.isReady      = false;
+        this.action_queue = [];
+        if (this.tetrisGame.isRunning) this.tetrisGame.stop();
+    }
+
+    // ─── Traitement de la queue ───────────────
+
+    synchronize_game() {
+        while (this.action_queue.length > 0) {
+            const action = this.action_queue.shift();
+            this._processAction(action);
+        }
+    }
+
+    _processAction(action) {
+        switch (action.type) {
+            case 'GRID_UPDATE':
+                this.opponentGrid  = action.grid;
+                this.opponentScore = action.score;
+                document.getElementById('opponent-score').textContent = action.score;
+                renderOpponent(this.opponentGrid);
+                break;
+
+            case 'LINES_CLEARED':
+                this.tetrisGame.addGarbageLines(action.garbageLines);
+                break;
+
+            case 'OPPONENT_GAME_OVER':
+                showOverlay('YOU WIN', action.score);
+                this.endDuel();
+                break;
+        }
+    }
+
+    // ─── Liaison socket ───────────────────────
+
+    _bindSocketEvents() {
+        this.socket.on('tetris:room-status', (data) => {
+            this.isReady = data.status === 'ready';
+            const opponentName = data.players.find(p => p !== this.socket.username) || 'Adversaire';
+            document.getElementById('opponent-name').textContent = opponentName;
+            this.onStatusChange(data.status, opponentName);
+        });
+
+        this.socket.on('tetris:opponent-joined', (data) => {
+            document.getElementById('opponent-name').textContent = data.username;
+        });
+
+        this.socket.on('tetris:opponent-left', () => {
+            this.isReady = false;
+            this.onStatusChange('waiting', null);
+            this._showOpponentOverlay('DÉCONNECTÉ');
+        });
+
+        this.socket.on('tetris:grid-update', (data) => {
+            this.action_queue.push({ type: 'GRID_UPDATE', grid: data.grid, score: data.score });
+        });
+
+        this.socket.on('tetris:lines-cleared', (data) => {
+            this.action_queue.push({ type: 'LINES_CLEARED', garbageLines: data.garbageLines });
+        });
+
+        this.socket.on('tetris:opponent-game-over', (data) => {
+            this.action_queue.push({ type: 'OPPONENT_GAME_OVER', score: data.score, validBlock: data.validBlock });
+        });
+
+        this.socket.on('tetris:start-duel', () => {
+            if (this.onStart) this.onStart();
+        });
+
+        this.socket.on('tetris:pause', () => {
+            this.tetrisGame.pause();
+            updateButtons();
+            if (this.tetrisGame.isPaused) showOverlay('PAUSE');
+            else hideOverlay();
+        });
+
+        this.socket.on('tetris:stop', () => {
+            this.tetrisGame.stop();
+            updateButtons();
+            render();
+            showOverlay('STOPPED');
+        });
+
+        this.socket.on('tetris:settings', (data) => {
+            document.getElementById('input-ttd').value        = data.timeToDown;
+            document.getElementById('input-hardening').value  = data.hardening;
+            document.getElementById('input-decrement').value  = data.decrementTTD;
+            this.tetrisGame.configure(data);
+        });
+    }
+
+    togglePause() {
+        if (!this.isReady) return;
+        this.socket.emit('tetris:pause');
+    }
+
+    stop() {
+        if (!this.isReady) return;
+        this.socket.emit('tetris:stop');
+    }
+
+    syncSettings(settings) {
+        if (!this.isReady) return;
+        this.socket.emit('tetris:settings', settings);
+    }
+
+    // ─── Utilitaires ─────────────────────────
+
+    _buildGarbageLine(holeCol) {
+        return Array.from({ length: 10 }, (_, i) => i === holeCol ? 0 : 8);
+    }
+
+    _emptyGrid() {
+        return Array.from({ length: 20 }, () => Array(10).fill(0));
+    }
+
+    _showOpponentOverlay(title, score) {
+        const overlayEl = document.getElementById('overlay-opponent');
+        document.getElementById('overlay-opponent-title').textContent = title;
+        const scoreEl = document.getElementById('overlay-opponent-score');
+        if (scoreEl) scoreEl.textContent = score !== undefined ? `Score : ${score}` : '';
+        overlayEl.classList.add('visible');
+    }
+
+    hideOpponentOverlay() {
+        document.getElementById('overlay-opponent').classList.remove('visible');
+    }
+}

Transcendence/srcs/frontend/src/index.html

@@ -22,6 +22,8 @@
 		<nav class="game" aria-label="Game">
 			<button class="game__item" data-action="new_game" aria-label="Start new game"
 			onclick="window.location.href='game.html'">Start new game</button>
+			<button class="game__item" data-action="tetris" aria-label="Tetris"
+			onclick="window.location.href='tetris.html'">Tetris</button>
 		</nav>
 		
 		<script type="module" src="app.js"></script>

Transcendence/srcs/frontend/src/pieces.js

@@ -0,0 +1,99 @@
+// ─────────────────────────────────────────────
+// PIÈCES
+// ─────────────────────────────────────────────
+
+class Piece {
+    constructor(startX, startY) {
+        this.position = { x: startX, y: startY };
+        this.currentRotation = 0;
+        this.rotations = this.defineRotations();
+        this.shape = this.rotations[0];
+        this.color = this.getColor();
+    }
+    defineRotations() { return [[[1]]]; }
+    getColor()        { return 1; }
+    getPosition()     { return { ...this.position }; }
+    getShape()        { return this.shape; }
+    moveDown()        { this.position.y++; }
+    moveLeft()        { this.position.x--; }
+    moveRight()       { this.position.x++; }
+    rotateLeft() {
+        this.currentRotation = (this.currentRotation - 1 + this.rotations.length) % this.rotations.length;
+        this.shape = this.rotations[this.currentRotation];
+    }
+    rotateRight() {
+        this.currentRotation = (this.currentRotation + 1) % this.rotations.length;
+        this.shape = this.rotations[this.currentRotation];
+    }
+}
+
+class PieceT extends Piece {
+    defineRotations() {
+        return [
+            [[0,1,0],[1,1,1],[0,0,0]],
+            [[0,1,0],[0,1,1],[0,1,0]],
+            [[0,0,0],[1,1,1],[0,1,0]],
+            [[0,1,0],[1,1,0],[0,1,0]]
+        ];
+    }
+    getColor() { return 1; }
+}
+
+class PieceL extends Piece {
+    defineRotations() {
+        return [
+            [[0,0,1],[1,1,1],[0,0,0]],
+            [[0,1,0],[0,1,0],[0,1,1]],
+            [[0,0,0],[1,1,1],[1,0,0]],
+            [[1,1,0],[0,1,0],[0,1,0]]
+        ];
+    }
+    getColor() { return 2; }
+}
+
+class PieceReverseL extends Piece {
+    defineRotations() {
+        return [
+            [[1,0,0],[1,1,1],[0,0,0]],
+            [[0,1,1],[0,1,0],[0,1,0]],
+            [[0,0,0],[1,1,1],[0,0,1]],
+            [[0,1,0],[0,1,0],[1,1,0]]
+        ];
+    }
+    getColor() { return 3; }
+}
+
+class PieceI extends Piece {
+    defineRotations() {
+        return [
+            [[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]],
+            [[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0]]
+        ];
+    }
+    getColor() { return 4; }
+}
+
+class PieceZ extends Piece {
+    defineRotations() {
+        return [
+            [[1,1,0],[0,1,1],[0,0,0]],
+            [[0,0,1],[0,1,1],[0,1,0]]
+        ];
+    }
+    getColor() { return 5; }
+}
+
+class PieceReverseZ extends Piece {
+    defineRotations() {
+        return [
+            [[0,1,1],[1,1,0],[0,0,0]],
+            [[0,1,0],[0,1,1],[0,0,1]]
+        ];
+    }
+    getColor() { return 6; }
+}
+
+class PieceO extends Piece {
+    defineRotations() { return [[[1,1],[1,1]]]; }
+    getColor() { return 7; }
+}

Transcendence/srcs/frontend/src/renderer.js

@@ -0,0 +1,126 @@
+// ─────────────────────────────────────────────
+// RENDU
+// ─────────────────────────────────────────────
+
+const CELL   = 30;
+const COLORS = ['#070712','#a855f7','#f97316','#3b82f6','#06b6d4','#ef4444','#22c55e','#eab308','#555577'];
+
+const ctxMain     = document.getElementById('canvas-main').getContext('2d');
+const ctxNext     = document.getElementById('canvas-next').getContext('2d');
+const ctxHold     = document.getElementById('canvas-hold').getContext('2d');
+const ctxOpponent = document.getElementById('canvas-opponent').getContext('2d');
+
+function drawCell(ctx, x, y, colorIndex, size) {
+    const p = 1;
+    ctx.fillStyle = COLORS[colorIndex];
+    ctx.fillRect(x * size + p, y * size + p, size - p * 2, size - p * 2);
+    // Highlight
+    ctx.fillStyle = 'rgba(255,255,255,0.25)';
+    ctx.fillRect(x * size + p, y * size + p, size - p * 2, 3);
+    ctx.fillRect(x * size + p, y * size + p, 3, size - p * 2);
+    // Ombre
+    ctx.fillStyle = 'rgba(0,0,0,0.35)';
+    ctx.fillRect(x * size + p, (y + 1) * size - p - 3, size - p * 2, 3);
+    ctx.fillRect((x + 1) * size - p - 3, y * size + p, 3, size - p * 2);
+}
+
+function clearCanvas(ctx, w, h) {
+    ctx.fillStyle = '#070712';
+    ctx.fillRect(0, 0, w, h);
+}
+
+function drawGridLines(ctx, cols, rows, size) {
+    ctx.strokeStyle = 'rgba(255,255,255,0.04)';
+    ctx.lineWidth   = 1;
+    for (let x = 0; x <= cols; x++) {
+        ctx.beginPath(); ctx.moveTo(x * size, 0); ctx.lineTo(x * size, rows * size); ctx.stroke();
+    }
+    for (let y = 0; y <= rows; y++) {
+        ctx.beginPath(); ctx.moveTo(0, y * size); ctx.lineTo(cols * size, y * size); ctx.stroke();
+    }
+}
+
+function drawGhost(ctx, piece, grid) {
+    if (!piece) return;
+    const ghost = { x: piece.getPosition().x, y: piece.getPosition().y };
+    const shape = piece.getShape();
+
+    while (true) {
+        ghost.y++;
+        let valid = true;
+        for (let row = 0; row < shape.length && valid; row++)
+            for (let col = 0; col < shape[row].length && valid; col++)
+                if (shape[row][col] !== 0) {
+                    const ny = ghost.y + row;
+                    const nx = ghost.x + col;
+                    if (ny < 0 || ny >= grid.length || nx < 0 || nx >= grid[ny].length || grid[ny][nx] !== 0) valid = false;
+                }
+        if (!valid) { ghost.y--; break; }
+    }
+
+    if (ghost.y === piece.getPosition().y) return;
+
+    ctx.strokeStyle = 'rgba(255,255,255,0.15)';
+    ctx.lineWidth   = 1;
+    for (let row = 0; row < shape.length; row++)
+        for (let col = 0; col < shape[row].length; col++)
+            if (shape[row][col] !== 0)
+                ctx.strokeRect(
+                    (ghost.x + col) * CELL + 2,
+                    (ghost.y + row) * CELL + 2,
+                    CELL - 4, CELL - 4
+                );
+}
+
+function drawMiniPiece(ctx, piece, canvasW, canvasH) {
+    clearCanvas(ctx, canvasW, canvasH);
+    if (!piece) return;
+    const shape   = piece.getShape();
+    const color   = piece.getColor();
+    const s       = 20;
+    const offsetX = Math.floor((canvasW / s - shape[0].length) / 2);
+    const offsetY = Math.floor((canvasH / s - shape.length) / 2);
+    for (let row = 0; row < shape.length; row++)
+        for (let col = 0; col < shape[row].length; col++)
+            if (shape[row][col] !== 0)
+                drawCell(ctx, offsetX + col, offsetY + row, color, s);
+}
+
+function render() {
+    // Grille principale
+    clearCanvas(ctxMain, 300, 600);
+    drawGridLines(ctxMain, 10, 20, CELL);
+
+    for (let y = 0; y < game.grid.length; y++)
+        for (let x = 0; x < game.grid[y].length; x++)
+            if (game.grid[y][x] !== 0)
+                drawCell(ctxMain, x, y, game.grid[y][x], CELL);
+
+    // Ghost + pièce courante
+    if (game.currentPiece) {
+        drawGhost(ctxMain, game.currentPiece, game.grid);
+        const { x, y } = game.currentPiece.getPosition();
+        const shape     = game.currentPiece.getShape();
+        const color     = game.currentPiece.getColor();
+        for (let row = 0; row < shape.length; row++)
+            for (let col = 0; col < shape[row].length; col++)
+                if (shape[row][col] !== 0)
+                    drawCell(ctxMain, x + col, y + row, color, CELL);
+    }
+
+    // Panneaux miniatures
+    drawMiniPiece(ctxNext, game.nextPiece,   100, 80);
+    drawMiniPiece(ctxHold, game.storedPiece, 100, 80);
+
+    // Score
+    document.getElementById('score-display').textContent = game.score;
+}
+
+function renderOpponent(opponentGrid) {
+    clearCanvas(ctxOpponent, 300, 600);
+    drawGridLines(ctxOpponent, 10, 20, CELL);
+    for (let y = 0; y < opponentGrid.length; y++)
+        for (let x = 0; x < opponentGrid[y].length; x++)
+            if (opponentGrid[y][x] !== 0)
+                drawCell(ctxOpponent, x, y, opponentGrid[y][x], CELL);
+}

Transcendence/srcs/frontend/src/tetris.css

@@ -0,0 +1,385 @@
+:root {
+    --bg:     #070712;
+    --panel:  #0d0d1f;
+    --border: #1a1a3e;
+    --accent: #00ffe7;
+    --accent2:#ff00aa;
+    --dim:    #3a3a6a;
+    --text:   #c0c0e0;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+    background: var(--bg);
+    font-family: 'Share Tech Mono', monospace;
+    color: var(--text);
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background-image:
+        linear-gradient(rgba(0,255,231,0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(0,255,231,0.03) 1px, transparent 1px);
+    background-size: 40px 40px;
+    pointer-events: none;
+    z-index: 0;
+}
+
+h1 {
+    font-family: 'Orbitron', monospace;
+    font-weight: 900;
+    font-size: 2.2rem;
+    letter-spacing: 0.4em;
+    color: var(--accent);
+    text-shadow: 0 0 20px var(--accent), 0 0 40px var(--accent);
+    margin-bottom: 20px;
+    position: relative;
+    z-index: 1;
+}
+
+/* ── Zone de jeu globale ── */
+#game-area {
+    display: flex;
+    gap: 32px;
+    align-items: flex-start;
+    position: relative;
+    z-index: 1;
+}
+
+/* ── Section locale ── */
+#local-section {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+#app {
+    display: flex;
+    gap: 16px;
+    align-items: flex-start;
+}
+
+/* ── Section adversaire ── */
+#opponent-section {
+    display: none;   /* masqué jusqu'à connexion duel */
+    gap: 16px;
+    align-items: flex-start;
+}
+#opponent-section.visible {
+    display: flex;
+}
+
+.opponent-info-panel {
+    width: 130px;
+}
+
+/* ── Panneaux ── */
+.panel {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 14px;
+    width: 130px;
+    box-shadow: 0 0 20px rgba(0,255,231,0.05);
+}
+
+.panel-title {
+    font-family: 'Orbitron', monospace;
+    font-size: 0.6rem;
+    letter-spacing: 0.2em;
+    color: var(--accent);
+    text-transform: uppercase;
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+canvas { display: block; border-radius: 4px; }
+
+#canvas-main {
+    border: 1px solid var(--border);
+    box-shadow: 0 0 30px rgba(0,255,231,0.08), inset 0 0 30px rgba(0,0,0,0.5);
+}
+
+#canvas-next, #canvas-hold {
+    border: 1px solid var(--border);
+    margin: 0 auto;
+}
+
+/* ── Canvas adversaire ── */
+#canvas-opponent {
+    border: 1px solid var(--accent2);
+    box-shadow: 0 0 30px rgba(255,0,170,0.08), inset 0 0 30px rgba(0,0,0,0.5);
+}
+
+/* ── Score ── */
+.score-block {
+    margin-top: 14px;
+    text-align: center;
+}
+
+.score-label {
+    font-size: 0.55rem;
+    letter-spacing: 0.2em;
+    color: var(--dim);
+    text-transform: uppercase;
+    margin-bottom: 4px;
+}
+
+.score-value {
+    font-family: 'Orbitron', monospace;
+    font-size: 1.4rem;
+    font-weight: 700;
+    color: var(--accent);
+    text-shadow: 0 0 10px var(--accent);
+}
+
+/* ── Boutons ── */
+.btn-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-top: 14px;
+}
+
+button {
+    font-family: 'Orbitron', monospace;
+    font-size: 0.55rem;
+    letter-spacing: 0.15em;
+    font-weight: 700;
+    text-transform: uppercase;
+    padding: 10px 8px;
+    border: 1px solid;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s;
+    background: transparent;
+    width: 100%;
+}
+
+#btn-start  { 
+    color: var(--accent);  
+    border-color: var(--accent); 
+}
+
+#btn-start:hover:not(:disabled)  
+{
+    background: var(--accent);  
+    color: var(--bg); 
+    box-shadow: 0 0 15px var(--accent); 
+}
+
+#btn-restart {
+    color: var(--accent2);  
+    border-color: var(--accent2);
+}
+
+#btn-restart:hover:not(:disabled){
+    background: var(--accent2);  
+    color: var(--bg); 
+    box-shadow: 0 0 15px var(--accent2); 
+}
+
+#btn-pause  {
+     color: var(--accent2); 
+     border-color: var(--accent2); 
+}
+#btn-pause:hover:not(:disabled)  {
+    background: var(--accent2);
+    color: var(--bg); box-shadow: 0 0 15px var(--accent2);
+}
+
+#btn-stop   { color: #ef4444;        border-color: #ef4444; }
+#btn-stop:hover:not(:disabled)   { background: #ef4444;        color: var(--bg); box-shadow: 0 0 15px #ef4444; }
+
+button:disabled { opacity: 0.3; cursor: not-allowed; }
+
+/* ── Contrôles ── */
+.controls-list {
+    margin-top: 14px;
+    font-size: 0.6rem;
+    line-height: 2;
+    color: var(--dim);
+}
+.controls-list span { color: var(--text); }
+
+/* ── Overlays ── */
+#main-wrapper,
+#opponent-wrapper { position: relative; }
+
+#overlay,
+#overlay-opponent {
+    display: none;
+    position: absolute;
+    top: 0; left: 0;
+    width: 300px;
+    height: 600px;
+    background: rgba(7,7,18,0.88);
+    border-radius: 4px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    z-index: 10;
+    pointer-events: none;
+}
+#overlay.visible,
+#overlay-opponent.visible { display: flex; }
+
+#overlay-title {
+    font-family: 'Orbitron', monospace;
+    font-size: 1.4rem;
+    font-weight: 900;
+    letter-spacing: 0.2em;
+    color: var(--accent2);
+    text-shadow: 0 0 20px var(--accent2);
+}
+
+#overlay-score {
+    font-family: 'Orbitron', monospace;
+    font-size: 0.9rem;
+    color: var(--accent);
+}
+
+#overlay-opponent-title {
+    font-family: 'Orbitron', monospace;
+    font-size: 1.4rem;
+    font-weight: 900;
+    letter-spacing: 0.2em;
+    color: var(--accent);
+    text-shadow: 0 0 20px var(--accent);
+}
+
+#overlay-opponent-score {
+    font-family: 'Orbitron', monospace;
+    font-size: 0.9rem;
+    color: var(--accent2);
+}
+
+/* ── Panneau duel ── */
+#duel-panel {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 12px 20px;
+    margin-bottom: 14px;
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    box-shadow: 0 0 20px rgba(255,0,170,0.04);
+}
+
+.duel-row {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+#input-room-code {
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    color: var(--accent2);
+    font-family: 'Orbitron', monospace;
+    font-size: 0.7rem;
+    letter-spacing: 0.15em;
+    padding: 6px 10px;
+    width: 120px;
+    text-transform: uppercase;
+    outline: none;
+    transition: border-color 0.2s;
+}
+#input-room-code:focus {
+    border-color: var(--accent2);
+    box-shadow: 0 0 8px rgba(255,0,170,0.2);
+}
+
+#btn-join-duel  { color: var(--accent2); border-color: var(--accent2); width: auto; padding: 6px 14px; }
+#btn-join-duel:hover:not(:disabled) { background: var(--accent2); color: var(--bg); box-shadow: 0 0 12px var(--accent2); }
+
+#btn-leave-duel { color: #ef4444; border-color: #ef4444; width: auto; padding: 6px 14px; }
+#btn-leave-duel:hover:not(:disabled) { background: #ef4444; color: var(--bg); box-shadow: 0 0 12px #ef4444; }
+
+#duel-status {
+    font-size: 0.6rem;
+    letter-spacing: 0.1em;
+    color: var(--dim);
+    min-width: 120px;
+}
+#duel-status.waiting { color: #f97316; }
+#duel-status.ready   { color: var(--accent); }
+
+/* ── Colonne gauche (panel + settings empilés) ── */
+#left-column {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    width: 130px;
+    flex-shrink: 0;
+}
+
+/* ── Settings Panel ── */
+#settings-panel {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 14px;
+    box-shadow: 0 0 20px rgba(0,255,231,0.05);
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 130px;
+}
+
+.settings-title {
+    font-family: 'Orbitron', monospace;
+    font-size: 0.6rem;
+    letter-spacing: 0.2em;
+    color: var(--accent);
+    text-transform: uppercase;
+    text-align: center;
+    margin-bottom: 4px;
+}
+
+.settings-row {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 0.55rem;
+    color: var(--dim);
+    letter-spacing: 0.05em;
+}
+
+#settings-panel input[type="number"] {
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    color: var(--accent);
+    font-family: 'Orbitron', monospace;
+    font-size: 0.65rem;
+    padding: 4px 8px;
+    width: 100%;
+    text-align: right;
+    outline: none;
+    transition: border-color 0.2s;
+}
+
+#settings-panel input[type="number"]:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 8px rgba(0,255,231,0.2);
+}
+
+#settings-panel input[type="number"]:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+}

Transcendence/srcs/frontend/src/tetris.html

@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TETRIS</title>
+    <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="tetris.css">
+</head>
+<body>
+
+<h1>TETRIS</h1>
+
+<!-- Panneau de connexion duel -->
+<div id="duel-panel">
+    <span class="settings-title">Duel</span>
+    <div class="duel-row">
+        <input id="input-room-code" placeholder="Code de salle" maxlength="8" spellcheck="false">
+        <button id="btn-join-duel">Rejoindre</button>
+        <button id="btn-leave-duel" disabled>Quitter</button>
+    </div>
+    <div id="duel-status">—</div>
+</div>
+
+<div id="game-area">
+
+    <!-- ── JOUEUR LOCAL ── -->
+    <div id="local-section">
+        <div id="app">
+
+            <!-- Colonne gauche : Hold + Score + Boutons + Settings -->
+            <div id="left-column">
+                <div class="panel">
+                    <div class="panel-title">Hold</div>
+                    <canvas id="canvas-hold" width="100" height="80"></canvas>
+
+                    <div class="score-block">
+                        <div class="score-label">Score</div>
+                        <div class="score-value" id="score-display">0</div>
+                    </div>
+
+                    <div class="btn-group">
+                        <button id="btn-start">Start</button>
+                        <button id="btn-pause" disabled>Pause</button>
+                        <button id="btn-stop"  disabled>Stop</button>
+                    </div>
+                </div>
+
+                <!-- Panneau de configuration -->
+                <div id="settings-panel">
+                    <div class="settings-title">Paramètres</div>
+                    <div class="settings-row">
+                        <label for="input-ttd">Vitesse initiale (ms)</label>
+                        <input type="number" id="input-ttd" min="100" max="3000" step="50" value="1000">
+                    </div>
+                    <div class="settings-row">
+                        <label for="input-hardening">Points avant accélération</label>
+                        <input type="number" id="input-hardening" min="100" max="5000" step="100" value="1000">
+                    </div>
+                    <div class="settings-row">
+                        <label for="input-decrement">Réduction vitesse (ms)</label>
+                        <input type="number" id="input-decrement" min="10" max="500" step="10" value="100">
+                    </div>
+                </div>
+            </div>
+
+            <!-- Grille principale -->
+            <div id="main-wrapper">
+                <canvas id="canvas-main" width="300" height="600"></canvas>
+                <div id="overlay">
+                    <div id="overlay-title">GAME OVER</div>
+                    <div id="overlay-score"></div>
+                </div>
+            </div>
+
+            <!-- Panneau droit : Next + Contrôles -->
+            <div class="panel">
+                <div class="panel-title">Next</div>
+                <canvas id="canvas-next" width="100" height="80"></canvas>
+
+                <div class="controls-list">
+                    <div><span>← →</span> Déplacer</div>
+                    <div><span>↓</span> Descendre</div>
+                    <div><span>Q</span> Rot. gauche</div>
+                    <div><span>W</span> Rot. droite</div>
+                    <div><span>Espace</span> Drop</div>
+                    <div><span>C</span> Hold</div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+
+    <!-- ── JOUEUR ADVERSAIRE ── -->
+    <div id="opponent-section">
+        <div class="panel opponent-info-panel">
+            <div class="panel-title" id="opponent-name">Adversaire</div>
+            <div class="score-block">
+                <div class="score-label">Score</div>
+                <div class="score-value" id="opponent-score">—</div>
+            </div>
+        </div>
+
+        <div id="opponent-wrapper">
+            <canvas id="canvas-opponent" width="300" height="600"></canvas>
+            <div id="overlay-opponent">
+                <div id="overlay-opponent-title"></div>
+                <div id="overlay-opponent-score"></div>
+            </div>
+        </div>
+    </div>
+
+</div>
+
+
+<script src="/socket.io/socket.io.js"></script>
+<script src="pieces.js"></script>
+<script src="tetris.js"></script>
+<script src="renderer.js"></script>
+<script src="duel.js"></script>
+<script src="ui.js"></script>
+</body>
+</html>

Transcendence/srcs/frontend/src/tetris.js

@@ -0,0 +1,398 @@
+// ─────────────────────────────────────────────
+// LOGIQUE TETRIS
+// ───────────────────────────────────────────
+
+class Tetris {
+    constructor(onRender, onGameOver, onBlockPlaced = null, onLinesCleared = null) {
+        this.onRender       = onRender;
+        this.onGameOver     = onGameOver;
+        this.onBlockPlaced  = onBlockPlaced;
+        this.onLinesCleared = onLinesCleared;
+
+        this.grid         = this._createGrid(10, 20);
+        this.bufferGrid   = this._createGrid(10, 5);
+        this.currentPiece = null;
+        this.storedPiece  = null;
+        this.nextPiece    = null;
+
+        this.score            = 0;
+        this.initialTimeToDown = 1000;
+        this.timeToDown       = 1000;
+        this.hardening        = 1000;
+        this.count            = 0;
+        this.decrementTTD     = 100;
+
+        this.lastLandingCol = 4;
+
+        this.isRunning = false;
+        this.isPaused  = false;
+        this.canStore  = true;
+
+        this.animationFrameId = null;
+        this.lastTime         = 0;
+        this.accumulator      = 0;
+
+        this._keyHandler = this._handleKey.bind(this);
+    }
+
+    configure({ timeToDown, hardening, decrementTTD }) {
+        if (timeToDown   !== undefined) this.initialTimeToDown = this.timeToDown = timeToDown;
+        if (hardening    !== undefined) this.hardening    = hardening;
+        if (decrementTTD !== undefined) this.decrementTTD = decrementTTD;
+    }
+
+    _createGrid(w, h) {
+        return Array.from({ length: h }, () => Array(w).fill(0));
+    }
+
+    start() {
+        if (this.isRunning) return;
+        this.isRunning  = true;
+        this.isPaused   = false;
+        this.grid       = this._createGrid(10, 20);
+        this.score      = 0;
+        this.count      = 0;
+        this.timeToDown = this.initialTimeToDown;
+        this.storedPiece = null;
+        this.canStore    = true;
+        this._spawnNewPiece();
+        document.addEventListener('keydown', this._keyHandler);
+        this._startGameLoop();
+    }
+
+    stop() {
+        this.isRunning = false;
+        this.isPaused  = false;
+        if (this.animationFrameId !== null) {
+            cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = null;
+        }
+        this.accumulator = 0;
+        this.lastTime    = 0;
+        document.removeEventListener('keydown', this._keyHandler);
+    }
+
+    restart() {
+        this.stop();
+        this.start();
+    }
+
+    pause() {
+        if (!this.isRunning) return;
+        this.isPaused = !this.isPaused;
+        if (!this.isPaused) {
+            this.lastTime = 0;
+            this._startGameLoop();
+        }
+    }
+
+    _startGameLoop() {
+        this.lastTime    = 0;
+        this.accumulator = 0;
+
+        const gameLoop = (currentTime) => {
+            if (!this.isRunning) return;
+
+            if (this.isPaused) {
+                this.animationFrameId = requestAnimationFrame(gameLoop);
+                return;
+            }
+
+            if (this.lastTime === 0) {
+                this.lastTime = currentTime;
+                this.animationFrameId = requestAnimationFrame(gameLoop);
+                return;
+            }
+
+            const deltaTime = currentTime - this.lastTime;
+            this.lastTime = currentTime;
+            this.accumulator += deltaTime;
+
+            while (this.isRunning && this.accumulator >= this.timeToDown) {
+                this._tick();
+                this.accumulator -= this.timeToDown;
+                if (this.accumulator > this.timeToDown * 3) {
+                    this.accumulator = 0;
+                    break;
+                }
+            }
+
+            this.onRender();
+            this.animationFrameId = requestAnimationFrame(gameLoop);
+        };
+
+        this.animationFrameId = requestAnimationFrame(gameLoop);
+    }
+
+    _tick() {
+        if (!this.currentPiece) return;
+        if (this._canMoveDown()) {
+            this.currentPiece.moveDown();
+        } else {
+            this._lockPiece();
+            this.verifierLignes();
+            this._makeHarder();
+            this._spawnNewPiece();
+            this.canStore = true;
+            if (!this._canSpawn()) this._gameOver(true);
+        }
+    }
+
+    _handleKey(e) {
+        if (!this.isRunning || !this.currentPiece) return;
+
+        switch (e.key) {
+            case 'ArrowLeft':
+                e.preventDefault();
+                if (!this.isPaused && this._canMoveLeft())  this.currentPiece.moveLeft();
+                break;
+            case 'ArrowRight':
+                e.preventDefault();
+                if (!this.isPaused && this._canMoveRight()) this.currentPiece.moveRight();
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                if (!this.isPaused && this._canMoveDown()) {
+                    this.currentPiece.moveDown();
+                    this.score += 1;
+                    this.accumulator = 0;
+                }
+                break;
+            case ' ':
+                e.preventDefault();
+                if (!this.isPaused) this._hardDrop();
+                break;
+            case 'q': case 'Q':
+                e.preventDefault();
+                if (!this.isPaused) this._rotatePiece(-1);
+                break;
+            case 'w': case 'W':
+                e.preventDefault();
+                if (!this.isPaused) this._rotatePiece(1);
+                break;
+            case 'c': case 'C':
+                e.preventDefault();
+                if (!this.isPaused) this._storePiece();
+                break;
+        }
+
+        this.onRender();
+    }
+
+    _hardDrop() {
+        if (!this.currentPiece) return;
+        let dist = 0;
+        while (this._canMoveDown()) { this.currentPiece.moveDown(); dist++; }
+        this.score += dist * 2;
+        this._lockPiece();
+        this.verifierLignes();
+        this._makeHarder();
+        this._spawnNewPiece();
+        this.canStore    = true;
+        this.accumulator = 0;
+        if (!this._canSpawn()) this._gameOver(true);
+    }
+
+    _rotatePiece(direction) {
+        if (!this.currentPiece) return;
+        const originalPos = { ...this.currentPiece.getPosition() };
+
+        if (direction === -1) this.currentPiece.rotateLeft();
+        else                  this.currentPiece.rotateRight();
+
+        if (!this._isValidPosition()) {
+            this.currentPiece.moveRight();
+            if (this._isValidPosition()) return;
+
+            this.currentPiece.moveLeft();
+            this.currentPiece.moveLeft();
+            if (this._isValidPosition()) return;
+
+            this.currentPiece.moveLeft();
+            if (this._isValidPosition()) return;
+
+            this.currentPiece.moveRight();
+            this.currentPiece.moveRight();
+            this.currentPiece.position.y--;
+            if (this._isValidPosition()) return;
+
+            this.currentPiece.position.y = originalPos.y;
+            this.currentPiece.position.x = originalPos.x;
+            if (direction === -1) this.currentPiece.rotateRight();
+            else                  this.currentPiece.rotateLeft();
+        }
+    }
+
+    _storePiece() {
+        if (!this.canStore || !this.currentPiece) return;
+
+        if (this.storedPiece === null) {
+            this.storedPiece = this.currentPiece;
+            this._spawnNewPiece();
+        } else {
+            const temp        = this.storedPiece;
+            this.storedPiece  = this.currentPiece;
+            this.currentPiece = temp;
+            this.currentPiece.position.x = 3;
+            this.currentPiece.position.y = 0;
+        }
+        this.canStore    = false;
+        this.accumulator = 0;
+    }
+
+    _spawnNewPiece() {
+        this.currentPiece = this.nextPiece || this._createRandomPiece();
+        this.nextPiece    = this._createRandomPiece();
+        this._updateBufferGrid();
+    }
+
+    _createRandomPiece() {
+        const types = [PieceT, PieceL, PieceReverseL, PieceI, PieceZ, PieceReverseZ, PieceO];
+        return new types[Math.floor(Math.random() * types.length)](3, 0);
+    }
+
+    _updateBufferGrid() {
+        this.bufferGrid = this._createGrid(10, 5);
+        if (!this.nextPiece) return;
+        const shape   = this.nextPiece.getShape();
+        const offsetX = Math.floor((10 - shape[0].length) / 2);
+        for (let y = 0; y < shape.length; y++)
+            for (let x = 0; x < shape[y].length; x++)
+                if (shape[y][x] !== 0)
+                    this.bufferGrid[y + 1][x + offsetX] = this.nextPiece.getColor();
+    }
+
+    verifierLignes() {
+        let cleared = 0;
+        for (let y = this.grid.length - 1; y >= 0; y--) {
+            if (this.grid[y].every(c => c !== 0)) {
+                this.grid.splice(y, 1);
+                this.grid.unshift(Array(10).fill(0));
+                cleared++;
+                y++;
+            }
+        }
+        const points = [0, 100, 300, 500, 800];
+        this.score += points[cleared];
+        this.count += points[cleared];
+        if (this.onLinesCleared && cleared > 0)
+            this.onLinesCleared(cleared, this.lastLandingCol);
+    }
+
+    _makeHarder() {
+        if (this.count >= this.hardening) {
+            this.count = 0;
+            this.timeToDown = Math.max(100, this.timeToDown - this.decrementTTD);
+        }
+    }
+
+    _canMoveDown() {
+        if (!this.currentPiece) return false;
+        const { x, y } = this.currentPiece.getPosition();
+        const shape    = this.currentPiece.getShape();
+        for (let row = 0; row < shape.length; row++)
+            for (let col = 0; col < shape[row].length; col++)
+                if (shape[row][col] !== 0) {
+                    const ny = y + row + 1;
+                    const nx = x + col;
+                    if (ny < 0) continue; // encore au-dessus de la grille
+                    if (ny >= this.grid.length || this.grid[ny][nx] !== 0) return false;
+                }
+        return true;
+    }
+
+    _canMoveLeft() {
+        if (!this.currentPiece) return false;
+        const { x, y } = this.currentPiece.getPosition();
+        const shape    = this.currentPiece.getShape();
+        for (let row = 0; row < shape.length; row++)
+            for (let col = 0; col < shape[row].length; col++)
+                if (shape[row][col] !== 0) {
+                    if (y + row < 0) continue; // au-dessus de la grille
+                    const nx = x + col - 1;
+                    if (nx < 0 || this.grid[y + row][nx] !== 0) return false;
+                }
+        return true;
+    }
+
+    _canMoveRight() {
+        if (!this.currentPiece) return false;
+        const { x, y } = this.currentPiece.getPosition();
+        const shape    = this.currentPiece.getShape();
+        for (let row = 0; row < shape.length; row++)
+            for (let col = 0; col < shape[row].length; col++)
+                if (shape[row][col] !== 0) {
+                    if (y + row < 0) continue; // au-dessus de la grille
+                    const nx = x + col + 1;
+                    if (nx >= this.grid[0].length || this.grid[y + row][nx] !== 0) return false;
+                }
+        return true;
+    }
+
+    _isValidPosition() {
+        if (!this.currentPiece) return false;
+        const { x, y } = this.currentPiece.getPosition();
+        const shape    = this.currentPiece.getShape();
+        for (let row = 0; row < shape.length; row++)
+            for (let col = 0; col < shape[row].length; col++)
+                if (shape[row][col] !== 0) {
+                    const gx = x + col;
+                    const gy = y + row;
+                    if (gx < 0 || gx >= this.grid[0].length ||
+                        gy < 0 || gy >= this.grid.length ||
+                        this.grid[gy][gx] !== 0) return false;
+                }
+        return true;
+    }
+
+    _canSpawn()  { return this._isValidPosition(); }
+
+    _lockPiece() {
+        if (!this.currentPiece) return;
+        const { x, y } = this.currentPiece.getPosition();
+        const shape    = this.currentPiece.getShape();
+        const color    = this.currentPiece.getColor();
+        for (let row = 0; row < shape.length; row++)
+            for (let col = 0; col < shape[row].length; col++)
+                if (shape[row][col] !== 0 && y + row >= 0)
+                    this.grid[y + row][x + col] = color;
+        this.lastLandingCol = x + Math.floor(shape[0].length / 2);
+        if (this.onBlockPlaced) this.onBlockPlaced(this.grid.map(r => [...r]));
+    }
+
+    addGarbageLines(lines) {
+        if (!this.isRunning || !lines.length) return;
+        this.grid.splice(0, lines.length);
+        for (const line of lines) this.grid.push([...line]); // ...line pour faire une copie independante
+        // La grille a remonté de lines.length lignes — on remonte la pièce du même décalage
+        // pour qu'elle reste dans la même position relative aux blocs verrouillés.
+        if (this.currentPiece) {
+            this.currentPiece.position.y -= lines.length;
+        }
+        if (this.grid[0].some(c => c !== 0)) { this._gameOver(false); return; }
+        if (!this._isValidPositionAllowTop()) this._gameOver(false);
+    }
+
+    // Comme _isValidPosition mais tolère gy < 0 (zone tampon au-dessus de la grille après garbage)
+    _isValidPositionAllowTop() {
+        if (!this.currentPiece) return true;
+        const { x, y } = this.currentPiece.getPosition();
+        const shape    = this.currentPiece.getShape();
+        for (let row = 0; row < shape.length; row++)
+            for (let col = 0; col < shape[row].length; col++)
+                if (shape[row][col] !== 0) {
+                    const gy = y + row;
+                    const gx = x + col;
+                    if (gy < 0) continue; // au-dessus de la grille : OK
+                    if (gx < 0 || gx >= this.grid[0].length ||
+                        gy >= this.grid.length ||
+                        this.grid[gy][gx] !== 0) return false;
+                }
+        return true;
+    }
+
+    _gameOver(validBlock = false) {
+        this.stop();
+        this.onGameOver(this.score, validBlock);
+    }
+}

Transcendence/srcs/frontend/src/tetris.js.backup

@@ -0,0 +1,401 @@
+// ─────────────────────────────────────────────
+// LOGIQUE TETRIS
+// ─────────────────────────────────────────────
+
+class Tetris {
+    constructor(onRender, onGameOver, onBlockPlaced = null, onLinesCleared = null) {
+        this.onRender       = onRender;
+        this.onGameOver     = onGameOver;
+        this.onBlockPlaced  = onBlockPlaced;
+        this.onLinesCleared = onLinesCleared;
+
+        this.grid         = this._createGrid(10, 20);
+        this.bufferGrid   = this._createGrid(10, 5);
+        this.currentPiece = null;
+        this.storedPiece  = null;
+        this.nextPiece    = null;
+
+        this.score            = 0;
+        this.initialTimeToDown = 1000;
+        this.timeToDown       = 1000;
+        this.hardening        = 1000;
+        this.count            = 0;
+        this.decrementTTD     = 100;
+
+        this.lastLandingCol = 4;
+
+        this.isRunning = false;
+        this.isPaused  = false;
+        this.canStore  = true;
+
+        this.animationFrameId = null;
+        this.lastTime         = 0;
+        this.accumulator      = 0;
+
+        this._keyHandler = this._handleKey.bind(this);
+    }
+
+    configure({ timeToDown, hardening, decrementTTD }) {
+        if (timeToDown   !== undefined) this.initialTimeToDown = this.timeToDown = timeToDown;
+        if (hardening    !== undefined) this.hardening    = hardening;
+        if (decrementTTD !== undefined) this.decrementTTD = decrementTTD;
+    }
+
+    _createGrid(w, h) {
+        return Array.from({ length: h }, () => Array(w).fill(0));
+    }
+
+    start() {
+        if (this.isRunning) return;
+        this.isRunning  = true;
+        this.isPaused   = false;
+        this.grid       = this._createGrid(10, 20);
+        this.score      = 0;
+        this.count      = 0;
+        this.timeToDown = this.initialTimeToDown;
+        this.storedPiece = null;
+        this.canStore    = true;
+        this._spawnNewPiece();
+        document.addEventListener('keydown', this._keyHandler);
+        this._startGameLoop();
+    }
+
+    stop() {
+        this.isRunning = false;
+        this.isPaused  = false;
+        if (this.animationFrameId !== null) {
+            cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = null;
+        }
+        this.accumulator = 0;
+        this.lastTime    = 0;
+        document.removeEventListener('keydown', this._keyHandler);
+    }
+
+    pause() {
+        if (!this.isRunning) return;
+        this.isPaused = !this.isPaused;
+        if (!this.isPaused) {
+            this.lastTime = 0;
+            this._startGameLoop();
+        }
+    }
+
+    _startGameLoop() {
+        this.lastTime    = 0;
+        this.accumulator = 0;
+
+        const gameLoop = (currentTime) => {
+            if (!this.isRunning) return;
+
+            if (this.isPaused) {
+                this.animationFrameId = requestAnimationFrame(gameLoop);
+                return;
+            }
+
+            if (this.lastTime === 0) {
+                this.lastTime = currentTime;
+                this.animationFrameId = requestAnimationFrame(gameLoop);
+                return;
+            }
+
+            const deltaTime = currentTime - this.lastTime;
+            this.lastTime = currentTime;
+            this.accumulator += deltaTime;
+
+            while (this.isRunning && this.accumulator >= this.timeToDown) {
+                this._tick();
+                this.accumulator -= this.timeToDown;
+                if (this.accumulator > this.timeToDown * 3) {
+                    this.accumulator = 0;
+                    break;
+                }
+            }
+
+            this.onRender();
+            this.animationFrameId = requestAnimationFrame(gameLoop);
+        };
+
+        this.animationFrameId = requestAnimationFrame(gameLoop);
+    }
+
+    _tick() {
+        if (!this.currentPiece) return;
+        if (this._canMoveDown()) {
+            this.currentPiece.moveDown();
+        } else {
+            this._lockPiece();
+            this.verifierLignes();
+            this._makeHarder();
+            this._spawnNewPiece();
+            this.canStore = true;
+            if (!this._canSpawn()) this._gameOver(true);
+        }
+    }
+
+    _handleKey(e) {
+        if (!this.isRunning || !this.currentPiece) return;
+
+        switch (e.key) {
+            case 'ArrowLeft':
+                e.preventDefault();
+                if (!this.isPaused && this._canMoveLeft())  this.currentPiece.moveLeft();
+                break;
+            case 'ArrowRight':
+                e.preventDefault();
+                if (!this.isPaused && this._canMoveRight()) this.currentPiece.moveRight();
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                if (!this.isPaused && this._canMoveDown()) {
+                    this.currentPiece.moveDown();
+                    this.score += 1;
+                    this.accumulator = 0;
+                }
+                break;
+            case ' ':
+                e.preventDefault();
+                if (!this.isPaused) this._hardDrop();
+                break;
+            case 'q': case 'Q':
+                e.preventDefault();
+                if (!this.isPaused) this._rotatePiece(-1);
+                break;
+            case 'w': case 'W':
+                e.preventDefault();
+                if (!this.isPaused) this._rotatePiece(1);
+                break;
+            case 'c': case 'C':
+                e.preventDefault();
+                if (!this.isPaused) this._storePiece();
+                break;
+        }
+
+        this.onRender();
+    }
+
+    _hardDrop() {
+        if (!this.currentPiece) return;
+        let dist = 0;
+        while (this._canMoveDown()) { this.currentPiece.moveDown(); dist++; }
+        this.score += dist * 2;
+        this._lockPiece();
+        this.verifierLignes();
+        this._makeHarder();
+        this._spawnNewPiece();
+        this.canStore    = true;
+        this.accumulator = 0;
+        if (!this._canSpawn()) this._gameOver(true);
+    }
+
+    _rotatePiece(direction) {
+        if (!this.currentPiece) return;
+        const originalPos = { ...this.currentPiece.getPosition() };
+
+        if (direction === -1) this.currentPiece.rotateLeft();
+        else                  this.currentPiece.rotateRight();
+
+        if (!this._isValidPosition()) {
+            this.currentPiece.moveRight();
+            if (this._isValidPosition()) return;
+
+            this.currentPiece.moveLeft();
+            this.currentPiece.moveLeft();
+            if (this._isValidPosition()) return;
+
+            this.currentPiece.moveLeft();
+            if (this._isValidPosition()) return;
+
+            this.currentPiece.moveRight();
+            this.currentPiece.moveRight();
+            this.currentPiece.position.y--;
+            if (this._isValidPosition()) return;
+
+            this.currentPiece.position.y = originalPos.y;
+            this.currentPiece.position.x = originalPos.x;
+            if (direction === -1) this.currentPiece.rotateRight();
+            else                  this.currentPiece.rotateLeft();
+        }
+    }
+
+    _storePiece() {
+        if (!this.canStore || !this.currentPiece) return;
+
+        if (this.storedPiece === null) {
+            this.storedPiece = this.currentPiece;
+            this._spawnNewPiece();
+        } else {
+            const temp        = this.storedPiece;
+            this.storedPiece  = this.currentPiece;
+            this.currentPiece = temp;
+            this.currentPiece.position.x = 3;
+            this.currentPiece.position.y = 0;
+        }
+        this.canStore    = false;
+        this.accumulator = 0;
+    }
+
+    _spawnNewPiece() {
+        this.currentPiece = this.nextPiece || this._createRandomPiece();
+        this.nextPiece    = this._createRandomPiece();
+        this._updateBufferGrid();
+    }
+
+    _createRandomPiece() {
+        const types = [PieceT, PieceL, PieceReverseL, PieceI, PieceZ, PieceReverseZ, PieceO];
+        return new types[Math.floor(Math.random() * types.length)](3, 0);
+    }
+
+    _updateBufferGrid() {
+        this.bufferGrid = this._createGrid(10, 5);
+        if (!this.nextPiece) return;
+        const shape   = this.nextPiece.getShape();
+        const offsetX = Math.floor((10 - shape[0].length) / 2);
+        for (let y = 0; y < shape.length; y++)
+            for (let x = 0; x < shape[y].length; x++)
+                if (shape[y][x] !== 0)
+                    this.bufferGrid[y + 1][x + offsetX] = this.nextPiece.getColor();
+    }
+
+    verifierLignes() {
+        let cleared = 0;
+        for (let y = this.grid.length - 1; y >= 0; y--) {
+            if (this.grid[y].every(c => c !== 0)) {
+                this.grid.splice(y, 1);
+                this.grid.unshift(Array(10).fill(0));
+                cleared++;
+                y++;
+            }
+        }
+        const points = [0, 100, 300, 500, 800];
+        this.score += points[cleared];
+        this.count += points[cleared];
+        if (this.onLinesCleared && cleared > 0)
+            this.onLinesCleared(cleared, this.lastLandingCol);
+    }
+
+    _makeHarder() {
+        if (this.count >= this.hardening) {
+            this.count = 0;
+            this.timeToDown = Math.max(100, this.timeToDown - this.decrementTTD);
+        }
+    }
+
+    _canMoveDown() {
+        if (!this.currentPiece) return false;
+        const { x, y } = this.currentPiece.getPosition();
+        const shape    = this.currentPiece.getShape();
+        for (let row = 0; row < shape.length; row++)
+            for (let col = 0; col < shape[row].length; col++)
+                if (shape[row][col] !== 0) {
+                    const ny = y + row + 1;
+                    const nx = x + col;
+                    if (ny < 0) continue; // encore au-dessus de la grille
+                    if (ny >= this.grid.length || this.grid[ny][nx] !== 0) return false;
+                }
+        return true;
+    }
+
+    _canMoveLeft() {
+        if (!this.currentPiece) return false;
+        const { x, y } = this.currentPiece.getPosition();
+        const shape    = this.currentPiece.getShape();
+        for (let row = 0; row < shape.length; row++)
+            for (let col = 0; col < shape[row].length; col++)
+                if (shape[row][col] !== 0) {
+                    if (y + row < 0) continue; // au-dessus de la grille
+                    const nx = x + col - 1;
+                    if (nx < 0 || this.grid[y + row][nx] !== 0) return false;
+                }
+        return true;
+    }
+
+    _canMoveRight() {
+        if (!this.currentPiece) return false;
+        const { x, y } = this.currentPiece.getPosition();
+        const shape    = this.currentPiece.getShape();
+        for (let row = 0; row < shape.length; row++)
+            for (let col = 0; col < shape[row].length; col++)
+                if (shape[row][col] !== 0) {
+                    if (y + row < 0) continue; // au-dessus de la grille
+                    const nx = x + col + 1;
+                    if (nx >= this.grid[0].length || this.grid[y + row][nx] !== 0) return false;
+                }
+        return true;
+    }
+
+    _isValidPosition() {
+        if (!this.currentPiece) return false;
+        const { x, y } = this.currentPiece.getPosition();
+        const shape    = this.currentPiece.getShape();
+        for (let row = 0; row < shape.length; row++)
+            for (let col = 0; col < shape[row].length; col++)
+                if (shape[row][col] !== 0) {
+                    const gx = x + col;
+                    const gy = y + row;
+                    if (gx < 0 || gx >= this.grid[0].length ||
+                        gy < 0 || gy >= this.grid.length ||
+                        this.grid[gy][gx] !== 0) return false;
+                }
+        return true;
+    }
+
+    _canSpawn()  { return this._isValidPosition(); }
+
+    _lockPiece() {
+        if (!this.currentPiece) return;
+        const { x, y } = this.currentPiece.getPosition();
+        const shape    = this.currentPiece.getShape();
+        const color    = this.currentPiece.getColor();
+        for (let row = 0; row < shape.length; row++)
+            for (let col = 0; col < shape[row].length; col++)
+                if (shape[row][col] !== 0 && y + row >= 0)
+                    this.grid[y + row][x + col] = color;
+        this.lastLandingCol = x + Math.floor(shape[0].length / 2);
+        if (this.onBlockPlaced) this.onBlockPlaced(this.grid.map(r => [...r]));
+    }
+
+    addGarbageLines(lines) {
+        if (!this.isRunning || !lines.length) return;
+        this.grid.splice(0, lines.length);
+        for (const line of lines) this.grid.push([...line]); // ...line pour faire une copie independante
+        // La grille a remonté de lines.length lignes — on remonte la pièce du même décalage
+        // pour qu'elle reste dans la même position relative aux blocs verrouillés.
+        if (this.currentPiece) {
+            this.currentPiece.position.y -= lines.length;
+        }
+        if (this.grid[0].some(c => c !== 0)) { this._gameOver(false); return; }
+        if (!this._isValidPositionAllowTop()) this._gameOver(false);
+    }
+
+    // Comme _isValidPosition mais tolère gy < 0 (zone tampon au-dessus de la grille après garbage)
+    _isValidPositionAllowTop() {
+        if (!this.currentPiece) return true;
+        const { x, y } = this.currentPiece.getPosition();
+        const shape    = this.currentPiece.getShape();
+        for (let row = 0; row < shape.length; row++)
+            for (let col = 0; col < shape[row].length; col++)
+                if (shape[row][col] !== 0) {
+                    const gy = y + row;
+                    const gx = x + col;
+                    if (gy < 0) continue; // au-dessus de la grille : OK
+                    if (gx < 0 || gx >= this.grid[0].length ||
+                        gy >= this.grid.length ||
+                        this.grid[gy][gx] !== 0) return false;
+                }
+        return true;
+    }
+
+    _gameOver(validBlock = false) {
+    }
+}
+    _gameOver(validBlock = false) {
+        this.stop();
+        this.onGameOver(this.score, validBlock);
+    }
+    
+    restart() {
+        this.stop();
+        this.start();
+    }
+}

Transcendence/srcs/frontend/src/ui.js

@@ -0,0 +1,180 @@
+// ─────────────────────────────────────────────
+// UI
+// ─────────────────────────────────────────────
+
+const btnStart       = document.getElementById('btn-start');
+const btnPause       = document.getElementById('btn-pause');
+const btnStop        = document.getElementById('btn-stop');
+const overlay        = document.getElementById('overlay');
+const inputTTD       = document.getElementById('input-ttd');
+const inputHardening = document.getElementById('input-hardening');
+const inputDecrement = document.getElementById('input-decrement');
+
+// Duel UI
+const btnJoinDuel   = document.getElementById('btn-join-duel');
+const btnLeaveDuel  = document.getElementById('btn-leave-duel');
+const inputRoomCode = document.getElementById('input-room-code');
+const duelStatusEl  = document.getElementById('duel-status');
+const opponentSection = document.getElementById('opponent-section');
+
+function updateButtons() {
+    btnStart.disabled        = game.isRunning;
+    btnPause.disabled        = !game.isRunning;
+    btnStop.disabled         = !game.isRunning;
+    btnPause.textContent     = game.isPaused ? 'Resume' : 'Pause';
+    inputTTD.disabled        = game.isRunning;
+    inputHardening.disabled  = game.isRunning;
+    inputDecrement.disabled  = game.isRunning;
+}
+
+function showOverlay(title, score) {
+    document.getElementById('overlay-title').textContent = title;
+    document.getElementById('overlay-score').textContent = score !== undefined ? `Score : ${score}` : '';
+    overlay.classList.add('visible');
+}
+
+function hideOverlay() {
+    overlay.classList.remove('visible');
+}
+
+// ─────────────────────────────────────────────
+// SOCKET + DUEL
+// ─────────────────────────────────────────────
+
+const socket = io({
+    auth: { token: localStorage.getItem('auth_token') },
+    reconnection: true,
+    reconnectionAttempts: 5,
+    reconnectionDelay: 1000,
+    transports: ['websocket', 'polling']
+});
+
+let duel = null;
+
+function updateDuelStatus(status, opponentName) {
+    duelStatusEl.className = '';
+    if (status === 'waiting') {
+        duelStatusEl.textContent = 'En attente d\'un adversaire…';
+        duelStatusEl.classList.add('waiting');
+        opponentSection.classList.remove('visible');
+    } else if (status === 'ready') {
+        duelStatusEl.textContent = `Prêt — ${opponentName}`;
+        duelStatusEl.classList.add('ready');
+        opponentSection.classList.add('visible');
+        if (duel) duel.hideOpponentOverlay();
+        renderOpponent(duel ? duel.opponentGrid : Array.from({length:20}, () => Array(10).fill(0)));
+    } else {
+        duelStatusEl.textContent = '—';
+        opponentSection.classList.remove('visible');
+    }
+}
+
+function startLocalGame() {
+    hideOverlay();
+    game.start();
+    updateButtons();
+    render();
+}
+
+btnJoinDuel.addEventListener('click', () => {
+    const code = inputRoomCode.value.trim().toUpperCase();
+    if (!code) return;
+    if (duel) { duel.leave(); }
+    duel = new Duel(socket, game, updateDuelStatus, startLocalGame);
+    duel.join(code);
+    btnJoinDuel.disabled  = true;
+    btnLeaveDuel.disabled = false;
+    inputRoomCode.disabled = true;
+    updateDuelStatus('waiting', null);
+});
+
+btnLeaveDuel.addEventListener('click', () => {
+    if (duel) { duel.leave(); duel = null; }
+    btnJoinDuel.disabled   = false;
+    btnLeaveDuel.disabled  = true;
+    inputRoomCode.disabled = false;
+    updateDuelStatus(null, null);
+});
+
+// ─────────────────────────────────────────────
+// INIT
+// ─────────────────────────────────────────────
+
+const game = new Tetris(
+    // onRender
+    () => {
+        if (duel) duel.synchronize_game();
+        render();
+        updateButtons();
+    },
+    // onGameOver
+    (score, validBlock) => {
+        if (duel) duel.onLocalGameOver(score, validBlock);
+        render();
+        updateButtons();
+        showOverlay('GAME OVER', score);
+    },
+    // onBlockPlaced — relay duel
+    (grid) => {
+        if (duel) duel.onLocalBlockPlaced(grid, game.score);
+    },
+    // onLinesCleared — relay duel
+    (count, holeCol) => {
+        if (duel) duel.onLocalLinesCleared(count, holeCol);
+    }
+);
+
+btnStart.addEventListener('click', () => {
+    if (duel && duel.isReady) {
+        duel.startDuel();   // déclenche les deux parties via le serveur
+    } else {
+        startLocalGame();   // solo
+    }
+});
+
+btnPause.addEventListener('click', () => {
+    if (duel && duel.isReady) {
+        duel.togglePause();
+    } else {
+        game.pause();
+        updateButtons();
+        if (game.isPaused) showOverlay('PAUSE');
+        else hideOverlay();
+    }
+});
+
+btnStop.addEventListener('click', () => {
+    if (duel && duel.isReady) {
+        duel.stop();
+    } else {
+        game.stop();
+        updateButtons();
+        render();
+        showOverlay('STOPPED');
+    }
+});
+
+function applySettings() {
+    const settings = {
+        timeToDown:   parseInt(inputTTD.value,       10),
+        hardening:    parseInt(inputHardening.value, 10),
+        decrementTTD: parseInt(inputDecrement.value, 10),
+    };
+    game.configure(settings);
+    if (duel && duel.isReady) duel.syncSettings(settings);
+}
+
+inputTTD.addEventListener('change',       applySettings);
+inputHardening.addEventListener('change', applySettings);
+inputDecrement.addEventListener('change', applySettings);
+
+btnRestart.addEventListener('click', () => {
+    if (duel && duel.isReady) {
+        // In duel mode, we don't restart from client side - let server handle it
+        return;
+    } else {
+        game.restart();
+        updateButtons();
+        render();
+    }
+});