<header>
  <h1>Color Game</h1>
</header>

<main>
  <p class="rgb"></p>
  <div class="colors"></div>
  <p class="status">Try to guess the right color based on the RGB value by clicking on the blocks.</p>
  <div class="diff">
    <span class="diff__btn" title="easy">3</span>
    <span class="diff__btn active" title="normal">6</span>
    <span class="diff__btn" title="hard">9</span>
  </div>
</main>

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

body {
  font-family: Arial;
  text-align: center;
  margin: 10px;
  background: #eee;
  color: #333;
}

@media (min-width: 768px) {
  body {
    font-size: 20px;
  }
}

h1 {
  font-size: 2rem;
}

main {
  
}

.rgb {
  font-size: 1.4rem;
  text-transform: uppercase;
}

.colors {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  width: 60vw;
  min-width: 300px;
  max-width: 600px;
  margin: auto;
}

.colors__block {
  height: 100px;
  width: 100%;
  background: #ddd;
  cursor: pointer;
  transition: background 0.4s ease;
}

.colors__block:hover {
  opacity: 0.9;
}

.status {
  min-width: 300px;
  width: 60vw;
  margin: 20px auto;
  font-size: 1rem;
}

.diff {
  margin: 20px auto;
}

.diff__btn {
  font-size: 14px;
  border: solid 1px;
  padding: 10px;
  cursor: pointer;
}

.diff__btn.active {
  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;
}

// reset button?
// add Hue and Hex options
// dark theme?

var diffEls = document.querySelectorAll(".diff__btn");
var diffEl = document.querySelector(".diff__btn.active").innerHTML;
var n = diffEl;
var colorsEl = document.querySelector(".colors");
var colorsBlocks;
var rgbEl = document.querySelector(".rgb");
var statusEl = document.querySelector(".status");
var colors = [];
createBlocks(n);
resetGame();

function checkColors(e) {
  if (colors[pickedColor] === e.target.style.backgroundColor) {
    statusEl.innerHTML = "Good job!<br>A new game will start right now.";
    document.body.style.color = colors[pickedColor];
    for (var i=0; i<colorsBlocks.length; i++) {
      colorsBlocks[i].style.backgroundColor = colors[pickedColor];
    }
    resetGame();
  }
  else {
    e.target.style.backgroundColor = "transparent";
    statusEl.innerHTML = "Try again!";
  }
}

function resetGame() {
  setTimeout(function() {
    createBlocks(n);
    document.body.style.color = "black";
    colors = [];
    pickColors();
    pickedColor = random(n);
    rgbEl.innerHTML = colors[pickedColor];
    setColors();
    statusEl.innerHTML = "Try to guess the right color based on the RGB value by clicking on the blocks.";
  }, 1000);
}

function setColors() {
  for (var i=0; i<colorsBlocks.length; i++) {
    colorsBlocks[i].style.backgroundColor = colors[i];
  }
}

function pickColors() {
  for (var i=0; i<n; i++) {
    colors.push(randomColor());
  }
}

function randomColor() {
  return "rgb(" + random(255) + ", " + random(255) + ", " + random(255) + ")";
}

function random(r) {
  return Math.floor(Math.random()*r);
}

for (var i=0; i<diffEls.length; i++) {
  diffEls[i].addEventListener("click", setN);
}

function setN(e) {
  for (var i=0; i<diffEls.length; i++) {
    diffEls[i].classList.remove("active");
  }
  e.target.classList.add("active");
  diffEl = document.querySelector(".diff__btn.active").innerHTML;
  n = diffEl;
  resetGame();
}

function createBlocks(num) {
  colorsEl.innerHTML = "";
  for (var i=0; i<num; i++) {
    var block = document.createElement("div");
    block.classList.add("colors__block");
    colorsEl.appendChild(block);
  }
  colorsBlocks = document.querySelectorAll(".colors__block");
  for (var i=0; i<colorsBlocks.length; i++) {
    colorsBlocks[i].addEventListener("click", checkColors);
  }
}