main.js

let isMuted = false;
const audio = document.getElementById("bgMusic");
const muteBtn = document.getElementById("muteBtn");
const bar = document.getElementById("music-bar");
function toggleMusic() {
  isMuted = !isMuted;
  if (isMuted) {
    audio.volume = 0;
    muteBtn.textContent = "🔇 Unmute";
    muteBtn.classList.add("muted");
  } else {
    audio.volume = 1;
    muteBtn.textContent = "🔊 Mute";
    muteBtn.classList.remove("muted");
  }
}
// Toggle visibility of music bar based on play/pause
audio.addEventListener("play", () => {
  bar.style.position = "fixed";
});

audio.addEventListener("pause", () => {
  bar.style.position = "none";
});
//   Attach mute button listener
muteBtn.addEventListener("click", toggleMusic);

//   Attach mute button listener
muteBtn.addEventListener("click", toggleMusic);

// Add click effects
document.addEventListener("click", function (e) {
  if (e.target.tagName !== "BUTTON" && e.target.tagName !== "A") {
    createRipple(e.clientX, e.clientY);
  }
});

function createRipple(x, y) {
  const ripple = document.createElement("div");
  ripple.style.position = "fixed";
  ripple.style.left = x - 25 + "px";
  ripple.style.top = y - 25 + "px";
  ripple.style.width = "50px";
  ripple.style.height = "50px";
  ripple.style.borderRadius = "50%";
  ripple.style.background = "rgba(255, 255, 255, 0.3)";
  ripple.style.pointerEvents = "none";
  ripple.style.zIndex = "9999";
  ripple.style.animation = "rippleEffect 0.6s ease-out forwards";

  document.body.appendChild(ripple);

  setTimeout(() => {
    document.body.removeChild(ripple);
  }, 600);
}

const rippleCSS = `
    @keyframes rippleEffect {
      0% {
        transform: scale(0);
        opacity: 1;
      }
      100% {
        transform: scale(4);
        opacity: 0;
      }
    }
  `;
const style = document.createElement("style");
style.textContent = rippleCSS;
document.head.appendChild(style);

document.addEventListener("DOMContentLoaded", () => {
  const bgMusic = document.getElementById("bgMusic");

  const playAttempt = bgMusic.play();
  if (playAttempt !== undefined) {
    playAttempt.catch(() => {
      const resumeAudio = () => {
        bgMusic.play();
        isPlaying = true;
        document.removeEventListener("click", resumeAudio);
      };
      document.addEventListener("click", resumeAudio);
    });
  }
});