Mudanças entre as edições de "Widget:TesteBossYawn"

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 1: Linha 1:
<div class="boss-component" data-json="{{{data}}}">
<div class="boss-component" data-json="{{{data}}}">
   <div class="boss-diff">
   <div class="boss-diff">
     <button onclick="bossSetDiff(this,'normal')">NORMAL</button>
     <button onclick="bossSetDiff(this,'normal')">NORMAL</button>
Linha 8: Linha 7:


   <div class="boss-content"></div>
   <div class="boss-content"></div>
</div>
</div>


<style>
<style>
.boss-component {
.boss-component .box { ... }
  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>
</style>


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


   function bossRender(root, diff) {
   function bossRender(root, diff) {
     const data = JSON.parse(root.dataset.json);
     const data = JSON.parse(root.dataset.json);
     const d = data[diff];
     const d = data[diff];
     const content = root.querySelector(".boss-content");
     // render...
 
    let html = "";
 
    html += "<div class='box'><h3>REQUISITOS</h3>";
    d.requisitos.forEach(r => html += `<div>- ${r}</div>`);
    html += "</div>";
 
    html += "<div class='box'><h3>RECOMPENSAS</h3>";
    d.recompensas.forEach(r => html += `<div>${r}</div>`);
    html += "</div>";
 
    html += "<div class='skills'>";
    d.skills.forEach((s, i) => {
      html += `<button onclick="bossSetSkill(this, ${i})">${s.nome}</button>`;
    });
    html += "</div>";
 
    html += "<div class='skills-desc'>";
    d.skills.forEach((s, i) => {
      html += `<div class="skill-desc" style="display:${i===0?'block':'none'}">${s.desc}</div>`;
    });
    html += "</div>";
 
    content.innerHTML = html;
   }
   }


Linha 73: Linha 33:
   }
   }


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


     skills.forEach(s => s.style.display = "none");
  if (document.readyState === 'loading') {
     skills[index].style.display = "block";
     document.addEventListener('DOMContentLoaded', init);
  } else {
     init();
   }
   }


   // INIT
   if (typeof mw !== 'undefined' && mw.hook) {
  document.querySelectorAll(".boss-component").forEach(root => {
    mw.hook('wikipage.content').add(init);
    bossRender(root, "normal");
   }
   });


})();
})();
</script>
</script>

Edição das 12h13min de 4 de abril de 2026

   <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];
   // render...
 }
 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>