Widget:TesteBossYawnv3

<main class="boss-container-teste">

   <button class="boss-diff-btn active" data-diff="normal">NORMAL</button>
   <button class="boss-diff-btn" data-diff="elite">ELITE</button>
   <button class="boss-diff-btn" data-diff="hard">HARD</button>

Teste

</main> <script> (function() {

   function escapeHtml(str) {
       if (!str) return ;
       return str.replace(/[&<>]/g, function(m) {
           if (m === '&') return '&';
           if (m === '<') return '<';
           if (m === '>') return '>';
           return m;
       });
   }

   async function bossRender(root, diff) {
       const data = JSON.parse(root.dataset.json);
       const d = data[diff];
       const content = root.querySelector(".boss-content");
       
       if (!content) return;
       
       let html = ;

       // Nome do boss
       if (data.nome) {

html += `

${escapeHtml(data.nome)}

`;

       }

       // Introdução
       if (data.introducao) {

html += `

${escapeHtml(data.introducao)}

`;

       }

       // Localização
       if (data.localizacao) {

html += `

Localização

`; html += `

${escapeHtml(data.localizacao.descricao)}

`;

       }

       // Requisitos

html += `

Requisitos

`;

       if (d.requisitos && d.requisitos.length) {

d.requisitos.forEach(r => html += `
• ${escapeHtml(r)}
`); } else { html += `
• Nenhum requisito
`; } html += `

`;

       // Recompensas Garantidas

html += `

Recompensas Garantidas

`;

       if (d.recompensas && d.recompensas.length) {

d.recompensas.forEach(r => html += `
• ${escapeHtml(r)}
`); } else { html += `
• Nenhuma recompensa garantida
`; } html += `

`;

       // Possíveis Recompensas

html += `

Possíveis Recompensas

`;

       if (d.recompensasPossiveis && d.recompensasPossiveis.length) {

d.recompensasPossiveis.forEach(r => html += `
• ${escapeHtml(r)}
`); } else { html += `
• Nenhuma recompensa possível
`; } html += `

`;

       content.innerHTML = html;
       
       // Atualiza botão ativo
       root.querySelectorAll('.boss-diff-btn').forEach(btn => {
           const diffBtn = btn.dataset.diff;
           if (diffBtn === diff) {
               btn.classList.add('active');
           } else {
               btn.classList.remove('active');
           }
       });
   }

   function init() {
       document.querySelectorAll('.boss-component').forEach(root => {
           if (root.dataset.initialized === 'true') return;
           root.dataset.initialized = 'true';
           
           // Adiciona event listeners nos botões
           const buttons = root.querySelectorAll('.boss-diff-btn');
           buttons.forEach(btn => {
               btn.removeEventListener('click', handleClick);
               btn.addEventListener('click', handleClick);
           });
           
           // Renderiza dificuldade normal
           bossRender(root, 'normal');
       });
   }

   function handleClick(e) {
       const btn = e.currentTarget;
       const root = btn.closest('.boss-component');
       const diff = btn.dataset.diff;
       if (root && diff) {
           bossRender(root, diff);
       }
   }

   if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', init);
   } else {
       init();
   }

   if (typeof mw !== 'undefined' && mw.hook) {
       mw.hook('wikipage.content').add(init);
   }

})(); </script>

<style> .boss-container-teste {

   font-family: 'Segoe UI', Roboto, Arial, sans-serif;
   max-width: 800px;
   margin: 0 auto;
   background: #3a3a3c;
   border-radius: 16px;
   overflow: hidden;
   color: #e8e8e8;

}

/* Botões de dificuldade */ .boss-diff-buttons {

   display: flex;
   gap: 8px;
   background: #11161f;
   padding: 12px 20px;
   border-bottom: 1px solid #2a2e3a;

}

.boss-diff-btn {

   background: #1a1f2b;
   border: none;
   color: #a0a5b0;
   padding: 8px 24px;
   border-radius: 24px;
   font-weight: bold;
   cursor: pointer;
   transition: all 0.2s;
   font-size: 14px;

}

.boss-diff-btn:hover {

   background: #2a2e3a;
   color: #ddd;

}

.boss-diff-btn.active {

   background: #7c3aed;
   color: white;
   box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);

}

/* Conteúdo principal */ .boss-content {

   padding: 24px;

}

/* Títulos */ .boss-content h2 {

   font-size: 28px;
   font-weight: bold;
   color: #ffd700;
   margin-bottom: 8px;
   display: flex;
   align-items: center;
   gap: 12px;

}

.boss-content h3 {

   color: #7c3aed;
   margin: 20px 0 12px 0;
   font-size: 18px;
   text-transform: uppercase;
   letter-spacing: 1px;

}

.boss-content h3:first-of-type {

   margin-top: 0;

}

/* Introdução */ .boss-content em {

   color: #a0a5b0;
   display: block;
   margin-bottom: 24px;
   padding-bottom: 16px;
   border-bottom: 1px solid #2a2e3a;
   font-style: italic;

}

/* Listas */ .boss-content ul {

   margin: 0;
   padding-left: 20px;

}

.boss-content li {

   margin: 8px 0;
   color: #e0e0e0;

}

/* Localização */ .boss-content p {

   color: #c0c0c0;
   line-height: 1.5;

}

/* Responsivo */ @media (max-width: 600px) {

   .boss-diff-buttons {
       justify-content: center;
   }
   
   .boss-diff-btn {
       padding: 6px 16px;
       font-size: 12px;
   }
   
   .boss-content {
       padding: 16px;
   }
   
   .boss-content h2 {
       font-size: 22px;
   }
   
   .boss-content h3 {
       font-size: 16px;
   }

}

</style>