Edição atual tal como às 17h01min de 9 de abril de 2026

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

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

Tudo Certo

 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
   if (data.nome) {
     console.log("Nome achado");

html += `

${data.nome}

`;

   // Introdução
   if (data.introducao) {

html += `

${data.introducao}

`;

   // Localização
   if (data.localizacao && data.localizacao.caminho) {

html += `

Localizaçãoooo

`; 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

   console.log("Requisitos antes");
   if (d.requisitos && d.requisitos.length) {

${r}

`;

   console.log("Requisitos depois");

   // Recompensas

html += `

Recompensas

   if (d.recompensas && d.recompensas.length) {

${r}

`;

   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>

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

Edição atual tal como às 17h01min de 9 de abril de 2026

Tudo Certo

Índice

${data.nome}

Localizaçãoooo

Requisitos

Recompensas

Menu de navegação

Pesquisa

@@ 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>
+  <h1> Tudo Certo </h1>
+</tabber>
+<div class="boss-content">
 </div>
-<style>
+<script>
-.boss-component {
+(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;
-  padding: 10px;
+    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;
+  }
-.boss-diff button,
+  async function bossRender(root, diff) {
-.skills button {
+    const data = JSON.parse(root.dataset.json);
-  border: 2px solid cyan;
+    const d = data[diff];
-  background: black;
+    const content = root.querySelector(".boss-content");
-  color: lime;
-  margin: 5px;
-  padding: 8px;
-}
-.box {
+    let html = "";
-  border: 2px solid cyan;
-  margin-top: 10px;
-  padding: 10px;
-}
-</style>
-<script>
+    // Nome do boss
-function bossRender(root, diff) {
+    if (data.nome) {
-  const data = JSON.parse(root.dataset.json);
+      console.log("Nome achado");
-  const d = data[diff];
+      html += `<h2>${data.nome}</h2>`;
-  const content = root.querySelector(".boss-content");
+    }
-  let html = "";
+    // Introdução
+    if (data.introducao) {
+      html += `<p><em>${data.introducao}</em></p>`;
+    }
-  // REQUISITOS
+    // Localização
-  html += "<div class='box'><h3>REQUISITOS</h3>";
+    if (data.localizacao && data.localizacao.caminho) {
-  d.requisitos.forEach(r => html += `<div>- ${r}</div>`);
+      html += `<h3>Localizaçãoooo</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>`;
+      }
+    }
-  // RECOMPENSAS
+    // Requisitos
-  html += "<div class='box'><h3>RECOMPENSAS</h3>";
+    html += `<h3>Requisitos</h3><ul>`;
-  d.recompensas.forEach(r => html += `<div>${r}</div>`);
+    console.log("Requisitos antes");
-  html += "</div>";
+    if (d.requisitos && d.requisitos.length) {
+      d.requisitos.forEach(r => html += `<li>${r}</li>`);
+    }
+    html += `</ul>`;
+    console.log("Requisitos depois");
-  // SKILLS
+    // Recompensas
-  html += "<div class='skills'>";
+    html += `<h3>Recompensas</h3><ul>`;
-  d.skills.forEach((s, i) => {
+    if (d.recompensas && d.recompensas.length) {
-    html += `<button onclick="bossSetSkill(this, ${i})">${s.nome}</button>`;
+      d.recompensas.forEach(r => html += `<li>${r}</li>`);
-  });
+    }
-  html += "</div>";
+    html += `</ul>`;
-  // DESC
+    content.innerHTML = html;
-  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;
+   function init() {
-}
+    document.querySelectorAll(".boss-component").forEach(root => {
+      if (root.dataset.rendered === 'true') return;
+      root.dataset.rendered = 'true';
+      bossRender(root, "normal");
+    });
+  }
-function bossSetDiff(el, diff){
+  window.bossSetDiff = function(el, diff) {
-  const root = el.closest(".boss-component");
+    const root = el.closest(".boss-component");
-  bossRender(root, diff);
+    bossRender(root, diff);
-}
+  };
-function bossSetSkill(el, index){
+  if (document.readyState === 'loading') {
-  const root = el.closest(".boss-component");
+    document.addEventListener('DOMContentLoaded', init);
-   const skills = root.querySelectorAll(".skill-desc");
+   } else {
+    init();
+  }
-   skills.forEach(s => s.style.display = "none");
+   if (typeof mw !== 'undefined' && mw.hook) {
-   skills[index].style.display = "block";
+    mw.hook('wikipage.content').add(init);
-}
+   }
+})();
+</script>
-// INIT automático
+<style>
-document.querySelectorAll(".boss-component").forEach(root => {
+.boss-component .box { ... }
-  bossRender(root, "normal");
+</style>
-});
-</script>