<div class="grid">
  <div class="block block-1"></div>
  <div class="block block-2"></div>
  <div class="block block-3"></div>
  <div class="block block-4"></div>
  <div class="block block-5"></div>
  <div class="block block-6"></div>
  <div class="block block-7"></div>
  <div class="block block-8"></div>
  <div class="block block-9"></div>
  <div class="block block-10"></div>
  <div class="block block-11"></div>
  <div class="block block-12"></div>
  <div class="block block-13"></div>
  <div class="block block-14"></div>
  <div class="block block-15"></div>
  <div class="block block-16"></div>
  <div class="block block-17"></div>
  <div class="block block-18"></div>
  <div class="block block-19"></div>
  <div class="block block-20"></div>
  <div class="block block-21"></div>
  <div class="block block-22"></div>
  <div class="block block-23"></div>
  <div class="block block-24"></div>
  <div class="block block-25"></div>
  <div class="block block-26"></div>
  <div class="block block-27"></div>
  <div class="block block-28"></div>
  <div class="block block-29"></div>
  <div class="block block-30"></div>
  <div class="block block-31"></div>
  <div class="block block-32"></div>
  <div class="block block-33"></div>
  <div class="block block-34"></div>
  <div class="block block-35"></div>
  <div class="block block-36"></div>
  
</div>

<div class="button-row">
  <span class="restart-button">Restart</span>
</div>

:root {
  --block-color: #394D61;
  --bg-color: #16181C;
}
body{
  background-color: var(--bg-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
div.grid{
  margin: 20px auto;
  width: 700px;
  height: 700px;
  background: #2D3139;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-temaplte-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 20px;
  padding: 10px;
}
.grid.won .block{
  background: #2a8040;
}
.grid.lost .block{
  background: #F22300;
}

.block{
  background: #394D61;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  cursor: pointer;
}
.block.show,.block.correct{
  background: #bfbfbf;
}
.block.incorrect{
  background: #F22300;
}
.grid.lost .show.block {
  background: #6d9070;
}
.grid.lost .block {
  background: #bd5151;
}

.grid.lost .block.clicked.incorrect {
  background: #F22300;
}
.grid.lost .block.clicked.correct {
  background: #bfbfbf;
}

.restart-button{
  display: block;
  padding: 12px 60px;
  background: #394D61;
  color: white;
  margin-top: 30px;
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
}

window.timeBlocksShows = 4.5; //4.5sec
window.timeUntilLose = 12; //12sec
window.correctBlocksNum = 14;
window.maxIncorrectBlocksNum = 3;
window.allBlocksNum = 36;

$(document.body).on("click", ".block", onBlockClick);
$(document.body).on("click", ".restart-button, .grid.won, .grid.lost", restartGame);

function generateRandomNumberBetween(min=1,max=window.allBlocksNum,length = window.correctBlocksNum){
  var arr = [];
  while(arr.length < length){
      var r = Math.floor(Math.random() * (max+1-min)) + min;
      if(arr.indexOf(r) === -1) arr.push(r);
  }
  return arr;
}

function onBlockClick(e){
  if(!activateClicking){
    return;
  }

  let clickedBlock = e.target;
  
  let blockNum = clickedBlock.classList.value.match(/(?:block-)(\d+)/)[1];
  blockNum = Number(blockNum);
  let correctBlocks = window.gridCorrectBlocks;

  

  let correct = correctBlocks.indexOf(blockNum) !== -1;
  clickedBlock.classList.add("clicked");
  console.log(blockNum, correct, correctBlocks);
  if(correct){
    clickedBlock.classList.remove("incorrect");
    clickedBlock.classList.add("correct");
  }
  else{
    clickedBlock.classList.add("incorrect");
    clickedBlock.classList.remove("correct");
  }
  
  checkWinOrLost();
  
}

function showCorrectBlocks(){
  
  $(".block").each((i,ele)=>{
    let blockNum = ele.classList.value.match(/(?:block-)(\d+)/)[1];
    blockNum = Number(blockNum);
    let correctBlocks = window.gridCorrectBlocks;
    let correct = correctBlocks.indexOf(blockNum) !== -1;
    if(correct){
      ele.classList.add("show");
    }
  });
}
function hideAllBlocks(){
  $(".block").each((i,ele)=>{
    ele.classList.remove("show");
    ele.classList.remove("correct");
    ele.classList.remove("incorrect");
    ele.classList.remove("clicked");
  });
}

function restartGame(){
  $(".grid").removeClass("won");
  $(".grid").removeClass("lost");
  hideAllBlocks();
  window.gridCorrectBlocks = generateRandomNumberBetween();
  window.activateClicking = false;
  showCorrectBlocks();
  setTimeout(()=>{
    hideAllBlocks();
    window.activateClicking = true;
    console.log("Restarted")
  }, timeBlocksShows*1000);
}

function checkWinOrLost(){
  if(isGameWon()){
    $(".grid").addClass("won");
    window.activateClicking = false;
    return "won";
  }
  if(isGameLost()){
    $(".grid").addClass("lost");
    showCorrectBlocks();
    window.activateClicking = false;
    return "lost";
  }
}

function isGameWon(){
  return $(".correct").length >= window.correctBlocksNum;
}
function isGameLost(){
  return $(".incorrect").length >= window.maxIncorrectBlocksNum;
}

restartGame();