<div class="game">
  <div class="title">PRESS ANY KEY TO START</div>
  <div class="y pad"></div>
  <div class="r pad"></div>
  <div class="g pad"></div>
  <div class="b pad"></div>
</div>

@keyframes pulse-in-out {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

body {
  margin: 0;
  background: #033b4f;
  font-family: "VT323", monospace;
}

body * {
  box-sizing: border-box;
}

.game {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 40px;
  justify-content: center;
  align-content: center;
  margin: 100px auto;
}

.title {
  grid-column: span 2;
  text-align: center;
  color: #ffe66d;
  font-size: 45px;
}

.pad {
  border: 10px solid black;
  border-radius: 20px;
  width: 200px;
  height: 200px;
}

.pad.y {
  background-color: #ffe66d;
}

.pad.r {
  background-color: #ff6b6b;
}

.pad.g {
  background-color: #008148;
}

.pad.b {
  background-color: #477998;
}

.pad.anim {
  animation: pulse-in-out 1s;
}

const pads = [
  document.querySelector(".pad.y"), 
  document.querySelector(".pad.r"), 
  document.querySelector(".pad.g"), 
  document.querySelector(".pad.b"),
];

const text = document.querySelector(".title");

const newLevel = (level = 1, sequence = []) => new Promise((resolve) => {
  text.innerHTML = `LEVEL ${level}`;
   
  const next = pads[Math.floor(Math.random() * 4)];
  
  const end = () => {
    next.classList.remove("anim");
    next.removeEventListener("animationend", end);
    resolve();
  };
  
  next.addEventListener("animationend", end);
  
  next.classList.add("anim");
});

let animating = false;

document.addEventListener("keydown", async () => {
  if (animating === false) {
    animating = true;
    await newLevel(1, []);
    animating = false;
  }
});