From 1aca4ae7dab76fc3792b671b9e0c62e96c291c0f Mon Sep 17 00:00:00 2001
From: bitsearch <SNESS_1@proton.me>
Date: Wed, 11 Feb 2026 13:06:42 +0100
Subject: [PATCH] Premier commit de ce submodule

---
 EXPLICATION.md                              | 136 ++++
 package-lock.json                           |  15 -
 src/tetris_frontend/src/app.html            |  13 +-
 src/tetris_frontend/src/index.scss          |  68 +-
 src/tetris_frontend/src/routes/+page.svelte | 836 +++++++++++++++++++-
 src/tetris_frontend/svelte.config.js        |   8 +-
 6 files changed, 992 insertions(+), 84 deletions(-)
 create mode 100644 EXPLICATION.md

diff --git a/EXPLICATION.md b/EXPLICATION.md
new file mode 100644
index 0000000..93f4dbc
--- /dev/null
+++ b/EXPLICATION.md
@@ -0,0 +1,136 @@
+# Tetris - Projet DFX (Internet Computer)
+
+## Architecture
+
+```
+tetris/
+├── dfx.json                        # Configuration DFX (canisters)
+├── package.json                    # Workspace racine
+├── src/
+│   ├── tetris_backend/
+│   │   └── main.mo                 # Backend Motoko
+│   └── tetris_frontend/
+│       ├── package.json            # Dépendances frontend
+│       ├── svelte.config.js        # Config SvelteKit (adapter-static)
+│       ├── vite.config.js          # Config Vite (proxy, env DFX)
+│       ├── src/
+│       │   ├── app.html            # Shell HTML (fonts, meta)
+│       │   ├── index.scss          # Styles globaux (thème néon)
+│       │   ├── lib/canisters.js    # Connexion au backend canister
+│       │   └── routes/
+│       │       ├── +layout.js      # Prerendering activé
+│       │       └── +page.svelte    # Composant Tetris (logique + rendu)
+│       └── dist/                   # Build statique (généré)
+└── .dfx/                           # État local DFX (généré)
+```
+
+## Prérequis
+
+| Outil   | Version minimale | Installation                          |
+|---------|-----------------|---------------------------------------|
+| Node.js | >= 16.0.0       | https://nodejs.org                    |
+| npm     | >= 7.0.0        | Inclus avec Node.js                   |
+| dfx     | >= 0.30.0       | `sh -ci "$(curl -fsSL https://internetcomputer.org/install.sh)"` |
+
+## Installation
+
+```bash
+cd tetris
+npm install
+```
+
+Cela installe les dépendances du workspace racine et du frontend SvelteKit
+(Svelte 5, Vite, adapter-static, dfinity/agent...).
+
+## Lancement en mode développement (Vite)
+
+```bash
+cd src/tetris_frontend
+npx vite --port 3000
+```
+
+Ouvre http://localhost:3000/ dans n'importe quel navigateur.
+Hot reload activé, pas besoin de DFX.
+
+## Déploiement sur la réplique locale (DFX)
+
+### 1. Build du frontend
+
+```bash
+cd src/tetris_frontend
+npx vite build
+```
+
+Génère le dossier `dist/` contenant les assets statiques.
+Note : `npm run build` exécute d'abord `dfx generate` (prebuild).
+Si le canister backend n'existe pas encore, utiliser `npx vite build` directement.
+
+### 2. Démarrer la réplique locale
+
+```bash
+dfx start --background
+```
+
+### 3. Déployer les canisters
+
+```bash
+dfx deploy
+```
+
+### 4. Accéder au jeu
+
+| URL | Navigateur |
+|-----|-----------|
+| `http://<canister-id>.localhost:8080/` | Chrome, Firefox |
+| `http://127.0.0.1:8080/?canisterId=<canister-id>` | Fonctionne partiellement (assets cassés en legacy) |
+
+Le canister ID est affiché après `dfx deploy`.
+Safari ne résout pas `*.localhost` : utiliser Chrome/Firefox ou le serveur Vite.
+
+### 5. Arrêter la réplique
+
+```bash
+dfx stop
+```
+
+## Déploiement via Docker
+
+Depuis le dossier parent (`icp_container/`) :
+
+```bash
+# Tout construire et lancer
+make super_start
+
+# Ou étape par étape
+make build_image        # Build l'image Docker
+make create_container   # Crée le container (port 4943)
+make start_container    # Lance le container
+
+# Arrêter
+make stop_container
+
+# Nettoyer tout et relancer
+make re
+```
+
+Le container expose le port 4943. Accès via :
+`http://127.0.0.1:4943/?canisterId=<canister-id>`
+
+## Commandes utiles
+
+| Commande | Description |
+|----------|-------------|
+| `dfx start --background` | Démarre la réplique IC locale |
+| `dfx stop` | Arrête la réplique |
+| `dfx deploy` | Build + déploie tous les canisters |
+| `dfx canister status tetris_frontend` | Vérifie l'état du canister |
+| `dfx ping` | Vérifie que la réplique est en ligne |
+| `npx vite build` | Build le frontend (sans dfx generate) |
+| `npx vite --port 3000` | Serveur de dev avec hot reload |
+
+## Stack technique
+
+- **Frontend** : SvelteKit 2 + Svelte 5, Vite 5, TypeScript, SCSS
+- **Backend** : Motoko (Internet Computer)
+- **Déploiement** : adapter-static -> assets canister DFX
+- **Conteneurisation** : Docker (image `icp-dev-env-slim`)
diff --git a/package-lock.json b/package-lock.json
index 9b3a4d0..43983b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1664,21 +1664,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
diff --git a/src/tetris_frontend/src/app.html b/src/tetris_frontend/src/app.html
index d4a7d45..931ecde 100644
--- a/src/tetris_frontend/src/app.html
+++ b/src/tetris_frontend/src/app.html
@@ -1,20 +1,17 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr">
 
 <head>
 	<meta charset="utf-8" />
 	<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
