From 6ad01101098105ca3adf850a5aa71585267de9a7 Mon Sep 17 00:00:00 2001 From: Nathan Date: Fri, 19 Dec 2025 00:54:35 +0700 Subject: [PATCH] audio e gay pol --- assets/gameboard-easy.js | 41 ++++++++++++++++++++ assets/gameboard-hard.js | 39 +++++++++++++++++++ assets/gameboard-medium.js | 39 +++++++++++++++++++ assets/mainboard.js | 76 +++++++++++++++++++++++++++----------- audioManager.js | 61 ------------------------------ gameboard-easy.php | 3 +- gameboard-hard.php | 2 - gameboard-medium.php | 4 +- mainboard.php | 2 +- 9 files changed, 176 insertions(+), 91 deletions(-) delete mode 100644 audioManager.js diff --git a/assets/gameboard-easy.js b/assets/gameboard-easy.js index be31d71..96b3c71 100644 --- a/assets/gameboard-easy.js +++ b/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" diff --git a/assets/gameboard-hard.js b/assets/gameboard-hard.js index 2dd54d3..2b74d71 100644 --- a/assets/gameboard-hard.js +++ b/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", diff --git a/assets/gameboard-medium.js b/assets/gameboard-medium.js index 1a1c7fa..d32d4f5 100644 --- a/assets/gameboard-medium.js +++ b/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", diff --git a/assets/mainboard.js b/assets/mainboard.js index db2ce6b..48f1926 100644 --- a/assets/mainboard.js +++ b/assets/mainboard.js @@ -1,34 +1,66 @@ -// LOGIKA MUSIK -const musicBtn = document.getElementById('musicBtn'); -const bgMusic = document.getElementById('bgMusic'); -let isMusicPlaying = truea; +document.addEventListener('DOMContentLoaded', () => { + // --- 1. LOGIKA MUSIK (FIXED) --- + const musicBtn = document.getElementById('musicBtn'); + const bgMusic = document.getElementById('bgMusic'); -musicBtn.addEventListener('click', () => { - isMusicPlaying ? bgMusic.pause() : bgMusic.play(); - musicBtn.innerText = isMusicPlaying ? '🔇' : '🔊'; - isMusicPlaying = !isMusicPlaying; + if (musicBtn && bgMusic) { + // Cek status awal: Kalau lagu pause, icon harus mute + if (bgMusic.paused) { + musicBtn.textContent = '🔇'; + } else { + musicBtn.textContent = '🔊'; + } + + musicBtn.addEventListener('click', () => { + if (bgMusic.paused) { + // 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 = '🔇'; + } + }); + } 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'; -} - -// 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"; -}); \ No newline at end of file + const overlay = document.getElementById('creditsOverlay'); + if(overlay) overlay.style.display = 'none'; +} \ No newline at end of file diff --git a/audioManager.js b/audioManager.js deleted file mode 100644 index 4004333..0000000 --- a/audioManager.js +++ /dev/null @@ -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(); \ No newline at end of file diff --git a/gameboard-easy.php b/gameboard-easy.php index 58e9081..14cf10d 100644 --- a/gameboard-easy.php +++ b/gameboard-easy.php @@ -62,7 +62,6 @@ $user = $_SESSION['user']; - - + \ No newline at end of file diff --git a/gameboard-hard.php b/gameboard-hard.php index ca3f29b..3348342 100644 --- a/gameboard-hard.php +++ b/gameboard-hard.php @@ -58,8 +58,6 @@ exit(); - - diff --git a/gameboard-medium.php b/gameboard-medium.php index da93f3a..99d13b5 100644 --- a/gameboard-medium.php +++ b/gameboard-medium.php @@ -58,8 +58,6 @@ exit(); - - - + \ No newline at end of file diff --git a/mainboard.php b/mainboard.php index e380f89..14aece8 100644 --- a/mainboard.php +++ b/mainboard.php @@ -46,7 +46,7 @@ $roleIcon = ($roleRaw === 'admin') ? '👑' : '🎮';
- +