tatvilweb/recursos-catolicos/js/rosario.js

66 lines
2.9 KiB
JavaScript
Executable File

let indiceMisterio = 0;
let misteriosHoy = null;
const MISTERIOS_DATA = {
0: { nombre: "Gloriosos", titulos: ["La Resurrección", "La Ascensión", "La Venida del Espíritu Santo", "La Asunción", "La Coronación de María"] },
1: { nombre: "Gozosos", titulos: ["La Anunciación", "La Visitación", "El Nacimiento", "La Presentación", "El Niño perdido en el Templo"] },
2: { nombre: "Dolorosos", titulos: ["La Agonía", "La Flagelación", "La Coronación de Espinas", "Jesús con la Cruz", "La Crucifixión"] },
3: { nombre: "Gloriosos", titulos: ["La Resurrección", "La Ascensión", "La Venida del Espíritu Santo", "La Asunción", "La Coronación de María"] },
4: { nombre: "Luminosos", titulos: ["El Bautismo", "Las Bodas de Caná", "El Anuncio del Reino", "La Transfiguración", "La Institución de la Eucaristía"] },
5: { nombre: "Dolorosos", titulos: ["La Agonía", "La Flagelación", "La Coronación de Espinas", "Jesús con la Cruz", "La Crucifixión"] },
6: { nombre: "Gozosos", titulos: ["La Anunciación", "La Visitación", "El Nacimiento", "La Presentación", "El Niño perdido en el Templo"] }
};
function inicializarRosario() {
const hoy = new Date();
misteriosHoy = MISTERIOS_DATA[hoy.getDay()];
const nombreMistElem = document.getElementById('nombre_misterio');
if (nombreMistElem) nombreMistElem.textContent = `Misterios ${misteriosHoy.nombre}`;
actualizarVistaMisterio();
// Eventos de los botones con comprobación de existencia (buena práctica)
const btnSiguiente = document.getElementById('siguiente');
const btnAnterior = document.getElementById('anterior');
if (btnSiguiente) {
btnSiguiente.addEventListener('click', () => {
indiceMisterio = (indiceMisterio + 1) % 5;
actualizarVistaMisterio();
});
}
if (btnAnterior) {
btnAnterior.addEventListener('click', () => {
indiceMisterio = (indiceMisterio - 1 + 5) % 5;
actualizarVistaMisterio();
});
}
}
function actualizarVistaMisterio() {
const titulo = document.getElementById('titulo_misterio');
const imagen = document.getElementById('imagen-misterio');
const paso = document.getElementById('paso-actual');
if (titulo) {
titulo.textContent = `${indiceMisterio + 1}º Misterio: ${misteriosHoy.titulos[indiceMisterio]}`;
}
if (paso) paso.textContent = indiceMisterio + 1;
if (imagen) {
const carpeta = misteriosHoy.nombre.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
// Asegúrate de que las fotos sean jpg y sigan este patrón: gozosos1.jpg, gozosos2.jpg...
imagen.src = `img/${carpeta}${indiceMisterio + 1}.jpg`;
// Animación suave
imagen.style.opacity = 0;
setTimeout(() => { imagen.style.opacity = 1; }, 50);
}
}
window.addEventListener('load', inicializarRosario);