Ludo-Sjdl/thedevilbox
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

interface qui marche

Browse Source
This commit is contained in:
thedevilbox
2025-12-01 22:21:40 +01:00
parent 6bd971eb6c
commit f311d3f103
3 changed files with 385 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
game.js
View File

@ -13,6 +13,18 @@ const finalLevelElement = document.getElementById('finalLevel');
const overlayRestartBtn = document.getElementById('overlayRestartBtn');
const confirmUsernameBtn = document.getElementById('confirmUsernameBtn');
// === GESTION DU MENU ===
const mainMenu = document.getElementById('mainMenu');
const gameWrapper = document.getElementById('gameWrapper');
const playBtn = document.getElementById('playBtn');
const scoresBtn = document.getElementById('scoresBtn');
const backToMenuBtn = document.getElementById('backToMenuBtn');
const leaderboardModal = document.getElementById('leaderboardModal');
const closeModalBtn = document.getElementById('closeModalBtn');
const menuLeaderboard = document.getElementById('menuLeaderboard');
const leaderboardContainer = document.getElementById('leaderboardContainer');
const closeLeaderboardBtn = document.getElementById('closeLeaderboardBtn');
let usernameConfirmed = false;
const CELL_SIZE = 20;
@ -1240,6 +1252,89 @@ function animateScore() {
}
animateScore();
updateLeaderboard();
initGame();
// === GESTION DU MENU ===
// Afficher le jeu
playBtn.addEventListener('click', () => {
mainMenu.style.display = 'none';
gameWrapper.style.display = 'block';
resetUsernameInput();
// Toujours initialiser le jeu quand on clique sur JOUER
gameRunning = false; // S'assurer que le jeu est arrêté
initGame();
});
// Retour au menu depuis le jeu
backToMenuBtn.addEventListener('click', () => {
if (confirm('Voulez-vous vraiment retourner au menu ? Votre partie en cours sera perdue.')) {
gameWrapper.style.display = 'none';
mainMenu.style.display = 'flex';
gameRunning = false;
}
});
// Afficher le classement depuis le menu
scoresBtn.addEventListener('click', () => {
updateMenuLeaderboard();
leaderboardModal.style.display = 'flex';
});
// Fermer le modal de classement
closeModalBtn.addEventListener('click', () => {
leaderboardModal.style.display = 'none';
});
// Fermer le classement dans le jeu
if (closeLeaderboardBtn) {
closeLeaderboardBtn.addEventListener('click', () => {
leaderboardContainer.style.display = 'none';
});
}
// Fermer le modal en cliquant à l'extérieur
leaderboardModal.addEventListener('click', (e) => {
if (e.target === leaderboardModal) {
leaderboardModal.style.display = 'none';
}
});
// Fonction pour mettre à jour le classement du menu
function updateMenuLeaderboard() {
const scores = getScores();
menuLeaderboard.innerHTML = '';
if (scores.length === 0) {
menuLeaderboard.innerHTML = '<div class="empty-leaderboard">Aucun score enregistré</div>';
return;
}
scores.forEach((entry, index) => {
const item = document.createElement('div');
item.className = 'leaderboard-item' + (index < 3 ? ' top' : '');
const rank = document.createElement('div');
rank.className = 'leaderboard-rank';
rank.textContent = (index + 1) + '.';
const name = document.createElement('div');
name.className = 'leaderboard-name';
name.textContent = entry.username;
const levelDiv = document.createElement('div');
levelDiv.className = 'leaderboard-level';
levelDiv.textContent = 'Niv. ' + (entry.level || 1);
const scoreDiv = document.createElement('div');
scoreDiv.className = 'leaderboard-score';
scoreDiv.textContent = entry.score;
item.appendChild(rank);
item.appendChild(name);
item.appendChild(levelDiv);
item.appendChild(scoreDiv);
menuLeaderboard.appendChild(item);
});
}
// Initialiser seulement le menu au chargement
updateMenuLeaderboard();

38
index.html
View File

@ -7,9 +7,25 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- MENU PRINCIPAL -->
<div class="main-menu" id="mainMenu">
<div class="menu-container">
<h1>OULVIC</h1>
<div class="menu-buttons">
<button class="menu-btn" id="playBtn">JOUER</button>
<button class="menu-btn" id="scoresBtn">CLASSEMENT</button>
</div>
</div>
</div>
<!-- INTERFACE DE JEU (cachée au départ) -->
<div class="game-wrapper" id="gameWrapper" style="display: none;">
<div class="main-wrapper">
<div class="container">
<h1>OULVIC</h1>
<div class="game-header">
<button class="back-btn" id="backToMenuBtn">← Menu</button>
<h2>OULVIC</h2>
</div>
<div class="user-input-section">
<label for="username">Nom d'utilisateur:</label>
<input type="text" id="username" placeholder="Entrez votre nom" maxlength="15">
@ -48,14 +64,32 @@
</div>
</div>
</div>
<div class="leaderboard-container">
<!-- CLASSEMENT (caché par défaut) -->
<div class="leaderboard-container" id="leaderboardContainer" style="display: none;">
<div class="leaderboard-header">
<h2>Classement</h2>
<button class="close-leaderboard-btn" id="closeLeaderboardBtn">✕</button>
</div>
<div id="leaderboard"></div>
</div>
</div>
<footer>
<p>By Ludo and Syoul</p>
</footer>
</div>
<!-- MODAL CLASSEMENT (pour le menu) -->
<div class="leaderboard-modal" id="leaderboardModal" style="display: none;">
<div class="modal-content">
<div class="modal-header">
<h2>Classement</h2>
<button class="close-modal-btn" id="closeModalBtn">✕</button>
</div>
<div id="menuLeaderboard"></div>
</div>
</div>
<script src="game.js"></script>
</body>
</html>

