Ronniie/ZoneOut
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add mode and difficulty badges to death screen; update styles for improved visibility

Browse source
This commit is contained in:
Ronnie 2025-05-27 21:35:39 -04:00
parent 6a2d14e2a6
commit fc229f0ca6
3 changed files with 76 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

4
game.js
View file

@ -142,6 +142,10 @@ function showDeathScreen() {
levelRow.style.display = 'flex'; levelRow.style.display = 'flex';
} }
// Update mode and difficulty badges
document.querySelector('.mode-text').textContent = gameState.selectedMode;
document.querySelector('.difficulty-text').textContent = gameState.selectedDifficulty;
// Show death screen // Show death screen
deathScreen.classList.add('show'); deathScreen.classList.add('show');
} }

10
index.html
View file

@ -124,6 +124,16 @@
<i class="fas fa-clock"></i> <i class="fas fa-clock"></i>
<span>Time Survived: <span class="final-time">0:00</span></span> <span>Time Survived: <span class="final-time">0:00</span></span>
</div> </div>
<div class="game-info">
<div class="mode-badge">
<i class="fas fa-gamepad"></i>
<span class="mode-text">Levels</span>
</div>
<div class="difficulty-badge">
<i class="fas fa-trophy"></i>
<span class="difficulty-text">Medium</span>
</div>
</div>
</div> </div>
<button class="restart-btn"> <button class="restart-btn">
<i class="fas fa-redo"></i> Play Again <i class="fas fa-redo"></i> Play Again

62
styles.css
View file

@ -687,4 +687,66 @@ button:hover {
.notification-content .bonus-change { .notification-content .bonus-change {
color: #ffd93d; color: #ffd93d;
font-weight: 600; font-weight: 600;
}
.game-info {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid rgba(96, 165, 250, 0.2);
}
.mode-badge, .difficulty-badge {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
border-radius: 15px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
transition: all 0.3s ease;
}
.mode-badge {
background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(96, 165, 250, 0.1));
border: 1px solid rgba(96, 165, 250, 0.3);
}
.difficulty-badge {
background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.1));
border: 1px solid rgba(251, 191, 36, 0.3);
}
.mode-badge i, .difficulty-badge i {
font-size: 1.2rem;
}
.mode-badge i {
color: #60a5fa;
}
.difficulty-badge i {
color: #fbbf24;
}
.mode-badge .mode-text, .difficulty-badge .difficulty-text {
font-size: 1.1rem;
font-weight: 600;
color: #fff;
text-transform: capitalize;
}
.mode-badge:hover, .difficulty-badge:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.mode-badge:hover {
background: linear-gradient(135deg, rgba(96, 165, 250, 0.3), rgba(96, 165, 250, 0.2));
}
.difficulty-badge:hover {
background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(251, 191, 36, 0.2));
} }