notification for login/register

Transcendence/docker-compose.yml

@@ -24,8 +24,6 @@ services:
     build: ./srcs/backend
     expose:
       - "3001"
-    # ports:
-    #   - "3001:3001"
     depends_on:
       - database
     volumes:

Transcendence/srcs/backend/services/socket.js

@@ -730,6 +730,16 @@ function setupSocketIO(io)
 			_tetrisRelayToOpponent(socket, 'tetris:lines-cleared', data);
 		});
 
+		// Relay pur : shield-activated → adversaire uniquement
+		socket.on('tetris:shield-activated', () => {
+			_tetrisRelayToOpponent(socket, 'tetris:shield-activated', {});
+		});
+
+		// Relay pur : shield-deactivated → adversaire uniquement
+		socket.on('tetris:shield-deactivated', () => {
+			_tetrisRelayToOpponent(socket, 'tetris:shield-deactivated', {});
+		});
+
 		// start-duel → relayé aux DEUX joueurs de la room (inclut l'émetteur)
 		socket.on('tetris:start-duel', () => {
 			const code = socket.tetrisRoomCode;

Transcendence/srcs/frontend/src/duel.js

@@ -12,6 +12,7 @@ class Duel {
         this.action_queue        = [];
         this.opponentGrid        = this._emptyGrid();
         this.opponentScore       = 0;
+        this.opponentShieldActive = false;
         this.roomCode            = null;
         this.isReady             = false;
 
@@ -60,6 +61,15 @@ class Duel {
         this.endDuel();
     }
 
+    onLocalShieldChanged(event) {
+        if (!this.isReady) return;
+        if (event === 'activated') {
+            this.socket.emit('tetris:shield-activated');
+        } else if (event === 'deactivated') {
+            this.socket.emit('tetris:shield-deactivated');
+        }
+    }
+
     endDuel() {
         this.isReady      = false;
         this.action_queue = [];
@@ -92,6 +102,14 @@ class Duel {
                 showOverlay('YOU WIN', action.score);
                 this.endDuel();
                 break;
+
+            case 'OPPONENT_SHIELD_ACTIVATED':
+                this.opponentShieldActive = true;
+                break;
+
+            case 'OPPONENT_SHIELD_DEACTIVATED':
+                this.opponentShieldActive = false;
+                break;
         }
     }
 
@@ -127,6 +145,14 @@ class Duel {
             this.action_queue.push({ type: 'OPPONENT_GAME_OVER', score: data.score, validBlock: data.validBlock });
         });
 
+        this.socket.on('tetris:shield-activated', () => {
+            this.action_queue.push({ type: 'OPPONENT_SHIELD_ACTIVATED' });
+        });
+
+        this.socket.on('tetris:shield-deactivated', () => {
+            this.action_queue.push({ type: 'OPPONENT_SHIELD_DEACTIVATED' });
+        });
+
         this.socket.on('tetris:start-duel', () => {
             if (this.onStart) this.onStart();
         });

Transcendence/srcs/frontend/src/game_room.js

@@ -194,7 +194,8 @@ export class GameRoomWindow extends Window {
 			players: [],
 			currentPlayerIndex: 0,
 			guessedLetters: [],
-			scores: {}
+			scores: {},
+			counter: 0
 		};
 
 		this.initDrawing();
@@ -1568,8 +1569,11 @@ export class GameRoomWindow extends Window {
 
 	nextRound() {
 		// Move to next player
-		this.gameState.currentPlayerIndex = (this.gameState.currentPlayerIndex + 1) % this.gameState.players.length;
-		const nextDrawer = this.gameState.players[this.gameState.currentPlayerIndex];
+		this.gameState.counter++;
+		if (this.gameState.counter >= this.gameState.players.length) {
+			this.gameState.counter = 0;
+		}
+		const nextDrawer = this.gameState.players[this.gameState.counter];
 
 		if (this.socket?.connected) {
 			this.socket.emit('game-next-round', { drawer: nextDrawer });

Transcendence/srcs/frontend/src/login.js

@@ -17,6 +17,7 @@ export class LoginWindow extends Window {
         this.buildUI();
         this.bindEvents();
         this.checkIfAlreadyLoggedIn();
+		this.NotficationContainer();
     }
 
     /**
@@ -129,6 +130,7 @@ export class LoginWindow extends Window {
             if (response.ok && data.token) {
                 localStorage.setItem(STORAGE_KEYS.AUTH_TOKEN, data.token);
                 this.showMessage('Login successful! Welcome.', 'success');
+				this.showNotification('Login successful', 'green');
 
                 // Emit login event
                 eventBus.emit(Events.USER_LOGGED_IN, { username, token: data.token });
@@ -138,6 +140,7 @@ export class LoginWindow extends Window {
             } else {
                 const errorMsg = data?.message || 'Login failed';
                 this.showMessage(errorMsg, 'error');
+				this.showNotification(errorMsg, 'red');
             }
         } catch (error) {
             console.error('Login error:', error);
@@ -170,10 +173,12 @@ export class LoginWindow extends Window {
 
             if (response.ok) {
                 this.showMessage('Registration successful! You can now sign in.', 'success');
+				this.showNotification('Registration successful', 'green');
                 eventBus.emit(Events.USER_REGISTERED, { username });
             } else {
                 const errorMsg = data?.message || 'Registration failed';
                 this.showMessage(errorMsg, 'error');
+				this.showNotification(errorMsg, 'red');
             }
         } catch (error) {
             console.error('Registration error:', error);
@@ -200,6 +205,7 @@ export class LoginWindow extends Window {
             if (event.data?.token) {
                 localStorage.setItem(STORAGE_KEYS.AUTH_TOKEN, event.data.token);
                 this.showMessage('GitHub login successful! Welcome.', 'success');
+				this.showNotification('GitHub login successful', 'green');
 
                 // Emit login event
                 eventBus.emit(Events.USER_LOGGED_IN, {
@@ -215,6 +221,55 @@ export class LoginWindow extends Window {
         window.addEventListener('message', handleMessage, { once: true });
     }
 
+	NotficationContainer()
+	{
+		if (document.getElementById('notification-container')) return;
+
+		const container = this.createElement('div');
+		container.id = 'notification-container';
+		Object.assign(container.style, {
+			position: 'fixed',
+			top: '20px',
+			right: '20px',
+			zIndex: 1000,
+			display: 'flex',
+			flexDirection: 'column',
+			gap: '10px'
+		});
+		document.body.appendChild(container);
+	}
+
+	showNotification(message, color) {
+		const container = document.getElementById('notification-container');
+		if (!container) return;
+
+		const notification = document.createElement('div');
+		notification.textContent = message;
+		Object.assign(notification.style, {
+			backgroundColor: color,
+			color: 'white',
+			padding: '10px 20px',
+			borderRadius: '5px',
+			boxShadow: '0 2px 6px rgba(0,0,0,0.3)',
+			opacity: '0',
+			transform: 'translateY(-8px)',
+            transition: 'opacity 0.5s ease, transform 0.5s ease'
+		});
+
+		container.appendChild(notification);
+
+		requestAnimationFrame(() => {
+			notification.style.opacity = '1';
+			notification.style.transform = 'translateY(0)';
+		});
+
+		setTimeout(() => {
+			notification.style.opacity = '0';
+			notification.style.transform = 'translateY(-8px)';
+			setTimeout(() => notification.remove(), 500);
+		}, 2200);
+	}
+
     /**
      * Displays a feedback message
      * @param {string} text - Message text

Transcendence/srcs/frontend/src/renderer.js

@@ -3,7 +3,53 @@
 // ─────────────────────────────────────────────
 
 const CELL = 30;
-const COLORS = ['#000500','#00ff41','#39ff14','#00e676','#76ff03','#b2ff59','#00ffaa','#ccff00','#2d5a2d'];
+
+const THEMES = {
+    green: {
+        bg: '#000500', panel: '#000d00', border: '#004400',
+        accent: '#00ff41', accent2: '#39ff14', dim: '#1a5c1a', text: '#00cc26',
+        grid: 'rgba(0,255,65,0.06)', ghost: 'rgba(0,255,65,0.25)', highlight: 'rgba(200,255,200,0.2)',
+        colors: ['#000500','#00ff41','#39ff14','#00e676','#76ff03','#b2ff59','#00ffaa','#ccff00','#2d5a2d']
+    },
+    red: {
+        bg: '#050000', panel: '#0d0000', border: '#440000',
+        accent: '#ff1744', accent2: '#ff4569', dim: '#5c1a1a', text: '#cc2626',
+        grid: 'rgba(255,23,68,0.06)', ghost: 'rgba(255,23,68,0.25)', highlight: 'rgba(255,200,200,0.2)',
+        colors: ['#050000','#ff1744','#ff4569','#e53935','#ff6d00','#ff8a65','#ff5252','#ff6e40','#5a2d2d']
+    },
+    yellow: {
+        bg: '#050500', panel: '#0d0d00', border: '#444400',
+        accent: '#ffd600', accent2: '#ffea00', dim: '#5c5c1a', text: '#ccaa00',
+        grid: 'rgba(255,214,0,0.06)', ghost: 'rgba(255,214,0,0.25)', highlight: 'rgba(255,255,200,0.2)',
+        colors: ['#050500','#ffd600','#ffea00','#ffab00','#fff176','#ffe57f','#ffff00','#ffc400','#5a5a2d']
+    },
+    blue: {
+        bg: '#000005', panel: '#00000d', border: '#000044',
+        accent: '#00b0ff', accent2: '#40c4ff', dim: '#1a1a5c', text: '#2626cc',
+        grid: 'rgba(0,176,255,0.06)', ghost: 'rgba(0,176,255,0.25)', highlight: 'rgba(200,200,255,0.2)',
+        colors: ['#000005','#00b0ff','#40c4ff','#0091ea','#448aff','#82b1ff','#00e5ff','#2979ff','#2d2d5a']
+    }
+};
+
+let currentTheme = THEMES.green;
+let COLORS = [...currentTheme.colors];
+
+function setColorTheme(themeName) {
+    currentTheme = THEMES[themeName] || THEMES.green;
+    COLORS = [...currentTheme.colors];
+    const root = document.documentElement;
+    root.style.setProperty('--bg',      currentTheme.bg);
+    root.style.setProperty('--panel',   currentTheme.panel);
+    root.style.setProperty('--border',  currentTheme.border);
+    root.style.setProperty('--accent',  currentTheme.accent);
+    root.style.setProperty('--accent2', currentTheme.accent2);
+    root.style.setProperty('--dim',     currentTheme.dim);
+    root.style.setProperty('--text',    currentTheme.text);
+    localStorage.setItem('tetris-theme', themeName);
+    document.querySelectorAll('.theme-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.theme === themeName);
+    });
+}
 
 const ctxMain     = document.getElementById('canvas-main').getContext('2d');
 const ctxNext     = document.getElementById('canvas-next').getContext('2d');
@@ -22,7 +68,7 @@ function drawCell(ctx, x, y, colorIndex, size) {
     ctx.fillRect(x * size + p + 2, y * size + p + 2, size - p * 2 - 4, size - p * 2 - 4);
     ctx.shadowBlur = 0;
     // Highlight top/left
-    ctx.fillStyle = 'rgba(200,255,200,0.2)';
+    ctx.fillStyle = currentTheme.highlight;
     ctx.fillRect(x * size + p, y * size + p, size - p * 2, 2);
     ctx.fillRect(x * size + p, y * size + p, 2, size - p * 2);
     // Shadow bottom/right
@@ -32,12 +78,12 @@ function drawCell(ctx, x, y, colorIndex, size) {
 }
 
 function clearCanvas(ctx, w, h) {
-    ctx.fillStyle = '#000500';
+    ctx.fillStyle = currentTheme.bg;
     ctx.fillRect(0, 0, w, h);
 }
 
 function drawGridLines(ctx, cols, rows, size) {
-    ctx.strokeStyle = 'rgba(0,255,65,0.06)';
+    ctx.strokeStyle = currentTheme.grid;
     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();
@@ -67,7 +113,7 @@ function drawGhost(ctx, piece, grid) {
 
     if (ghost.y === piece.getPosition().y) return;
 
-    ctx.strokeStyle = 'rgba(0,255,65,0.25)';
+    ctx.strokeStyle = currentTheme.ghost;
     ctx.lineWidth   = 1;
     for (let row = 0; row < shape.length; row++)
         for (let col = 0; col < shape[row].length; col++)
@@ -93,6 +139,17 @@ function drawMiniPiece(ctx, piece, canvasW, canvasH) {
                 drawCell(ctx, offsetX + col, offsetY + row, color, s);
 }
 
+function _drawShieldOverlay(ctx, w, h, alpha) {
+    ctx.save();
+    ctx.strokeStyle = `rgba(0,212,255,${alpha})`;
+    ctx.lineWidth   = 4;
+    ctx.shadowColor = '#00d4ff';
+    ctx.shadowBlur  = 16;
+    ctx.strokeRect(2, 2, w - 4, h - 4);
+    ctx.shadowBlur  = 0;
+    ctx.restore();
+}
+
 function render() {
     // Grille principale
     clearCanvas(ctxMain, 300, 600);
@@ -115,12 +172,39 @@ function render() {
                     drawCell(ctxMain, x + col, y + row, color, CELL);
     }
 
+    // Shield overlay (bordure cyan pulsée)
+    if (game.shieldActive) {
+        const pulse = 0.6 + 0.4 * Math.sin(Date.now() / 150);
+        _drawShieldOverlay(ctxMain, 300, 600, pulse);
+    }
+
     // Panneaux miniatures
     drawMiniPiece(ctxNext, game.nextPiece,   100, 80);
     drawMiniPiece(ctxHold, game.storedPiece, 100, 80);
 
     // Score
     document.getElementById('score-display').textContent = game.score;
+
+    // Shield status UI
+    const shieldEl  = document.getElementById('shield-status-display');
+    const shieldBar = document.getElementById('shield-bar');
+    if (shieldEl) {
+        if (game.shieldActive) {
+            const secs = Math.ceil(game.shieldActiveMs / 1000);
+            shieldEl.textContent = `ACTIF ${secs}s`;
+            shieldEl.className   = 'score-value shield-active';
+            if (shieldBar) shieldBar.style.width = (game.shieldActiveMs / 3000 * 100) + '%';
+        } else if (game.shieldReady) {
+            shieldEl.textContent = 'PRÊT';
+            shieldEl.className   = 'score-value shield-ready';
+            if (shieldBar) shieldBar.style.width = '100%';
+        } else {
+            const secs = Math.ceil(game.shieldCooldownMs / 1000);
+            shieldEl.textContent = `${secs}s`;
+            shieldEl.className   = 'score-value shield-cooldown';
+            if (shieldBar) shieldBar.style.width = ((1 - game.shieldCooldownMs / 60000) * 100) + '%';
+        }
+    }
 }
 
 function renderOpponent(opponentGrid) {
@@ -130,4 +214,23 @@ function renderOpponent(opponentGrid) {
         for (let x = 0; x < opponentGrid[y].length; x++)
             if (opponentGrid[y][x] !== 0)
                 drawCell(ctxOpponent, x, y, opponentGrid[y][x], CELL);
+
+    // Shield overlay adversaire
+    if (typeof duel !== 'undefined' && duel && duel.opponentShieldActive) {
+        const pulse = 0.6 + 0.4 * Math.sin(Date.now() / 150);
+        _drawShieldOverlay(ctxOpponent, 300, 600, pulse);
     }
+
+    // Indicateur HTML adversaire
+    const oppShieldEl = document.getElementById('opponent-shield-indicator');
+    if (oppShieldEl) {
+        const active = typeof duel !== 'undefined' && duel && duel.opponentShieldActive;
+        oppShieldEl.style.display = active ? 'block' : 'none';
+    }
+}
+
+// Restore saved theme
+(function() {
+    const saved = localStorage.getItem('tetris-theme');
+    if (saved && THEMES[saved]) setColorTheme(saved);
+})();

Transcendence/srcs/frontend/src/tetris.css

@@ -445,6 +445,37 @@ button:disabled { opacity: 0.3; cursor: not-allowed; }
     letter-spacing: 0.05em;
 }
 
+/* ── Theme color picker ── */
+.theme-btns {
+    display: flex;
+    gap: 6px;
+    margin-top: 2px;
+}
+
+.theme-btn {
+    width: 22px;
+    height: 22px;
+    min-width: 22px;
+    padding: 0;
+    border-radius: 50%;
+    border: 2px solid transparent;
+    cursor: pointer;
+    transition: transform 0.15s, box-shadow 0.15s;
+}
+
+.theme-btn[data-theme="green"]  { background: #00ff41; }
+.theme-btn[data-theme="red"]    { background: #ff1744; }
+.theme-btn[data-theme="yellow"] { background: #ffd600; }
+.theme-btn[data-theme="blue"]   { background: #00b0ff; }
+
+.theme-btn:hover { transform: scale(1.2); }
+
+.theme-btn.active {
+    border-color: #ffffff;
+    box-shadow: 0 0 8px currentColor;
+    transform: scale(1.15);
+}
+
 #settings-panel input[type="number"] {
     background: var(--bg);
     border: 1px solid var(--border);
@@ -620,3 +651,36 @@ button:disabled { opacity: 0.3; cursor: not-allowed; }
 }
 
 body { overflow: hidden; }
+
+
+/* ── Shield ───────────────────────────────── */
+.shield-bar-bg {
+    width: 100%;
+    height: 4px;
+    background: rgba(0,212,255,0.15);
+    border-radius: 2px;
+    margin-top: 4px;
+    overflow: hidden;
+}
+
+.shield-bar {
+    height: 100%;
+    background: #00d4ff;
+    border-radius: 2px;
+    transition: width 0.1s linear;
+    box-shadow: 0 0 6px #00d4ff;
+}
+
+.shield-ready   { color: #00d4ff !important; }
+.shield-active  { color: #00ffff !important; text-shadow: 0 0 8px #00ffff; }
+.shield-cooldown { color: var(--dim) !important; }
+
+kbd {
+    display: inline-block;
+    padding: 0 3px;
+    border: 1px solid var(--border);
+    border-radius: 2px;
+    font-size: 0.6rem;
+    font-family: inherit;
+    color: var(--dim);
+}

Transcendence/srcs/frontend/src/tetris.html

@@ -51,6 +51,12 @@
                         <div class="score-value" id="score-display">0</div>
                     </div>
 
+                    <div class="score-block">
+                        <div class="score-label">Shield <kbd>E</kbd></div>
+                        <div class="score-value shield-ready" id="shield-status-display">PRÊT</div>
+                        <div class="shield-bar-bg"><div class="shield-bar" id="shield-bar"></div></div>
+                    </div>
+
                     <div class="btn-group">
                         <button id="btn-start">Start</button>
                         <button id="btn-pause" disabled>Pause</button>
@@ -61,6 +67,15 @@
                 <!-- Panneau de configuration -->
                 <div id="settings-panel">
                     <div class="settings-title">Paramètres</div>
+                    <div class="settings-row">
+                        <label>Couleur</label>
+                        <div class="theme-btns">
+                            <button class="theme-btn active" data-theme="green"  onclick="setColorTheme('green')"  title="Vert"></button>
+                            <button class="theme-btn"        data-theme="red"    onclick="setColorTheme('red')"    title="Rouge"></button>
+                            <button class="theme-btn"        data-theme="yellow" onclick="setColorTheme('yellow')" title="Jaune"></button>
+                            <button class="theme-btn"        data-theme="blue"   onclick="setColorTheme('blue')"   title="Bleu"></button>
+                        </div>
+                    </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">
@@ -97,6 +112,7 @@
                     <div><span>W</span> Rot. droite</div>
                     <div><span>Espace</span> Drop</div>
                     <div><span>C</span> Hold</div>
+                    <div><span>E</span> Shield</div>
                 </div>
             </div>
 
@@ -111,6 +127,7 @@
                 <div class="score-label">Score</div>
                 <div class="score-value" id="opponent-score">—</div>
             </div>
+            <div id="opponent-shield-indicator" style="display:none;color:#00d4ff;font-size:0.75rem;text-align:center;letter-spacing:1px;margin-top:4px;">&#x1F6E1; SHIELD ACTIF</div>
         </div>
 
         <div id="opponent-wrapper">

Transcendence/srcs/frontend/src/tetris.js

@@ -3,11 +3,12 @@
 // ───────────────────────────────────────────
 
 class Tetris {
-    constructor(onRender, onGameOver, onBlockPlaced = null, onLinesCleared = null) {
+    constructor(onRender, onGameOver, onBlockPlaced = null, onLinesCleared = null, onShieldChanged = null) {
         this.onRender       = onRender;
         this.onGameOver     = onGameOver;
         this.onBlockPlaced  = onBlockPlaced;
         this.onLinesCleared = onLinesCleared;
+        this.onShieldChanged = onShieldChanged;
 
         this.grid         = this._createGrid(10, 20);
         this.bufferGrid   = this._createGrid(10, 5);
@@ -28,6 +29,12 @@ class Tetris {
         this.isPaused  = false;
         this.canStore  = true;
 
+        // Shield
+        this.shieldActive     = false;
+        this.shieldActiveMs   = 0;
+        this.shieldCooldownMs = 0;
+        this.shieldReady      = true;   // prêt dès le début
+
         this.animationFrameId = null;
         this.lastTime         = 0;
         this.accumulator      = 0;
@@ -55,6 +62,10 @@ class Tetris {
         this.timeToDown = this.initialTimeToDown;
         this.storedPiece = null;
         this.canStore    = true;
+        this.shieldActive     = false;
+        this.shieldActiveMs   = 0;
+        this.shieldCooldownMs = 0;
+        this.shieldReady      = true;
         this._spawnNewPiece();
         document.addEventListener('keydown', this._keyHandler);
         this._startGameLoop();
@@ -108,6 +119,8 @@ class Tetris {
             this.lastTime = currentTime;
             this.accumulator += deltaTime;
 
+            this._updateShield(deltaTime);
+
             while (this.isRunning && this.accumulator >= this.timeToDown) {
                 this._tick();
                 this.accumulator -= this.timeToDown;
@@ -174,11 +187,42 @@ class Tetris {
                 e.preventDefault();
                 if (!this.isPaused) this._storePiece();
                 break;
+            case 'e': case 'E':
+                e.preventDefault();
+                if (!this.isPaused) this._activateShield();
+                break;
         }
 
         this.onRender();
     }
 
+    _activateShield() {
+        if (!this.shieldReady || this.shieldActive) return;
+        this.shieldActive   = true;
+        this.shieldActiveMs = 3000;
+        this.shieldReady    = false;
+        if (this.onShieldChanged) this.onShieldChanged('activated');
+    }
+
+    _updateShield(deltaTime) {
+        if (this.shieldActive) {
+            this.shieldActiveMs -= deltaTime;
+            if (this.shieldActiveMs <= 0) {
+                this.shieldActive     = false;
+                this.shieldActiveMs   = 0;
+                this.shieldCooldownMs = 60000;
+                if (this.onShieldChanged) this.onShieldChanged('deactivated');
+            }
+        } else if (!this.shieldReady) {
+            this.shieldCooldownMs -= deltaTime;
+            if (this.shieldCooldownMs <= 0) {
+                this.shieldCooldownMs = 0;
+                this.shieldReady      = true;
+                if (this.onShieldChanged) this.onShieldChanged('ready');
+            }
+        }
+    }
+
     _hardDrop() {
         if (!this.currentPiece) return;
         let dist = 0;
@@ -275,8 +319,17 @@ class Tetris {
         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);
+        if (cleared > 0) {
+            // Chaque ligne remplie réduit le cooldown du shield de 10s
+            if (!this.shieldActive && !this.shieldReady) {
+                this.shieldCooldownMs = Math.max(0, this.shieldCooldownMs - cleared * 10000);
+                if (this.shieldCooldownMs === 0) {
+                    this.shieldReady = true;
+                    if (this.onShieldChanged) this.onShieldChanged('ready');
+                }
+            }
+            if (this.onLinesCleared) this.onLinesCleared(cleared, this.lastLandingCol);
+        }
     }
 
     _makeHarder() {
@@ -361,6 +414,7 @@ class Tetris {
     }
 
     addGarbageLines(lines) {
+        if (this.shieldActive) return;  // shield bloque les lignes garbage
         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

Transcendence/srcs/frontend/src/ui.js

@@ -113,6 +113,7 @@ btnJoinDuel.addEventListener('click', () => {
     const code = inputRoomCode.value.trim().toUpperCase();
     if (!code) return;
     if (duel) { duel.leave(); }
+    if (game.isRunning) { game.stop(); hideOverlay(); render(); updateButtons(); }
     duel = new Duel(socket, game, updateDuelStatus, startLocalGame);
     duel.join(code);
     btnJoinDuel.disabled  = true;
@@ -170,6 +171,7 @@ socket.on('tetris:matched', (data) => {
 
     // Auto-rejoindre la salle générée
     if (duel) { duel.leave(); }
+    if (game.isRunning) { game.stop(); hideOverlay(); render(); updateButtons(); }
     duel = new Duel(socket, game, updateDuelStatus, startLocalGame);
     duel.join(data.roomCode);
     inputRoomCode.value     = data.roomCode;
@@ -211,6 +213,10 @@ const game = new Tetris(
     // onLinesCleared — relay duel
     (count, holeCol) => {
         if (duel) duel.onLocalLinesCleared(count, holeCol);
+    },
+    // onShieldChanged — relay duel
+    (event) => {
+        if (duel) duel.onLocalShieldChanged(event);
     }
 );