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

Edição das 22h31min de 10 de junho de 2025

(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';
   }

})();

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';
   }

})();

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

Edição das 22h31min de 10 de junho de 2025

Widget:Persona

Menu de navegação

Pesquisa

@@ Linha 1: / Linha 1: @@
-== Predefinição:Persona/styles.css ==
+(function () {
+     const personaData = document.getElementById('persona-data');
-@media (min-width: 1280px) and (min-aspect-ratio: 3/4) {
+     if (!personaData) {
-     .habilidades-details {
+         console.error('Persona widget: não se encontrou #persona-data!');
-        flex: 1;
+         return;
-        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 {
+     // Extração de dados
-        display: flex;
+    const nome = personaData.dataset.nome || '';
-        align-items: center;
+    const tier = personaData.dataset.tier || '';
-        gap: 5px;
+    const classe = personaData.dataset.classe || '';
-        color: #fff;
+    const image = personaData.dataset.image || '';
-        font-size: 0.9em;
+    let habilidades = [];
-     }
+     let skins = [];
-     .ability-attributes img {
+     // Função auxiliar para parsear strings raw em objetos
-         width: 24px;
+    const parseRawString = (rawString) => {
-         height: 24px;
+         const data = [];
-        vertical-align: middle;
+         if (!rawString) return data;
-    }
-    .ability-desc {
+        const lines = rawString.split('||').map(line => line.trim()).filter(Boolean);
-        color: #ccc;
-        line-height: 1.5;
-        font-size: 1.1em;
-        margin-bottom: 15px;
-    }
-    .ability-video-container {
+        lines.forEach(line => {
-        width: 100%;
+            const parts = line.split('\n').map(p => p.trim()).filter(Boolean);
-        position: relative;
+            const item = {};
-        padding-bottom: 56.25%;
+            parts.forEach(part => {
-        height: 0;
+                if (part.startsWith('')) {
-         overflow: hidden;
+                    // Ignorar comentários
-         margin-top: auto;
+                    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;
+     };
-     .ability-video {
+     habilidades = parseRawString(personaData.dataset.habilidadesraw);
-        position: absolute;
+    skins = parseRawString(personaData.dataset.skinsraw);
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        border-radius: 4px;
-        background-color: #000;
-    }
-     .cuadros-container .cuadro {
+     // Referências aos elementos HTML
-        flex: 0 0 auto;
+    const tabBtns = document.querySelectorAll('.persona-tabs .tab-btn');
-        width: 60px;
+    const cuadrosContainer = document.querySelector('.cuadros-container');
-        height: 60px;
+    const abilityNameText = document.querySelector('.descripcion-container .ability-name-text');
-        border-radius: 8px;
+    const abilityLevelText = document.querySelector('.descripcion-container .ability-level-text');
-        border: 2px solid transparent;
+    const abilityDesc = document.querySelector('.descripcion-container .ability-desc');
-        cursor: pointer;
+    const abilityVideo = document.querySelector('.descripcion-container .ability-video');
-        transition: all 0.2s ease-in-out;
+    const abilityVideoSource = abilityVideo.querySelector('source');
-        background-size: cover;
+    const abilityAttributesContainer = document.querySelector('.descripcion-container .ability-attributes');
-        background-position: center;
+    const artPersonagem = document.querySelector('.art-personagem');
-        background-color: #333;
+    const personaName = document.querySelector('.persona-name');
-        overflow: hidden;
+    const personaTier = document.querySelector('.persona-tier');
-    }
+    const personaClass = document.querySelector('.persona-class');
-     .cuadros-container .cuadro.active {
+     // Preencher informações do header do personagem
-        border-color: #007bff;
+    if (artPersonagem) artPersonagem.src = image;
-        box-shadow: 0 0 10px rgba(0, 123, 255, 0.6);
+    if (personaName) personaName.textContent = nome;
-     }
+     if (personaTier) personaTier.textContent = `Tier: ${tier}`;
-}
+    if (personaClass) personaClass.textContent = `Classe: ${classe}`;
-.persona-container {
+     // Estado atual
-    max-width: 1200px;
+     let currentActiveTab = 'habilidades';
-     margin: 20px auto;
+     let currentActiveIndex = 0; // Índice da habilidade/skin ativa
-    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 {
+    // Função para renderizar os ícones (habilidades ou skins)
-    display: flex;
+    const renderIcons = (items, type) => {
-    align-items: center;
+        cuadrosContainer.innerHTML = ''; // Limpar antes de renderizar
-    gap: 20px;
+        items.forEach((item, index) => {
-    margin-bottom: 20px;
+            const cuadro = document.createElement('div');
-    padding-bottom: 20px;
+            cuadro.classList.add('cuadro');
-    border-bottom: 1px solid #333;
+            cuadro.style.backgroundImage = `url('${item.icon || item.image}')`;
-}
+            cuadro.dataset.index = index;
+            cuadro.dataset.type = type;
-.art-personagem {
+            cuadro.addEventListener('click', () => {
-    width: 120px;
+                selectItem(index, type);
-    height: 120px;
+            });
-    border-radius: 50%;
+            cuadrosContainer.appendChild(cuadro);
-    object-fit: cover;
+        });
-     border: 3px solid #007bff;
+     };
-}
-.persona-info h1 {
+    // Função para exibir detalhes da habilidade/skin
-     font-size: 2.5em;
+     const displayItemDetails = (item, type) => {
-    margin: 0;
+        // Limpa atributos anteriores
-    color: #007bff;
+        abilityAttributesContainer.innerHTML = '';
-}
-.persona-info p {
+        if (type === 'habilidades') {
-    margin: 5px 0;
+            abilityNameText.textContent = item.nome || '';
-    color: #bbb;
+            abilityLevelText.textContent = `Level: ${item.level || ''}`;
-}
+            abilityDesc.textContent = item.desc || '';
-.persona-tabs {
+            // Renderizar atributos dinamicamente
-    display: flex;
+            if (item.atr) {
-    margin-bottom: 20px;
+                const atrParts = item.atr.split(',').map(p => p.trim());
-    border-bottom: 2px solid #333;
+                for (let i = 0; i < atrParts.length; i += 2) {
-}
+                    const iconPath = atrParts[i];
+                    const value = atrParts[i + 1];
-.tab-btn {
+                    if (iconPath && value !== undefined && value !== null) { // Verifique se o valor não é null/undefined
-    background-color: #333;
+                        const attributeDiv = document.createElement('div');
-    color: #fff;
+                        const attributeImg = document.createElement('img');
-    padding: 10px 20px;
+                        attributeImg.src = iconPath;
-    border: none;
+                        attributeImg.alt = "Atributo";
-    cursor: pointer;
+                        attributeDiv.appendChild(attributeImg);
-    font-size: 1.1em;
+                        attributeDiv.appendChild(document.createTextNode(value));
-    border-top-left-radius: 6px;
+                        abilityAttributesContainer.appendChild(attributeDiv);
-    border-top-right-radius: 6px;
+                    }
-    transition: background-color 0.3s ease;
+                }
-    margin-right: 5px;
+            }
-}
-.tab-btn:hover {
+            if (item.video) {
-    background-color: #444;
+                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';
+        }
+    };
-.tab-btn.active {
+    // Função para selecionar um item (habilidade ou skin)
-     background-color: #007bff;
+     const selectItem = (index, type) => {
-    color: #fff;
+        const items = type === 'habilidades' ? habilidades : skins;
-    border-bottom: 2px solid #007bff;
+        const selectedItem = items[index];
-}
-@media (max-width: 768px) {
+        // Atualizar classe 'active' nos ícones
-    .persona-header {
+        document.querySelectorAll('.cuadro').forEach(cuadro => {
-        flex-direction: column;
+            cuadro.classList.remove('active');
-         text-align: center;
+        });
-    }
+        const activeCuadro = cuadrosContainer.querySelector(`.cuadro[data-index="${index}"][data-type="${type}"]`);
+         if (activeCuadro) {
+            activeCuadro.classList.add('active');
+        }
-    .persona-info {
+        displayItemDetails(selectedItem, type);
-         text-align: center;
+        currentActiveIndex = index;
-     }
+         currentActiveTab = type;
+     };
-     .habilidades-details {
+     // Event Listeners para as abas
-         flex-direction: column;
+    tabBtns.forEach(btn => {
-        width: 95%;
+         btn.addEventListener('click', () => {
-    }
+            const tabType = btn.dataset.tab;
-    .cuadros-container {
+            // Remover 'active' de todas as abas
-        flex-wrap: wrap;
+            tabBtns.forEach(b => b.classList.remove('active'));
-        justify-content: center;
+            // Adicionar 'active' à aba clicada
-    }
+            btn.classList.add('active');
-    .cuadros-container .cuadro {
+            if (tabType === 'habilidades') {
-        width: 50px;
+                renderIcons(habilidades, 'habilidades');
-         height: 50px;
+                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';
+                }
+            }
+         });
+     });
-     .descripcion-container h3 {
+     // Inicialização: renderizar habilidades e selecionar a primeira por padrão
-         flex-direction: column;
+    if (habilidades.length > 0) {
-         align-items: flex-start;
+        renderIcons(habilidades, 'habilidades');
-         gap: 5px;
+        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';
      }
-    .ability-attributes {
+})();
-        margin-top: 10px;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-}
 == Widget:Persona ==