mobile.js

let highestZ = 1;

class Paper {
  holdingPaper = false;
  touchStartX = 0;
  touchStartY = 0;
  touchMoveX = 0;
  touchMoveY = 0;
  touchEndX = 0;
  touchEndY = 0;
  prevTouchX = 0;
  prevTouchY = 0;
  velX = 0;
  velY = 0;
  rotation = Math.random() * 30 - 15;
  currentPaperX = 0;
  currentPaperY = 0;
  rotating = false;

  init(paper) {
    paper.addEventListener('touchmove', (e) => {
      e.preventDefault();
      if(!this.rotating) {
        this.touchMoveX = e.touches[0].clientX;
        this.touchMoveY = e.touches[0].clientY;
        
        this.velX = this.touchMoveX - this.prevTouchX;
        this.velY = this.touchMoveY - this.prevTouchY;
      }
        
      const dirX = e.touches[0].clientX - this.touchStartX;
      const dirY = e.touches[0].clientY - this.touchStartY;
      const dirLength = Math.sqrt(dirX*dirX+dirY*dirY);
      const dirNormalizedX = dirX / dirLength;
      const dirNormalizedY = dirY / dirLength;

      const angle = Math.atan2(dirNormalizedY, dirNormalizedX);
      let degrees = 180 * angle / Math.PI;
      degrees = (360 + Math.round(degrees)) % 360;
      if(this.rotating) {
        this.rotation = degrees;
      }

      if(this.holdingPaper) {
        if(!this.rotating) {
          this.currentPaperX += this.velX;
          this.currentPaperY += this.velY;
        }
        this.prevTouchX = this.touchMoveX;
        this.prevTouchY = this.touchMoveY;

        paper.style.transform = `translateX(${this.currentPaperX}px) translateY(${this.currentPaperY}px) rotateZ(${this.rotation}deg)`;
      }
    })

    paper.addEventListener('touchstart', (e) => {
      if(this.holdingPaper) return; 
      this.holdingPaper = true;
      
      paper.style.zIndex = highestZ;
      highestZ += 1;
      
      this.touchStartX = e.touches[0].clientX;
      this.touchStartY = e.touches[0].clientY;
      this.prevTouchX = this.touchStartX;
      this.prevTouchY = this.touchStartY;
    });
    paper.addEventListener('touchend', () => {
      this.holdingPaper = false;
      this.rotating = false;
    });

    // For two-finger rotation on touch screens
    paper.addEventListener('gesturestart', (e) => {
      e.preventDefault();
      this.rotating = true;
    });
    paper.addEventListener('gestureend', () => {
      this.rotating = false;
    });
  }
}

const papers = Array.from(document.querySelectorAll('.paper'));

papers.forEach(paper => {
  const p = new Paper();
  p.init(paper);
});


function createEmojis() {
    const emojiCount = 10;
    const emojis = ['🎉', '❤️', '🥰', '🎂', '🎈', '✨','🎊','🥳'];
  
    for (let i = 0; i < emojiCount; i++) {
      const emoji = document.createElement('span');
      emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
      emoji.style.position = 'absolute';
      emoji.style.fontSize = '30px';
      emoji.style.pointerEvents = 'none';
  
      const x = Math.random() * window.innerWidth;
      emoji.style.left = `${x}px`;
      emoji.style.bottom = '0px';
  
      document.body.appendChild(emoji);
  
      setTimeout(() => {
        emoji.style.transition = 'transform 3s linear, opacity 3s linear';
        emoji.style.transform = `translateY(-${window.innerHeight}px)`;
        emoji.style.opacity = '0';
      }, 50);
  
      setTimeout(() => {
        document.body.removeChild(emoji);
      }, 3050);
    }
  }
  
  setInterval(createEmojis, 1000);


window.onload = function() {
    const audio = document.getElementById('background-music');
    audio.volume = 0.5;
    audio.play().catch(error => {  
        console.log('Audio playback failed:', error);
    });
};

// document.addEventListener('click', function() {
//     const audio = document.getElementById('background-music');
//     audio.play().catch(error => {
//         console.log('Audio playback failed:', error);
//     });
// });