Widget:TesteBossYawn

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

<style> .boss-component .box { ... } </style>

<script> (function() {

 function init() {
   document.querySelectorAll(".boss-component").forEach(root => {
     bossRender(root, "normal");
   });
 }

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

   const content = root.querySelector(".boss-content");

   let html = "";

html += "

REQUISITOS

"; d.requisitos.forEach(r => html += `

- ${r}

`); html += "

"; html += "

RECOMPENSAS

"; d.recompensas.forEach(r => html += `

${r}

`); html += "

";

   content.innerHTML = html;
} 

 window.bossSetDiff = function(el, diff){
   const root = el.closest(".boss-component");
   bossRender(root, diff);
 }

 window.bikiSetSkill = function(el, index){
   // skill logic
 }

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

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

})(); </script>