Widget:TesteBossYawn

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

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

<script> (function() {

 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 loadSkills(moduleName) {

   const apiUrl = `video {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 6px;
    background: #000;
  }

  /* ===========================TOOLTIP=========================== */
  .boss-skill-tooltip {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(28, 28, 34, 0.95);
    color: #eaeaea;
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
    max-width: 360px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5),
      inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    left: -9999px;
    top: -9999px;
    opacity: 0;
    transition: opacity 0.12s ease;
    white-space: normal;
  }

  /* ===========================RESPONSIVE=========================== */
  @media (max-width: 1100px) {
    .boss-skills-grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .boss-video-container {
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
    }
  }

  @media (max-width: 600px) {
    :root {
      --boss-icon-size: 72px;
    }

    .boss-rail {
      width: 100%;
      max-width: 100%;
      border-radius: 0;
      padding: 6px 8px;
    }

    .boss-icon-bar {
      justify-content: flex-start;
    }

    .boss-content-card {
      box-sizing: border-box;
      width: 100%;
      max-width: calc(100vw - 16px);
      padding: 12px;
      border-radius: 10px;
    }

    .boss-desc-box {
      font-size: 16px !important;
    }

    .boss-desc {
      font-size: 22px !important;
      line-height: 1.9 !important;
    }

    .boss-desc-box h3 {
      font-size: 28px !important;
    }

    .boss-attr-label,
    .boss-attr-value {
      font-size: 18px !important;
    }

    .boss-video-container {
      width: 100%;
      max-width: calc(100vw - 16px);
    }
  }

  /* ===========================OVERFLOW PROTECTION=========================== */
  .boss-box,
  .boss-content-card,
  .boss-rail,
  .boss-video-container {
    box-sizing: border-box;
    max-width: 100%;
  }

  .boss-content-card *,
  .boss-rail *,
  .boss-video-container * {
    max-width: 100%;
    box-sizing: border-box;
  }


&format=json&origin=*`">https://wiki.gla.com.br/api.php?action=parse&text=


&format=json&origin=*`;
   
   try {
       const response = await fetch(apiUrl);
       console.log("api conectada");
       const data = await response.json();
       return data.parse.text['*'];
   } catch(e) {
       console.error('Erro ao carregar skills:', e);
       return ;
   }

}

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

`;

   }

   if (data.skillsModule) {
      console.log("Skills achadas")
      const skillsHTML = await loadSkills(data.skillsModule);
      html += skillsHTML;
   }

}

   // Requisitos

html += `

Requisitos

`; d.requisitos.forEach(r => html += `
• ${r}
`); html += `

`;

   // Recompensas

html += `

Recompensas

`; d.recompensas.forEach(r => html += `
• ${r}
`); html += `

`;

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

html += `

Skills

`; d.skills.forEach(s => html += `
• ${s.nome}: ${s.desc}
`); html += `

`;

   }

   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>

<style> .boss-component .box { ... } </style>