IT'S DONE
This commit is contained in:
parent
2900863f22
commit
87de3942f6
@ -150,7 +150,9 @@ if (is_array($currentUser)) {
|
|||||||
<div class="music-container">
|
<div class="music-container">
|
||||||
<button id="lbMusicBtn" class="music-btn">🔇</button>
|
<button id="lbMusicBtn" class="music-btn">🔇</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<audio id="lbAudio" loop src="music/music_background.mp3"></audio>
|
<audio id="lbAudio" loop src="music/music_background.mp3"></audio>
|
||||||
|
<audio id="sfxAudio" src="music/click.mp3"></audio>
|
||||||
|
|
||||||
<script src="assets/leaderboard.js"></script>
|
<script src="assets/leaderboard.js"></script>
|
||||||
|
|
||||||
|
|||||||
@ -1,26 +1,88 @@
|
|||||||
|
// --- 1. SETUP SFX (Sama persis kayak Mainboard) ---
|
||||||
|
const sfxClick = new Audio('music/music-click.mp3');
|
||||||
|
|
||||||
|
function playClick() {
|
||||||
|
sfxClick.currentTime = 0;
|
||||||
|
sfxClick.play().catch(() => {});
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- 2. LOGIKA TOMBOL FILTER (Var 'buttons' TETAP, cuma tambah delay) ---
|
||||||
const buttons = document.querySelectorAll(".filter-btn");
|
const buttons = document.querySelectorAll(".filter-btn");
|
||||||
buttons.forEach(btn => {
|
buttons.forEach(btn => {
|
||||||
btn.addEventListener("click", function () {
|
btn.addEventListener("click", function (e) {
|
||||||
|
e.preventDefault(); // Tahan dulu biar gak langsung pindah
|
||||||
|
playClick(); // Bunyiin suara
|
||||||
|
|
||||||
|
// Logic ganti warna tombol (Asli punya kamu)
|
||||||
buttons.forEach(b => b.classList.remove("active"));
|
buttons.forEach(b => b.classList.remove("active"));
|
||||||
this.classList.add("active");
|
this.classList.add("active");
|
||||||
|
|
||||||
|
// Ambil link tujuan (href) lalu pindah setelah 300ms
|
||||||
|
const targetUrl = this.getAttribute("href");
|
||||||
|
setTimeout(() => {
|
||||||
|
window.location.href = targetUrl;
|
||||||
|
}, 300);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// --- 3. LOGIKA TOMBOL KEMBALI & LOGOUT (Tambahan biar ada suaranya) ---
|
||||||
|
const backBtn = document.querySelector(".back-btn");
|
||||||
|
const logoutBtn = document.querySelector(".logout-btn");
|
||||||
|
|
||||||
|
if (backBtn) {
|
||||||
|
backBtn.removeAttribute("onclick"); // Hapus onclick bawaan HTML
|
||||||
|
backBtn.addEventListener("click", () => {
|
||||||
|
playClick();
|
||||||
|
setTimeout(() => {
|
||||||
|
window.location.href = 'mainboard.php';
|
||||||
|
}, 300);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (logoutBtn) {
|
||||||
|
logoutBtn.addEventListener("click", (e) => {
|
||||||
|
e.preventDefault(); // Tahan link logout
|
||||||
|
playClick();
|
||||||
|
setTimeout(() => {
|
||||||
|
window.location.href = 'logout.php';
|
||||||
|
}, 300);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- 4. LOGIKA BACKGROUND MUSIC (UBAHAN: CERDAS DETEKSI HALAMAN) ---
|
||||||
const lbMusicBtn = document.getElementById("lbMusicBtn");
|
const lbMusicBtn = document.getElementById("lbMusicBtn");
|
||||||
const lbAudio = document.getElementById("lbAudio");
|
const lbAudio = document.getElementById("lbAudio");
|
||||||
|
|
||||||
if (lbMusicBtn && lbAudio) {
|
if (lbMusicBtn && lbAudio) {
|
||||||
lbAudio.loop = true;
|
lbAudio.loop = true;
|
||||||
const savedState = localStorage.getItem("musicState");
|
|
||||||
let isLbPlaying = savedState === null ? true : (savedState === "on");
|
// 1. Cek nama file halaman saat ini
|
||||||
|
const path = window.location.pathname;
|
||||||
|
// Cek apakah nama filenya mengandung kata "mainboard" (huruf kecil/besar gak masalah)
|
||||||
|
const isMainboardPage = path.toLowerCase().includes("mainboard");
|
||||||
|
|
||||||
|
let isLbPlaying;
|
||||||
|
|
||||||
|
if (isMainboardPage) {
|
||||||
|
// SKENARIO A: Kalau ini halaman MAINBOARD
|
||||||
|
// Aturannya: Pas masuk HARUS ON (Reset).
|
||||||
|
isLbPlaying = true;
|
||||||
|
localStorage.setItem("musicState", "on");
|
||||||
|
} else {
|
||||||
|
// SKENARIO B: Kalau ini halaman LEVEL (Easy/Medium/Hard)
|
||||||
|
// Aturannya: IKUTI settingan terakhir user (baca localStorage).
|
||||||
|
const savedState = localStorage.getItem("musicState");
|
||||||
|
// Kalau gak ada data (null), anggap on. Kalau ada, ikutin isinya.
|
||||||
|
isLbPlaying = savedState === null ? true : (savedState === "on");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fungsi update tampilan & play/pause
|
||||||
const updateMusicState = () => {
|
const updateMusicState = () => {
|
||||||
if (isLbPlaying) {
|
if (isLbPlaying) {
|
||||||
lbAudio.play().then(() => {
|
lbAudio.play().then(() => {
|
||||||
lbMusicBtn.innerHTML = "🔊";
|
lbMusicBtn.innerHTML = "🔊";
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
console.log("Autoplay dicegah, menunggu interaksi user...");
|
console.log("Autoplay dicegah browser, nunggu klik user...");
|
||||||
lbMusicBtn.innerHTML = "🔇";
|
lbMusicBtn.innerHTML = "🔇";
|
||||||
|
|
||||||
const enableAudioOnInteraction = () => {
|
const enableAudioOnInteraction = () => {
|
||||||
@ -28,11 +90,8 @@ if (lbMusicBtn && lbAudio) {
|
|||||||
lbMusicBtn.innerHTML = "🔊";
|
lbMusicBtn.innerHTML = "🔊";
|
||||||
});
|
});
|
||||||
document.removeEventListener('click', enableAudioOnInteraction);
|
document.removeEventListener('click', enableAudioOnInteraction);
|
||||||
document.removeEventListener('touchstart', enableAudioOnInteraction);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
document.addEventListener('click', enableAudioOnInteraction);
|
document.addEventListener('click', enableAudioOnInteraction);
|
||||||
document.addEventListener('touchstart', enableAudioOnInteraction);
|
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
lbAudio.pause();
|
lbAudio.pause();
|
||||||
@ -40,17 +99,21 @@ if (lbMusicBtn && lbAudio) {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Jalankan pertama kali saat load
|
||||||
updateMusicState();
|
updateMusicState();
|
||||||
|
|
||||||
|
// Event Listener saat tombol speaker diklik
|
||||||
lbMusicBtn.addEventListener("click", (e) => {
|
lbMusicBtn.addEventListener("click", (e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
|
||||||
|
// playClick(); // Uncomment kalau mau tombol mute bunyi klik
|
||||||
|
|
||||||
if (isLbPlaying) {
|
if (isLbPlaying) {
|
||||||
isLbPlaying = false;
|
isLbPlaying = false;
|
||||||
localStorage.setItem("musicState", "off");
|
localStorage.setItem("musicState", "off"); // Simpan 'off' biar level selanjutnya tau
|
||||||
} else {
|
} else {
|
||||||
isLbPlaying = true;
|
isLbPlaying = true;
|
||||||
localStorage.setItem("musicState", "on");
|
localStorage.setItem("musicState", "on"); // Simpan 'on'
|
||||||
}
|
}
|
||||||
updateMusicState();
|
updateMusicState();
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user