Untitled

// Array of all options
const imagesWithText = [
  {
    id: "1",
    image: "../assets/images/beach.png",
    text: "مشاهدة غروب الشمس",
    result: "../assets/images/Background8.png",
  },
  {
    id: "2",
    image: "../assets/images/cinema.png",
    text: "مشاهدة فيلم في سينما",
    result: "../assets/images/Background4.png",
  },
  {
    id: "3",
    image: "../assets/images/hiking.png",
    text: "مغامرات الويكاند",
    result: "../assets/images/teamaeon_Hikers_with_backpacks_and_walking_sticks_on_the_way_to_11d7d8e0-8323-4f5e-9f25-682e9d158fac.png",
  },
  {
    id: "4",
    image: "../assets/images/restaurant.png",
    text: "نتجمعو في مطعم جديد",
    result: "../assets/images/teamaeon_A_group_of_friends_having_dinner_in_an_open_air_restau_133c7d9e-8e7f-4d98-8ac5-4bf2f781c797.png",
  },
];

function replay() {
  window.location.href = "./last.html";
}

let currentIndex = 0;
let currentOptions = [];
let chosenOption = null;

function initializeGame() {
  currentOptions = [imagesWithText[0], imagesWithText[1]];
  displayOptions();
}

function displayOptions() {
  const option1Element = document.getElementById("option-1");
  const option2Element = document.getElementById("option-2");
  option1Element.querySelector("#text-1").textContent = currentOptions[0].text;
  option2Element.querySelector("#text-2").textContent = currentOptions[1].text;
  option1Element.style.backgroundImage = `url('${currentOptions[0].image}')`;
  option2Element.style.backgroundImage = `url('${currentOptions[1].image}')`;
}

function selectOption(optionIndex) {
  chosenOption = currentOptions[optionIndex];
  
  currentIndex++;
  
  if (currentIndex < imagesWithText.length - 1) {
    // If we're not at the last item, replace the non-chosen option
    currentOptions[1 - optionIndex] = imagesWithText[currentIndex];
    displayOptions();
  } else if (currentIndex === imagesWithText.length - 1) {
    // If we're at the last item, set it as the second option
    currentOptions[1 - optionIndex] = imagesWithText[currentIndex];
    displayOptions();
  } else {
    // If we've gone through all items, end the game
    endGame();
  }
}

function endGame() {
  saveResult(chosenOption);
  displayResult();
}

function saveResult(result) {
  localStorage.setItem("gameResult", JSON.stringify(result));
}

function displayResult() {
  const resultElement = document.getElementById("result");
  resultElement.style.backgroundImage = `url('${chosenOption.result}')`;
  document.getElementById("section2").style.display = "block";
  document.getElementById("content-container").style.display = "none";
  document.getElementById("button").removeAttribute("disabled");
}

window.onload = initializeGame;

document.getElementById("option-1").addEventListener("click", () => selectOption(0));
document.getElementById("option-2").addEventListener("click", () => selectOption(1));

document.querySelector(".footer-btn-next").addEventListener("click", () => {
  if (currentIndex >= imagesWithText.length) {
    endGame();
  } else {
    displayOptions();
  }
});