/* posteriormente la información a cargar estará en una DB, la idea es más adelante hacer una página de backoffice desde donde el admin gestionará los cambios (adición, eliminación o modificación de productos, eventos...) */ let cestaCompra = []; const infoProductos = [ { numeroproducto: 0, titulo: "Primaris Invictor Tactical Warsuit", img1: "../RECURSOS/Productos/Invictor300px.jpg", img2: "../RECURSOS/Productos/InvictorLado300px.jpg", img3: "../RECURSOS/Productos/InvictorOtroLado300px.jpg", alt:"Invictor", textodescrip: "Armadura de combate de los Ángeles Oscuros completamente pintada con un alto grado de detalle y personalización.", disponibles: 1, precio: 150.00 }, { numeroproducto: 1, titulo: "Termagantes Tiránidos", img1: "../RECURSOS/Productos/TermagantesFront300px.jpg", img2: "../RECURSOS/Productos/TermagantesLado300px.jpg", img3: "../RECURSOS/Productos/TermagantesBack300px.jpg", alt: "Termagantes", textodescrip: "Unidad Básica de 10 Termagantes listos para la batalla. Especialistas en cuerpo a cuerpo, pese a no ser de élite aprovechan su gran número.", disponibles: 1, precio: 139.00 }, { numeroproducto: 2, titulo: "Primaris Inceptor Squad", img1: "../RECURSOS/Productos/Inceptor300px.jpg", img2: "../RECURSOS/Productos/InceptorLado300px.jpg", img3: "../RECURSOS/Productos/PortadaInceptores300px.png", alt: "Inceptores", textodescrip: "Unidad de 3 Primaris Inceptors Ángeles Oscuros en armadura gravis equipados con armas de plasma.", disponibles: 1, precio: 149.00 }, { numeroproducto: 3, titulo: "Teniente Primaris Ángel Oscuro", img1: "../RECURSOS/Productos/Teniente300px.jpg", img2: "../RECURSOS/Productos/TenienteLadoDos300px.jpg", img3: "../RECURSOS/Productos/TenienteLadouUno300px.jpg", alt: "Teniente", textodescrip: "Teniente Primaris de los Ángeles Oscuros equipado con arma de energía y pistola de plasma.", disponibles: 1, precio: 85.00 }, { numeroproducto: 4, titulo: "Guerreros Tiránidos", img1: "../RECURSOS/Productos/TyranidWarriorUnoFront300px.jpg", img2: "../RECURSOS/Productos/TyranidWarriorUno300px.jpg", img3: "../RECURSOS/Productos/TyranidWarriorUnoBack300px.jpg", alt: "Guerrero Tiranido", textodescrip: "Versátil unidad de 2 guerreros y 1 primus. Bio-armas de disparo a distancicia y garras y látigo para el cuerpo a cuerpo.", disponibles: 1, precio: 129.00 } ] const listaEventos = [ { numeroEvento: 1, titulo: "PARTIDA ZOMBICIDE 2ND EDITION", texto: " Clásica partida de zombis, mínimo 4 jugadores para disfrutar de una experiencia aterradora.", fecha: new Date(2024, 1, 25), img: "../RECURSOS/Eventos/logozombicide150px.jpg" }, { numeroEvento: 2, titulo: "TORNEO PATRULLAS WARHAMMER 40K", texto: "Torneito de toma de contacto para los recién iniciados al hobbie. Desde la Forja ponemos a vuestra disposición mesas, escenografía, ejército(en caso de que sea tu primera vez) y personal de apoyo.", fecha: new Date(2024, 1, 11), img: "../RECURSOS/Eventos/AquilaImperial150px.png" }, { numeroEvento: 3, titulo: "TORNEO 1000PTS WARHAMMER 40K", texto: "Torneo para foguearse, la mitad de puntos que una partida competitiva. Desde la Forja ponemos a vuestra disposición mesas, escenografía y árbitro.", fecha: new Date(2024, 1, 17), img: "../RECURSOS/Eventos/AquilaImperial150px.png" } ] /*---------------------------- CONFIGURACION COOKIES------------------- */ function galletas() { const aceptarGalletas = document.getElementById("botonGalleta"); const avisoGalleta = document.getElementById("avisoGalleta"); const fondoAvisoGalleta = document.getElementById("fondoAvisoGalletas"); const galletasNecesarias = document.getElementById("galletasNecesarias"); const galletasAnalisis = document.getElementById("galletasAnaliticas"); const galletasPublicidad = document.getElementById("galletasPubli"); /** if(!localStorage.getItem('galletas-aceptadas')){ avisoGalleta.classList.add('active'); fondoAvisoGalleta.classList.add('active') } */ if(!getCookieExistance("cookieNecesaria")){ avisoGalleta.classList.add('active'); fondoAvisoGalleta.classList.add('active') } aceptarGalletas.addEventListener('click', () => { if (galletasAnalisis.checked){ document.cookie = "cookieAnalisis=true; max-age=2628000; path=/;"; } if (galletasPublicidad.checked){ document.cookie = "cookiepubli=true; max-age=2628000; path=/;"; } if (galletasNecesarias.checked){ document.cookie = "cookieNecesaria=true; max-age=2628000; path=/;"; avisoGalleta.classList.remove('active'); fondoAvisoGalleta.classList.remove('active'); location.reload(); } }) function getCookieExistance(nombre) { var cookies = document.cookie.split(";"); for (var i = 0; i < cookies.length; i++) { var cookie = cookies[i].trim(); if (cookie.startsWith(nombre + "=")) { return true; } } return false; // Si no se encuentra la cookie, retorna false } } const cargado = () => { // ---------------------- CONFIGURACIÓN BOTON SUBIR ARRIBA ----------------------------- const $btnUp = document.getElementById("botonArriba"); document.addEventListener("click", (e) =>{ if(e.target === $btnUp || e.target.matches(".fa-arrow-up")){ window.scrollTo({ behaviour: "smooth", top: 0 }) } }); //--------------------- CONFIGURACIÓN CARRITO COMPRA ------------------------------------- renderizarCesta(); //--------------------- CONFIGURACIÓN CONTENEDOR SERVICIOS ------------------------------------- const karroGrande = document.querySelector('.karro-grande'); const puntoKarro = document.querySelectorAll('.punto-karro'); puntoKarro.forEach((punto , i)=> { puntoKarro[i].addEventListener('click', ()=>{ let posicionPunto = i; let widthImg = 100 / puntoKarro.length let operacionPunto = posicionPunto * -widthImg console.log(operacionPunto) karroGrande.style.transform = `translateX(${operacionPunto}%)` puntoKarro.forEach((punto, i) => { puntoKarro[i].classList.remove('activo') }) puntoKarro[i].classList.add('activo') }) }) } //--------------------- CONFIGURACIÓN CONTENEDOR PRODUCTOS -------------------------------- function guardarEnCarrito() { let prodAñadido = this.event.target.getAttribute("marcador"); let controlCesta = cestaCompra.includes(prodAñadido); leerCesta(); if ( cestaCompra.length == 0 || !controlCesta) { cestaCompra.push(prodAñadido); try { localStorage.setItem('numProd', JSON.stringify(cestaCompra)); renderizarCesta(); } catch (e) { return "Error al guardar el item en el localStorage: " + e.message; } } } function borrarArticulo() { let prodABorrar = this.event.target.getAttribute("marcador"); let indice = cestaCompra.indexOf(prodABorrar); cestaCompra.splice(indice, 1); try { localStorage.setItem('numProd', JSON.stringify(cestaCompra)); renderizarCesta(); } catch (e) { return "Error al guardar el item en el localStorage: " + e.message; } } function renderizarCesta(){ leerCesta() let elCarrito = document.getElementById("carrito"); let elPrecioTotal = document.getElementById("total"); elCarrito.textContent = ""; elPrecio = 0; for (i = 0; i < cestaCompra.length; i++) { let numeroControl = cestaCompra[i]; let articuloCarrito = document.createElement("li"); elCarrito.appendChild(articuloCarrito); articuloCarrito.setAttribute("class", "articulo-carrito"); let contenedorArticuloCarrito = document.createElement("figure"); articuloCarrito.appendChild(contenedorArticuloCarrito); contenedorArticuloCarrito.setAttribute("class", "img-carrito"); let imagenArticuloCarrito = document.createElement("img"); contenedorArticuloCarrito.appendChild(imagenArticuloCarrito); imagenArticuloCarrito.setAttribute("src", infoProductos[numeroControl].img1); imagenArticuloCarrito.setAttribute("alt", "imagen"); let textoArticulocarrito = document.createElement("p"); articuloCarrito.appendChild(textoArticulocarrito); textoArticulocarrito.innerText = infoProductos[numeroControl].titulo; let infoArticulo = document.createElement("div"); articuloCarrito.appendChild(infoArticulo); infoArticulo.setAttribute("class", "infoArticulo") let precioArticuloCarrito = document.createElement("p"); infoArticulo.appendChild(precioArticuloCarrito); precioArticuloCarrito.innerText = infoProductos[numeroControl].precio + " €"; elPrecio = elPrecio + infoProductos[numeroControl].precio let botonBorrarArticulo = document.createElement("button"); infoArticulo.appendChild(botonBorrarArticulo); botonBorrarArticulo.innerText = "Eliminar"; botonBorrarArticulo.setAttribute("type", "button"); botonBorrarArticulo.setAttribute("onclick", "borrarArticulo()"); botonBorrarArticulo.setAttribute("marcador", infoProductos[numeroControl].numeroproducto); } elPrecioTotal.textContent = elPrecio } function eliminarCesta() { localStorage.removeItem("numProd"); let elCarrito = document.getElementById("carrito"); elCarrito.textContent = ""; cestaCompra = []; let elPrecioTotal = document.getElementById("total"); elPrecioTotal.textContent = 0; } function leerCesta() { var lecturaCesta = JSON.parse(localStorage.getItem('numProd')); if (lecturaCesta === null) { cestaCompra = []; } else { cestaCompra = lecturaCesta; } } function tramitarPedido(){ window.location.href = "./Contactos.html"; } const genListaProd = () => { let contenedorProd = document.getElementById("contenedorProductos2"); for (let i = 0; i < infoProductos.length; i++){ let itemListaProd = document.createElement("li"); contenedorProd.appendChild(itemListaProd); itemListaProd.setAttribute("class", "item-lista-productos"); let tituloProd = document.createElement("h3"); itemListaProd.appendChild(tituloProd); var textotitulo = document.createTextNode(infoProductos[i].titulo) tituloProd.appendChild(textotitulo); let contenedorCarrousel = document.createElement("div"); itemListaProd.appendChild(contenedorCarrousel); contenedorCarrousel.setAttribute("class", "container-carousel") let carruselesProd = document.createElement("div"); contenedorCarrousel.appendChild(carruselesProd); carruselesProd.setAttribute("class", "carruseles-prod"); let fotoUnoProd = document.createElement("figure"); carruselesProd.appendChild(fotoUnoProd); fotoUnoProd.setAttribute("class", "slider-section-prod") let imgUno = document.createElement("img"); fotoUnoProd.appendChild(imgUno); imgUno.setAttribute("src", infoProductos[i].img1) imgUno.setAttribute("alt", infoProductos[i].alt) let fotoDosProd = document.createElement("figure"); carruselesProd.appendChild(fotoDosProd); fotoDosProd.setAttribute("class", "slider-section-prod") let imgDos = document.createElement("img"); fotoDosProd.appendChild(imgDos); imgDos.setAttribute("src", infoProductos[i].img2) imgDos.setAttribute("alt", infoProductos[i].alt) let fotoTresProd = document.createElement("figure"); carruselesProd.appendChild(fotoTresProd); fotoTresProd.setAttribute("class", "slider-section-prod") let imgTres = document.createElement("img"); fotoTresProd.appendChild(imgTres); imgTres.setAttribute("src", infoProductos[i].img3) imgTres.setAttribute("alt", infoProductos[i].alt) let btnIzq = document.createElement("button"); contenedorCarrousel.appendChild(btnIzq); btnIzq.setAttribute("type", "button"); btnIzq.setAttribute("class", "btn-left"); btnIzq.setAttribute("onclick", "moveToLeft()"); btnIzq.innerText = " < " let btnDcha = document.createElement("button"); contenedorCarrousel.appendChild(btnDcha); btnDcha.setAttribute("type", "button"); btnDcha.setAttribute("class", "btn-right"); btnDcha.setAttribute("onclick", "moveToRight()"); btnDcha.innerText = " > " let listaInfoProd = document.createElement("ul"); itemListaProd.appendChild(listaInfoProd); listaInfoProd.setAttribute("class", "info-producto") let descProd = document.createElement("li"); listaInfoProd.appendChild(descProd); descProd.setAttribute("class", "descripcion-producto"); let textoProd = document.createElement("p"); descProd.appendChild(textoProd); textoProd.setAttribute("class", "texto-descrip-prod") textoProd.innerText = infoProductos[i].textodescrip let dispoProd = document.createElement("p"); descProd.appendChild(dispoProd); dispoProd.setAttribute("class", "productos-disponibles") dispoProd.innerText = "Disponibles: " + infoProductos[i].disponibles let precioProd = document.createElement("li"); listaInfoProd.appendChild(precioProd); precioProd.setAttribute("class", "precio-producto"); precioProd.innerText = infoProductos[i].precio.toFixed(2) + "€"; let liBotonAñadir = document.createElement("li"); listaInfoProd.appendChild(liBotonAñadir); liBotonAñadir.setAttribute("class", "contenedor-boton-añadir"); let botonAñadir = document.createElement("button"); liBotonAñadir.appendChild(botonAñadir); botonAñadir.setAttribute("type", "button"); botonAñadir.setAttribute("class", "añadirProd"); botonAñadir.setAttribute("marcador", infoProductos[i].numeroproducto); botonAñadir.setAttribute("onclick", "guardarEnCarrito()"); botonAñadir.innerText = "Añadir a Cesta"; } } /** más adelante se creará un botón para añadir a un carrito y un contenedor para los articulos del carrito con sus correspondientes botones para quitar el producto, un espacio donde figure la suma de las cantidades, etc. */ //--------------------- CONFIGURACIÓN SLIDERS ------------------------------/// let operacion = 0, counter = 0; function moveToRight() { let elementoAMover = this.event.target.parentNode.firstElementChild; let numeroContenedores = elementoAMover.children.length let widthImg = 100 / numeroContenedores; if (counter >= elementoAMover.children.length-1) { operacion = 0; counter = 0; elementoAMover.style.transform = `translate(-${operacion}%)`; return; } counter++; operacion = operacion + widthImg; elementoAMover.style.transform = `translate(-${operacion}%)`; } function moveToLeft() { let elementoAMover = this.event.target.parentNode.firstElementChild; let widthImg = 100 / elementoAMover.children.length; counter --; if (counter < 0 ) { counter = elementoAMover.children.length-1; operacion = widthImg * (elementoAMover.children.length-1); elementoAMover.style.transform = `translate(-${operacion}%)` elementoAMover.style.transition = 'none'; return; } operacion = operacion - widthImg; elementoAMover.style.transform = `translate(-${operacion}%)` } //-------------------------- EVENTOS -------------------------------- const genListaEven = () => { let contenedorEventos = document.getElementById("listadeEventos") for(let i =0; i< listaEventos.length; i++) contenedorEventos.innerHTML += `
  • token_evento

    ${listaEventos[i].titulo}

    ${listaEventos[i].texto}

    ${listaEventos[i].fecha.toLocaleDateString()}

  • ` } //-------------------------- CONFIGURACIÓN CALENDARIO -------------------------------- const cargaCalendario = () => { const nombresMeses = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'] let fechaActual = new Date(); let diaActual = fechaActual.getDate(); let numeroMes = fechaActual.getMonth(); let yearActual = fechaActual.getFullYear(); let diaEventoUno = listaEventos[0].fecha //esta fecha se traerá posteriormente desde la DB let diaEventoDos = listaEventos[1].fecha //esta fecha se traerá posteriormente desde la DB let diaEventoZero = listaEventos[2].fecha //esta fecha se traerá posteriormente desde la DB let fechas = document.getElementById("dates-calendar"); let mes = document.getElementById("mes-actual"); let year = document.getElementById("year"); let mesAnteriorDOM = document.getElementById("mes-anterior") let mesSiguienteDOM = document.getElementById("mes-siguiente"); mes.textContent = nombresMeses[numeroMes]; year.textContent = yearActual.toString(); mesAnteriorDOM.addEventListener("click", () => mesAnterior()); mesSiguienteDOM.addEventListener("click", () => mesSiguiente()) const generacionMeses = (mes) => { for(let i = diaComienzoSemana(); i>0; i--){ fechas.innerHTML += `
    ${numeroDiasMes(numeroMes-1)-(i-1)}
    `; } for (let i = 1; i <= numeroDiasMes(mes); i++){ let fechaActualVieja = new Date(); let mesActual = fechaActualVieja.getMonth(); let yearActualViejo = fechaActualVieja.getFullYear(); let numeroDiaEventoZero = diaEventoZero.getDate(); let mesDiaEventoZero = diaEventoZero.getMonth(); let yearEventoZero = diaEventoZero.getFullYear(); let numeroDiaEventoUno = diaEventoUno.getDate(); let mesDiaEventoUno = diaEventoUno.getMonth(); let yearEventoUno = diaEventoUno.getFullYear(); let numeroDiaEventoDos = diaEventoDos.getDate(); let mesDiaEventoDos = diaEventoDos.getMonth(); let yearEventoDos = diaEventoDos.getFullYear(); if((i === diaActual) && (mes === mesActual) && (yearActualViejo === yearActual)){ fechas.innerHTML += `
    ${i}
    `; } else if((i === numeroDiaEventoZero) && (yearActual === yearEventoZero) && (mesDiaEventoZero === mes) && (i !== diaActual)){ fechas.innerHTML += ``; } else if((i === numeroDiaEventoUno) && (yearActual === yearEventoUno) && (mesDiaEventoUno === mes) && (i !== diaActual)){ fechas.innerHTML += ``; } else if((i === numeroDiaEventoDos) && (yearActual === yearEventoDos) && (mesDiaEventoDos === mes) && (i !== diaActual)){ fechas.innerHTML += ``; } else { fechas.innerHTML += `
    ${i}
    `; } }} const numeroDiasMes = (mes) => { if(mes === -1) mes = 11; if (mes === 0 || 2 || 4 || 6 || 7 || 9 || 11) { return 31; } else if (mes === 3 || 5 || 8 || 10) { return 30; } else { return esBisiesto() ? 29:28; } } const esBisiesto = () => { return ((yearActual % 100 !== 0) && (yearActual % 4 === 0) || (yearActual % 400 === 0)); } const diaComienzoSemana = () => { let comienzo = new Date(yearActual, numeroMes, 1); return ((comienzo.getDay()-1) === -1) ? 6 : comienzo.getDay()-1; } const mesAnterior = () => { if(numeroMes !== 0){ numeroMes--; }else { numeroMes = 11; yearActual--; } nuevaFecha(); } const mesSiguiente = () => { if(numeroMes !== 11){ numeroMes++; }else { numeroMes = 0; yearActual++; } nuevaFecha(); } const nuevaFecha = () => { fechaActual.setFullYear(yearActual, numeroMes, diaActual); mes.textContent = nombresMeses[numeroMes]; year.textContent = yearActual.toString(); fechas.textContent = ''; generacionMeses(numeroMes) } generacionMeses(numeroMes); } /*-------------------CONTROL FORMULARIO--------------------*/ const validarFormulario = () => { let formulario = document.getElementById('formularioContacto'); let botonFormulario = document.getElementById('enviarForm'); const emailError = document.getElementById('mailErrorArea'); let campoEmail = document.getElementById('mailForm'); campoEmail.addEventListener("input", function (event) { if (campoEmail.validity.valid) { emailError.innerHTML = ""; emailError.className = "error"; } else { showError(); } }); form.addEventListener("submit", function (event) { if (!campoEmail.validity.valid) { showError(); event.preventDefault(); } }); function showError() { if (campoEmail.validity.valueMissing) { emailError.textContent = "Debe introducir una dirección de correo electrónico."; } else if (campoEmail.validity.typeMismatch) { emailError.textContent = "El valor introducido debe ser una dirección de correo electrónico."; } emailError.className = "error active"; } formulario.submit() }