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

Edição atual tal como às 16h42min de 4 de abril de 2026

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

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

 async function getImageUrlFromWiki(imageName) {
   const apiUrl = `https://wiki.gla.com.br/api.php?action=query&titles=${encodeURIComponent(imageName)}&prop=imageinfo&iiprop=url&format=json&origin=*`;
   
   try {
       const response = await fetch(apiUrl);
       const data = await response.json();
       const pages = data.query.pages;
       const page = Object.values(pages)[0];
       
       if (page.imageinfo && page.imageinfo[0]) {
           return page.imageinfo[0].url;
       }
   } catch(e) {
       console.error('Erro ao buscar imagem:', e);
   }
   return null;

}

async 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 && data.localizacao.caminho) {

html += `

Localização

`; html += `

${data.localizacao.descricao}

`;

   const imageName = data.localizacao.caminho;
   const imageUrl = await getImageUrlFromWiki(imageName);
   
   if (imageUrl) {

html += `

                   <img src="${imageUrl}" style="max-width: 100%;">

Caminho para o boss

`;

}

   // Requisitos

html += `

Requisitos

${r}

`;

   // Recompensas

html += `

Recompensas

${r}

`;

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

html += `

Skills

${s.nome}: ${s.desc}

`;

   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>

@@ Linha 1: / Linha 1: @@
-<div class="boss-component" data-json="{{{data}}}">
-  <div class="boss-diff">
-    <button onclick="bossSetDiff(this,'normal')">NORMAL</button>
-    <button onclick="bossSetDiff(this,'elite')">ELITE</button>
-    <button onclick="bossSetDiff(this,'hard')">HARD</button>
-  </div>
-  <div class="boss-content"></div>
+<tabber class="boss-diff">
+  <button onclick="bossSetDiff(this,'normal')">NORMAL</button>
+  <button onclick="bossSetDiff(this,'elite')">ELITE</button>
+  <button onclick="bossSetDiff(this,'hard')">HARD</button>
+</tabber>
+<div class="boss-content">
 </div>
-<style>
-.boss-component {
-  border: 2px solid cyan;
-  background: black;
-  color: lime;
-  padding: 10px;
-}
-.boss-diff button,
+<script>
-.skills button {
+(function() {
-   border: 2px solid cyan;
+   async function getImageUrlFromWiki(imageName) {
-  background: black;
+    const apiUrl = `https://wiki.gla.com.br/api.php?action=query&titles=${encodeURIComponent(imageName)}&prop=imageinfo&iiprop=url&format=json&origin=*`;
-  color: lime;
-  margin: 5px;
+    try {
-  padding: 8px;
+        const response = await fetch(apiUrl);
+        const data = await response.json();
+        const pages = data.query.pages;
+        const page = Object.values(pages)[0];
+        if (page.imageinfo && page.imageinfo[0]) {
+            return page.imageinfo[0].url;
+        }
+    } catch(e) {
+        console.error('Erro ao buscar imagem:', e);
+    }
+    return null;
 }
-.box {
+ async function bossRender(root, diff) {
-  border: 2px solid cyan;
+    const data = JSON.parse(root.dataset.json);
-  margin-top: 10px;
+    const d = data[diff];
-  padding: 10px;
+    const content = root.querySelector(".boss-content");
-}
-</style>
-<script>
+    let html = "";
-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 += `<h2>${data.nome}</h2>`;
+    }
-  // REQUISITOS
+    // Introdução (se existir)
-  html += "<div class='box'><h3>REQUISITOS</h3>";
+    if (data.introducao) {
-  d.requisitos.forEach(r => html += `<div>- ${r}</div>`);
+      html += `<p><em>${data.introducao}</em></p>`;
-  html += "</div>";
+    }
-  // RECOMPENSAS
+    // Localização (se existir)
-  html += "<div class='box'><h3>RECOMPENSAS</h3>";
+    if (data.localizacao && data.localizacao.caminho) {
-  d.recompensas.forEach(r => html += `<div>${r}</div>`);
+    html += `<h3>Localização</h3>`;
-  html += "</div>";
+    html += `<p>${data.localizacao.descricao}</p>`;
+    const imageName = data.localizacao.caminho;
+    const imageUrl = await getImageUrlFromWiki(imageName);
+    if (imageUrl) {
+        html += `<div style="text-align: center;">
+                    <img src="${imageUrl}" style="max-width: 100%;">
+                    <p><small>Caminho para o boss</small></p>
+                 </div>`;
+    }
+}
-  // SKILLS
+    // Requisitos
-  html += "<div class='skills'>";
+    html += `<h3>Requisitos</h3><ul>`;
-  d.skills.forEach((s, i) => {
+    d.requisitos.forEach(r => html += `<li>${r}</li>`);
-    html += `<button onclick="bossSetSkill(this, ${i})">${s.nome}</button>`;
+    html += `</ul>`;
-  });
-  html += "</div>";
-  // DESC
+    // Recompensas
-  html += "<div class='skills-desc'>";
+    html += `<h3>Recompensas</h3><ul>`;
-  d.skills.forEach((s, i) => {
+    d.recompensas.forEach(r => html += `<li>${r}</li>`);
-    html += `<div class="skill-desc" style="display:${i===0?'block':'none'}">${s.desc}</div>`;
+    html += `</ul>`;
-  });
-  html += "</div>";
-  content.innerHTML = html;
+    // Skills
-}
+    if (d.skills && d.skills.length > 0) {
+      html += `<h3>Skills</h3><ul>`;
+      d.skills.forEach(s => html += `<li><strong>${s.nome}</strong>: ${s.desc}</li>`);
+      html += `</ul>`;
+    }
+    content.innerHTML = html;
+  }
-function bossSetDiff(el, diff){
+  function init() {
-  const root = el.closest(".boss-component");
+    document.querySelectorAll(".boss-component").forEach(root => {
-  bossRender(root, diff);
+      if (root.dataset.rendered === 'true') return;
-}
+      root.dataset.rendered = 'true';
+      bossRender(root, "normal");
+    });
+  }
-function bossSetSkill(el, index){
+  window.bossSetDiff = function(el, diff) {
-  const root = el.closest(".boss-component");
+    const root = el.closest(".boss-component");
-  const skills = root.querySelectorAll(".skill-desc");
+    bossRender(root, diff);
+  };
-   skills.forEach(s => s.style.display = "none");
+   if (document.readyState === 'loading') {
-   skills[index].style.display = "block";
+    document.addEventListener('DOMContentLoaded', init);
-}
+   } else {
+    init();
+  }
-// INIT automático
+  if (typeof mw !== 'undefined' && mw.hook) {
-document.querySelectorAll(".boss-component").forEach(root => {
+    mw.hook('wikipage.content').add(init);
-   bossRender(root, "normal");
+   }
-});
+})();
 </script>
+<style>
+.boss-component .box { ... }
+</style>

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

Edição atual tal como às 16h42min de 4 de abril de 2026

Índice

${data.nome}

Localização

Requisitos

Recompensas

Skills

Menu de navegação

Pesquisa