// shoutout deej (i know none of their socials) for garf (irl)

const wrapper = document.createElement("div");
wrapper.style.setProperty("position", "sticky");
wrapper.style.setProperty("top", "-8px");
wrapper.style.setProperty("left", "-8px");
wrapper.style.setProperty("width", "0");
wrapper.style.setProperty("height", "0");
wrapper.style.setProperty("z-index", 9999);
window.addEventListener("load", () => document.body.prepend(wrapper));

const bangs = ["garf-1.webp", "garf-2.webp"].map((src) => {
  const el = new Image();
  el.src = src;
  el.style.setProperty("position", "relative");
  el.style.setProperty("width", "100vw");
  el.style.setProperty("height", "100vh");
  return el;
});

const aud = new Audio("flashbang.mp3");

window.addEventListener("click", () => {
  const el = bangs[Math.floor(Math.random() * bangs.length)];
  wrapper.append(el);
  aud.play();
  el.animate(
    {
      opacity: [1, 0],
    },
    {
      duration: 4000,
    },
  ).finished.then(() => el.remove());
});