audio e gay pol

assets/gameboard-easy.js

@@ -1,3 +1,44 @@
+// --- AUDIO CONFIG ---
+const bgMusic = document.getElementById("bgMusic");
+const sfxClick = document.getElementById("sfxClick");
+const sfxMatch = document.getElementById("sfxMatch");
+const sfxWrong = document.getElementById("sfxWrong");
+const sfxCountdown = document.getElementById("sfxCountdown");
+const sfxWin = document.getElementById("sfxWin");
+const sfxLose = document.getElementById("sfxLose");
+const toggleBtn = document.getElementById("toggleMusic");
+const countdownOverlay = document.getElementById("countdown-overlay");
+
+let musicMuted = false;
+
+function playSFX(audio) {
+    if(!musicMuted) {
+        audio.currentTime = 0;
+        audio.play().catch(() => {});
+    }
+}
+
+document.addEventListener('click', function initAudio() {
+    if(musicMuted) {
+        musicMuted = false;
+        toggleBtn.textContent = "🔊";
+        bgMusic.play().catch(() => {});
+        document.removeEventListener('click', initAudio);
+    }
+});
+
+toggleBtn.onclick = (e) => {
+    e.stopPropagation();
+    if (musicMuted) {
+        bgMusic.play();
+        toggleBtn.textContent = "🔊";
+    } else {
+        bgMusic.pause();
+        toggleBtn.textContent = "🔇";
+    }
+    musicMuted = !musicMuted;
+};
+
 const images = [
   "images/fruit1.png", "images/fruit2.png", "images/fruit3.png", 
   "images/fruit4.png", "images/fruit5.png", "images/fruit6.png"

assets/gameboard-hard.js

@@ -1,3 +1,42 @@
+const bgMusic = document.getElementById("bgMusic");
+const sfxClick = document.getElementById("sfxClick");
+const sfxMatch = document.getElementById("sfxMatch");
+const sfxWrong = document.getElementById("sfxWrong");
+const sfxCountdown = document.getElementById("sfxCountdown");
+const sfxWin = document.getElementById("sfxWin");
+const sfxLose = document.getElementById("sfxLose");
+const toggleBtn = document.getElementById("toggleMusic");
+const overlay = document.getElementById("countdown-overlay");
+
+let musicMuted = true;
+
+function playSFX(audio) {
+    if(!musicMuted) {
+        audio.currentTime = 0;
+        audio.play().catch(() => {});
+    }
+}
+
+document.addEventListener('click', function initAudio() {
+    if(musicMuted) {
+        musicMuted = false;
+        toggleBtn.textContent = "🔊";
+        bgMusic.play().catch(() => {});
+        document.removeEventListener('click', initAudio);
+    }
+});
+
+toggleBtn.onclick = (e) => {
+    e.stopPropagation();
+    if (musicMuted) {
+        bgMusic.play();
+        toggleBtn.textContent = "🔊";
+    } else {
+        bgMusic.pause();
+        toggleBtn.textContent = "🔇";
+    }
+    musicMuted = !musicMuted;
+};
 
 const images = [
   "images/fruit1.png", "images/fruit2.png", "images/fruit3.png",

assets/gameboard-medium.js

@@ -1,4 +1,43 @@
+// --- AUDIO CONFIG ---
+const bgMusic = document.getElementById("bgMusic");
+const sfxClick = document.getElementById("sfxClick");
+const sfxMatch = document.getElementById("sfxMatch");
+const sfxWrong = document.getElementById("sfxWrong");
+const sfxCountdown = document.getElementById("sfxCountdown");
+const sfxWin = document.getElementById("sfxWin");
+const sfxLose = document.getElementById("sfxLose");
+const toggleBtn = document.getElementById("toggleMusic");
+const countdownOverlay = document.getElementById("countdown-overlay");
 
+let musicMuted = false;
+
+function playSFX(audio) {
+    if(!musicMuted) {
+        audio.currentTime = 0;
+        audio.play().catch(() => {});
+    }
+}
+
+document.addEventListener('click', function initAudio() {
+    if(musicMuted) {
+        musicMuted = false;
+        toggleBtn.textContent = "🔊";
+        bgMusic.play().catch(() => {});
+        document.removeEventListener('click', initAudio);
+    }
+});
+
+toggleBtn.onclick = (e) => {
+    e.stopPropagation();
+    if (musicMuted) {
+        bgMusic.play();
+        toggleBtn.textContent = "🔊";
+    } else {
+        bgMusic.pause();
+        toggleBtn.textContent = "🔇";
+    }
+    musicMuted = !musicMuted;
+};
 
 const images = [
   "images/fruit1.png", "images/fruit2.png", "images/fruit3.png", 

assets/mainboard.js

@@ -1,34 +1,66 @@
-// LOGIKA MUSIK
+document.addEventListener('DOMContentLoaded', () => {
+    // --- 1. LOGIKA MUSIK (FIXED) ---
     const musicBtn = document.getElementById('musicBtn');
     const bgMusic = document.getElementById('bgMusic');
-let isMusicPlaying = truea;
+
+    if (musicBtn && bgMusic) {
+        // Cek status awal: Kalau lagu pause, icon harus mute
+        if (bgMusic.paused) {
+            musicBtn.textContent = '🔇';
+        } else {
+            musicBtn.textContent = '🔊';
+        }
 
         musicBtn.addEventListener('click', () => {
-    isMusicPlaying ? bgMusic.pause() : bgMusic.play();
+            if (bgMusic.paused) {
-    musicBtn.innerText = isMusicPlaying ? '🔇' : '🔊';
+                // Kalau lagi mati, nyalakan
-    isMusicPlaying = !isMusicPlaying;
+                bgMusic.play().then(() => {
+                    musicBtn.textContent = '🔊';
+                }).catch((e) => {
+                    console.log("Browser memblokir audio:", e);
+                });
+            } else {
+                // Kalau lagi nyala, matikan
+                bgMusic.pause();
+                musicBtn.textContent = '🔇';
+            }
+        });
+    } else {
+        console.error("Element Audio/Tombol tidak ditemukan!");
+    }
+
+    // --- 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"; 
+        });
+    }
 });
 
