From 154ef7f486407672d0d9ffafa71001f1d9c8229e Mon Sep 17 00:00:00 2001
From: florian <la238872@student.helha.be>
Date: Sun, 4 May 2025 11:06:51 +0200
Subject: [PATCH] add game logic, display functions, and menu controls for
 Tetris

---
 .gitignore                           |   2 +
 public/index.html                    |  15 +-
 public/script/controller.js          | 146 +++++++++++++
 public/script/contruct.js            | 160 ++++++++++++++
 public/script/displayGameFunction.js | 152 ++++++++++++++
 public/script/displayMenuFunction.js |  39 ++++
 public/script/element.js             |  24 +++
 public/script/gameFunction.js        | 301 +++++++++++++++++++++++++++
 public/script/magicVariable.js       |  35 ++++
 public/script/menuController.js      |   9 +
 public/script/var.js                 |  11 +
 11 files changed, 890 insertions(+), 4 deletions(-)
 create mode 100644 public/script/controller.js
 create mode 100644 public/script/contruct.js
 create mode 100644 public/script/displayGameFunction.js
 create mode 100644 public/script/displayMenuFunction.js
 create mode 100644 public/script/element.js
 create mode 100644 public/script/gameFunction.js
 create mode 100644 public/script/magicVariable.js
 create mode 100644 public/script/menuController.js
 create mode 100644 public/script/var.js
diff --git a/.gitignore b/.gitignore
index fb9934d..17aa023 100644
--- a/.gitignore
+++ b/.gitignore
@@ -148,3 +148,5 @@ fastdeliver.db
 api.http
 
 node_modules
+
+datas
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index ff17cd2..ff138f0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,8 +4,15 @@
 <head>
     <meta charset="utf-8" />
     <title>Tetris on the web</title>
-    <script src="./script/index.js" defer></script>
-    <script src="./script/view.js" defer></script>
+    <script src="./script/element.js" defer></script>
+    <script src="./script/var.js" defer></script>
+    <script src="./script/displayGameFunction.js" defer></script>
+    <script src="./script/displayMenuFunction.js" defer></script>
+    <script src="./script/contruct.js" defer></script>
+    <script src="./script/magicVariable.js" defer></script>
+    <script src="./script/gameFunction.js" defer></script>
+    <script src="./script/controller.js" defer></script>
+    <script src="./script/menuController.js" defer></script>
     <link rel="stylesheet" href="./style/index.css" />
 </head>
 
@@ -37,7 +44,7 @@
             <div class="hidden" id="board-container">
                 <canvas  id="tetris-canvas" width="300" height="600"></canvas>
             </div>
-            <div class="main-menu hidden" id="main-menu" >
+            <div class="main-menu" id="main-menu" >
                 <button id="start-button">Start</button>
             </div>
             <div class="gameOver hidden" id="game-over-menu">
@@ -50,7 +57,7 @@
                 <button id="resume-button">Resume</button>
                 <button id="main-menu">Main Menu</button>
             </div>
-            <div class="load-menu" id="load-menu">
+            <div class="load-menu hidden" id="load-menu">
                 <span class="loader"></span>
                 <p>Loading...</p>
             </div>
