Usuário Discussão:Ttuzu

Predefinição:Persona/styles.css

@media (min-width: 1280px) and (min-aspect-ratio: 3/4) {

   .habilidades-details {
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: 16px;
       justify-content: center;
       width: 90%;
       align-self: center;
       margin-top: 20px;
   }

   .habilidades-container {
       flex-direction: column-reverse;
       width: 100%;
   }

   .cuadros-container {
       display: flex;
       flex-wrap: nowrap;
       gap: 16px;
       width: 100%;
       overflow-x: auto;
       padding-bottom: 8px;
       margin-bottom: 1%;
       justify-self: center;
       justify-content: flex-start;
   }

   .descripcion-container {
       display: flex;
       flex-direction: column;
       gap: 10px;
       flex: 1;
       padding: 20px;
       background-color: #2a2a2a;
       border-radius: 8px;
   }

   .descripcion-container h3 {
       display: flex;
       align-items: center;
       justify-content: flex-start;
       gap: 15px;
       color: #fff;
       font-size: 1.5em;
       margin-bottom: 10px;
   }

   .ability-name-text {
       font-weight: bold;
   }

   .ability-level-text {
       font-size: 0.8em;
       color: #bbb;
   }

   .ability-attributes {
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .ability-attributes div {
       display: flex;
       align-items: center;
       gap: 5px;
       color: #fff;
       font-size: 0.9em;
   }

   .ability-attributes img {
       width: 24px;
       height: 24px;
       vertical-align: middle;
   }

   .ability-desc {
       color: #ccc;
       line-height: 1.5;
       font-size: 1.1em;
       margin-bottom: 15px;
   }

   .ability-video-container {
       width: 100%;
       position: relative;
       padding-bottom: 56.25%;
       height: 0;
       overflow: hidden;
       margin-top: auto;
   }

   .ability-video {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       border-radius: 4px;
       background-color: #000;
   }

   .cuadros-container .cuadro {
       flex: 0 0 auto;
       width: 60px;
       height: 60px;
       border-radius: 8px;
       border: 2px solid transparent;
       cursor: pointer;
       transition: all 0.2s ease-in-out;
       background-size: cover;
       background-position: center;
       background-color: #333;
       overflow: hidden;
   }

   .cuadros-container .cuadro.active {
       border-color: #007bff;
       box-shadow: 0 0 10px rgba(0, 123, 255, 0.6);
   }

}

.persona-container {

   max-width: 1200px;
   margin: 20px auto;
   background-color: #1a1a1a;
   color: #fff;
   font-family: sans-serif; /* Usar fonte padrão, ou especificar uma que você importe */
   border-radius: 10px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
   padding: 20px;

}

.persona-header {

   display: flex;
   align-items: center;
   gap: 20px;
   margin-bottom: 20px;
   padding-bottom: 20px;
   border-bottom: 1px solid #333;

}

.art-personagem {

   width: 120px;
   height: 120px;
   border-radius: 50%;
   object-fit: cover;
   border: 3px solid #007bff;

}

.persona-info h1 {

   font-size: 2.5em;
   margin: 0;
   color: #007bff;

}

.persona-info p {

   margin: 5px 0;
   color: #bbb;

}

.persona-tabs {

   display: flex;
   margin-bottom: 20px;
   border-bottom: 2px solid #333;

}

.tab-btn {

   background-color: #333;
   color: #fff;
   padding: 10px 20px;
   border: none;
   cursor: pointer;
   font-size: 1.1em;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
   transition: background-color 0.3s ease;
   margin-right: 5px;

}

.tab-btn:hover {

   background-color: #444;

}

.tab-btn.active {

   background-color: #007bff;
   color: #fff;
   border-bottom: 2px solid #007bff;

}

@media (max-width: 768px) {

   .persona-header {
       flex-direction: column;
       text-align: center;
   }

   .persona-info {
       text-align: center;
   }

   .habilidades-details {
       flex-direction: column;
       width: 95%;
   }

   .cuadros-container {
       flex-wrap: wrap;
       justify-content: center;
   }

   .cuadros-container .cuadro {
       width: 50px;
       height: 50px;
   }

   .descripcion-container h3 {
       flex-direction: column;
       align-items: flex-start;
       gap: 5px;
   }

   .ability-attributes {
       margin-top: 10px;
       justify-content: center;
       flex-wrap: wrap;
   }

}

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 = '

Nenhum conteúdo disponível.

';

       abilityNameText.textContent = 'Nenhum Conteúdo';
       abilityLevelText.textContent = ;
       abilityDesc.textContent = ;
       abilityAttributesContainer.innerHTML = ;
       abilityVideoSource.src = ;
       abilityVideo.style.display = 'none';
   }

})();