<header>
  <h1>Whack a Donkey Kong</h1>
</header>

<section class="screen">
  <div class="status">
    <span class="score">0</span>
    <span class="time">0</span>
  </div>
  <div class="box"><img src="https://res.cloudinary.com/beumsk/image/upload/v1523567681/donkey-kong.png" alt="Donkey Kong"></div>
  <div class="box"><img src="https://res.cloudinary.com/beumsk/image/upload/v1523567681/donkey-kong.png" alt="Donkey Kong"></div>
  <div class="box"><img src="https://res.cloudinary.com/beumsk/image/upload/v1523567681/donkey-kong.png" alt="Donkey Kong"></div>
  <div class="box"><img src="https://res.cloudinary.com/beumsk/image/upload/v1523567681/donkey-kong.png" alt="Donkey Kong"></div>
  <div class="box"><img src="https://res.cloudinary.com/beumsk/image/upload/v1523567681/donkey-kong.png" alt="Donkey Kong"></div>
  <div class="box"><img src="https://res.cloudinary.com/beumsk/image/upload/v1523567681/donkey-kong.png" alt="Donkey Kong"></div>
  <div class="box"><img src="https://res.cloudinary.com/beumsk/image/upload/v1523567681/donkey-kong.png" alt="Donkey Kong"></div>
  <div class="box"><img src="https://res.cloudinary.com/beumsk/image/upload/v1523567681/donkey-kong.png" alt="Donkey Kong"></div>
  <div class="box"><img src="https://res.cloudinary.com/beumsk/image/upload/v1523567681/donkey-kong.png" alt="Donkey Kong"></div>
</section>

<section class="modal">
  <div>
    <p>Hit Donkey Kong as much as possible during 30 sec !</p>
    <span class="end">Play now</span>
  </div>
</section>

<footer>
  <p>Created by <a href="https://remybeumier.be" target="_blank">Rémy Beumier</a></p>
</footer>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

html {
  background: url(https://res.cloudinary.com/beumsk/image/upload/v1523998994/banana.png);
  background-size: 30px;
  background-repeat: space;
}

body {
  min-height: 100vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  font-family: monospace;
  background: rgba(256,256,256,0.8)
}

header h1 {
  font-weight: normal;
  padding: 20px 10px 10px 10px;
  letter-spacing: 0.1em;
  border-bottom: double 6px #EB0C42;
  background: rgba(256, 256, 256, 0.6);
}

.screen {
  width: 340px;
  height: 340px;
  margin: 10px auto;
  padding: 0 35px;
  background: black;
  outline: solid 10px white;
}

.status {
  color: white;
  font-size: 16px;
  padding: 15px 5px;
  height: 40px;
}
.score {
  float: left;
}
.score::after {
  content: " points";
}
.time {
  float: right;
}
.time::after {
  content: " sec"
}

.box {
  width: 80px;
  height: 80px;
  float: left;
  margin: 5px;
  border-bottom: double 6px #EB0C42;
  position: relative;
  overflow: hidden;
}
.box.touched {
  border-bottom-color: yellow;
}

.box img {
  display: block;
  width: 100%;
  position: absolute;
  top: 80px;
  cursor: pointer;
  transition: top 0.3s;
}

.modal {
  position: absolute;
  background: rgba(0,0,0,0.4);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal div {
  background: white;
  width: 320px;
  margin: 50px auto;
  padding: 50px;
  font-size: 20px;
}

.modal p {
  padding: 0px 10px 20px;
}

.modal .end {
  display: block;
  padding: 10px;
  color: #EB0C42;
  border: double 6px #EB0C42;
  cursor: pointer;
  transition: background 0.4s, color 0.4s;
}
.modal .end:hover {
  background: #EB0C42;
  color: white;
}

.hidden {
  display: none !important;
}

footer {
  font-size: 14px;
  padding: 10px;
  background: rgba(256, 256, 256, 0.6);
}

footer a {
  text-decoration: none;
  color: #EB0C42;
}

footer a:hover {
  text-decoration: underline;
  color: #000;
}

// adapt speed to device => mobile is much  much easier
// prevent multiple click by apparition


var score = 0;
var time = 30;
var speed = 600;
var images = document.querySelectorAll(".box img");
var scoreElt = document.querySelector(".score");
var timeElt = document.querySelector(".time");
var modal = document.querySelector(".modal");
var modalP = document.querySelector(".modal p");
var modalBtn = document.querySelector(".modal .end");
var setTimer, setShowHide;

// play button
modalBtn.addEventListener("click", function() {
  //clearInterval(checkPageInterval);
  modal.classList.add("hidden");
  setTimer = setInterval(timer, 1000);
  setShowHide = setInterval(showHide, speed*2);
});

// click handler and score updater
for(let i=0; i<images.length; i++) {
  images[i].addEventListener("click", hitKong);
}

function hitKong(e) {
  curr = e.target;
  curr.parentNode.classList.add("touched");
  score += 10;
  scoreElt.innerHTML = score;
  setTimeout(function() {
    curr.parentNode.classList.remove("touched");
  }, speed/2);
}

// show and hide with interval
function showHide() {
  var randd = randomize(9);
  images[randd].style.top = "30px";
  setTimeout(function() {
    images[randd].style.top = "100px";
  }, speed);
}

// manage timer
function timer() {
  if (time) {
    time -= 1;
    timeElt.innerHTML = time;
  }
  else {
    restart();
  }
}

function restart() {
  modalP.innerHTML = "You scored " + score + " !";
  modal.classList.remove("hidden");
  clearInterval(setTimer);
  clearInterval(setShowHide);
  time = 30;
  score = 0;
  timeElt.innerHTML = time;
  scoreElt.innerHTML = score;
}

// function random
function randomize(rand) {
  return Math.floor(Math.random() * rand);
}

// handle focus of the page
/*
function checkPageFocus() {
  if (document.hasFocus()) {
    modal.classList.remove("hidden");
  }
  else {
    modal.classList.add("hidden");
  }
}
var checkPageInterval = setInterval(checkPageFocus, 300);
*/