<iframe width="1280" height="720" src="https://www.youtube.com/embed/0STwSamdUyA?rel=0&amp;autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="video-darken"></div>
<div class="img-mask-win"></div>
<div class="img-mask-loose">

</div>
<div class="intro">
  <div id="start" class="startGame d-flex flex-wrap flex-column justify-content-center align-items-center">
    <h1 class="title">Movie Quote Hack</h1>
    <div class=" introContainer">
      <div class='console-container'>
        <div id='text'>Your computer has been hacked by a movie-obsessed hacker! You have 60 seconds to save it by guessing the correct movie quote from the given hint. Be careful—each wrong letter costs you 5 seconds. Prove your movie knowledge and reclaim your computer before time runs out. Good luck!</div>
        <div class='console-underscore' id='console'></div>
      </div>
    </div>
    <a id="startBtn" class="btn btn-default" role="button">START</a>
  </div>
</div>
<div class="img-mask"></div>
<div class="usedLetters"></div>
<div class="container questionsContainer  d-flex flex-wrap flex-column justify-content-center align-items-center">
  <div class="row" id="question1">
    <div class="col-12 d-flex justify-content-center">
      <div id="timer"></div>
    </div>
    <div class="col-12 d-flex justify-content-center">
      <div id="fiveSec">-5 secondes</div>

    </div>
    <div class="password col-12 d-flex justify-content-center">
      <div class="hint"></div>
    </div>
    <div class="col-12 d-flex justify-content-center">
      <div class="secretWord"></div>
    </div>
  </div>
  <div class="letters"></div>

  <div class="gameFinish flex-wrap justify-content-center align-items-center" id="win">
    <div class="magic-word"><img src="https://alexandrevacassin.fr/codepen/puzzle/magic-word.gif"></div>
    <div class="finishText"></div>
    <div class="correct-quote" style="display:none;"></div>
    <a id="restartBtn" class="btn btn-default" role="button">RESTART</a>
  </div>

.img-mask {
  background: url(https://alexandrevacassin.fr/codepen/puzzle/fond.png) no-repeat
    center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  pointer-events: none;
  z-index: 5;
}

.img-mask-win {
  background: url(https://alexandrevacassin.fr/codepen/puzzle/fond-win.jpg)
    no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  pointer-events: none;
  z-index: 0;
}

.img-mask-loose {
  background: url(https://alexandrevacassin.fr/codepen/puzzle/fond-loose.jpg)
    no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  pointer-events: none;
  z-index: 0;
}

body {
  font-family: "Source Code Pro", monospace;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  height: 100vh;
}

.magic-word {
  vertical-align: middle;
  border-style: none;
  margin-left: auto;
  margin-right: auto;
  display: none;
  margin-top: 10%;
}

#canvas {
  display: none;
}

#timer {
  font-size: 3rem;
  font-family: "Source Code Pro", monospace;
  text-align: center;
  color: red;
  text-shadow: 0 0 5px red, 0 0 10px red;
}

#question1 {
}

h1 {
  font-size: 1.5rem;
}

.title {
  text-align: center;
  font-size: 2.3em;
  width: 75%;
}

.usedLetters {
  right: 0;
  display: none;
}

.usedLetter {
  display: none;
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  margin-right: 10px;
  padding: 2px 2px;
  font-size: 30px;
  color: #fff;
  text-align: center;
  background: red;
  border-radius: 50px;
}

.letters {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  padding: 30px;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  max-width: 560px;
}

.hint {
  text-align: center;
}

.letter {
  padding: 5px;
  margin-bottom: 10px;
  margin-right: 10px;
  text-align: center;
  background: rgb(45, 45, 45);
  width: 40px;
  height: 40px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 10px;
  color: white;
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
}

.letter:hover {
  background: rgb(75, 75, 75);
}

.board {
  width: 100%;
  height: 20vh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.secretWord {
  margin-top: 24px;
  margin-bottom: 24px;
}

.password {
  margin-top: 50px;
}

.char {
  font-size: 2rem;
}

.finishText {
  font-size: 1.3em;
  text-align: center;
  margin-bottom: 24px;
  width: 100%;
}

#start {
  height: 100vh;
}

