script.js

let timer = 60;
let score = 0;
let hitNewNumber = 0;
let correctSound = new Audio("correct.mp3");
let wrongSound = new Audio("dry-fart.mp3");
let restartBtn = new Audio("button-click-289742.mp3");





function increaseScore() {
    score += 10;
    document.querySelector(".score").textContent = score
}

function newHit() {
    hitNewNumber = Math.floor(Math.random() * 10)
    document.querySelector(".hit").innerHTML = hitNewNumber
}

function makeBubble() {
    var clutter = "";

    for (var i = 1; i <= 171; i++) {
        clutter += `<div class="bubble">${Math.floor(Math.random() * 10)}</div>`;
    }

    document.querySelector(".buttom").innerHTML = clutter
}

function runTimer() {
    let timeEnd = setInterval(function () {
        if (timer > 0) {
            timer--;
            document.querySelector(".timer").textContent = timer
        }
        else {
            clearInterval(timeEnd)
            let Gameover = document.querySelector(".buttom").innerHTML = `<h1 class="gameover">Game over</h1>
            <h1>score <span>${score}</span></h1>
            <h1>total hit <span>${score / 10}</span></h1>
            <h1 class="restart">restart</h1>`
            document.querySelector(".header").style.display = "none";
            document.querySelector(".container").style.backgroundColor = "black";
            let reStart = document.querySelector(".restart")
                .addEventListener("click", function (event) {
                    restartBtn.play()
                     event.stopPropagation(); 
                    document.querySelector(".header").style.display = "flex";
                    // corectSound.currentTime = 0;
                    // corectSound.play();
                    // restartBtn.play()
                    score = 0;
                    document.querySelector(".score").textContent = score;
                    newHit()
                    makeBubble()
                    timer = 60;
                    runTimer()
                    correctSound.currentTime = 0;
                    correctSound.play();
                    // increaseScore()


                })
        }
    }, 1000);
}



// document.querySelector(".buttom")
//     .addEventListener("click", function (dets) {
//         let clickedNumber = Number(dets.target.textContent);
//         if (clickedNumber === hitNewNumber) {
//             corectSound.currentTime = 0;
//             corectSound.play();
//             newHit()
//             makeBubble()
//             increaseScore()

//         }
//         else if(clickedNumber !== hitNewNumber) {
//             wrongSound.currentTime = 0;
//             wrongSound.play()
//         }

//     })

document.querySelector('.buttom').addEventListener('click', function(e){
  // Ensure we only handle clicks on actual .bubble elements
  const bubble = e.target.closest('.bubble');
  if (!bubble) return; // ignore clicks outside bubbles (prevents wrongSound)
  const clickedNumber = Number(bubble.textContent);
  if (Number.isNaN(clickedNumber)) return;

  if (clickedNumber === hitNewNumber) {
    correctSound.currentTime = 0;
    correctSound.play();
    increaseScore();
    newHit();
    makeBubble();
  } else {
    wrongSound.currentTime = 0;
    wrongSound.play();
  }
});


document.addEventListener('selectstart', e => e.preventDefault());  // blocks selection
document.addEventListener('contextmenu', e => e.preventDefault());  // blocks long-press menu
document.addEventListener('copy', e => e.preventDefault());         // blocks programmatic copy
document.addEventListener('touchstart', function(e){
  if (e.touches && e.touches.length > 1) e.preventDefault();
}, { passive: false });


newHit()
runTimer()
makeBubble()
// increaseScore()