-// NAVIGATION (Ini yang penting, sudah .php)
+// --- FUNGSI GLOBAL (Bisa dipanggil dari onclick HTML) ---
+
+// NAVIGATION
 function selectStage(stage) {
+    console.log("Pindah ke stage:", stage); // Debugging
     window.location.href = "gameboard-" + stage + ".php";
 }
 
 // OVERLAY CREDITS
 function openCredits() {
-    document.getElementById('creditsOverlay').style.display = 'flex';
+    const overlay = document.getElementById('creditsOverlay');
+    if(overlay) overlay.style.display = 'flex';
 }
 
 function closeCredits() {
-    document.getElementById('creditsOverlay').style.display = 'none';
+    const overlay = document.getElementById('creditsOverlay');
+    if(overlay) overlay.style.display = 'none';
 }
-
-// LOGOUT
-document.getElementById("logoutBtn").addEventListener("click", () => {
-    window.location.href = "logout.php";
-});
-
-// LEADERBOARD (Cukup ditulis satu kali saja)
-document.getElementById("leaderboardBtn").addEventListener("click", () => {
-    window.location.href = "Leaderboard.php"; 
-});

audioManager.js

@@ -1,61 +0,0 @@
-const AudioManager = {
-    isMuted: false,
-    sounds: {
-        bg: document.getElementById("bgMusic"),
-        click: document.getElementById("sfxClick"),
-        match: document.getElementById("sfxMatch"),
-        wrong: document.getElementById("sfxWrong"),
-        countdown: document.getElementById("sfxCountdown"),
-        win: document.getElementById("sfxWin"),
-        lose: document.getElementById("sfxLose")
-    },
-    toggleBtn: document.getElementById("toggleMusic"),
-    init: function() {
-        if(this.toggleBtn) this.toggleBtn.textContent = "🔊";
-        if(this.toggleBtn) {
-            this.toggleBtn.onclick = (e) => {
-                e.stopPropagation();
-                this.toggleMute();
-            };
-        }
-        if (this.sounds.bg) {
-            this.sounds.bg.volume = 0.5;
-            this.sounds.bg.play().catch(() => {
-                console.log("Autoplay ditahan browser, menunggu interaksi user...");
-            });
-        }
-
-        const unlockAudio = () => {
-            if (!this.isMuted && this.sounds.bg && this.sounds.bg.paused) {
-                this.sounds.bg.play().catch(() => {});
-            }
-            document.removeEventListener('click', unlockAudio);
-        };
-        document.addEventListener('click', unlockAudio);
-    },
-    toggleMute: function() {
-        this.isMuted = !this.isMuted; 
-
-        if (this.isMuted) {
-            if(this.sounds.bg) this.sounds.bg.pause();
-            if(this.toggleBtn) this.toggleBtn.textContent = "🔇";
-        } else {
-            if(this.sounds.bg) this.sounds.bg.play().catch(() => {});
-            if(this.toggleBtn) this.toggleBtn.textContent = "🔊";
-        }
-    },
-
-    playSFX: function(name) {
-        if (this.isMuted) return;
-
-        const audio = this.sounds[name];
-        if (audio) {
-            audio.currentTime = 0;
-            audio.play().catch(() => {});
-            if (this.sounds.bg && this.sounds.bg.paused) {
-                this.sounds.bg.play().catch(() => {});
-            }
-        }
-    }
-};
-AudioManager.init();

gameboard-easy.php

@@ -62,7 +62,6 @@ $user = $_SESSION['user'];
 </div>
 
 <audio id="bgMusic" src="audio/bg-music.mp3" loop></audio>
-<script src="audioManager.js"></script>
+<script src="assets/gameboard-easy.js"></script>
-<script src="assets/gameboard-hard.js"></script>
 </body>
 </html>

gameboard-hard.php

@@ -58,8 +58,6 @@ exit();
   </div>
 </div>
 
-<audio id="bgMusic" src="audio/bg-music.mp3" loop></audio>
-<script src="audioManager.js"></script>
 <script src="assets/gameboard-hard.js"></script>
 
 </body>

gameboard-medium.php

@@ -58,8 +58,6 @@ exit();
   </div>
 </div>
 
-<audio id="bgMusic" src="audio/bg-music.mp3" loop></audio>
+<script src="assets/gameboard-medium.js"></script>
-<script src="audioManager.js"></script>
-<script src="assets/gameboard-hard.js"></script>
 </body>
 </html>