-	<meta name="viewport" content="width=device-width" />
-	<title>IC Hello Starter</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
+	<title>TETRIS</title>
 	%sveltekit.head%
 </head>
 
 <body data-sveltekit-preload-data="hover">
-	<div class="browser-warning">
-		⚠️ If this page appears broken, try reloading. If the problem persists, try switching browsers; Chrome or
-		Firefox are recommended.
-	</div>
 	<div style="display: contents">%sveltekit.body%</div>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/src/tetris_frontend/src/index.scss b/src/tetris_frontend/src/index.scss
index 283585f..a66de99 100644
--- a/src/tetris_frontend/src/index.scss
+++ b/src/tetris_frontend/src/index.scss
@@ -1,41 +1,35 @@
+:root {
+    --bg:     #070712;
+    --panel:  #0d0d1f;
+    --border: #1a1a3e;
+    --accent: #00ffe7;
+    --accent2:#ff00aa;
+    --dim:    #3a3a6a;
+    --text:   #c0c0e0;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
 body {
-  font-family: sans-serif;
-  font-size: 1.5rem;
+    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;
 }
 
-img {
-  max-width: 50vw;
-  max-height: 25vw;
-  display: block;
-  margin: auto;
-}
-
-form {
-  display: flex;
-  justify-content: center;
-  gap: 0.5em;
-  flex-flow: row wrap;
-  max-width: 40vw;
-  margin: auto;
-  align-items: baseline;
-}
-
-button[type="submit"] {
-  padding: 5px 20px;
-  margin: 10px auto;
-  float: right;
-}
-
-#greeting {
-  margin: 10px auto;
-  padding: 10px 60px;
-  border: 1px solid #222;
-}
-
-#greeting:empty {
-  display: none;
-}
-
-.browser-warning {
-  display: none;
+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;
 }
diff --git a/src/tetris_frontend/src/routes/+page.svelte b/src/tetris_frontend/src/routes/+page.svelte
index ba3f765..4921d60 100644
--- a/src/tetris_frontend/src/routes/+page.svelte
+++ b/src/tetris_frontend/src/routes/+page.svelte
@@ -1,27 +1,823 @@
 <script>
   import "../index.scss";
-  import { backend } from "$lib/canisters";
+  import { onMount, onDestroy } from "svelte";
 
-  let greeting = $state("")
+  // ─────────────────────────────────────────────
+  // PIÈCES
+  // ─────────────────────────────────────────────
 
