Widget:TesteBossYawn

"bossSetDiff(this,'normal')">NORMAL</button>

 <button onclick="bossSetDiff(this,'elite')">ELITE</button>
 <button onclick="bossSetDiff(this,'hard')">HARD</button>

<script> (function() {

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

   let html = "";

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

html += `

${data.nome}

`;

   }

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

html += `

${data.introducao}

`;

   }

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

html += `

Localização

`; html += `

${data.localizacao.descricao}

`;

     if (data.localizacao.imagem_html) {
       html += data.localizacao.imagem_html;
     }
   }

   // Requisitos

html += `

Requisitos

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

`;

   // Recompensas

html += `

Recompensas

`; d.recompensas.forEach(r => html += `
• ${r}
`); html += `

`;

   // Skills
   if (d.skills && d.skills.length > 0) {

html += `

Skills

`; d.skills.forEach(s => html += `
• ${s.nome}: ${s.desc}
`); html += `

`;

   }

   content.innerHTML = html;
 }

 function init() {
   document.querySelectorAll(".boss-component").forEach(root => {
     if (root.dataset.rendered === 'true') return;
     root.dataset.rendered = 'true';
     bossRender(root, "normal");
   });
 }

 window.bossSetDiff = function(el, diff) {
   const root = el.closest(".boss-component");
   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-component .box { ... } </style>