next-pgan-raffle/pgan_raffle/script.js

const fileInput = document.getElementById("file-input");
const boxContainer = document.getElementById("box-container");
const raffleButton = document.getElementById("raffle-button");
const backgroundMusicOptions = [
  document.getElementById("background-music"),
  document.getElementById("background-music1"),
];
const congratsMusicOptions = [
  document.getElementById("congrats-music1"),
  document.getElementById("congrats-music2"),
];
const winnerModal = new bootstrap.Modal(
  document.getElementById("winnerModal"),
  {
    backdrop: "static",
    keyboard: false,
  }
);
const winnerNameDisplay = document.getElementById("winner-name");
const removeWinnerButton = document.getElementById("remove-winner");
const paripapapGif = document.getElementById("paripapap-gif");
const igilingGif = document.getElementById("igiling-gif");

let names = [];
let spinning = false;
let currentWinnerIndex = null;

// Initialize both images hidden
paripapapGif.style.display = "none";
igilingGif.style.display = "none";

// Function to show the appropriate GIF based on the audio playing
function showGifForMusic(audioId) {
  if (audioId === "background-music") {
    paripapapGif.style.display = "block";
    igilingGif.style.display = "none";
  } else if (audioId === "background-music1") {
    paripapapGif.style.display = "none";
    igilingGif.style.display = "block";
  }
}

// Add event listeners for play, pause, and ended events on the audio elements
backgroundMusicOptions.forEach((music) => {
  music.addEventListener("play", () => showGifForMusic(music.id));
  music.addEventListener("pause", () => {
    paripapapGif.style.display = "none";
    igilingGif.style.display = "none";
  });
  music.addEventListener("ended", () => {
    paripapapGif.style.display = "none";
    igilingGif.style.display = "none";
  });
});

// Load names from CSV and populate boxes
fileInput.addEventListener("change", (event) => {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      names = e.target.result.split("\n").filter((name) => name.trim() !== "");
      populateBoxes();
      raffleButton.disabled = names.length === 0;
    };
    reader.readAsText(file);
  }
});

// Populate the UI with boxes
function populateBoxes() {
  boxContainer.innerHTML = "";
  names.forEach((name, index) => {
    const box = document.createElement("div");
    box.classList.add("box");
    box.textContent = name.trim();
    box.dataset.index = index;
    boxContainer.appendChild(box);
  });
}

// Handle raffle button click
raffleButton.addEventListener("click", () => {
  if (names.length === 0 || spinning) return;

  spinning = true;
  raffleButton.disabled = true; // Disable the button

  // Stop any previously playing background music
  backgroundMusicOptions.forEach((music) => {
    music.pause();
    music.currentTime = 0;
  });

  // Play a random background music
  const randomBackgroundMusic =
    backgroundMusicOptions[
      Math.floor(Math.random() * backgroundMusicOptions.length)
    ];
  randomBackgroundMusic.play();

  const boxes = Array.from(document.querySelectorAll(".box"));
  let randomInterval;
  let highlightedIndex;

  // Randomly highlight boxes
  function randomHighlight() {
    if (highlightedIndex !== undefined) {
      boxes[highlightedIndex].classList.remove("highlighted");
    }
    highlightedIndex = Math.floor(Math.random() * boxes.length);
    boxes[highlightedIndex].classList.add("highlighted");
  }

  randomInterval = setInterval(randomHighlight, 200);

  // Reveal the winner after a delay
  setTimeout(() => {
    clearInterval(randomInterval);
    randomHighlight();

    const winnerBox = boxes[highlightedIndex];
    currentWinnerIndex = highlightedIndex;
    winnerBox.classList.add("winner");

    const winnerName = names[highlightedIndex];
    winnerNameDisplay.textContent = winnerName.trim();

    // Stop background music and play random congrats music
    randomBackgroundMusic.pause();
    randomBackgroundMusic.currentTime = 0;

    // Play a random congratulatory music
    const randomCongratsMusic =
      congratsMusicOptions[
        Math.floor(Math.random() * congratsMusicOptions.length)
      ];
    randomCongratsMusic.play();

    // Show winner modal
    winnerModal.show();

    spinning = false;
    raffleButton.disabled = false; // Re-enable the button after process
  }, 8500);
});

// Remove winner and allow a new draw
removeWinnerButton.addEventListener("click", () => {
  if (currentWinnerIndex !== null) {
    names.splice(currentWinnerIndex, 1);
    populateBoxes();
    currentWinnerIndex = null;
    raffleButton.disabled = names.length === 0;
    winnerModal.hide();
  }
});

// Add snowflakes dynamically
const snowContainer = document.getElementById("snow-container");
for (let i = 0; i < 100; i++) {
  const snowflake = document.createElement("div");
  snowflake.className = "snowflake";
  snowflake.style.left = Math.random() * 100 + "vw";
  snowflake.style.animationDelay = Math.random() * 10 + "s";
  snowflake.style.animationDuration = 5 + Math.random() * 10 + "s";
  snowflake.style.width = snowflake.style.height = 5 + Math.random() * 5 + "px";
  snowContainer.appendChild(snowflake);
}