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 bossRender(root, diff) {

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

 let html = "";

 // REQUISITOS

html += "

REQUISITOS

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

- ${r}

`); html += "

";

 // RECOMPENSAS

html += "

RECOMPENSAS

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

${r}

`); html += "

";

 // SKILLS

html += "

";

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

html += "

";

 // DESC

html += "

";

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

html += `

${s.desc}

`;

 });

html += "

";

 content.innerHTML = html;

}

function bossSetDiff(el, diff){

 const root = el.closest(".boss-component");
 bossRender(root, diff);

}

function bossSetSkill(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 automático document.querySelectorAll(".boss-component").forEach(root => {

 bossRender(root, "normal");

}); </script>