diff --git a/public/img/pause.png b/public/img/pause.png new file mode 100644 index 0000000..176e0e2 Binary files /dev/null and b/public/img/pause.png differ diff --git a/public/index.html b/public/index.html index acd5934..a02c5fd 100644 --- a/public/index.html +++ b/public/index.html @@ -12,19 +12,21 @@
-

+

Score: 0

-
- +
+
- - +
+

Next

+
+ +
+
+
+
+ +
+
diff --git a/public/script/index.js b/public/script/index.js index 9ac44c2..bdc30b5 100644 --- a/public/script/index.js +++ b/public/script/index.js @@ -1,4 +1,5 @@ -const board = document.getElementById('tetris-canvas'); +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'); @@ -7,15 +8,21 @@ const pauseMenu = document.getElementById('pause-menu'); const startButton = document.getElementById('start-button'); const pauseButton = document.getElementById('pause-button'); -const preview = document.getElementById('preview-canvas'); +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'); + restartButton.addEventListener('click', () => { displayGameBoard(); - iniGame(); + startGame(); refresh(); } ); @@ -30,8 +37,8 @@ pauseButton.addEventListener('click', () => pauseGame(); }); -const boardContext = board.getContext('2d'); -const previewContext = preview.getContext('2d'); +let boardContext = board.getContext('2d'); +let previewContext = preview.getContext('2d'); boardContext.fillStyle = 'black'; boardContext.fillRect(0, 0, board.width, board.height); @@ -57,7 +64,7 @@ let lines = 0; let speed = 1000; let pause = false; -let gameOver = false; +let gameOver = true; const templatePiece = [ [ // ok @@ -200,10 +207,14 @@ function startGame() { } function pauseGame() { + if (gameOver) { + return; + } + if (pause) { pause = false; displayGameBoard(); - initAndChangeSpeedDrop(); + //initAndChangeSpeedDrop(); } else { pause = true; displayPause(); @@ -521,7 +532,7 @@ function fasteDrop() { } document.addEventListener('keydown', (event) => { - if (event.key == 'Escape') { + if (event.key == 'Escape' && !keyPress.includes('Escape')) { pauseGame(); return; } @@ -588,6 +599,5 @@ document.addEventListener('keyup', (event) => { }); img.onload = () => { - loadMenu.classList.add('hidden'); - mainMenu.classList.remove('hidden'); + displayMainMenu(); } \ No newline at end of file diff --git a/public/script/view.js b/public/script/view.js index 3e2e059..3e23f54 100644 --- a/public/script/view.js +++ b/public/script/view.js @@ -8,31 +8,10 @@ function drawTetisWithOppacity(x, y, color, oppacity) { } function drawTetrisOnThePreview(x, y, color) { - let width = 0; - let height = 0; - - for (let i = 0; i < nextPiece.length - 1; i++) { - let piece = nextPiece[i]; - width = Math.max(width, piece[0]); - height = Math.max(height, piece[1]); - } - - x = x + (preview.width/5 - width * preview.width/5) / 2; - y = y + (preview.height/5 - height * preview.width/10) / 2; - - previewContext.drawImage(img, x, y, preview.width/5, preview.width/5); - - const imageData = previewContext.getImageData(x, y, preview.width/5, preview.width/5); - 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] * color[3] / 255; - } - - previewContext.putImageData(imageData, x, y); + previewContext.fillStyle = '#303f4f'; // Couleur de fond + previewContext.fillRect(x, y, preview.width/5, preview.width/5); + previewContext.fillStyle = `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${oppacity})` + previewContext.fillRect(x + gapPiece/2, y + gapPiece/2, preview.width/5 - gapPiece, preview.width/5 - gapPiece); } @@ -97,14 +76,20 @@ function drawBoard() { function clearBoard() { // Ajouter un motif subtil en arrière-plan - boardContext.fillStyle = 'rgba(255, 255, 255)'; + + 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 = '#5d6270'; // Encore plus sombre + boardContext.fillStyle = '#6d728020'; // Encore plus sombre } else { - boardContext.fillStyle = '#3d4250'; // Presque noir-bleuté + boardContext.fillStyle = '#3d425020'; // Presque noir-bleuté } boardContext.fillRect( i * board.width/10, @@ -118,12 +103,40 @@ function clearBoard() { function displayPreview() { - previewContext.fillStyle = 'black'; - previewContext.fillRect(0, 0, preview.width, preview.height); + 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 xDif = nextPiece[nextPiece.length - 1][0] - 2; + let yDif = nextPiece[nextPiece.length - 1][1] + 0.5; for (let i = 0; i < nextPiece.length - 1; i++) { let piece = nextPiece[i]; - drawTetrisOnThePreview(piece[0] * preview.width/5, piece[1] * preview.width/5, nextColor); + drawTetrisOnThePreview((piece[0] - xDif) * preview.width/5, (piece[1] + yDif) * preview.width/5, nextColor); } } @@ -136,11 +149,22 @@ function refresh() { displayPreview(); } +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'); - board.classList.add('hidden'); - + boardContainer.classList.add('hidden'); + + pauseButton.classList.add('paused'); pauseMenu.classList.remove('hidden'); } @@ -149,14 +173,18 @@ function displayGameBoard() { loadMenu.classList.add('hidden'); pauseMenu.classList.add('hidden'); gameOverMenu.classList.add('hidden'); + pauseButton.classList.remove('paused'); + buttonContainer.classList.remove('hidden'); - board.classList.remove('hidden'); + boardContainer.classList.remove('hidden'); } function displayGameOver() { mainMenu.classList.add('hidden'); loadMenu.classList.add('hidden'); - board.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/style/index.css b/public/style/index.css index bd8e584..8fedf26 100644 --- a/public/style/index.css +++ b/public/style/index.css @@ -20,29 +20,62 @@ body { } .container { - display: flex; - flex-direction: row; + gap: 1rem; + display: flex; + flex-direction: row; } .tetris { width: 300px; height: 600px; +} - padding: 10px; +.frame { + padding: 10px; + margin: 0px; - border-radius: 10px; + border-radius: 10px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); - background: #4E4F4D; + background: #414241a0; + position: relative; /* Nécessaire pour le positionnement du pseudo-élément */ + + p { + padding: 0px; + margin: 0px; + } +} + +.frame::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #4E4F4DA0; + border-radius: 10px; /* Même border-radius que le parent */ + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); /* Pour Safari */ + z-index: -1; /* Assure que le fond est derrière le contenu */ } .first { - width: 150px; + display: flex; + flex-direction: column; + gap: 1rem; + align-items: end; + width: 100px; } .last { - width: 150px; + display: flex; + flex-direction: column; + gap: 1rem; + align-items: start; + width: 100px; + justify-content: space-between; } .main-menu { @@ -67,6 +100,44 @@ body { color: white; } +.icon.play-pause { + border: 0; + background: transparent; + box-sizing: border-box; + width: 0; + height: 37px; /* Réduit de moitié (était 74px) */ + + border-color: transparent transparent transparent #74dc74; + transition: 100ms all ease; + cursor: pointer; + + border-style: solid; + border-width: 18.5px 0 18.5px 30px; /* Réduit proportionnellement (était 37px 0 37px 60px) */ + + &.paused { + border-style: double; + border-width: 0px 0 0px 30px; /* Réduit (était 60px) */ + border-color: transparent transparent transparent #ff5e5e; + } +} + +.icon.play-pause.play::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + + + +} + +.pauseContainer { + width: min-content; + height: min-content; +} + .loader { width: 48px; height: 48px;