From 276e6867a97aaa73ee7d2136c469b089f5ac02da Mon Sep 17 00:00:00 2001
From: bitsearch <SNESS_1@proton.me>
Date: Wed, 18 Feb 2026 17:15:35 +0100
Subject: [PATCH] ajout du jeu tetris

---
 Transcendence/srcs/frontend/src/index.html  |   2 +
 Transcendence/srcs/frontend/src/tetris.html | 862 ++++++++++++++++++++
 2 files changed, 864 insertions(+)
 create mode 100644 Transcendence/srcs/frontend/src/tetris.html
diff --git a/Transcendence/srcs/frontend/src/index.html b/Transcendence/srcs/frontend/src/index.html
index 82c2aea..ee45125 100644
--- a/Transcendence/srcs/frontend/src/index.html
+++ b/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>
diff --git a/Transcendence/srcs/frontend/src/tetris.html b/Transcendence/srcs/frontend/src/tetris.html
new file mode 100644
index 0000000..2d846ed
--- /dev/null
+++ b/Transcendence/srcs/frontend/src/tetris.html
@@ -0,0 +1,862 @@
+<!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">
+    <style>
+        :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;
+        }
+
+        #app {
+            display: flex;
+            gap: 16px;
+            align-items: flex-start;
+            position: relative;
+            z-index: 1;
+        }
+
+        .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;
+        }
+
+        .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);
+        }
+
+        .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-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; }
+
+        .controls-list {
+            margin-top: 14px;
+            font-size: 0.6rem;
+            line-height: 2;
+            color: var(--dim);
+        }
+        .controls-list span { color: var(--text); }
+
+        #main-wrapper { position: relative; }
+
+        #overlay {
+            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 { 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);
+        }
+    </style>
+</head>
+<body>
+
+<h1>TETRIS</h1>
+
+<div id="app">
+
+    <!-- Panneau gauche : Hold + Score + Boutons -->
+    <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>
+
+    <!-- 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>
+
+<script>
+// ─────────────────────────────────────────────
+// 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; }
+}
+
+// ─────────────────────────────────────────────
+// LOGIQUE TETRIS
+// ─────────────────────────────────────────────
+
+class Tetris {
+    constructor(onRender, onGameOver) {
+        this.onRender   = onRender;
+        this.onGameOver = onGameOver;
+
+        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.timeToDown   = 1000;
+        this.harding      = 1000;
+        this.decrementTTD = 20;
+
+        this.isRunning = false;
+        this.isPaused  = false;
+        this.canStore  = true;
+
+        this.animationFrameId = null;
+        this.lastTime         = 0;
+        this.accumulator      = 0;
+
+        this._keyHandler = this._handleKey.bind(this);
+    }
+
+    _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.timeToDown = 1000;
+        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.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();
+        }
+    }
+
+    _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();
+    }
+
+    _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] || 0;
+    }
+
+    _makeHarder() {
+        const prev = Math.floor((this.score - this.harding) / this.harding);
+        const curr = Math.floor(this.score / this.harding);
+        if (curr > prev && curr > 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 >= 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) {
+                    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) {
+                    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)
+                    this.grid[y + row][x + col] = color;
+    }
+
+    _gameOver() {
+        this.stop();
+        this.onGameOver(this.score);
+    }
+}
+
+// ─────────────────────────────────────────────
+// RENDU
+// ─────────────────────────────────────────────
+
+const CELL   = 30;
+const COLORS = ['#070712','#a855f7','#f97316','#3b82f6','#06b6d4','#ef4444','#22c55e','#eab308'];
+
+const ctxMain = document.getElementById('canvas-main').getContext('2d');
+const ctxNext = document.getElementById('canvas-next').getContext('2d');
+const ctxHold = document.getElementById('canvas-hold').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 >= grid.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;
+}
+
+// ─────────────────────────────────────────────
+// UI
+// ─────────────────────────────────────────────
+
+const btnStart = document.getElementById('btn-start');
+const btnPause = document.getElementById('btn-pause');
+const btnStop  = document.getElementById('btn-stop');
+const overlay  = document.getElementById('overlay');
+
+function updateButtons() {
+    btnStart.disabled        = game.isRunning;
+    btnPause.disabled        = !game.isRunning;
+    btnStop.disabled         = !game.isRunning;
+    btnPause.textContent     = game.isPaused ? 'Resume' : 'Pause';
+}
+
+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');
+}
+
+// ─────────────────────────────────────────────
+// INIT
+// ─────────────────────────────────────────────
+
+const game = new Tetris(
+    () => { render(); updateButtons(); },
+    (score) => { render(); updateButtons(); showOverlay('GAME OVER', score); }
+);
+
+btnStart.addEventListener('click', () => {
+    hideOverlay();
+    game.start();
+    updateButtons();
+    render();
+});
+
+btnPause.addEventListener('click', () => {
+    game.pause();
+    updateButtons();
+    if (game.isPaused) showOverlay('PAUSE');
+    else hideOverlay();
+});
+
+btnStop.addEventListener('click', () => {
+    game.stop();
+    updateButtons();
+    render();
+    showOverlay('STOPPED');
+});
+
+render();
+updateButtons();
+</script>
+</body>
+</html>
