Compare commits
2 Commits
26dee22b26
...
435ffd6546
| Author | SHA1 | Date | |
|---|---|---|---|
|
435ffd6546 | ||
|
|
a7f94335e1 |
37
Main.html
37
Main.html
@ -10,7 +10,6 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- MAIN MENU -->
|
||||
<div id="mainMenu">
|
||||
<div class="menu-content">
|
||||
<h1 class="game-title">
|
||||
@ -29,6 +28,11 @@
|
||||
<span class="btn-text">OPTIONS</span>
|
||||
</button>
|
||||
|
||||
<button class="menu-btn" id="leaderboardBtn">
|
||||
<span class="btn-icon">🏆</span>
|
||||
<span class="btn-text">LEADERBOARD</span>
|
||||
</button>
|
||||
|
||||
<button class="menu-btn" id="exitBtn">
|
||||
<span class="btn-icon">✕</span>
|
||||
<span class="btn-text">EXIT</span>
|
||||
@ -39,12 +43,11 @@
|
||||
<p>WASD - Move | Space - Fire | Q - Missile | Shift - Bomb | P - Pause</p>
|
||||
</div>
|
||||
<div class="footer-info">
|
||||
<p>Stanley Timothy Gunawan - 5803025021 | Jeremy Christian - 5803025025 | Philippo Mariernest A.B - 5803025025</p>
|
||||
<p>Stanley Timothy Gunawan - 5803025021 | Jeremy Christian - 5803025025 | Philippo Mariernest A.B - 58030250</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- OPTIONS MENU -->
|
||||
<div id="optionsMenu" style="display: none;">
|
||||
<div class="menu-content">
|
||||
<h2 class="options-title">OPTIONS</h2>
|
||||
@ -74,7 +77,33 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- GAME CANVAS (Hidden initially) -->
|
||||
<div id="leaderboardMenu" style="display: none;">
|
||||
<div class="menu-content" style="min-width: 800px;">
|
||||
<h2 class="options-title">TOP PILOTS</h2>
|
||||
|
||||
<div class="leaderboard-container">
|
||||
<table class="leaderboard-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>RANK</th>
|
||||
<th>PILOT NAME</th>
|
||||
<th>LEVEL</th>
|
||||
<th>SCORE</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="leaderboardList">
|
||||
<tr><td colspan="4">Loading Flight Data...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<button class="menu-btn back-btn" id="lbBackBtn">
|
||||
<span class="btn-icon">←</span>
|
||||
<span class="btn-text">BACK</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="gameContainer" style="display: none;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
|
||||
57
Script.js
57
Script.js
@ -1955,3 +1955,60 @@ function returnToMenu() {
|
||||
|
||||
console.log('Menu System Loaded');
|
||||
console.log('Settings:', gameSettings);
|
||||
|
||||
// === LEADERBOARD LOGIC ===
|
||||
const leaderboardMenu = document.getElementById('leaderboardMenu');
|
||||
const leaderboardBtn = document.getElementById('leaderboardBtn');
|
||||
const lbBackBtn = document.getElementById('lbBackBtn');
|
||||
const leaderboardList = document.getElementById('leaderboardList');
|
||||
|
||||
// Buka Menu Leaderboard
|
||||
leaderboardBtn.addEventListener('click', () => {
|
||||
playSound(menuClickSound); // Pastikan fungsi playSound ada
|
||||
mainMenu.style.display = 'none';
|
||||
leaderboardMenu.style.display = 'flex';
|
||||
fetchLeaderboard();
|
||||
});
|
||||
|
||||
// Tutup Menu Leaderboard
|
||||
lbBackBtn.addEventListener('click', () => {
|
||||
playSound(menuClickSound);
|
||||
leaderboardMenu.style.display = 'none';
|
||||
mainMenu.style.display = 'flex';
|
||||
});
|
||||
|
||||
// Fungsi Ambil Data dari PHP
|
||||
async function fetchLeaderboard() {
|
||||
leaderboardList.innerHTML = '<tr><td colspan="4" style="padding:20px;">Scanning Database...</td></tr>';
|
||||
|
||||
try {
|
||||
const response = await fetch('leaderboard.php');
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success && result.data.length > 0) {
|
||||
leaderboardList.innerHTML = ''; // Hapus loading
|
||||
|
||||
result.data.forEach(player => {
|
||||
let rowClass = '';
|
||||
if (player.rank === 1) rowClass = 'rank-1';
|
||||
else if (player.rank === 2) rowClass = 'rank-2';
|
||||
else if (player.rank === 3) rowClass = 'rank-3';
|
||||
|
||||
const row = `
|
||||
<tr class="${rowClass}">
|
||||
<td>#${player.rank}</td>
|
||||
<td style="text-align:left; padding-left:40px;">${player.username}</td>
|
||||
<td>LVL ${player.level}</td>
|
||||
<td>${player.score.toLocaleString()}</td>
|
||||
</tr>
|
||||
`;
|
||||
leaderboardList.innerHTML += row;
|
||||
});
|
||||
} else {
|
||||
leaderboardList.innerHTML = '<tr><td colspan="4">No Records Found</td></tr>';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Leaderboard error:', error);
|
||||
leaderboardList.innerHTML = '<tr><td colspan="4" style="color:red;">Connection Error</td></tr>';
|
||||
}
|
||||
}
|
||||
118
Style.css
118
Style.css
@ -16,8 +16,9 @@ html, body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* === MAIN MENU & OPTIONS MENU === */
|
||||
#mainMenu, #optionsMenu {
|
||||
/* === MAIN MENU, OPTIONS, & LEADERBOARD MENU === */
|
||||
/* Saya menambahkan #leaderboardMenu disini agar posisinya sama */
|
||||
#mainMenu, #optionsMenu, #leaderboardMenu {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
@ -38,7 +39,7 @@ html, body {
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* === STARS CONTAINER (hidden by default, no animation) === */
|
||||
/* === STARS CONTAINER (hidden by default) === */
|
||||
.stars-container {
|
||||
display: none;
|
||||
}
|
||||
@ -234,7 +235,7 @@ input[type="range"] {
|
||||
border: 2px solid #00eaff;
|
||||
border-radius: 10px;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
box-shadow: inset 0 0 5px rgba(0, 234, 255, 0.3);
|
||||
}
|
||||
@ -262,28 +263,6 @@ input[type="range"]::-webkit-slider-thumb:hover {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-thumb {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: linear-gradient(145deg, #00eaff, #00bcd4);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
border: 2px solid #ffffff;
|
||||
box-shadow:
|
||||
0 0 10px rgba(0, 234, 255, 0.8),
|
||||
0 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* === SLIDER VALUE TEXT === */
|
||||
.slider-container span {
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
min-width: 60px;
|
||||
text-align: right;
|
||||
text-shadow: 0 0 8px rgba(0, 234, 255, 0.6);
|
||||
}
|
||||
|
||||
/* === BUTTON GROUP === */
|
||||
.button-group {
|
||||
display: flex;
|
||||
@ -353,6 +332,65 @@ input[type="range"]::-moz-range-thumb {
|
||||
inset 0 0 20px rgba(0, 234, 255, 0.3);
|
||||
}
|
||||
|
||||
/* === LEADERBOARD STYLES (NEW) === */
|
||||
.leaderboard-container {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border: 2px solid rgba(0, 234, 255, 0.4);
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
margin-bottom: 30px;
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
max-height: 450px;
|
||||
overflow-y: auto;
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 0 30px rgba(0, 234, 255, 0.15);
|
||||
}
|
||||
|
||||
.leaderboard-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
color: #fff;
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
}
|
||||
|
||||
.leaderboard-table th {
|
||||
background: rgba(0, 234, 255, 0.1);
|
||||
color: #00eaff;
|
||||
font-size: 18px;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid #00eaff;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0 0 10px rgba(0, 234, 255, 0.5);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.leaderboard-table td {
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.leaderboard-table tr:hover td {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Leaderboard Rank Colors */
|
||||
.rank-1 td { color: #ffd700; text-shadow: 0 0 10px #ffd700; font-weight: 900; font-size: 20px; }
|
||||
.rank-2 td { color: #c0c0c0; text-shadow: 0 0 10px #c0c0c0; font-weight: 700; }
|
||||
.rank-3 td { color: #cd7f32; text-shadow: 0 0 10px #cd7f32; font-weight: 700; }
|
||||
|
||||
/* Custom Scrollbar for Leaderboard */
|
||||
.leaderboard-container::-webkit-scrollbar { width: 8px; }
|
||||
.leaderboard-container::-webkit-scrollbar-thumb { background: #00eaff; border-radius: 4px; }
|
||||
.leaderboard-container::-webkit-scrollbar-track { background: rgba(0,0,0,0.5); }
|
||||
|
||||
/* === GAME CONTAINER === */
|
||||
#gameContainer {
|
||||
width: 100vw;
|
||||
@ -370,26 +408,12 @@ input[type="range"]::-moz-range-thumb {
|
||||
|
||||
/* === RESPONSIVE === */
|
||||
@media (max-width: 768px) {
|
||||
.title-word {
|
||||
font-size: 60px;
|
||||
}
|
||||
.title-word { font-size: 60px; }
|
||||
.menu-btn { font-size: 20px; padding: 12px 40px; min-width: 280px; }
|
||||
.options-container { min-width: 90vw; padding: 30px; }
|
||||
.options-title { font-size: 50px; }
|
||||
.footer-info p { font-size: 12px; }
|
||||
|
||||
.menu-btn {
|
||||
font-size: 20px;
|
||||
padding: 12px 40px;
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
.options-container {
|
||||
min-width: 90vw;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.options-title {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.footer-info p {
|
||||
font-size: 12px;
|
||||
}
|
||||
/* Responsive Leaderboard */
|
||||
.leaderboard-table th, .leaderboard-table td { font-size: 14px; padding: 10px; }
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user