.restartBtn {
  border: 2px solid #6cacc5;
  background: rgba(42, 50, 113, 0.28);
  padding: 2% 2%;
  width: 300px;
  text-align: center;
  position: absolute;
  margin: 0 auto;
  margin-top: 0px;
  left: 0;
  right: 0;
  cursor: pointer;
  font-size: 2em;
  margin-top: 300px;
}

.restartBtn:hover {
  background: rgba(42, 50, 113, 0.5);
}

.intro {
  position: fixed;
  background: rgba(0, 0, 0, 1);
  height: 100vh;
  width: 100vw;
  z-index: 1;
}

.questionsContainer {
  position: fixed;
  height: 100vh;
  width: 100vw;
}

/* merge with above css */
.video-darken {
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  height: 100vh;
  width: 100vw;
}

iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}

.console-container {
  width: 75%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
  text-align: center;
  margin-top: 24px;
  margin-bottom: 32px;
}

.btn-default {
  background: white;
  border: none;
  cursor: pointer;
  color: #000 !important;
  font-weight: 500;
  transition: 0.3s;
  text-transform: uppercase;
  font-size: 1.3em;
  overflow: hidden;
  outline: none;
}

#fiveSec {
  position: absolute;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-size: 2em;
  margin-top: -20px;
  color: red;
}

.correct-quote {
  color: black;
  width: 100%;
  text-align: center;
  margin-bottom: 24px;
}

@media (min-width: 1200px) {
  .container {
    max-width: 100vw;
  }
}

var initial = 60000; // Initial time in milliseconds (1 minute)
var count = initial;
var counter;
var initialMillis;

function timer() {
  if (count <= 0) {
    gameOver();
    clearInterval(counter);
    return;
  }

  var current = Date.now();
  count -= current - initialMillis;
  initialMillis = current;
  displayCount(count);
}

function gameOver() {
  var finishText = document.querySelector(".finishText");

  if (!finishText) return;

  finishText.innerHTML = "You lose";
  $("#question1").hide();
  $(".magic-word").show();

  gameFinish.style.display = "flex";
  $(".board, #timer, .letters").hide();
  $(".img-mask-loose").show();

  // Show the correct quote
  var correctQuoteElement = document.querySelector(".correct-quote");
  if (correctQuoteElement) {
    correctQuoteElement.innerHTML = `The correct quote was: "${randomQuote}"`;
    correctQuoteElement.style.display = "block";
  }
}

function displayCount(count) {
  var res = count / 1000;
  document.getElementById("timer").innerHTML = res.toFixed(2);
}

$("#startBtn, #restartBtn").on("click", function () {
  clearInterval(counter);
  initialMillis = Date.now();
  counter = setInterval(timer, 1);
  $(".intro").hide();
  startGame();
});

$("#stop").on("click", function () {
  clearInterval(counter);
});

$("#reset").on("click", function () {
  clearInterval(counter);
  count = initial;
  displayCount(count);
  initialMillis = Date.now();
  counter = setInterval(timer, 1);
});

displayCount(initial);

// Quotes with corresponding films
var quotesAndFilms = [
  { quote: "May the Force be with you", film: "Star Wars" },
  { quote: "Stupid is as stupid does", film: "Forrest Gump" },
  {
    quote: "The first rule of Fight Club is you do not talk about Fight Club",
    film: "Fight Club"
  },
  { quote: "I love the smell of Napalm in the morning", film: "Apocalypse Now" },
  { quote: "Hasta la vista baby", film: "Terminator 2: Judgment Day" },
  { quote: "To infinity and beyond", film: "Toy Story" },
  {
    quote: "Keep your friends close but your enemies closer",
    film: "The Godfather Part II"
  },
  { quote: "I drink your milkshake", film: "There Will Be Blood" },
  { quote: "Say hello to my little friend", film: "Scarface" },
  {
    quote: "I ate his liver with some fava beans and a nice Chianti",
    film: "The Silence of the Lambs"
  },
  { quote: "My Precious", film: "The Lord of the Rings: The Two Towers" },
  {
    quote: "Even the smallest person can change the course of the future",
    film: "The Lord of the Rings: The Fellowship of the Ring"
  },
  { quote: "They call it Royale with Cheese", film: "Pulp Fiction" }
];

