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";
}
// Index to keep track of the current position in the array
let currentIndex = 0;

// Array to store the current options
let currentOptions = [];

// Variable to store the chosen option
let chosenOption = null;

// Function to initialize the game
function initializeGame() {
  currentOptions = [imagesWithText[0], imagesWithText[1]];
  displayOptions();
}

// Function to display current options
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 to handle option selection
function selectOption(optionIndex) {
  chosenOption = currentOptions[optionIndex];

  // Move to the next option in the array
  currentIndex++;
  if (currentIndex < imagesWithText.length) {
    currentOptions[1 - optionIndex] = imagesWithText[currentIndex];
  } else {
    endGame();
    return;
  }

  displayOptions();
}

// Function to end the game
function endGame() {
  // Save the last chosen option
  saveResult(chosenOption);

  // Display the result
  displayResult();
}

// Function to save the result
function saveResult(result) {
  // Implement your logic to save the result, e.g., send to a server or save in local storage
  localStorage.setItem("gameResult", JSON.stringify(result));
}

// Function to display the result
function displayResult() {
  const resultElement = document.getElementById("result");
  resultElement.style.backgroundImage = `url('${chosenOption.result}')`;

  // Show the result section
  document.getElementById("section2").style.display = "block";
  document.getElementById("content-container").style.display = "none";
  document.getElementById("button").removeAttribute("disabled");
}

// Initialize the game when the page loads
window.onload = initializeGame;

// Event listeners for option selection
document
  .getElementById("option-1")
  .addEventListener("click", () => selectOption(0));
document
  .getElementById("option-2")
  .addEventListener("click", () => selectOption(1));

// Event listener for the "Next" button
document.querySelector(".footer-btn-next").addEventListener("click", () => {
  if (currentIndex >= imagesWithText.length - 1) {
    endGame();
  } else {
    // Continue to the next round
    displayOptions();
  }
});