adminflsu/Tetris-on-the-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

send score and display best scores

Browse Source
This commit is contained in:
florian 2025-06-10 17:30:41 +02:00
parent 9d3f4714d2
commit 3513ed8268
6 changed files with 63 additions and 1018 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
index.js
View File

@ -1,7 +1,6 @@
import express from 'express';
import sqlite3 from 'sqlite3';
import { open } from 'sqlite';
import fs from 'fs';
// Déclaration de la variable db pour qu'elle soit accessible dans tout le script
let db;
@ -20,7 +19,6 @@ async function initializeDatabase() {
id INTEGER PRIMARY KEY AUTOINCREMENT,
player_name TEXT,
score INTEGER,
pathHistory TEXT,
date TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
`);
@ -42,134 +40,37 @@ app.get('/', (req, res) => {
res.sendFile('index.html', { root: '.' });
});
const templatePiece = [
[ // ok
[3, 0],
[4, 0],
[5, 0],
[6, 0],
[4.5, 0.5]
],
[
[3, 1],
[4, 1],
[5, 1],
[5, 0],
[4, 1]
],
[ // ok
[3, 1],
[4, 1],
[5, 1],
[3, 0],
[4, 1]
],
[ // ok
[3, 0],
[4, 0],
[4, 1],
[5, 1],
[4, 1]
],
[
[3, 1],
[4, 1],
[4, 0],
[5, 0],
[4, 1]
],
[ // ok
[3, 0],
[4, 0],
[4, 1],
[5, 0],
[4, 0]
],
[ // ok
[4, 0],
[5, 0],
[4, 1],
[5, 1],
[4.5, 0.5]
]
];
const templateColor = [
[240, 87, 84, 255],
[254, 223, 92, 255],
[27, 148, 118, 255],
[36, 115, 155, 255],
[106, 190, 178, 255],
[164, 199, 218, 255],
[177, 225, 218, 255]
];
app.put('/api/sendScore', (req, res) => {
let score = req.body.score;
// let history = req.body.history;
let lines = req.body.lines;
let playerName = req.body.playerName;
// Vérifier si le score est un nombre valide
// Verify the score
if (isNaN(score) || score < 0) {
return res.status(400).send('Invalid score');
}
// Vérifier si l'historique est un tableau valide
// if (!Array.isArray(history)) {
// return res.status(400).send('Invalid history');
// }
// Vérifier si le nom du joueur est une chaîne de caractères valide
// Verify the player name
if (typeof playerName !== 'string' || playerName.trim() === '') {
return res.status(400).send('Invalid player name');
}
// Vérifier si le score est supérieur à 0 et inférieur à 1200 * (lines/4)
// Verify the score
if ((lines/4) * 1200 < score) {
return res.status(400).send('Invalid score');
}
// Vérifier si la line est un nombre valide
if (isNaN(lines) || lines < 0) {
// Verify the number lines
if (isNaN(lines) || lines <= 0) {
return res.status(400).send('Invalid lines');
}
// Vérifier si le dossier des historiques existe, le créer si nécessaire
// const historyDir = './datas/histories';
// if (!fs.existsSync(historyDir)) {
// fs.mkdirSync(historyDir, { recursive: true });
// }
// Date du jour
// const date = new Date();
// const dateString = date.toISOString().split('T')[0]; // Format YYYY-MM-DD
// // Vérifier si un fichier avec ce nom existe déjà et ajouter un chiffre si nécessaire
// let finalPlayerName = playerName + dateString;
// let counter = 0;
// let historyFilePath = `${historyDir}/${finalPlayerName}.json`;
// while (fs.existsSync(historyFilePath)) {
// counter++;
// finalPlayerName = `${playerName}${dateString}${counter}`;
// historyFilePath = `${historyDir}/${finalPlayerName}.json`;
// }
// // Écrire l'historique dans le fichier
// try {
// fs.writeFileSync(historyFilePath, JSON.stringify(history));
// console.log(`History written to ${historyFilePath}`);
// } catch (err) {
// console.error('Error writing history file:', err);
// return res.status(500).send('Error writing history file');
// }
//
db.run('INSERT INTO scores (player_name, score, pathHistory) VALUES (?, ?, ?)', [playerName, score, "/"])
db.run('INSERT INTO scores (player_name, score) VALUES (?, ?)', [playerName, score])
.then(() => {
console.log(`Score inserted for ${playerName}`);
})
.then(() => {
console.log('History path inserted in database');
res.status(200).json({
success: true,
playerName: playerName,

19
public/script/displayMenuFunction.js
View File

@ -36,4 +36,21 @@ function displayGameOver() {
buttonContainer.classList.add('hidden');
gameOverMenu.classList.remove('hidden');
}
}
function displayBestScores() {
fetch('/api/getHighScores')
.then(response => response.json())
.then(data => {
highScoresList.innerHTML = '';
data.forEach(score => {
// Clone template content properly
const scoreElement = document.importNode(highScoreTemplate.content, true).firstElementChild;
scoreElement.querySelector('.high-score-name').innerHTML = score.player_name;
scoreElement.querySelector('.high-score-score').innerHTML = score.score;
highScoresList.appendChild(scoreElement);
});
})
.catch(error => console.error('Error fetching high scores:', error));
}

56
public/script/gameFunction.js
View File

@ -235,34 +235,7 @@ function switchPiece() {
}
}
function finishGame(sendScore = true, gameOver = true) {
game.gameOver = true;
clearInterval(dropInterval);
clearInterval(leftInterval);
clearInterval(rightInterval);
clearInterval(refreshInterval);
clearInterval(endDropInterval);
endDropInterval = null;
opacityCurrentPiece = 1;
game.currentPiece = null;
dropInterval = null;
refreshInterval = null;
if (gameOver) {
displayGameOver();
} else {
displayMainMenu();
}
if (sendScore) {
const playerName = prompt('Enter your name:');
sendScore(game, playerName);
}
}
async function sendScore(playerName) {
async function sendScoreToServer(playerName) {
if (playerName) {
const data = {
@ -309,6 +282,33 @@ async function sendScore(playerName) {
}
}
async function finishGame(sendScore = true, gameOver = true) {
game.gameOver = true;
clearInterval(dropInterval);
clearInterval(leftInterval);
clearInterval(rightInterval);
clearInterval(refreshInterval);
clearInterval(endDropInterval);
endDropInterval = null;
opacityCurrentPiece = 1;
game.currentPiece = null;
dropInterval = null;
refreshInterval = null;
if (gameOver) {
displayGameOver();
} else {
displayMainMenu();
}
if (sendScore) {
const playerName = prompt('Enter your name:');
sendScoreToServer(playerName);
}
}
function setSpeed() {
if (game.level > 29) {
game.speed = (speedSecondsToBottomPerLevel[29] / 20) * 1000;

662
public/script/index.js
View File

@ -1,662 +0,0 @@
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');
restartButton.addEventListener('click', () =>
{
displayGameBoard();
startGame();
refresh();
}
);
startButton.addEventListener('click', () =>
{
startGame();
});
pauseButton.addEventListener('click', () =>
{
pauseGame();
});
let boardContext = board.getContext('2d');
let previewContext = preview.getContext('2d');
boardContext.fillStyle = 'black';
boardContext.fillRect(0, 0, board.width, board.height);
const img = new Image();
img.src = '../img/PieceTetris.png';
let endDownInterval;
let oppacity = 255;
let downInterval;
let rightInterval;
let leftInterval;
let keyPress = [];
let score = 0;
let level = 0;
let lines = 0;
let speed = 1000;
let pause = false;
let gameOver = true;
const templatePiece = [
[ // ok
[3, 0],
[4, 0],
[5, 0],
[6, 0],
[4.5, 0.5]
],
[
[3, 1],
[4, 1],
[5, 1],
[5, 0],
[4, 1]
],
[ // ok
[3, 1],
[4, 1],
[5, 1],
[3, 0],
[4, 1]
],
[ // ok
[3, 0],
[4, 0],
[4, 1],
[5, 1],
[4, 1]
],
[
[3, 1],
[4, 1],
[4, 0],
[5, 0],
[4, 1]
],
[ // ok
[3, 0],
[4, 0],
[4, 1],
[5, 0],
[4, 0]
],
[ // ok
[4, 0],
[5, 0],
[4, 1],
[5, 1],
[4.5, 0.5]
]
];
const templateColor = [
[240, 87, 84, 255],
[254, 223, 92, 255],
[27, 148, 118, 255],
[36, 115, 155, 255],
[106, 190, 178, 255],
[164, 199, 218, 255],
[177, 225, 218, 255]
];
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
];
let currentPiece = [];
let nextPiece = [];
let color = [];
let nextColor = [];
let boardData = [];
const MOVELEFT = 1;
const MOVERIGHT = 2;
const MOVEDOWN = 3;
const ROTATE = 4;
const MOVEDOWNFAST = 5;
const RESPAWN = 6;
const CHANGENEXTPIECE = 7;
let history = [];
function startGame() {
pause = false;
gameOver = false;
boardData = [];
currentPiece = [];
color = [];
history = [];
keyPress = [];
for (let i = 0; i < 10; i++) {
boardData[i] = [];
for (let j = 0; j < 20; j++) {
boardData[i][j] = [0, 0, 0, 255];
}
}
score = 0;
lines = 0;
level = 0;
speed = 1000;
scoreElement.innerText = score;
displayGameBoard();
iniGame();
refresh();
}
function pauseGame() {
if (gameOver) {
return;
}
if (pause) {
pause = false;
displayGameBoard();
//initAndChangeSpeedDrop();
} else {
pause = true;
displayPause();
clearDownInterval();
clearInterval(endDownInterval);
}
}
function iniGame() {
// Initialisation de la vitesse de chute
speed = (speedSecondsToBottomPerLevel[level]/20) * 1000;
spawnPiece();
// Intervalle pour faire tomber la pièce
downInterval = setInterval(() => {
moveDown();
refresh();
}, speed);
}
function loadTetris() {
clearDownInterval();
clearInterval(endDownInterval);
oppacity = 255;
currentPieceToBoard();
checkLine();
spawnPiece();
//checkEndDrop();
}
function currentPieceToBoard() {
if (currentPiece.length != 0) {
for (let i = 0; i < currentPiece.length - 1; i++) {
let piece = currentPiece[i];
boardData[piece[0]][piece[1]] = color; // Copie du tableau color
}
}
}
function spawnPiece() {
let random = 0;
if (nextPiece.length == 0) {
random = Math.floor(Math.random() * templatePiece.length);
for (let i = 0; i < templatePiece[random].length; i++) {
nextPiece.push([templatePiece[random][i][0], templatePiece[random][i][1]]);
}
nextColor = templateColor[random];
history.push([CHANGENEXTPIECE, random]);
}
currentPiece = nextPiece;
if (gameOver) {
return;
}
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();
sendScore();
return;
}
}
random = Math.floor(Math.random() * templatePiece.length);
nextPiece = [];
for (let i = 0; i < templatePiece[random].length; i++) {
nextPiece.push([templatePiece[random][i][0], templatePiece[random][i][1]]);
}
history.push([CHANGENEXTPIECE, random]);
color = nextColor;
nextColor = templateColor[random];
}
async function sendScore() {
const playerName = prompt('Enter your name:');
if (playerName) {
const data = {
score,
history,
playerName
};
console.log(data);
try {
// Send a PUT request to the server
const query = await fetch('/api/sendScore', {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
// Check if the response is ok before parsing
if (!query.ok) {
throw new Error(`Server returned ${query.status}: ${query.statusText}`);
}
// Check the content type to ensure it's JSON
const contentType = query.headers.get('content-type');
if (!contentType || !contentType.includes('application/json')) {
throw new Error('Server did not return JSON');
}
// Get the response body
const response = await query.json();
if (response.success) {
console.log('Score and history saved successfully');
}
else {
console.error('Error saving score and history:', response.error);
}
} catch (error) {
console.error('Failed to save score:', error.message);
alert('Could not save your score. Please try again later.');
}
}
}
function ifMoveTo(x, y) {
return canMoveTo(x, y, currentPiece);
}
function canMoveTo(x, y, piece) {
for (let i = 0; i < piece.length - 1; i++) {
if (piece[i][0] + x < 0 || piece[i][0] + x >= 10 || piece[i][1] + y >= 20 || ifPiece(piece[i][0] + x, piece[i][1] + y)) {
return false;
}
}
return true;
}
function ifRotate(piece) {
for (let i = 0; i < piece.length - 1; i++) {
if (piece[i][0] < 0 || piece[i][0] >= 10 || piece[i][1] >= 20 || ifPiece(piece[i][0], piece[i][1])) {
return false;
}
}
return true;
}
function ifPiece(x, y) {
if (x < 0 || x >= 10 || y >= 20) {
return true;
}
if (y < 0) {
return false;
}
if (boardData[x][y][0] == 0 && boardData[x][y][1] == 0 && boardData[x][y][2] == 0) {
return false;
}
return true;
}
function rotate() {
if (currentPiece.length == 0) {
return;
}
let currentPieceCopy = [];
for (let i = 0; i < currentPiece.length; i++) {
currentPieceCopy.push([currentPiece[i][0], currentPiece[i][1]]);
}
const center = currentPieceCopy[currentPieceCopy.length - 1];
for (let i = 0; i < currentPiece.length - 1; i++) {
const x = currentPieceCopy[i][0] - center[0];
const y = currentPieceCopy[i][1] - center[1];
currentPieceCopy[i][0] = center[0] - y;
currentPieceCopy[i][1] = center[1] + x;
}
if (ifRotate(currentPieceCopy)) {
currentPiece = currentPieceCopy;
history.push([ROTATE, 0]);
}
else {
for (let x = -1; x <= 1; x++) {
for (let y = 0; y >= -1; y--) {
if (canMoveTo(x, y, currentPieceCopy)) {
moveToPiece(x, y, currentPieceCopy);
currentPiece = currentPieceCopy;
history.push([ROTATE, 0]);
x = 2;
y = -2;
}
}
}
}
checkEndDrop();
}
function checkEndDrop() {
clearInterval(endDownInterval);
oppacity = 255;
if (!ifMoveTo(0, 1)) {
clearDownInterval();
endDownInterval = setInterval(() => {
oppacity -= 5;
if (oppacity <= 60) {
loadTetris();
}
refresh();
}
, 11);
}
else if (!downInterval) {
clearDownInterval();
initAndChangeSpeedDrop();
}
}
function clearDownInterval() {
clearInterval(downInterval);
downInterval = null;
}
function checkLine() {
let lineFilled = 0;
for (let i = 0; i < 20; i++) {
let check = true;
for (let j = 0; j < 10; j++) {
if (boardData[j][i][0] == 0 && boardData[j][i][1] == 0 && boardData[j][i][2] == 0) {
check = false;
break;
}
}
if (check) {
for (let j = i; j > 0; j--) {
for (let k = 0; k < 10; k++) {
boardData[k][j] = boardData[k][j - 1];
}
}
for (let k = 0; k < 10; k++) {
boardData[k][0] = [0, 0, 0, 255];
}
lineFilled++;
}
}
if (lineFilled == 1) {
score += 40;
}
else if (lineFilled == 2) {
score += 100;
}
else if (lineFilled == 3) {
score += 300;
}
else if (lineFilled == 4) {
score += 1200;
}
scoreElement.innerText = score;
lines += lineFilled;
level = Math.floor(lines / 10);
initAndChangeSpeedDrop();
}
function initAndChangeSpeedDrop() {
if (level > 29) {
speed = (speedSecondsToBottomPerLevel[29]/20) * 1000;
}
else {
speed = (speedSecondsToBottomPerLevel[level]/20) * 1000;
}
clearDownInterval();
downInterval = setInterval(() => {
moveDown();
refresh();
}, speed);
}
function moveTo(x, y) {
moveToPiece(x, y, currentPiece);
}
function moveToPiece(x, y, piece) {
for (let i = 0; i < piece.length; i++) {
piece[i][0] += x;
piece[i][1] += y;
}
checkEndDrop();
}
function moveDown() {
if (!ifMoveTo(0, 1) || currentPiece.length == 1) {
return false;
}
moveTo(0, 1);
history.push([MOVEDOWN, 0]);
return true;
}
function moveLeft() {
if (!ifMoveTo(-1, 0) || currentPiece.length == 1) {
return false;
}
moveTo(-1, 0);
history.push([MOVELEFT, 0]);
return true;
}
function moveRight() {
if (!ifMoveTo(1, 0) || currentPiece.length == 1) {
return false;
}
moveTo(1, 0);
history.push([MOVERIGHT, 0]);
return true;
}
function fastDrop() {
while (ifMoveTo(0, 1)) {
moveDown();
}
clearDownInterval();
clearInterval(endDownInterval);
oppacity = 255;
loadTetris();
}
document.addEventListener('keydown', (event) => {
if (event.key == 'Escape' && !keyPress.includes('Escape')) {
pauseGame();
return;
}
if (pause) {
return;
}
if (gameOver) {
return;
}
if ((event.key == 'ArrowUp' || event.key == 'w' || event.key == 'z') && !keyPress.includes('ArrowUp') && !keyPress.includes('w') && !keyPress.includes('z')) {
rotate();
} else if ((event.key == 'ArrowDown' || event.key == 's') && !keyPress.includes('ArrowDown') && !keyPress.includes('s')) {
clearDownInterval();
downInterval = setInterval(() => {
moveDown();
refresh();
}, 50);
} else if ((event.key == 'ArrowLeft' || event.key == 'a' || event.key == 'q') && !keyPress.includes('ArrowLeft') && !keyPress.includes('q') && !keyPress.includes('a')) {
moveLeft();
leftInterval = setInterval(() => {
moveLeft();
refresh();
}, 100);
} else if (((event.key == 'ArrowRight') || event.key == 'd') && !keyPress.includes('ArrowRight') && !keyPress.includes('d')) {
moveRight();
rightInterval = setInterval(() => {
moveRight();
refresh();
}, 100);
} else if (event.key == ' ' && !keyPress.includes(' ')) {
fastDrop();
}
refresh();
console.log(event.key);
keyPress.push(event.key);
});
document.addEventListener('keyup', (event) => {
if (!pause && !gameOver) {
if (event.key == 'ArrowDown' || event.key == 's') {
initAndChangeSpeedDrop();
} 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;
});
});
img.onload = () => {
displayMainMenu();
}

9
public/script/menuController.js
View File

@ -15,4 +15,11 @@ mainMenuButton.addEventListener('click', function() {
});
mainMenuButtonBis.addEventListener('click', function() {
finishGame(false, false);
});
});
displayBestScores();
setInterval(() => {
displayBestScores();
}
, 1000);

218
public/script/view.js
View File

@ -1,218 +0,0 @@
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);
}
function drawTetrisOnThePreview(x, y, color) {
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);
}
function drawTetris(x, y, color) {
drawTetisWithOppacity(x, y, color, 255);
}
function drawCurrentPiece() {
for (let i = 0 ; i < currentPiece.length - 1; i++) {
let piece = currentPiece[i];
drawTetisWithOppacity(piece[0] * board.width/10, piece[1] * board.width/10, color, oppacity);
}
}
function drawHologram() {
let hologramPiece = [];
for (let i = 0; i < currentPiece.length; i++) {
let piece = currentPiece[i];
hologramPiece.push([piece[0], piece[1]]);
}
while (canMoveTo(0, 1, hologramPiece)) {
moveToPiece(0, 1, hologramPiece);
}
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, 120);
}
}
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 drawBoard() {
for (let i = 0; i < 10; i++) {
for (let j = 0; j < 20; j++) {
if (!(boardData[i][j][0] == 0 && boardData[i][j][1] == 0 && boardData[i][j][2] == 0)) {
drawTetris(i * board.width/10, j * board.width/10, boardData[i][j]);
}
}
}
}
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 displayPreview() {
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] - xDif) * preview.width/5, (piece[1] + yDif) * preview.width/5, nextColor);
}
}
function refresh() {
clearBoard();
drawGrid();
drawBoard();
drawHologram();
drawCurrentPiece();
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');
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');
}
let intervalDisplayScoreBoard = null;
displayScoreBoard();
function displayScoreBoard() {
if (intervalDisplayScoreBoard) {
clearInterval(intervalDisplayScoreBoard);
intervalDisplayScoreBoard = null;
}
intervalDisplayScoreBoard = setInterval(() => {
fetch('/api/getHighScores')
.then(response => response.json())
.then(data => {
highScoresList.innerHTML = '';
data.forEach(score => {
// Clone template content properly
const scoreElement = document.importNode(highScoreTemplate.content, true).firstElementChild;
scoreElement.querySelector('.high-score-name').innerHTML = score.player_name;
scoreElement.querySelector('.high-score-score').innerHTML = score.score;
highScoresList.appendChild(scoreElement);
});
})
.catch(error => console.error('Error fetching high scores:', error));
}, 1000);
}