finally

assets/mainboard.js

@@ -1,66 +1,86 @@
 document.addEventListener('DOMContentLoaded', () => {
-    // --- 1. LOGIKA MUSIK (FIXED) ---
     const musicBtn = document.getElementById('musicBtn');
     const bgMusic = document.getElementById('bgMusic');
     
-    if (musicBtn && bgMusic) {
+    let isMusicPlaying = false;
-        // Cek status awal: Kalau lagu pause, icon harus mute
+    musicBtn.innerText = '🔇'; 
-        if (bgMusic.paused) {
+
-            musicBtn.textContent = '🔇';
+    if (bgMusic) {
-        } else {
+        bgMusic.play()
-            musicBtn.textContent = '🔊';
+        .then(() => {
+            console.log("Auto-play sukses");
+            isMusicPlaying = true;
+            musicBtn.innerText = '🔊'; 
+        })
+        .catch((error) => {
+            console.log("Auto-play diblokir browser, menunggu klik user.");
+            isMusicPlaying = false;
+            musicBtn.innerText = '🔇'; 
+        });
     }
 
     musicBtn.addEventListener('click', () => {
-            if (bgMusic.paused) {
+        if (isMusicPlaying) {
-                // Kalau lagi mati, nyalakan
-                bgMusic.play().then(() => {
-                    musicBtn.textContent = '🔊';
-                }).catch((e) => {
-                    console.log("Browser memblokir audio:", e);
-                });
-            } else {
-                // Kalau lagi nyala, matikan
             bgMusic.pause();
-                musicBtn.textContent = '🔇';
+            musicBtn.innerText = '🔇';
-            }
+            isMusicPlaying = false;
-        });
         } else {
-        console.error("Element Audio/Tombol tidak ditemukan!");
+            bgMusic.play();
-    }
+            musicBtn.innerText = '🔊';
-
+            isMusicPlaying = true;
-    // --- 2. LOGOUT ---
-    const logoutBtn = document.getElementById("logoutBtn");
-    if (logoutBtn) {
-        logoutBtn.addEventListener("click", () => {
-            window.location.href = "logout.php";
-        });
-    }
-
-    // --- 3. LEADERBOARD ---
-    const leaderboardBtn = document.getElementById("leaderboardBtn");
-    if (leaderboardBtn) {
-        leaderboardBtn.addEventListener("click", () => {
-            window.location.href = "Leaderboard.php"; 
-        });
         }
     });
 
-// --- FUNGSI GLOBAL (Bisa dipanggil dari onclick HTML) ---
+});
+
+// --- INIT AUDIO CLICK ---
+// Pastikan path-nya sesuai dengan folder kamu
+const sfxClick = new Audio('music/music-click.mp3'); 
+
+// Fungsi helper biar rapi
+function playClick() {
+    sfxClick.currentTime = 0;
+    sfxClick.play().catch(() => {});
+}
 
-// NAVIGATION
 function selectStage(stage) {
-    console.log("Pindah ke stage:", stage); // Debugging
+    playClick();
+    // Kasih delay dikit (300ms) biar suara 'Ceklik' kedengeran sebelum pindah
+    setTimeout(() => {
         window.location.href = "gameboard-" + stage + ".php";
+    }, 300);
 }
 
-// OVERLAY CREDITS
 function openCredits() {
-    const overlay = document.getElementById('creditsOverlay');
+    playClick();
-    if(overlay) overlay.style.display = 'flex';
+    document.getElementById('creditsOverlay').style.display = 'flex';
 }
 
 function closeCredits() {
-    const overlay = document.getElementById('creditsOverlay');
+    playClick();
-    if(overlay) overlay.style.display = 'none';
+    document.getElementById('creditsOverlay').style.display = 'none';
+}
+
+// Untuk Logout
+const logoutBtn = document.getElementById("logoutBtn");
+if (logoutBtn) {
+    logoutBtn.addEventListener("click", (e) => {
+        e.preventDefault(); // Tahan dulu biar gak langsung pindah
+        playClick();
+        setTimeout(() => {
+            window.location.href = "logout.php";
+        }, 300);
+    });
+}
+
+// Untuk Leaderboard
+const leaderboardBtn = document.getElementById("leaderboardBtn");
+if (leaderboardBtn) {
+    leaderboardBtn.addEventListener("click", (e) => {
+        e.preventDefault(); // Tahan dulu
+        playClick();
+        setTimeout(() => {
+            window.location.href = "Leaderboard.php"; 
+        }, 300);
+    });
 }