<header>
  <h1>Higher or Lower</h1>
</header>

<main>
  <p class="tuto">
    Make the longest winning streak guessing the next card!
  </p>
  
  <span class="streak">11</span>
  
  <div class="card">K</div>  
  
  <button id="lower">Lower</button>
  <button id="equal">Equal</button>
  <button id="higher">Higher</button>
</main>

<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;
}

body {
  min-height: 100vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  font-family: Arial;
  background-color: #8EC5FC;
  background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
}

header h1 {
  font-weight: normal;
  padding: 20px;
  letter-spacing: 0.1em;
}

main {
  
}

.tuto {
  margin: 20px auto;
}

.streak {
  font-size: 24px;
  margin: 20px auto;
  padding: 4px 8px;
  border-radius: 4px;
  background: black;
  color: white;
}

.card {
  width: 200px;
  height: 282px;
  background: white;
  margin: 20px auto;
  border-radius: 8px;
  border: solid 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  transition: all 0.8s;
  transition-delay: -0.4s;
}

button {
  margin: 0 auto 20px;
  padding: 4px 8px;
  background: white;
  border: solid 1px;
  cursor: pointer;
  font-size: 18px;
}

button:hover {
  background: black;
  color: white;
  border-color: black;
}

footer {
  font-size: 14px;
  padding: 10px;
}

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

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

// improve card design

var cards = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, "J", "Q", "K"];
var streak = 0;

var cardElt = document.querySelector(".card");
var streakElt = document.querySelector(".streak");

var currentCard = getRandomCard(cards);
setValues(currentCard, streak);

document.querySelector("#lower").addEventListener("click", function() {checker("lower")} );
document.querySelector("#equal").addEventListener("click", function() {checker("equal")} );
document.querySelector("#higher").addEventListener("click", function() {checker("higher")} );

function checker(comparison) {
  var newCard = getRandomCard(cards);
  if( (comparison === "higher" && cards.indexOf(newCard) >  cards.indexOf(currentCard)) 
   || (comparison === "equal"  && cards.indexOf(newCard) == cards.indexOf(currentCard))
   || (comparison === "lower"  && cards.indexOf(newCard) <  cards.indexOf(currentCard)) ) {
    streak ++;
  }
  else {
    streak = 0;
  }
  currentCard = newCard;
  setValues(currentCard, streak);
}

function setValues(card, streak) {
  cardElt.style.backgroundColor = "black";
  cardElt.innerHTML = card;
  streakElt.innerHTML = streak;
  setTimeout(function() {
    cardElt.style.backgroundColor = "white";
  }, 400);
}

function getRandomCard(arr) {
  return cards[Math.floor(Math.random() * arr.length)];
}