const sounds = document.getElementsByClassName("keypress");

let down = false;
let mouse = [0,0];

document.addEventListener("mousemove", event => {
  mouse = [event.clientX, event.clientY];
})

document.addEventListener("keydown", event => {
  if (!down) {
    down = true;
    let toPlay = Math.floor(Math.random() * sounds.length);
    sounds[toPlay].cloneNode(true).play();
    let text = document.createElement("p");
    text.classList.add("text");
    text.textContent = event.key;
    text.style.left = `${mouse[0]}px`;
    text.style.top = `${mouse[1]}px`;
    text.style.scale = 2;
    document.body.appendChild(text);
    requestAnimationFrame(() => {
      text.style.scale = "";
    });
  }
});

document.addEventListener("touchstart", event => {
  if (event.touches.length == 1) {
    let toPlay = Math.floor(Math.random() * sounds.length);
    sounds[toPlay].cloneNode(true).play();
    const posX = event.touches[0].clientX;
    const posY = event.touches[0].clientY;

    const node = document.createElement("div");
    node.classList.add("node");
    node.style.left = `${posX}px`;
    node.style.top = `${posY}px`;
    node.style.scale = 3;
    document.body.appendChild(node);
    requestAnimationFrame(() => {
      node.style.scale = "";
    });
  }
});

document.addEventListener("keyup", () => {
  down = false;
});