var box = document.querySelector("div");
var btn = document.querySelector("button");
var trail = document.getElementById("dot");
var trail2 = document.getElementById("dot2");
var trail3 = document.getElementById("dot3");
var lineTrail = document.getElementById("line");

function teleport(){
  var btnWidth = btn.clientWidth;
  var btnHeight = btn.clientHeight;
  var width = box.offsetWidth;
  var height = box.offsetHeight;

var h = height - btnHeight;
var w = width - btnWidth;

  let topL = Math.floor(Math.random() * h) + 1  + "px"
  let leftLRaw = Math.floor(Math.random() * w) + 1;
  let radius = Math.floor(Math.random() * 100) + 1 + "px"
  let leftL = leftLRaw + "px";
btn.style.top = topL
btn.style.left = leftL
btn.style.borderRadius= radius;

var trailLeft = leftLRaw + 40 + "px";

trail.style.top = btn.style.top;
trail.style.left =trailLeft;

trail2.style.top = btn.style.top;
trail2.style.left =trailLeft;

trail3.style.top = btn.style.top;
trail3.style.left =trailLeft;


};

transform = false;
beyondPlusUtlra = false;
deku = false;
bakugo= false;
todoroki = false;

document.body.addEventListener("keyup", function(ev){
if(ev.keyCode == 32 && transform == false){
  btn.style.transition = "0.1s";
  box.style.background= "linear-gradient(to bottom right,#FFDF1B , #EDB900)";
  btn.innerHTML= "PLUS ULTRA";
  btn.style.fontWeight="bold";
  btn.style.boxShadow = "6px 6px rgba(230,56,39,0.8)"
  btn.style.color= "#eee"
  trail.style.display="none";
  trail2.style.display="none";
  trail3.style.display="none";
  setInterval (teleport, 250)
  transform = true;
}else if (transform == true){
   btn.style.transition = "0s";
   btn.innerHTML= "BEYOND PLUS ULTRA";
    btn.style.boxShadow = "12px 12px rgba(230,56,39,0.9)"
    btn.style.fontFamily = "cursive";
    setInterval (teleport, 200);
    transform = null;
    beyondPlusUtlra = true;
}else if (beyondPlusUtlra == true){
  btn.innerHTML= "Deku";
  box.style.backgroundImage= "url(https://c.wallhere.com/photos/59/0f/Izuku_Midoriya_Boku_no_Hero_Academia_anime_boys_simple_background_anime-1549891.jpg!d)";
  box.style.backgroundSize = "cover";
  box.style.backgroundRepeat= "repeat-y";
  btn.style.transition = "0.5s";
  btn.style.background="#fff"
  btn.style.color="#1d1d1d"
   btn.style.boxShadow = "6px 6px rgba(41, 241, 195, 0.9)"
   beyondPlusUtlra = null;
   deku = true;
}else if (deku == true){
   btn.innerHTML= "Bakugo";
  box.style.backgroundImage= "url(https://img5.goodfon.com/wallpaper/nbig/5/1e/pixiv-id-12056696-boku-no-hero-academia-bakugou-katsuki-baku.jpg)";
  box.style.backgroundSize = "cover";
  box.style.backgroundRepeat= "repeat-y";
  btn.style.transition = "0.6s";
  btn.style.background="black"
  btn.style.color="#ddd";
   btn.style.boxShadow = "7px 7px rgba(217, 30, 24, 1)";
   setInterval(teleport, 150)
   deku = null;
   bakugo = true;
}else if (bakugo == true){
    btn.innerHTML= "Todoroki";
  box.style.backgroundImage= "url(https://i.pinimg.com/originals/f3/ce/6b/f3ce6b400cb9247dffee7a58bcd56c54.png)";
  box.style.backgroundSize = "cover";
  box.style.backgroundRepeat= "repeat-y";
  btn.style.transition = "0.4s";
  btn.style.background="lightblue"
  btn.style.color="darkblue";
   btn.style.boxShadow = "7px 7px rgba(248, 148, 6, 1)";
   setInterval(teleport, 350000)
   bakugo = null;
   todoroki = null;
}
});