/*
  Sprinkle Effect Script
  Authors: John Flammer, Nadeem Shaikh
  Contact: Proficient PC, info@proficientpc.com
  Created on: 01/01/2024
  Script Version: Sprinkles_V1

  Description:
  This script randomly generates and animates sprinkle images on the webpage.
*/

function injectSprinkleStyles() {
  const style = document.createElement('style');
  style.textContent = `
      .sprinkle {
          transition: opacity 1s ease-in-out;
          position: absolute;
          opacity: 1;
          z-index: 9999;
      }
  `;
  document.head.appendChild(style);
}

const sprinkleImages = [
  '/sprinkles/blue_sprinkle.png',
  '/sprinkles/green_sprinkle.png',
  '/sprinkles/orange_sprinkle.png',
  '/sprinkles/purple_sprinkle.png',
  '/sprinkles/red_sprinkle.png',
  '/sprinkles/yellow_sprinkle.png'
];

function getRandomPosition() {
  const x = Math.random() * (window.innerWidth - 100) + 50;
  const y = Math.random() * (window.innerHeight - 100) + 50;
  return { x, y };
}

function getRandomRotation() {
  return Math.random() * 360;
}

function createSprinkles() {
  const sprinkleCount = window.innerWidth < 768 ? 7 : 14;

  for (let i = 0; i < sprinkleCount; i++) {
      createSprinkle();
  }
}

function createSprinkle() {
  const sprinkleEl = document.createElement('img');
  sprinkleEl.src = sprinkleImages[Math.floor(Math.random() * sprinkleImages.length)];
  sprinkleEl.classList.add('sprinkle');
  sprinkleEl.style.width = '17px';
  sprinkleEl.style.height = 'auto';

  const { x, y } = getRandomPosition();
  const rotation = getRandomRotation();

  sprinkleEl.style.left = `${x}px`;
  sprinkleEl.style.top = `${y}px`;
  sprinkleEl.style.transform = `rotate(${rotation}deg)`;

  document.body.appendChild(sprinkleEl);

  setTimeout(() => {
      sprinkleEl.style.opacity = 0;
      setTimeout(() => sprinkleEl.remove(), 1000);
  }, 3000);
}

window.onload = function() {
  injectSprinkleStyles();
  createSprinkles();
  setInterval(createSprinkles, 4000);
};