ruleta-con-pin/script.js

var ruleta = document.getElementById("ruleta");
var puntero = document.getElementById("puntero");
let gira = 0;
let giraDos = 0;

const rangos = [
  { articulo: "Freidora de aire", inicio: 330, final: 16 },
  { articulo: "Articulo plastico", inicio: 15, final: 16 },
  { articulo: "Sandwichera", inicio: 150, final: 196 },
  { articulo: "Kits Protex", inicio: 170, final: 16 },
  { articulo: "Cubeta", inicio: 20, final: 52 },
  { articulo: "Lonchera", inicio: 42, final: 88 },
  { articulo: "Recipiente plastico", inicio: 130, final: 160 },
  { articulo: "Kits Cuidado Oral", inicio: 220, final: 232 },
  { articulo: "Plancha", inicio: 150, final: 232 },
  { articulo: "Caldero", inicio: 30, final: 194 },
  { articulo: "Abanico de piso", inicio: 296, final: 328 },
];

let articuloGanador = "";

// Variables para el modal y formulario
const modal = document.getElementById("popup-modal");
const form = document.getElementById("user-form");
const userNameInput = document.getElementById("user-name");

let nombreUsuario = "";

// Mostrar el modal al cargar la página
window.onload = function () {
  modal.style.display = "flex";
};

// Lista de PINs válidos
const validPins = ["1989", "4708", "6823", "7591", "3664", "3520", "4528", "9033", "3688", "6159", "2258"];

// Manejar el envío del formulario
form.addEventListener("submit", function (e) {
  e.preventDefault();
  nombreUsuario = userNameInput.value.trim(); // Eliminar espacios en blanco

  if (!nombreUsuario) {
    alert("Por favor, completa todos los campos.");
    return;
  }

  // Validar si el PIN es válido
  if (!validPins.includes(nombreUsuario)) {
    alert("PIN inválido. Por favor, inténtelo de nuevo.");
    return;
  }

  // Si el PIN es válido, ocultar el modal y continuar
  modal.style.display = "none";
  document.querySelector(".content").style.display = "block"; // Mostrar el contenido principal
});

// Calcular el ángulo intermedio de un rango
function calcularAngulo(rango) {
  if (rango.inicio > rango.final) {
    return (rango.inicio + (360 - rango.inicio + rango.final) / 2) % 360;
  }
  return rango.inicio + (rango.final - rango.inicio) / 2;
}

// Girar la ruleta a un artículo específico
function girarRuletaAArticulo(nombreArticulo) {
  let rangoSeleccionado = rangos.find(
    (rango) => rango.articulo === nombreArticulo
  );

  if (rangoSeleccionado) {
    let anguloFinal = calcularAngulo(rangoSeleccionado);
    gira = 1440 + anguloFinal; // 1440 asegura varias vueltas antes de detenerse en el artículo ganador
    ruleta.style.transition = "all 5s ease-out";
    ruleta.style.transform = `rotate(${gira}deg)`;
  } else {
    console.log("Artículo no encontrado.");
  }
}

// Fin de la rodada
ruleta.addEventListener("transitionend", function () {
  puntero.style.pointerEvents = "auto"; // Reactivar clics
  ruleta.style.transition = "none";
  giraDos = gira % 360;
  ruleta.style.transform = `rotate(${giraDos}deg)`;

  mostrarConfetiConTexto(articuloGanador);
});

// Obtener dirección IP
async function obtenerIP() {
  const response = await fetch("https://api.ipify.org?format=json");
  const data = await response.json();
  return data.ip;
}

// Obtener artículo ganador
async function obtenerArticuloGanador() {
  const userAgent = navigator.userAgent;
  const ipAddress = await obtenerIP();

  fetch("seleccionar_premio.php", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      user_agent: userAgent,
      ip_address: ipAddress,
      nombre_usuario: nombreUsuario,
    }),
  })
    .then((response) => response.json())
    .then((data) => {
      articuloGanador = data.nombre;
      girarRuletaAArticulo(articuloGanador);
    })
    .catch((error) =>
      console.error("Error al obtener el artículo ganador:", error)
    );
}

// Bloquear interacción con la ruleta mientras gira
puntero.addEventListener("mousedown", function () {
  if (!nombreUsuario) {
    alert("Por favor, completa el formulario antes de continuar.");
    return;
  }

  puntero.style.pointerEvents = "none"; // Bloquear clics
  obtenerArticuloGanador();
});

// Mostrar confeti con texto
function mostrarConfetiConTexto(texto) {
  const duration = 5 * 1000;
  const end = Date.now() + duration;

  (function frame() {
    confetti({
      particleCount: 7,
      angle: 60,
      spread: 55,
      origin: { x: 0 },
      scalar: 1.2,
    });
    confetti({
      particleCount: 7,
      angle: 120,
      spread: 55,
      origin: { x: 1 },
      scalar: 1.2,
    });

    if (Date.now() < end) {
      requestAnimationFrame(frame);
    }
  })();

  console.log("¡Felicidades! Ganaste: " + texto);
}

const fullscreenBtn = document.getElementById("fullscreen-btn");

fullscreenBtn.addEventListener("click", () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen().catch((err) => {
      console.error(
        `Error al intentar entrar en pantalla completa: ${err.message}`
      );
    });
  } else {
    document.exitFullscreen().catch((err) => {
      console.error(
        `Error al intentar salir de pantalla completa: ${err.message}`
      );
    });
  }
});

// Mostrar el popup de agradecimiento
function mostrarMensajeAgradecimiento() {
  const modal = document.getElementById("thank-you-modal");
  const mensaje = document.getElementById("thank-you-message");
  const detalles = document.getElementById("thank-you-details");
  const botonRedirigir = document.getElementById("redirect-button");

  // Personalizar contenido del mensaje
  mensaje.textContent = `🎊🎉¡Felicidades!🎉🎊`;
  detalles.textContent = `🎁 Has ganado "${articuloGanador}" 🎁`;

  modal.style.display = "flex"; // Mostrar el modal
  
  botonRedirigir.addEventListener("click", () => {
    // Abre el enlace en una nueva pestaña
    window.open("https://form.jotform.com/250134957677669", "_blank");

    // Actualiza la pestaña actual
    window.location.href = window.location.href; // Redirige a la misma URL actual
  });
}


// Fin de la rodada
ruleta.addEventListener("transitionend", function () {
  puntero.style.pointerEvents = "auto"; // Reactivar clics
  ruleta.style.transition = "none";
  giraDos = gira % 360;
  ruleta.style.transform = `rotate(${giraDos}deg)`;

  mostrarConfetiConTexto(articuloGanador); // Mostrar confeti
  mostrarMensajeAgradecimiento(); // Mostrar mensaje de agradecimiento
});