Mudanças entre as edições de "Widget:Persona.js"

De Wiki Gla
Ir para navegação Ir para pesquisar
(Criou página com '(function () { const habilidades = {{{habilidades}}}; // Asegúrate de pasar un array de objetos a la plantilla const skins = {{{skins}}}; // De igual ma...')
 
(Limpou toda a página)
Etiqueta: anulando
 
Linha 1: Linha 1:
(function () {
    const habilidades = {{{habilidades}}};  // Asegúrate de pasar un array de objetos a la plantilla
    const skins = {{{skins}}};              // De igual manera, un array de skins


    const contenedorSkins = document.querySelector("#skins");
    const cuadrosContainer = document.querySelector('.cuadros-container');
    const descripcionContainer = document.querySelector('.descripcion-container');
    const atributosContainer = document.querySelector('.atributos-container');
    const videoContainer = document.querySelector('.video-container');
    contenedorSkins.innerHTML = generarHTMLSkins(skins);
    const cuadros = [];
    habilidades.forEach((hab, index) => {
        const div = document.createElement('div');
        div.classList.add('cuadro');
        div.innerHTML = `<img src="${hab.icon}" alt="${hab.nombre}" style="width: 100%; height: 100%; object-fit: cover;">`;
        div.title = hab.nombre;
        div.addEventListener('click', () => {
            descripcionContainer.innerHTML = `
                <h3 style="margin-bottom: 4px; color: white;">${hab.nombre}</h3>
                <p style="margin: 0 0 6px;">Level: ${hab.level}</p>
                <p>${hab.descripcion}</p>
            `;
            atributosContainer.innerHTML = generarHTMLAtributos(hab.atributos);
            videoContainer.innerHTML = `
                <video id="video-habilidad" width="100%" height="250" controls loop playsinline>
                    <source src="${hab.video}" type="video/webm">
                    Tu navegador no soporta este video.
                </video>
            `;
            cuadros.forEach(c => c.classList.remove('activo'));
            div.classList.add('activo');
        });
        cuadros.push(div);
        cuadrosContainer.appendChild(div);
    });
    function generarHTMLAtributos(valoresStr) {
        const valores = valoresStr.split(',').map(v => v.trim());
        const labels = ["Recarga", "Energía", "Poder PVE", "Poder PVP"];
        const icons = [
            "/images/b/b1/Icon-cooldown.png",
            "/images/3/38/Icon-energy.png",
            "/images/7/7a/Icon-pve.png",
            "/images/5/5f/Icon-pvp.png"
        ];
        return `
            <h4 class="attribute-title">Atributos</h4>
            <div class="attribute--cardsContainer">
                ${valores.map((valor, i) => {
                    let formatted = valor === "-" ? "-" : parseInt(valor);
                    return `
                        <span class="simple-tooltip simple-tooltip-inline tooltipstered" data-simple-tooltip="<p><b>${labels[i]}</b></p>">
                            <div class="cardAttribute">
                                <img src="${icons[i]}" class="cardAttribute--icon">
                                <h2 class="cardAttribute--value">${formatted}${i === 0 && formatted !== '-' ? ' seg' : ''}</h2>
                            </div>
                        </span>
                    `;
                }).join('')}
            </div>
        `;
    }
    function generarHTMLSkins(listaSkins) {
        return `
            <div class="card-skins">
                <span class="card-skins-title">Skins</span>
                <div class="skins--container">
                    ${listaSkins.map(skin => `
                        <span class="simple-tooltip simple-tooltip-inline tooltipstered" data-simple-tooltip="<center><b>${skin.tooltip}</b></center>">
                            <img class="skins--imageSkin" src="${skin.imagen}" alt="">
                        </span>
                    `).join('')}
                </div>
            </div>
        `;
    }
    if (cuadros.length > 0) {
        cuadros[0].click();
    }
})();

Edição atual tal como às 00h39min de 4 de maio de 2025

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Persona.js&oldid=31901”