Mudanças entre as edições de "Usuário Discussão:Ttuzu"

De Wiki Gla
Ir para navegação Ir para pesquisar
(Limpou toda a página)
Etiqueta: anulando
 
Linha 1: Linha 1:
(function () {
    const personaData = document.getElementById('persona-data');
    if (!personaData) {
        console.error('Persona widget: não se encontrou #persona-data!');
        return;
    }


    // Extração de dados
    const nome = personaData.dataset.nome || '';
    const tier = personaData.dataset.tier || '';
    const classe = personaData.dataset.classe || '';
    const image = personaData.dataset.image || '';
    let habilidades = [];
    let skins = [];
    // Função auxiliar para parsear strings raw em objetos
    const parseRawString = (rawString) => {
        const data = [];
        if (!rawString) return data;
        const lines = rawString.split('||').map(line => line.trim()).filter(Boolean);
        lines.forEach(line => {
            const parts = line.split('\n').map(p => p.trim()).filter(Boolean);
            const item = {};
            parts.forEach(part => {
                if (part.startsWith('')) {
                    // Ignorar comentários
                    return;
                }
                const eqIndex = part.indexOf('=');
                if (eqIndex > -1) {
                    const key = part.substring(0, eqIndex).trim();
                    const value = part.substring(eqIndex + 1).trim();
                    item[key] = value;
                }
            });
            if (Object.keys(item).length > 0) {
                data.push(item);
            }
        });
        return data;
    };
    habilidades = parseRawString(personaData.dataset.habilidadesraw);
    skins = parseRawString(personaData.dataset.skinsraw);
    // Referências aos elementos HTML
    const tabBtns = document.querySelectorAll('.persona-tabs .tab-btn');
    const cuadrosContainer = document.querySelector('.cuadros-container');
    const abilityNameText = document.querySelector('.descripcion-container .ability-name-text');
    const abilityLevelText = document.querySelector('.descripcion-container .ability-level-text');
    const abilityDesc = document.querySelector('.descripcion-container .ability-desc');
    const abilityVideo = document.querySelector('.descripcion-container .ability-video');
    const abilityVideoSource = abilityVideo.querySelector('source');
    const abilityAttributesContainer = document.querySelector('.descripcion-container .ability-attributes');
    const artPersonagem = document.querySelector('.art-personagem');
    const personaName = document.querySelector('.persona-name');
    const personaTier = document.querySelector('.persona-tier');
    const personaClass = document.querySelector('.persona-class');
    // Preencher informações do header do personagem
    if (artPersonagem) artPersonagem.src = image;
    if (personaName) personaName.textContent = nome;
    if (personaTier) personaTier.textContent = `Tier: ${tier}`;
    if (personaClass) personaClass.textContent = `Classe: ${classe}`;
    // Estado atual
    let currentActiveTab = 'habilidades';
    let currentActiveIndex = 0; // Índice da habilidade/skin ativa
    // Função para renderizar os ícones (habilidades ou skins)
    const renderIcons = (items, type) => {
        cuadrosContainer.innerHTML = ''; // Limpar antes de renderizar
        items.forEach((item, index) => {
            const cuadro = document.createElement('div');
            cuadro.classList.add('cuadro');
            cuadro.style.backgroundImage = `url('${item.icon || item.image}')`;
            cuadro.dataset.index = index;
            cuadro.dataset.type = type;
            cuadro.addEventListener('click', () => {
                selectItem(index, type);
            });
            cuadrosContainer.appendChild(cuadro);
        });
    };
    // Função para exibir detalhes da habilidade/skin
    const displayItemDetails = (item, type) => {
        // Limpa atributos anteriores
        abilityAttributesContainer.innerHTML = '';
        if (type === 'habilidades') {
            abilityNameText.textContent = item.nome || '';
            abilityLevelText.textContent = `Level: ${item.level || ''}`;
            abilityDesc.textContent = item.desc || '';
            // Renderizar atributos dinamicamente
            if (item.atr) {
                const atrParts = item.atr.split(',').map(p => p.trim());
                for (let i = 0; i < atrParts.length; i += 2) {
                    const iconPath = atrParts[i];
                    const value = atrParts[i + 1];
                    if (iconPath && value !== undefined && value !== null) { // Verifique se o valor não é null/undefined
                        const attributeDiv = document.createElement('div');
                        const attributeImg = document.createElement('img');
                        attributeImg.src = iconPath;
                        attributeImg.alt = "Atributo";
                        attributeDiv.appendChild(attributeImg);
                        attributeDiv.appendChild(document.createTextNode(value));
                        abilityAttributesContainer.appendChild(attributeDiv);
                    }
                }
            }
            if (item.video) {
                abilityVideoSource.src = item.video;
                abilityVideo.load();
                abilityVideo.style.display = 'block';
            } else {
                abilityVideoSource.src = '';
                abilityVideo.style.display = 'none';
            }
        } else { // Skins
            abilityNameText.textContent = item.nome || '';
            abilityLevelText.textContent = '';
            abilityDesc.textContent = item.desc || '';
            abilityVideoSource.src = '';
            abilityVideo.style.display = 'none';
        }
    };
    // Função para selecionar um item (habilidade ou skin)
    const selectItem = (index, type) => {
        const items = type === 'habilidades' ? habilidades : skins;
        const selectedItem = items[index];
        // Atualizar classe 'active' nos ícones
        document.querySelectorAll('.cuadro').forEach(cuadro => {
            cuadro.classList.remove('active');
        });
        const activeCuadro = cuadrosContainer.querySelector(`.cuadro[data-index="${index}"][data-type="${type}"]`);
        if (activeCuadro) {
            activeCuadro.classList.add('active');
        }
        displayItemDetails(selectedItem, type);
        currentActiveIndex = index;
        currentActiveTab = type;
    };
    // Event Listeners para as abas
    tabBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            const tabType = btn.dataset.tab;
            // Remover 'active' de todas as abas
            tabBtns.forEach(b => b.classList.remove('active'));
            // Adicionar 'active' à aba clicada
            btn.classList.add('active');
            if (tabType === 'habilidades') {
                renderIcons(habilidades, 'habilidades');
                if (habilidades.length > 0) {
                    selectItem(0, 'habilidades');
                } else {
                    abilityNameText.textContent = 'Nenhuma Habilidade';
                    abilityLevelText.textContent = '';
                    abilityDesc.textContent = '';
                    abilityAttributesContainer.innerHTML = '';
                    abilityVideoSource.src = '';
                    abilityVideo.style.display = 'none';
                }
            } else { // Skins
                renderIcons(skins, 'skins');
                if (skins.length > 0) {
                    selectItem(0, 'skins');
                } else {
                    abilityNameText.textContent = 'Nenhuma Skin';
                    abilityLevelText.textContent = '';
                    abilityDesc.textContent = '';
                    abilityAttributesContainer.innerHTML = '';
                    abilityVideoSource.src = '';
                    abilityVideo.style.display = 'none';
                }
            }
        });
    });
    // Inicialização: renderizar habilidades e selecionar a primeira por padrão
    if (habilidades.length > 0) {
        renderIcons(habilidades, 'habilidades');
        selectItem(0, 'habilidades');
    } else if (skins.length > 0) {
        document.querySelector('.tab-btn[data-tab="skins"]').click();
    } else {
        cuadrosContainer.innerHTML = '<p style="color: #bbb; text-align: center; width: 100%;">Nenhum conteúdo disponível.</p>';
        abilityNameText.textContent = 'Nenhum Conteúdo';
        abilityLevelText.textContent = '';
        abilityDesc.textContent = '';
        abilityAttributesContainer.innerHTML = '';
        abilityVideoSource.src = '';
        abilityVideo.style.display = 'none';
    }
})();
== Widget:Persona ==
(function () {
    const personaData = document.getElementById('persona-data');
    if (!personaData) {
        console.error('Persona widget: não se encontrou #persona-data!');
        return;
    }
    // Extração de dados
    const nome = personaData.dataset.nome || '';
    const tier = personaData.dataset.tier || '';
    const classe = personaData.dataset.classe || '';
    const image = personaData.dataset.image || '';
    let habilidades = [];
    let skins = [];
    // Função auxiliar para parsear strings raw em objetos
    const parseRawString = (rawString) => {
        const data = [];
        if (!rawString) return data;
        const lines = rawString.split('||').map(line => line.trim()).filter(Boolean);
        lines.forEach(line => {
            const parts = line.split('\n').map(p => p.trim()).filter(Boolean);
            const item = {};
            parts.forEach(part => {
                if (part.startsWith('')) {
                    // Ignorar comentários
                    return;
                }
                const eqIndex = part.indexOf('=');
                if (eqIndex > -1) {
                    const key = part.substring(0, eqIndex).trim();
                    const value = part.substring(eqIndex + 1).trim();
                    item[key] = value;
                }
            });
            if (Object.keys(item).length > 0) {
                data.push(item);
            }
        });
        return data;
    };
    habilidades = parseRawString(personaData.dataset.habilidadesraw);
    skins = parseRawString(personaData.dataset.skinsraw);
    // Referências aos elementos HTML
    const tabBtns = document.querySelectorAll('.persona-tabs .tab-btn');
    const cuadrosContainer = document.querySelector('.cuadros-container');
    const abilityNameText = document.querySelector('.descripcion-container .ability-name-text');
    const abilityLevelText = document.querySelector('.descripcion-container .ability-level-text');
    const abilityDesc = document.querySelector('.descripcion-container .ability-desc');
    const abilityVideo = document.querySelector('.descripcion-container .ability-video');
    const abilityVideoSource = abilityVideo.querySelector('source');
    const abilityAttributesContainer = document.querySelector('.descripcion-container .ability-attributes');
    const artPersonagem = document.querySelector('.art-personagem');
    const personaName = document.querySelector('.persona-name');
    const personaTier = document.querySelector('.persona-tier');
    const personaClass = document.querySelector('.persona-class');
    // Preencher informações do header do personagem
    if (artPersonagem) artPersonagem.src = image;
    if (personaName) personaName.textContent = nome;
    if (personaTier) personaTier.textContent = `Tier: ${tier}`;
    if (personaClass) personaClass.textContent = `Classe: ${classe}`;
    // Estado atual
    let currentActiveTab = 'habilidades';
    let currentActiveIndex = 0; // Índice da habilidade/skin ativa
    // Função para renderizar os ícones (habilidades ou skins)
    const renderIcons = (items, type) => {
        cuadrosContainer.innerHTML = ''; // Limpar antes de renderizar
        items.forEach((item, index) => {
            const cuadro = document.createElement('div');
            cuadro.classList.add('cuadro');
            cuadro.style.backgroundImage = `url('${item.icon || item.image}')`;
            cuadro.dataset.index = index;
            cuadro.dataset.type = type;
            cuadro.addEventListener('click', () => {
                selectItem(index, type);
            });
            cuadrosContainer.appendChild(cuadro);
        });
    };
    // Função para exibir detalhes da habilidade/skin
    const displayItemDetails = (item, type) => {
        // Limpa atributos anteriores
        abilityAttributesContainer.innerHTML = '';
        if (type === 'habilidades') {
            abilityNameText.textContent = item.nome || '';
            abilityLevelText.textContent = `Level: ${item.level || ''}`;
            abilityDesc.textContent = item.desc || '';
            // Renderizar atributos dinamicamente
            if (item.atr) {
                const atrParts = item.atr.split(',').map(p => p.trim());
                for (let i = 0; i < atrParts.length; i += 2) {
                    const iconPath = atrParts[i];
                    const value = atrParts[i + 1];
                    if (iconPath && value !== undefined && value !== null) { // Verifique se o valor não é null/undefined
                        const attributeDiv = document.createElement('div');
                        const attributeImg = document.createElement('img');
                        attributeImg.src = iconPath;
                        attributeImg.alt = "Atributo";
                        attributeDiv.appendChild(attributeImg);
                        attributeDiv.appendChild(document.createTextNode(value));
                        abilityAttributesContainer.appendChild(attributeDiv);
                    }
                }
            }
            if (item.video) {
                abilityVideoSource.src = item.video;
                abilityVideo.load();
                abilityVideo.style.display = 'block';
            } else {
                abilityVideoSource.src = '';
                abilityVideo.style.display = 'none';
            }
        } else { // Skins
            abilityNameText.textContent = item.nome || '';
            abilityLevelText.textContent = '';
            abilityDesc.textContent = item.desc || '';
            abilityVideoSource.src = '';
            abilityVideo.style.display = 'none';
        }
    };
    // Função para selecionar um item (habilidade ou skin)
    const selectItem = (index, type) => {
        const items = type === 'habilidades' ? habilidades : skins;
        const selectedItem = items[index];
        // Atualizar classe 'active' nos ícones
        document.querySelectorAll('.cuadro').forEach(cuadro => {
            cuadro.classList.remove('active');
        });
        const activeCuadro = cuadrosContainer.querySelector(`.cuadro[data-index="${index}"][data-type="${type}"]`);
        if (activeCuadro) {
            activeCuadro.classList.add('active');
        }
        displayItemDetails(selectedItem, type);
        currentActiveIndex = index;
        currentActiveTab = type;
    };
    // Event Listeners para as abas
    tabBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            const tabType = btn.dataset.tab;
            // Remover 'active' de todas as abas
            tabBtns.forEach(b => b.classList.remove('active'));
            // Adicionar 'active' à aba clicada
            btn.classList.add('active');
            if (tabType === 'habilidades') {
                renderIcons(habilidades, 'habilidades');
                if (habilidades.length > 0) {
                    selectItem(0, 'habilidades');
                } else {
                    abilityNameText.textContent = 'Nenhuma Habilidade';
                    abilityLevelText.textContent = '';
                    abilityDesc.textContent = '';
                    abilityAttributesContainer.innerHTML = '';
                    abilityVideoSource.src = '';
                    abilityVideo.style.display = 'none';
                }
            } else { // Skins
                renderIcons(skins, 'skins');
                if (skins.length > 0) {
                    selectItem(0, 'skins');
                } else {
                    abilityNameText.textContent = 'Nenhuma Skin';
                    abilityLevelText.textContent = '';
                    abilityDesc.textContent = '';
                    abilityAttributesContainer.innerHTML = '';
                    abilityVideoSource.src = '';
                    abilityVideo.style.display = 'none';
                }
            }
        });
    });
    // Inicialização: renderizar habilidades e selecionar a primeira por padrão
    if (habilidades.length > 0) {
        renderIcons(habilidades, 'habilidades');
        selectItem(0, 'habilidades');
    } else if (skins.length > 0) {
        document.querySelector('.tab-btn[data-tab="skins"]').click();
    } else {
        cuadrosContainer.innerHTML = '<p style="color: #bbb; text-align: center; width: 100%;">Nenhum conteúdo disponível.</p>';
        abilityNameText.textContent = 'Nenhum Conteúdo';
        abilityLevelText.textContent = '';
        abilityDesc.textContent = '';
        abilityAttributesContainer.innerHTML = '';
        abilityVideoSource.src = '';
        abilityVideo.style.display = 'none';
    }
})();
== Predefinição:Persona ==
<includeonly>{{#tag:div|
<div class="persona-container">
    <div class="persona-header">
        <img class="art-personagem" src="{{{image|}}}" alt="Arte do personagem">
        <div class="persona-info">
            <h1 class="persona-name"></h1>
            <p class="persona-tier"></p>
            <p class="persona-class"></p>
        </div>
    </div>
    <div class="persona-tabs">
        <button class="tab-btn active" data-tab="habilidades">Habilidades</button>
        <button class="tab-btn" data-tab="skins">Skins</button>
    </div>
    <div id="persona-data"
        data-nome="{{{Nome|}}}"
        data-tier="{{{tier|}}}"
        data-classe="{{{classe|}}}"
        data-image="{{{image|}}}"
        data-habilidadesraw="{{{habilidadesRaw|}}}"
        data-skinsraw="{{{skinsRaw|}}}">
    </div>
    <div class="habilidades-details">
        <div class="cuadros-container habilidades-container">
            </div>
        <div class="descripcion-container">
            <h3 class="ability-name-level">
                <span class="ability-name-text"></span> <span class="ability-level-text"></span>
                <div class="ability-attributes">
                    </div>
            </h3>
            <p class="ability-desc"></p>
            <div class="ability-video-container">
                <video class="ability-video" controls poster="">
                    <source src="" type="video/webm">
                    Seu navegador não suporta o elemento de vídeo.
                </video>
            </div>
        </div>
    </div>
</div>
}}<templatestyles src="Predefinição:Persona/styles.css" /><widget name="Persona" /></includeonly><noinclude>
{{Documentação da Predefinição 'Persona'}}
Esta predefinição gera uma ficha interativa de personagem, conectada a um widget em JavaScript que exibe habilidades e skins de forma dinâmica.
== Exemplo para Copiar e Colar ==
<pre>
{{Persona
|Nome=Franky (Timeskip)
|tier=Diamante
|classe=Atirador/Tanque
|image=Caminho/Para/ImagemDoFranky.png
|habilidadesRaw=<nowiki>
nome=Rocket Launcher
icon=/caminho/para/icone_rocket_launcher.png
level=70
desc=Usando a tecnologia que adquiriu em Bajimroa Island, Franky usa seus grandes ombros, dos quais ele libera uma linha (Raffle Franky 1/?) revelando três pequenos, porém poderosos, mísseis que serão lançados no oponente. Causa dano em uma grande área e para o oponente. Oponentes que estiverem no caminho dos mísseis recebem apenas 75% de dano e não são punidos.
atr=/caminho/para/icone_cooldown.png,35 SEG,/caminho/para/icone_custo.png,-,/caminho/para/icone_alcance.png,40,/caminho/para/icone_dano.png,35
video=/caminho/para/video_rocket_launcher.webm
||
nome=Punch de Aço
icon=/caminho/para/icone_punch.png
level=60
desc=Franky desfere um soco poderoso, causando dano massivo e atordoando o alvo por um breve período.
atr=/caminho/para/icone_cooldown.png,20 SEG,/caminho/para/icone_custo.png,50,/caminho/para/icone_alcance.png,5,/caminho/para/icone_dano.png,120
video=/caminho/para/video_punch.webm
</nowiki>
|skinsRaw=<nowiki>
nome=Skin Padrão
image=/caminho/para/skin_padrao.png
desc=Aparência original de Franky.
||
nome=Skin de Férias
image=/caminho/para/skin_ferias.png
desc=Franky pronto para relaxar na praia.
</nowiki>
}}
</pre>
</noinclude>
== Personagem:Franky (Timeskip) ==
{{Persona
|Nome=Franky (Timeskip)
|tier=Diamante
|classe=Atirador/Tanque
|image=File:Franky_Timeskip_Art.png |habilidadesRaw=<nowiki>
nome=Rocket Launcher
icon=File:Icon_Rocket_Launcher.png level=70
desc=Usando a tecnologia que adquiriu em Bajimroa Island, Franky usa seus grandes ombros, dos quais ele libera uma linha (Raffle Franky 1/?) revelando três pequenos, porém poderosos, mísseis que serão lançados no oponente. Causa dano em uma grande área e para o oponente. Oponentes que estiverem no caminho dos mísseis recebem apenas 75% de dano e não são punidos.
atr=File:Icon_Cooldown.png,35 SEG,File:Icon_Cost.png,-,File:Icon_Range.png,40,File:Icon_Damage.png,35 video=File:Video_Rocket_Launcher.webm ||
nome=Punch de Aço
icon=File:Icon_Punch.png
level=60
desc=Franky desfere um soco poderoso, causando dano massivo e atordoando o alvo por um breve período.
atr=File:Icon_Cooldown.png,20 SEG,File:Icon_Cost.png,50,File:Icon_Range.png,5,File:Icon_Damage.png,120
video=File:Video_Punch.webm
</nowiki>
|skinsRaw=<nowiki>
nome=Skin Padrão
image=File:Skin_Franky_Default.png
desc=Aparência original de Franky.
||
nome=Skin de Férias
image=File:Skin_Franky_Vacation.png
desc=Franky pronto para relaxar na praia.
</nowiki>
}}

Edição atual tal como às 22h51min de 10 de junho de 2025

Disponível em “https://wiki.gla.com.br/index.php?title=Usuário_Discussão:Ttuzu&oldid=35217”