// Alphabet & letters
var alphabet = "qwertyuiopasdfghjklzxcvbnm";
var letters = document.querySelector(".letters");
var usedLetters = [];
var displayUsedLetters = document.querySelector(".usedLetters");

// Word
var secretWord = document.querySelector(".secretWord");
let randomQuote;
let randomFilm;
let wordLength;

// Progress
let correctGuesses;
let incorrectGuesses;
var gameFinish = document.querySelector(".gameFinish");

function getRandomQuote() {
  var randomIndex = Math.floor(Math.random() * quotesAndFilms.length);
  randomQuote = quotesAndFilms[randomIndex].quote;
  randomFilm = quotesAndFilms[randomIndex].film;
  document.querySelector(
    ".hint"
  ).innerHTML = `Enter the Password - Hint: ${randomFilm}`;
  hideWord(randomQuote);
}

function startGame() {
  // Reset variables
  correctGuesses = 0;
  incorrectGuesses = 0;
  usedLetters = [];
  wordLength = 0;
  count = initial; // Reset timer

  // Reset HTML Content
  gameFinish.style.display = "none";
  secretWord.innerHTML = "";
  letters.innerHTML = "";
  displayUsedLetters.innerHTML = "";
  displayCount(count); // Reset displayed count

  // Create letter divs with alphabet
  for (var i = 0; i < alphabet.length; i++) {
    let letterDiv = document.createElement("div");
    letterDiv.className = "letter";
    letterDiv.innerHTML = alphabet[i];
    letters.append(letterDiv);
  }
  getRandomQuote();

  // Show necessary elements
  $("#timer, .letters").show();
  $(".img-mask-win, .img-mask-loose").hide();
  $(".correct-quote").hide(); // Hide the correct quote element when starting a new game
}

function hideWord(randomQuote) {
  for (var i = 0; i < randomQuote.length; i++) {
    let char = document.createElement("span");
    char.className = "char";
    char.innerHTML = randomQuote[i] === " " ? " " : "_";
    if (randomQuote[i] !== " ") wordLength++;
    secretWord.append(char);
  }
}

function checkChar(char) {
  if (usedLetters.includes(char.toLowerCase())) {
    console.log("You already used this letter");
    return;
  }

  usedLetters.push(char.toLowerCase());
  var usedLetter = document.createElement("div");
  usedLetter.className = "usedLetter";
  usedLetter.innerHTML = char;
  displayUsedLetters.append(usedLetter);

  if (!randomQuote.toLowerCase().includes(char.toLowerCase())) {
    incorrectGuesses++;
    drawPenalty();
    checkWin();
  } else {
    for (var i = 0; i < randomQuote.length; i++) {
      if (randomQuote[i].toLowerCase() === char.toLowerCase()) {
        correctGuesses++;
        checkWin();
        document.querySelectorAll(".char")[i].innerHTML = randomQuote[i];
      }
    }
  }
}

function checkWin() {
  var finishText = document.querySelector(".finishText");
  if (correctGuesses === wordLength) {
    finishText.innerHTML = "Congratulations! Your computer is safe.";
    gameFinish.style.display = "flex";
    $("#timer, .letters").hide();
    $(".magic-word").hide();
    $(".img-mask-win").show();
    $("#question1").hide();
    clearInterval(counter);
  }
}

function drawPenalty() {
  const penaltyTime = 5000;

  count -= penaltyTime;
  initialMillis = Date.now();
  counter = setInterval(timer, 1);
  $("#fiveSec").fadeIn().delay(100).fadeOut();
}

$(letters).on("click", function (e) {
  if (alphabet.includes(e.target.innerHTML)) {
    checkChar(e.target.innerHTML);
    e.target.style.opacity = "0.3";
  }
});

$(document).ready(function () {
  $(".letter").on("click", function () {
    $(this).css("opacity", "0.3");
  });
  $("#startBtn, #restartBtn").on("click", function () {
    $(".intro").hide();
    $("#question1").show();
  });
  $(".img-mask-win, .img-mask-loose, #fiveSec").hide();
});

startGame();