feat: Initial commit - Ruleta con PIN (credenciales sanitizadas)
This commit is contained in:
Isaac_Aracena
@@ -0,0 +1,216 @@
|
||||
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
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user