2526-web/Kelompok_09_Space-odyssey
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: 2526-web:435ffd6546694ccc46a2daca04e3ee27eb7d25e2
Branches Tags
2526-web:main
..
compare: 2526-web:26dee22b268e87f9526df620470b26e00a59d3ea
Branches Tags
2526-web:main

No commits in common. "435ffd6546694ccc46a2daca04e3ee27eb7d25e2" and "26dee22b268e87f9526df620470b26e00a59d3ea" have entirely different histories.
435ffd6546 ... 26dee22b26

3 changed files with 53 additions and 163 deletions
Show Stats Expand all files Collapse all files

37
Main.html
View File

@ -10,6 +10,7 @@
</head> </head>
<body> <body>
<!-- MAIN MENU -->
<div id="mainMenu"> <div id="mainMenu">
<div class="menu-content"> <div class="menu-content">
<h1 class="game-title"> <h1 class="game-title">
@ -28,11 +29,6 @@
<span class="btn-text">OPTIONS</span> <span class="btn-text">OPTIONS</span>
</button> </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"> <button class="menu-btn" id="exitBtn">
<span class="btn-icon">✕</span> <span class="btn-icon">✕</span>
<span class="btn-text">EXIT</span> <span class="btn-text">EXIT</span>
@ -43,11 +39,12 @@
<p>WASD - Move | Space - Fire | Q - Missile | Shift - Bomb | P - Pause</p> <p>WASD - Move | Space - Fire | Q - Missile | Shift - Bomb | P - Pause</p>
</div> </div>
<div class="footer-info"> <div class="footer-info">
<p>Stanley Timothy Gunawan - 5803025021 | Jeremy Christian - 5803025025 | Philippo Mariernest A.B - 58030250</p> <p>Stanley Timothy Gunawan - 5803025021 | Jeremy Christian - 5803025025 | Philippo Mariernest A.B - 5803025025</p>
</div> </div>
</div> </div>
</div> </div>
<!-- OPTIONS MENU -->
<div id="optionsMenu" style="display: none;"> <div id="optionsMenu" style="display: none;">
<div class="menu-content"> <div class="menu-content">
<h2 class="options-title">OPTIONS</h2> <h2 class="options-title">OPTIONS</h2>
@ -77,33 +74,7 @@
</div> </div>
</div> </div>
<div id="leaderboardMenu" style="display: none;"> <!-- GAME CANVAS (Hidden initially) -->
<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;"> <div id="gameContainer" style="display: none;">
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
</div> </div>

57
Script.js
View File

@ -1955,60 +1955,3 @@ function returnToMenu() {
console.log('Menu System Loaded'); console.log('Menu System Loaded');
console.log('Settings:', gameSettings); 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
View File

@ -16,9 +16,8 @@ html, body {
overflow: hidden; overflow: hidden;
} }
/* === MAIN MENU, OPTIONS, & LEADERBOARD MENU === */ /* === MAIN MENU & OPTIONS MENU === */
/* Saya menambahkan #leaderboardMenu disini agar posisinya sama */ #mainMenu, #optionsMenu {
#mainMenu, #optionsMenu, #leaderboardMenu {
position: absolute; position: absolute;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
@ -39,7 +38,7 @@ html, body {
to { opacity: 1; } to { opacity: 1; }
} }
/* === STARS CONTAINER (hidden by default) === */ /* === STARS CONTAINER (hidden by default, no animation) === */
.stars-container { .stars-container {
display: none; display: none;
} }
@ -235,7 +234,7 @@ input[type="range"] {
border: 2px solid #00eaff; border: 2px solid #00eaff;
border-radius: 10px; border-radius: 10px;
outline: none; outline: none;
appearance: none; -webkit-appearance: none;
cursor: pointer; cursor: pointer;
box-shadow: inset 0 0 5px rgba(0, 234, 255, 0.3); box-shadow: inset 0 0 5px rgba(0, 234, 255, 0.3);
} }
@ -263,6 +262,28 @@ input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.15); 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 === */
.button-group { .button-group {
display: flex; display: flex;
@ -332,65 +353,6 @@ input[type="range"]::-webkit-slider-thumb:hover {
inset 0 0 20px rgba(0, 234, 255, 0.3); 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 === */ /* === GAME CONTAINER === */
#gameContainer { #gameContainer {
width: 100vw; width: 100vw;
@ -408,12 +370,26 @@ input[type="range"]::-webkit-slider-thumb:hover {
/* === RESPONSIVE === */ /* === RESPONSIVE === */
@media (max-width: 768px) { @media (max-width: 768px) {
.title-word { font-size: 60px; } .title-word {
.menu-btn { font-size: 20px; padding: 12px 40px; min-width: 280px; } font-size: 60px;
.options-container { min-width: 90vw; padding: 30px; } }
.options-title { font-size: 50px; }
.footer-info p { font-size: 12px; }
/* Responsive Leaderboard */ .menu-btn {
.leaderboard-table th, .leaderboard-table td { font-size: 14px; padding: 10px; } 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;
}
} }