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 {

 border: 2px solid cyan;
 background: black;
 color: lime;
 padding: 10px;

}

.boss-diff button, .skills button {

 border: 2px solid cyan;
 background: black;
 color: lime;
 margin: 5px;
 padding: 8px;

}

.box {

 border: 2px solid cyan;
 margin-top: 10px;
 padding: 10px;

} </style>

<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 = "";

html += "

REQUISITOS

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

- ${r}

`); html += "

"; html += "

RECOMPENSAS

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

${r}

`); html += "

"; html += "

";

   d.skills.forEach((s, i) => {
     html += `<button onclick="bossSetSkill(this, ${i})">${s.nome}</button>`;
   });

html += "

"; html += "

";

   d.skills.forEach((s, i) => {

html += `

${s.desc}

`;

   });

html += "

";

   content.innerHTML = html;
 }

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

 window.bossSetSkill = function(el, index){
   const root = el.closest(".boss-component");
   const skills = root.querySelectorAll(".skill-desc");

   skills.forEach(s => s.style.display = "none");
   skills[index].style.display = "block";
 }

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

})(); </script>