210
style.css
View File

@ -125,6 +125,195 @@ body::after {
100% { transform: scale(1); }
}
/* === MENU PRINCIPAL === */
.main-menu {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #0a0a0a;
background-image:
radial-gradient(circle at 20% 30%, rgba(255, 0, 0, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(0, 0, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(128, 0, 128, 0.1) 0%, transparent 50%);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
.menu-container {
text-align: center;
background: rgba(0, 0, 0, 0.8);
padding: 50px 40px;
border-radius: 20px;
border: 3px solid rgba(255, 215, 0, 0.4);
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.8),
0 0 50px rgba(255, 0, 0, 0.2),
inset 0 0 30px rgba(255, 215, 0, 0.05);
}
.menu-container h1 {
font-size: 3em;
margin-bottom: 40px;
letter-spacing: 5px;
animation: neonFlicker 3s infinite, rainbow 8s linear infinite;
}
.menu-buttons {
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
}
.menu-btn {
padding: 20px 50px;
font-size: 1em;
font-family: 'Press Start 2P', cursive;
background: linear-gradient(180deg, #ffd700 0%, #ff8c00 100%);
color: #000;
border: none;
border-radius: 15px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s;
box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
min-width: 250px;
}
.menu-btn:hover {
background: linear-gradient(180deg, #ffed4e 0%, #ffa500 100%);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(255, 215, 0, 0.6);
}
.menu-btn:active {
transform: translateY(0) scale(0.98);
}
/* === WRAPPER DE JEU === */
.game-wrapper {
min-height: 100vh;
}
/* === HEADER DU JEU === */
.game-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.game-header h2 {
font-size: 1.5em;
margin: 0;
flex: 1;
text-align: center;
letter-spacing: 3px;
animation: neonFlicker 3s infinite, rainbow 8s linear infinite;
}
.back-btn {
padding: 10px 20px;
font-size: 0.7em;
font-family: 'Press Start 2P', cursive;
background: rgba(255, 255, 255, 0.1);
color: #ffd700;
border: 2px solid #ffd700;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s;
}
.back-btn:hover {
background: rgba(255, 215, 0, 0.2);
transform: translateX(-3px);
}
/* === MODAL CLASSEMENT === */
.leaderboard-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
animation: fadeIn 0.3s ease-out;
}
.modal-content {
background: rgba(0, 0, 0, 0.9);
padding: 30px;
border-radius: 20px;
border: 3px solid rgba(255, 215, 0, 0.4);
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.8),
0 0 50px rgba(255, 0, 0, 0.2);
max-width: 500px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
position: relative;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.modal-header h2 {
color: #ffd700;
font-size: 1.5em;
margin: 0;
}
.close-modal-btn, .close-leaderboard-btn {
background: rgba(255, 0, 0, 0.3);
color: #fff;
border: 2px solid #ff0000;
border-radius: 50%;
width: 35px;
height: 35px;
font-size: 1.2em;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Press Start 2P', cursive;
}
.close-modal-btn:hover, .close-leaderboard-btn:hover {
background: rgba(255, 0, 0, 0.5);
transform: scale(1.1);
}
#menuLeaderboard {
max-height: 60vh;
overflow-y: auto;
}
.leaderboard-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.leaderboard-header h2 {
margin: 0;
}
/* === LAYOUT === */
.main-wrapper {
display: flex;
@ -340,7 +529,7 @@ h1 {
.leaderboard-container h2 {
color: #ffd700;
text-align: center;
margin-bottom: 20px;
margin: 0;
font-size: 1.2em;
text-shadow:
0 0 10px rgba(255, 215, 0, 0.5),
@ -609,6 +798,20 @@ footer {
}
@media (max-width: 700px) {
.menu-container {
padding: 30px 20px;
}
.menu-container h1 {
font-size: 2em;
}
.menu-btn {
min-width: 200px;
padding: 15px 30px;
font-size: 0.8em;
}
#gameCanvas {
width: 100%;
height: auto;
@ -639,4 +842,9 @@ footer {
.final-score, .final-level {
font-size: 0.7em;
}
.modal-content {
padding: 20px;
width: 95%;
}
}