// Dot === Emoji

const MS_60FPS = 1000 / 60;

const emojis = ['🌈', '❤️', '🧡', '💛', '💚', '💙', '💜', '🤎', '🖤', '🤍']
const timeout = 3000;
const maxNumDots = 20;
const gravity = .2;

let dots = [];

// Create a new random emoji and give it random velocity and delay
function createDot() {
  const el = document.createElement('div');
  el.innerHTML = emojis[Math.floor(Math.random() * emojis.length)];
  el.classList.add('emoji');

  const x = 0;
  const y = 0;
  const vx = -3 + (Math.random() * 6);
  const vy = 5 + Math.random() * 5;
  const delay = Math.random() * 1000;
  
  return {
    x, 
    y,
    vx,
    vy,
    el,
    delay,
    timeout,
    visible: false
  };
}

// Create a random number of dots and push to dots list
function create() {
  let newDots = [];
  const num = Math.ceil(Math.random() * maxNumDots);
  
  for (let x = 0; x < num; x++) {
    newDots.push(createDot());
  }
  
  dots = [...dots, ...newDots];
}

// for each dot, perform actions depending on it's state 
function update() {
  dots.forEach(dot => {
    // if timeout is below 0, remove from dots list and dom
    if (dot.timeout < 0) {
      dots = dots.filter(d => d !== dot);
      
      document.body.removeChild(dot.el);
    }
    
    // if the dot is visible, check if it has show class and update it's velocity and position
    if (dot.visible) {
      if (!dot.el.classList.contains('show')) {
        dot.el.classList.add('show');
      }

      dot.vy -= gravity;

      dot.x += dot.vx;
      dot.y -= dot.vy;

      const transform = `translate(${dot.x}px, ${dot.y}px)`;

      dot.el.style.transform = transform;
    }
    // if not visible yet, update it's delay and make visible if delay below 0
    else {
      dot.delay -= MS_60FPS;
      
      if (dot.delay < 0) {
        document.body.appendChild(dot.el);
        dot.visible = true;
      }
    }
    
    dot.timeout -= MS_60FPS;
  })
}

// Update every 16.66ms to produce 60fps
setInterval(update, MS_60FPS);