change color

public/index.html

@@ -22,7 +22,7 @@
             <div class="main-menu hidden" id="main-menu" >
                 <button id="start-button">Start</button>
             </div>
-            <div class="gameOver hidden">
+            <div class="gameOver hidden" id="game-over-menu">
                 <p>Game Over</p>
                 <button id="restart-button">Restart</button>
                 <button id="main-menu">Main Menu</button>

public/script/index.js

@@ -9,6 +9,17 @@ const pauseButton = document.getElementById('pause-button');
 
 const preview = document.getElementById('preview-canvas');
 
+const gameOverMenu = document.getElementById('game-over-menu');
+const restartButton = document.getElementById('restart-button');
+
+restartButton.addEventListener('click', () =>
+{
+    displayGameBoard();
+    iniGame();
+    refresh();
+}
+);
+
 startButton.addEventListener('click', () =>
 {
     startGame();
@@ -100,16 +111,14 @@ const templatePiece = [
     ]
 ];
 
-
-
 const templateColor = [
-    [255, 0, 0, 255],
+    [240, 87, 84, 255],
-    [0, 255, 0, 255],
+    [254, 223, 92, 255],
-    [0, 0, 255, 255],
+    [27, 148, 118, 255],
-    [255, 255, 0, 255],
+    [36, 115, 155, 255],
-    [0, 255, 255, 255],
+    [106, 190, 178, 255],
-    [255, 0, 255, 255],
+    [164, 199, 218, 255],
-    [255, 40, 130, 255]
+    [177, 225, 218, 255]
 ];
 
 const speedSecondsToBotomPerLevel = [
@@ -225,6 +234,8 @@ function loadTetris() {
     currentPieceToBoard();
     checkLine();
     spawnPiece();
+
+    checkEndDrop();
 }
 
 function currentPieceToBoard() {
@@ -246,6 +257,20 @@ function spawnPiece() {
         nextColor = templateColor[random];
     }
     currentPiece = nextPiece;
+
+    for (let i = 0; i < currentPiece.length - 1; i++) {
+        if (boardData[currentPiece[i][0]][currentPiece[i][1]][0] != 0 && 
+            boardData[currentPiece[i][0]][currentPiece[i][1]][1] != 0 && 
+            boardData[currentPiece[i][0]][currentPiece[i][1]][2] != 0) {
+
+            gameOver = true;
+            clearDownInterval();
+            clearInterval(endDownInterval);
+            oppacity = 255;
+            displayGameOver();
+            return;
+        }
+    }
     
     nextPiece = [];
 
@@ -367,7 +392,6 @@ function checkEndDrop() {
     }
 }
 
-
 function clearDownInterval() {
     clearInterval(downInterval);
     downInterval = null;

public/script/view.js

@@ -1,21 +1,10 @@
 let gapPiece = 6;
 
 function drawTetisWithOppacity(x, y, color, oppacity) {
+    boardContext.fillStyle = '#303f4f'; // Couleur de fond
+    boardContext.fillRect(x, y, board.width/10, board.width/10);
     boardContext.fillStyle = `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${oppacity/255})`
     boardContext.fillRect(x + gapPiece/2, y + gapPiece/2, board.width/10 - gapPiece, board.width/10 - gapPiece);
-    // boardContext.drawImage(img, x, y, board.width/10, board.width/10);
-
-    // const imageData = boardContext.getImageData(x, y, board.width/10, board.width/10);
-    // const data = imageData.data;
-
-    // for (let i = 0; i < data.length; i += 4) {
-    //     data[i] = data[i] * color[0] / 255;
-    //     data[i + 1] = data[i + 1] * color[1] / 255;
-    //     data[i + 2] = data[i + 2] * color[2] / 255;
-    //     data[i + 3] = data[i + 3] * oppacity / 255;
-    // }
-
-    // boardContext.putImageData(imageData, x, y);
 }
 
 function drawTetrisOnThePreview(x, y, color) {
@@ -71,7 +60,7 @@ function drawHologram() {
 
     for (let i = 0; i < hologramPiece.length - 1; i++) {
         let piece = hologramPiece[i];
-        drawTetisWithOppacity(piece[0] * board.width/10, piece[1] * board.width/10, color, 80);
+        drawTetisWithOppacity(piece[0] * board.width/10, piece[1] * board.width/10, color, 120);
     }
 }
 
@@ -107,8 +96,24 @@ function drawBoard() {
 }
 
 function clearBoard() {
-    boardContext.fillStyle = 'black';
+    // Ajouter un motif subtil en arrière-plan
-    boardContext.fillRect(0, 0, board.width, board.height);
+    boardContext.fillStyle = 'rgba(255, 255, 255)';
+    for (let i = 0; i < 10; i++) {
+        for (let j = 0; j < 20; j++) {
+            if ((i + j) % 2 === 0) {
+                boardContext.fillStyle = '#5d6270'; // Encore plus sombre
+            }
+            else {
+                boardContext.fillStyle = '#3d4250'; // Presque noir-bleuté
+            }
+            boardContext.fillRect(
+                i * board.width/10, 
+                j * board.height/20, 
+                board.width/10, 
+                board.height/20
+            );
+        }
+    }
 }
 
 
@@ -143,6 +148,15 @@ function displayGameBoard() {
     mainMenu.classList.add('hidden');
     loadMenu.classList.add('hidden');
     pauseMenu.classList.add('hidden');
+    gameOverMenu.classList.add('hidden');
     
     board.classList.remove('hidden');
+}
+
+function displayGameOver() {
+    mainMenu.classList.add('hidden');
+    loadMenu.classList.add('hidden');
+    board.classList.add('hidden');
+
+    gameOverMenu.classList.remove('hidden');
 }

public/style/index.css

@@ -5,11 +5,10 @@ body {
     place-items: center;
     background: repeating-conic-gradient(
       from 45deg,
-      #fff34f 0% 25%,
+      #7FB196 0% 25%,
-      #ff8b07 0% 50%
+      #3C425A 0% 50%
     );
     background-size: max(10vw, 10svh) max(10vw, 10svh);
-    background-color: #3c5e8b;
 
     font-family: 'Roboto', sans-serif;
     
@@ -35,7 +34,7 @@ body {
 
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
 
-    background: rgb(34, 34, 34);
+    background: #4E4F4D;
 }
 
 .first {
@@ -54,8 +53,6 @@ body {
     gap: 1rem;
     align-items: center;
     justify-content: center;
-
-    background-color: black;
 }
 
 .load-menu {