-  function onSubmit(event) {
-    event.preventDefault();
-    const name = event.target.name.value;
-    backend.greet(name).then((response) => {
-      greeting = response;
-    });
-    return false;
+  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 = 50;
+
+      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;
+    }
+
+    _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'];
+
+  let canvasMain;
+  let canvasNext;
+  let canvasHold;
+  let game;
+
+  let scoreDisplay = $state(0);
+  let btnStartDisabled = $state(false);
+  let btnPauseDisabled = $state(true);
+  let btnStopDisabled  = $state(true);
+  let btnPauseText     = $state('Pause');
+  let overlayVisible   = $state(false);
+  let overlayTitle     = $state('');
+  let overlayScore     = $state('');
+
+  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);
+    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);
+    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() {
+    if (!canvasMain || !canvasNext || !canvasHold || !game) return;
+
+    const ctxMain = canvasMain.getContext('2d');
+    const ctxNext = canvasNext.getContext('2d');
+    const ctxHold = canvasHold.getContext('2d');
+
+    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);
+
+    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);
+    }
+
+    drawMiniPiece(ctxNext, game.nextPiece,   100, 80);
+    drawMiniPiece(ctxHold, game.storedPiece, 100, 80);
+
+    scoreDisplay = game.score;
+  }
+
+  function updateButtons() {
+    if (!game) return;
+    btnStartDisabled = game.isRunning;
+    btnPauseDisabled = !game.isRunning;
+    btnStopDisabled  = !game.isRunning;
+    btnPauseText     = game.isPaused ? 'Resume' : 'Pause';
+  }
+
+  function handleStart() {
+    overlayVisible = false;
+    game.start();
+    updateButtons();
+    render();
+  }
+
+  function handlePause() {
+    game.pause();
+    updateButtons();
+    if (game.isPaused) {
+      overlayTitle = 'PAUSE';
+      overlayScore = '';
+      overlayVisible = true;
+    } else {
+      overlayVisible = false;
+    }
+  }
+
+  function handleStop() {
+    game.stop();
+    updateButtons();
+    render();
+    overlayTitle = 'STOPPED';
+    overlayScore = '';
+    overlayVisible = true;
+  }
+
+  onMount(() => {
+    game = new Tetris(
+      () => { render(); updateButtons(); },
+      (score) => {
+        render();
+        updateButtons();
+        overlayTitle = 'GAME OVER';
+        overlayScore = `Score : ${score}`;
+        overlayVisible = true;
+      }
+    );
+    render();
+    updateButtons();
+  });
+
+  onDestroy(() => {
+    if (game && game.isRunning) {
+      game.stop();
+    }
+  });
 </script>
 
-<main>
-  <img src="/logo2.svg" alt="DFINITY logo" />
-  <br />
-  <br />
-  <form action="#" onsubmit={onSubmit}>
-    <label for="name">Enter your name: &nbsp;</label>
-    <input id="name" alt="Name" type="text" />
-    <button type="submit">Click Me!</button>
-  </form>
-  <section id="greeting">{greeting}</section>
-</main>
+<h1>TETRIS</h1>
+
+<div id="app">
+  <!-- Panneau gauche : Hold + Score + Boutons -->
+  <div class="panel">
+    <div class="panel-title">Hold</div>
+    <canvas bind:this={canvasHold} id="canvas-hold" width="100" height="80"></canvas>
+
+    <div class="score-block">
+      <div class="score-label">Score</div>
+      <div class="score-value">{scoreDisplay}</div>
+    </div>
+
+    <div class="btn-group">
+      <button id="btn-start" disabled={btnStartDisabled} onclick={handleStart}>Start</button>
+      <button id="btn-pause" disabled={btnPauseDisabled} onclick={handlePause}>{btnPauseText}</button>
+      <button id="btn-stop"  disabled={btnStopDisabled}  onclick={handleStop}>Stop</button>
+    </div>
+  </div>
+
+  <!-- Grille principale -->
+  <div id="main-wrapper">
+    <canvas bind:this={canvasMain} id="canvas-main" width="300" height="600"></canvas>
+    <div id="overlay" class:visible={overlayVisible}>
+      <div id="overlay-title">{overlayTitle}</div>
+      <div id="overlay-score">{overlayScore}</div>
+    </div>
+  </div>
+
+  <!-- Panneau droit : Next + Contrôles -->
+  <div class="panel">
+    <div class="panel-title">Next</div>
+    <canvas bind:this={canvasNext} id="canvas-next" width="100" height="80"></canvas>
+
+    <div class="controls-list">
+      <div><span>&larr; &rarr;</span> Déplacer</div>
+      <div><span>&darr;</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>
+
+<style>
+  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;
+  }
+
+  :global(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>
diff --git a/src/tetris_frontend/svelte.config.js b/src/tetris_frontend/svelte.config.js
index 0d8c676..ed38d1e 100644
--- a/src/tetris_frontend/svelte.config.js
+++ b/src/tetris_frontend/svelte.config.js
@@ -3,16 +3,16 @@ import adapter from '@sveltejs/adapter-static';
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   kit: {
-    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
-    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
     adapter: adapter({
       pages: 'dist',
       assets: 'dist',
-      fallback: undefined,
+      fallback: 'index.html',
       precompress: false,
       strict: true,
     }),
+    paths: {
+      relative: false,
+    },
   },
 };