diff --git a/public/script/controller.js b/public/script/controller.js
new file mode 100644
index 0000000..48be882
--- /dev/null
+++ b/public/script/controller.js
@@ -0,0 +1,146 @@
+
+function initGame() {
+    displayGameBoard();
+
+    game = getGame();
+
+    setSpeed(game);
+
+    initOrChangeDropInterval(game.speed);
+
+
+    // On rafraichit le plateau toutes les 16ms (environ 60 FPS)
+    refreshInterval = setInterval(() => {
+        refreshBoard(game.board);
+        displayPreview(game);
+    }, 16);
+}
+
+function initOrChangeDropInterval(speed) {
+    if (dropInterval) {
+        clearInterval(dropInterval);
+    }
+    dropInterval = setInterval(() => {
+        dropPiece();
+    }, speed);
+}
+
+function moveDownWithCheck(game) {
+    let piece = game.currentPiece;
+
+    if (ifMoveDown(piece, game)) {
+        opacityCurrentPiece = 1;
+
+        clearInterval(endDropInterval);
+
+        endDropInterval = null;
+
+        moveDown(piece);
+    } 
+
+    checkEnDrop(game);
+}
+
+function checkEnDrop(game) {
+    if (ifMoveDown(game.currentPiece, game)) {
+        opacityCurrentPiece = 1;
+
+        clearInterval(endDropInterval);
+
+        endDropInterval = null;
+    }
+    else {
+        endDrop(game);
+    }
+}
+
+function dropPiece() {
+    moveDownWithCheck(game);
+}
+
+function pauseGame() {
+    if (game.paused) {
+        game.paused = false;
+        initOrChangeDropInterval(game.speed);
+        refreshInterval = setInterval(() => {
+            refreshBoard(game.board);
+            displayPreview(game);
+        }, 16);
+
+        displayGameBoard();
+    } else {
+        game.paused = true;
+        clearInterval(dropInterval);
+        clearInterval(refreshInterval);
+        dropInterval = null;
+        refreshInterval = null;
+        endDropInterval = null;
+
+        displayPause()
+    }
+}
+
+
+document.addEventListener('keydown', (event) => {
+    if (event.key == 'Escape' && !keyPress.includes('Escape')) {
+        pauseGame();
+        return;
+    }
+    if (game.paused) {
+        return;
+    }
+    if (game.gameOver) {
+        return;
+    }
+
+    if ((event.key == 'ArrowUp' || event.key == 'w' || event.key == 'z') && !keyPress.includes('ArrowUp') && !keyPress.includes('w') && !keyPress.includes('z')) {
+        rotatePiece(game.currentPiece);
+        checkEnDrop(game);
+
+    } else if ((event.key == 'ArrowDown' || event.key == 's') && !keyPress.includes('ArrowDown') && !keyPress.includes('s')) {
+        initOrChangeDropInterval(60);
+    } else if ((event.key == 'ArrowLeft' || event.key == 'a' || event.key == 'q') && !keyPress.includes('ArrowLeft') && !keyPress.includes('q') && !keyPress.includes('a')) {
+        moveLeft(game.currentPiece);
+        checkEnDrop(game);
+
+        leftInterval = setInterval(() => {
+            moveLeft(game.currentPiece);
+            checkEnDrop(game);
+
+        }, 100);
+    } else if (((event.key == 'ArrowRight') || event.key == 'd') && !keyPress.includes('ArrowRight') && !keyPress.includes('d')) {
+        moveRight(game.currentPiece);
+
+        checkEnDrop(game);
+
+
+        rightInterval = setInterval(() => {
+            moveRight(game.currentPiece);
+
+            checkEnDrop(game);
+
+        }, 100);
+    } else if (event.key == ' ' && !keyPress.includes(' ')) {
+        fastDrop(game);
+    }
+
+    console.log(event.key);
+
+    keyPress.push(event.key);
+});
+
+document.addEventListener('keyup', (event) => {
+    if (!game.paused && !game.gameOver) {
+        if (event.key == 'ArrowDown' || event.key == 's') {
+            initOrChangeDropInterval(game.speed);
+        } else if (event.key == 'ArrowLeft' || event.key == 'a' || event.key == 'q') {
+            clearInterval(leftInterval);
+        } else if (event.key == 'ArrowRight' || event.key == 'd') {
+            clearInterval(rightInterval);
+        }
+    }
+
+    keyPress = keyPress.filter((key) => {
+        return key != event.key;
+    });
+});
\ No newline at end of file
diff --git a/public/script/contruct.js b/public/script/contruct.js
new file mode 100644
index 0000000..b6e6d02
--- /dev/null
+++ b/public/script/contruct.js
@@ -0,0 +1,160 @@
+function getGame() {
+    return {
+        board: [],
+        currentPiece: getRandomPiece(),
+        nextPiece: getRandomPiece(),
+        score: 0,
+        level: 1,
+        speed: 1000,
+        lines: 0,
+        linesCleared: 0,
+        paused: false,
+        gameOver: false
+    }
+}
+
+function getColor(r, g, b) {
+    return {
+        red: r,
+        green: g,
+        blue: b
+    }
+}
+
+function getSquare(xPos, yPos, c) {
+    return {
+        color: c,
+        x: xPos,
+        y: yPos
+    }
+}
+
+function getBarPiece() {
+    return {
+        squares: [
+            getSquare(3, 0, getColor(240, 87, 84)),
+            getSquare(4, 0, getColor(240, 87, 84)),
+            getSquare(5, 0, getColor(240, 87, 84)),
+            getSquare(6, 0, getColor(240, 87, 84))
+        ],
+        xCenter: 4.5,
+        yCenter: 0.5
+    }
+}
+
+function getLPiece() {
+    return {
+        squares: [
+            getSquare(3, 1, getColor(254, 223, 92)),
+            getSquare(4, 1, getColor(254, 223, 92)),
+            getSquare(5, 1, getColor(254, 223, 92)),
+            getSquare(5, 0, getColor(254, 223, 92))
+        ],
+        xCenter: 4,
+        yCenter: 1
+    }
+}
+
+function getJPiece() {
+    return {
+        squares: [
+            getSquare(3, 1, getColor(27, 148, 118)),
+            getSquare(4, 1, getColor(27, 148, 118)),
+            getSquare(5, 1, getColor(27, 148, 118)),
+            getSquare(3, 0, getColor(27, 148, 118))
+        ],
+        xCenter: 4,
+        yCenter: 1
+    }
+}
+
+function getTPiece() {
+    return {
+        squares: [
+            getSquare(3, 1, getColor(36, 115, 155)),
+            getSquare(4, 1, getColor(36, 115, 155)),
+            getSquare(5, 1, getColor(36, 115, 155)),
+            getSquare(4, 0, getColor(36, 115, 155))
+        ],
+        xCenter: 4,
+        yCenter: 1
+    }
+}
+
+function getZPiece() {
+    return {
+        squares: [
+            getSquare(3, 1, getColor(106, 190, 178)),
+            getSquare(4, 1, getColor(106, 190, 178)),
+            getSquare(4, 0, getColor(106, 190, 178)),
+            getSquare(5, 0, getColor(106, 190, 178))
+        ],
+        xCenter: 4,
+        yCenter: 1
+    }
+}
+
+function getSPiece() {
+    return {
+        squares: [
+            getSquare(3, 0, getColor(164, 199, 218)),
+            getSquare(4, 0, getColor(164, 199, 218)),
+            getSquare(4, 1, getColor(164, 199, 218)),
+            getSquare(5, 1, getColor(164, 199, 218))
+        ],
+        xCenter: 4,
+        yCenter: 1
+    }
+}
+
+function getSquarePiece() {
+    return {
+        squares: [
+            getSquare(3, 0, getColor(177, 225, 218)),
+            getSquare(4, 0, getColor(177, 225, 218)),
+            getSquare(3, 1, getColor(177, 225, 218)),
+            getSquare(4, 1, getColor(177, 225, 218))
+        ],
+        xCenter: 3.5,
+        yCenter: 0.5
+    }
+}
+
+function getPiece(type) {
+    switch (type) {
+        case 'bar':
+            return getBarPiece();
+        case 'L':
+            return getLPiece();
+        case 'J':
+            return getJPiece();
+        case 'T':
+            return getTPiece();
+        case 'Z':
+            return getZPiece();
+        case 'S':
+            return getSPiece();
+        case 'square':
+            return getSquarePiece();
+    }
+}
+
+function getRandomPiece() {
+    const pieces = ['bar', 'L', 'J', 'T', 'Z', 'S', 'square'];
+    const randomIndex = Math.floor(Math.random() * pieces.length);
+    return getPiece(pieces[randomIndex]);
+}
+
+function clonePiece(piece) {
+    let newSquares = piece.squares.map(square => ({
+        color: { ...square.color },
+        x: square.x,
+        y: square.y
+    }));
+    
+    return {
+        squares: newSquares,
+        xCenter: piece.xCenter,
+        yCenter: piece.yCenter
+    };
+}
\ No newline at end of file
diff --git a/public/script/displayGameFunction.js b/public/script/displayGameFunction.js
new file mode 100644
index 0000000..874e45e
--- /dev/null
+++ b/public/script/displayGameFunction.js
@@ -0,0 +1,152 @@
+let boardContext = board.getContext('2d');
+let previewContext = preview.getContext('2d');
+
+function clearBoard() {
+    // Ajouter un motif subtil en arrière-plan
+
+    boardContainer.innerHTML = '';
+    board = boardBis.cloneNode(true);
+    boardContainer.appendChild(board);
+
+    boardContext = board.getContext('2d');
+
+    for (let i = 0; i < 10; i++) {
+        for (let j = 0; j < 20; j++) {
+            if ((i + j) % 2 === 0) {
+                boardContext.fillStyle = '#6d728020'; // Encore plus sombre
+            }
+            else {
+                boardContext.fillStyle = '#3d425020'; // Presque noir-bleuté
+            }
+            boardContext.fillRect(
+                i * board.width/10, 
+                j * board.height/20, 
+                board.width/10, 
+                board.height/20
+            );
+        }
+    }
+}
+
+function drawGrid() {
+    boardContext.strokeStyle = 'gray'; // Couleur des lignes du quadrillage
+    boardContext.lineWidth = 0.5; // Épaisseur des lignes
+
+    // Dessiner les lignes verticales
+    for (let x = 0; x <= board.width; x += board.width / 10) {
+        boardContext.beginPath();
+        boardContext.moveTo(x, 0);
+        boardContext.lineTo(x, board.height);
+        boardContext.stroke();
+    }
+
+    // Dessiner les lignes horizontales
+    for (let y = 0; y <= board.height; y += board.height / 20) {
+        boardContext.beginPath();
+        boardContext.moveTo(0, y);
+        boardContext.lineTo(board.width, y);
+        boardContext.stroke();
+    }
+}
+
+function drawCurrentPiece() {
+    let piece = game.currentPiece;
+    let squares = piece.squares;
+
+    for (let i = 0; i < squares.length; i++) {
+        let square = squares[i];
+        drawSquare(square.x, square.y, square, opacityCurrentPiece);
+    }
+}
+
+function drawSquare(x, y, square, opacity = 1) {
+    let color = square.color;
+
+    boardContext.fillStyle = '#303f4f'; // Couleur de fond
+    boardContext.fillRect(
+        x * board.width/10, 
+        y * board.height/20, 
+        board.width/10, 
+        board.height/20
+    );
+
+    let margin = 3;
+
+    boardContext.fillStyle = `rgba(${color.red}, ${color.green}, ${color.blue}, ${opacity})`;
+    boardContext.fillRect(
+        x * board.width/10 + margin, 
+        y * board.height/20 + margin, 
+        board.width/10 - margin * 2, 
+        board.height/20 - margin * 2
+    );
+}
+
+function refreshBoard() {
+    clearBoard();
+    drawGrid();
+
+    for (let i = 0; i < game.board.length; i++) {
+        let square = game.board[i];
+        drawSquare(square.x, square.y, square);
+    }
+
+    drawCurrentPiece();
+}
+
+function displayPreview(game) {
+    previewContainer.innerHTML = '';
+
+    preview = previewBis.cloneNode(true);
+    previewContainer.appendChild(preview);
+
+    previewContext = preview.getContext('2d');
+
+
+    // make damier
+
+    for (let x = 0; x < 5 ; x++) {
+        for (let y = 0;y < 5; y++) {
+            if ((x + y) % 2 === 0) {
+                previewContext.fillStyle = '#6d728020'; // Encore plus sombre
+            }
+            else {
+                previewContext.fillStyle = '#3d425020'; // Presque noir-bleuté
+            }
+
+            previewContext.fillRect(
+                x * preview.width/5, 
+                y * preview.height/5, 
+                preview.width/5, 
+                preview.height/5
+            );
+        }
+    }
+
+    let nextPiece = game.nextPiece;
+    
+    let xDif = nextPiece.xCenter - 2;
+    let yDif = nextPiece.yCenter - 2;
+
+    for (let i = 0; i < nextPiece.squares.length; i++) {
+        let square = nextPiece.squares[i];
+        
+        previewContext.fillStyle = '#303f4f'; // Couleur de fond
+        previewContext.fillRect(
+            (square.x - xDif) * preview.width/5, 
+            (square.y - yDif) * preview.height/5, 
+            preview.width/5, 
+            preview.height/5
+        );
+
+        let margin = 3;
+
+        previewContext.fillStyle = `rgba(${square.color.red}, ${square.color.green}, ${square.color.blue}, 1)`;
+
+        previewContext.fillRect(
+            (square.x - xDif) * preview.width/5 + margin, 
+            (square.y - yDif) * preview.height/5 + margin, 
+            preview.width/5 - margin * 2, 
+            preview.height/5 - margin * 2
+        );
+    }
+}
\ No newline at end of file
diff --git a/public/script/displayMenuFunction.js b/public/script/displayMenuFunction.js
new file mode 100644
index 0000000..e47b7fa
--- /dev/null
+++ b/public/script/displayMenuFunction.js
@@ -0,0 +1,39 @@
+function displayMainMenu() {
+    mainMenu.classList.remove('hidden');
+    loadMenu.classList.add('hidden');
+    boardContainer.classList.add('hidden');
+    pauseButton.classList.remove('paused');
+    buttonContainer.classList.add('hidden');
+    
+    gameOverMenu.classList.add('hidden');
+}
+
+function displayPause() {
+    mainMenu.classList.add('hidden');
+    loadMenu.classList.add('hidden');
+    boardContainer.classList.add('hidden');
+    
+    pauseButton.classList.add('paused');
+    pauseMenu.classList.remove('hidden');
+}
+
+function displayGameBoard() {
+    mainMenu.classList.add('hidden');
+    loadMenu.classList.add('hidden');
+    pauseMenu.classList.add('hidden');
+    gameOverMenu.classList.add('hidden');
+    pauseButton.classList.remove('paused');
+    buttonContainer.classList.remove('hidden');
+    
+    boardContainer.classList.remove('hidden');
+}
+
+function displayGameOver() {
+    mainMenu.classList.add('hidden');
+    loadMenu.classList.add('hidden');
+    boardContainer.classList.add('hidden');
+    pauseButton.classList.remove('paused');
+    buttonContainer.classList.add('hidden');
+
+    gameOverMenu.classList.remove('hidden');
+}
\ No newline at end of file
diff --git a/public/script/element.js b/public/script/element.js
new file mode 100644
index 0000000..e65c46b
--- /dev/null
+++ b/public/script/element.js
@@ -0,0 +1,24 @@
+let board = document.getElementById('tetris-canvas');
+const boardBis = document.getElementById('tetris-canvas').cloneNode(true);
+const scoreElement = document.getElementById('score-value');
+const loadMenu = document.getElementById('load-menu');
+const mainMenu = document.getElementById('main-menu');
+const pauseMenu = document.getElementById('pause-menu');
+
+const startButton = document.getElementById('start-button');
+const pauseButton = document.getElementById('pause-button');
+
+let preview = document.getElementById('preview-canvas');
+const previewBis = document.getElementById('preview-canvas').cloneNode(true);
+
+const gameOverMenu = document.getElementById('game-over-menu');
+const restartButton = document.getElementById('restart-button');
+
+const boardContainer = document.getElementById('board-container');
+const previewContainer = document.getElementById('preview-container');
+
+const buttonContainer = document.getElementById('pause-container');
+
+const highScoreTemplate = document.getElementById('high-score-template');
+
+const highScoresList = document.getElementById('high-scores-list');
\ No newline at end of file
diff --git a/public/script/gameFunction.js b/public/script/gameFunction.js
new file mode 100644
index 0000000..176f430
--- /dev/null
+++ b/public/script/gameFunction.js
@@ -0,0 +1,301 @@
+function ifPieceInBoard(x, y, game) {
+    let board = game.board;
+
+    if (x < 0 || x >= width || y >= height) {
+        return true;
+    }
+
+    for (let i = 0; i < board.length; i++) {
+        if (board[i].x === x && board[i].y === y) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+function ifMovePiece(x, y, piece, game) {
+    for (let i = 0; i < piece.squares.length; i++) {
+        let square = piece.squares[i];
+        let newX = square.x + x;
+        let newY = square.y + y;
+
+        if (ifPieceInBoard(newX, newY, game)) {
+            return false;
+        }
+    }
+    return true;
+}
+
+function ifMoveDown(piece, game) {
+    return ifMovePiece(0, 1, piece, game);
+}
+
+function ifMoveLeft(piece, game) {
+    return ifMovePiece(-1, 0, piece, game);
+}
+
+function ifMoveRight(piece, game) {
+    return ifMovePiece(1, 0, piece, game);
+}
+
+function ifRotate(piece, game) {
+    let centerX = piece.xCenter;
+    let centerY = piece.yCenter;
+
+    for (let i = 0; i < piece.squares.length; i++) {
+        let square = piece.squares[i];
+        let x = square.x - centerX;
+        let y = square.y - centerY;
+
+        let newX = -y + centerX;
+        let newY = x + centerY;
+
+        if (ifPieceInBoard(newX, newY, game)) {
+            return false;
+        }
+    }
+    return true;
+}
+
+function moveDown(piece) {
+    for (let i = 0; i < piece.squares.length; i++) {
+        let square = piece.squares[i];
+        square.y += 1;
+    }
+
+    piece.yCenter += 1;
+}
+
+function moveLeft(piece) {
+    if (!ifMoveLeft(piece, game)) {
+        return;
+    }
+
+    for (let i = 0; i < piece.squares.length; i++) {
+        let square = piece.squares[i];
+        square.x -= 1;
+    }
+
+    piece.xCenter -= 1;
+}
+
+function moveRight(piece) {
+    if (!ifMoveRight(piece, game)) {
+        return;
+    }
+
+    for (let i = 0; i < piece.squares.length; i++) {
+        let square = piece.squares[i];
+        square.x += 1;
+    }
+
+    piece.xCenter += 1;
+}
+
+function ifCantRotate(piece, game) {
+    let centerX = piece.xCenter;
+    let centerY = piece.yCenter;
+    
+    let moveX = [0, -1, 1, -2, 2];
+    let moveY = [0, -1];
+
+    for (let i = 0; i < moveX.length; i++) {
+        for (let j = 0; j < moveY.length; j++) {
+            let pieceBis = clonePiece(piece);
+
+            pieceBis.xCenter += moveX[i];
+            pieceBis.yCenter += moveY[j];
+
+            for (let k = 0; k < pieceBis.squares.length; k++) {
+                let square = pieceBis.squares[k];
+                square.x += moveX[i];
+                square.y += moveY[j];
+            }
+
+            if (ifRotate(pieceBis, game)) {
+                return [false, moveX[i], moveY[j]];
+            }
+        }
+    }
+
+    return [true, centerX, centerY];
+}
+
+function rotatePiece(piece) {
+    if (!ifRotate(piece, game)) {
+        let info = ifCantRotate(piece, game);
+        let canRotate = info[0];
+        let x = info[1];
+        let y = info[2];
+
+        if (canRotate) {
+            return;
+        }
+
+        for (let i = 0; i < piece.squares.length; i++) {
+            let square = piece.squares[i];
+            square.x += x;
+            square.y += y;
+        }
+        piece.xCenter += x;
+        piece.yCenter += y;
+    }
+
+    let centerX = piece.xCenter;
+    let centerY = piece.yCenter;
+
+    for (let i = 0; i < piece.squares.length; i++) {
+        let square = piece.squares[i];
+        let x = square.x - centerX;
+        let y = square.y - centerY;
+
+        square.x = -y + centerX;
+        square.y = x + centerY;
+    }
+}
+
+function fixPieceToBoard(piece, game) {
+    for (let i = 0; i < piece.squares.length; i++) {
+        let square = piece.squares[i];
+        game.board.push(square);
+    }
+
+    opacityCurrentPiece = 1;
+
+    checkLine(game);
+    // Vous pouvez également gérer ici la création d'une nouvelle pièce
+    // ou vérifier si des lignes doivent être supprimées.
+}
+
+function checkLine(game, ifNoFall = false) {
+    let lineFilled = [];
+
+    for (let i = 0; i < 20; i++) {
+        let filled = true;
+        for (let j = 0; j < 10; j++) {
+            if (!ifPieceInBoard(j, i, game)) {
+                filled = false;
+                break;
+            }
+        }
+
+        if (filled) {
+            lineFilled.push(i);
+        }
+    }
+
+    for (let i = 0; i < game.board.length; i++) {
+        let square = game.board[i];
+        let y = square.y;
+
+        if (!ifNoFall) {
+            for (let j = 0; j < lineFilled.length; j++) {
+                if (lineFilled[j] > y) {
+                    square.y += 1;
+                }
+            }
+        }
+
+        if (lineFilled.includes(y)) {
+            game.board.splice(i, 1);
+            i--;
+        }
+    }
+
+
+    if (lineFilled.length == 1) {
+        game.score += 40;
+    }
+    else if (lineFilled.length == 2) {
+        game.score += 100;
+    }
+    else if (lineFilled.length == 3) {
+        game.score += 300;
+    }
+    else if (lineFilled.length == 4) {
+        game.score += 1200;
+    }
+
+    scoreElement.innerText = game.score;
+    game.lines += lineFilled.length;
+    game.level = Math.floor(game.lines / 10);
+}
+
+function switchPiece(game) {
+    game.currentPiece = game.nextPiece;
+    game.nextPiece = getRandomPiece();
+
+    for (let i = 0; i < game.currentPiece.squares.length; i++) {
+        if (ifPieceInBoard(game.currentPiece.squares[i].x, game.currentPiece.squares[i].y, game)) {
+            game.gameOver = true;
+            clearInterval(dropInterval);
+            clearInterval(leftInterval);
+            clearInterval(rightInterval);
+            clearInterval(refreshInterval);
+
+            clearInterval(endDropInterval);
+            endDropInterval = null;
+            opacityCurrentPiece = 1;
+            game.currentPiece = null;
+            dropInterval = null;
+            refreshInterval = null;
+
+            displayGameOver();
+            return;
+        }
+    }
+}
+
+function setSpeed(game) {
+    if (game.level > 29) {
+        game.speed = (speedSecondsToBotomPerLevel[29] / 20) * 1000;
+    }
+    else {
+        game.speed = (speedSecondsToBotomPerLevel[game.level] / 20) * 1000;
+    }
+}
+
+function endDrop(game) {
+    let piece = game.currentPiece;
+
+    // La pièce ne peut plus descendre, elle est fixée sur le plateau
+    if (!endDropInterval) { // Vérifiez qu'il n'y a pas déjà un intervalle actif
+        endDropInterval = setInterval(() => {
+            opacityCurrentPiece -= 0.1;
+            if (opacityCurrentPiece <= 0) {
+
+                fixPieceToBoard(piece, game);
+
+                clearInterval(endDropInterval);
+                endDropInterval = null; // Réinitialisez après l'arrêt
+                opacityCurrentPiece = 1;
+                switchPiece(game);
+                setSpeed(game);
+                initOrChangeDropInterval(game.speed);
+            }
+        }, 60);
+    }
+}
+
+function fastDrop(game, piece = game.currentPiece) {
+    if (piece) {
+        let canMoveDown = true;
+
+        while (canMoveDown) {
+            canMoveDown = ifMoveDown(piece, game);
+            if (canMoveDown) {
+                moveDown(piece);
+            }
+        }
+
+        fixPieceToBoard(piece, game);
+
+        clearInterval(endDropInterval);
+        endDropInterval = null; // Réinitialisez après l'arrêt
+        opacityCurrentPiece = 1;
+        setSpeed(game);
+        initOrChangeDropInterval(game.speed);
+        switchPiece(game);
+    }
+}
\ No newline at end of file
diff --git a/public/script/magicVariable.js b/public/script/magicVariable.js
new file mode 100644
index 0000000..b1d3581
--- /dev/null
+++ b/public/script/magicVariable.js
@@ -0,0 +1,35 @@
+const speedSecondsToBotomPerLevel = [
+    15.974, //0
+    14.31,  //1
+    12.646, //2
+    10.982, //3
+    9.318,  //4
+    7.654,  //5
+    5.99,   //6
+    4.326,  //7
+    2.662,  //8
+    1.997,  //9
+    1.664,  //10
+    1.664,  //11
+    1.664,  //12
+    1.331,  //13
+    1.331,  //14
+    1.331,  //15
+    0.998,  //16
+    0.998,  //17
+    0.998,  //18
+    0.666,  //19
+    0.666,  //20
+    0.666,  //21
+    0.666,  //22
+    0.666,  //23
+    0.666,  //24
+    0.666,  //25
+    0.666,  //26
+    0.666,  //27
+    0.666,  //28
+    0.333   //29
+];
+
+const width = 10;
+const height = 20;
\ No newline at end of file
diff --git a/public/script/menuController.js b/public/script/menuController.js
new file mode 100644
index 0000000..ec99405
--- /dev/null
+++ b/public/script/menuController.js
@@ -0,0 +1,9 @@
+startButton.addEventListener('click', function() {
+    initGame();
+});
+pauseButton.addEventListener('click', function() {
+    pauseGame();
+});
+restartButton.addEventListener('click', function() {
+    initGame();
+});
\ No newline at end of file
diff --git a/public/script/var.js b/public/script/var.js
new file mode 100644
index 0000000..0144f07
--- /dev/null
+++ b/public/script/var.js
@@ -0,0 +1,11 @@
+let game = null;
+let keyPress = [];
+let dropInterval = null;
+let leftInterval = null;
+let rightInterval = null;
+
+let refreshInterval = null;
+
+let endDropInterval = null;
+
+let opacityCurrentPiece = 1;
\ No newline at end of file
