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

Edição das 23h31min de 9 de abril de 2026

       <button class="boss-diff-btn active" data-diff="normal">NORMAL</button>
       <button class="boss-diff-btn" data-diff="elite">ELITE</button>
       <button class="boss-diff-btn" data-diff="hard">HARD</button>

</main>

   function escapeHtml(str) {
       if (!str) return ;
       return str.replace(/[&<>]/g, m => ({
           '&': '&',
           '<': '<',
           '>': '>'
       }[m]));
   }

   // Note: Removi o "async" pois agora tudo é síncrono e instantâneo
   function bossRender(root, diff) {
       const data = JSON.parse(root.dataset.json);
       const d = data[diff];
       const content = root.querySelector(".boss-content");
       if (!content || !d) return;

       // Atualiza o título apenas se necessário
       const titulo = root.querySelector(".boss-titulo");
       if (data.nome && titulo) titulo.textContent = data.nome;

let html = `

`;

       // Requisitos

html += `

Requisitos

${escapeHtml(r)}
Nenhum requisito

`;

       // Grid recompensas

html += `

`;

       // Recompensas Garantidas

html += `

Recompensas Garantidas

${escapeHtml(r)}
Nenhuma recompensa garantida

`;

       // Possíveis Recompensas (O HTML já vem pronto do Módulo Lua)

html += `

Possíveis Recompensas

`;

       if (d.recompensasRenderizadas) {
           // Inserimos o HTML direto (imagens e tooltips processados pela Wiki)
           html += d.recompensasRenderizadas;
       } else {

html += `

Nenhuma recompensa possível

`;

html += `

`;

       content.innerHTML = html;

       // Atualiza botão ativo
       root.querySelectorAll('.boss-diff-btn').forEach(btn => {
           btn.classList.toggle('active', btn.dataset.diff === diff);
       });
   }

   function init() {
       document.querySelectorAll('.boss-component').forEach(root => {
           if (root.dataset.initialized === 'true') return;
           root.dataset.initialized = 'true';

           const buttons = root.querySelectorAll('.boss-diff-btn');
           buttons.forEach(btn => {
               btn.addEventListener('click', (e) => {
                   const diff = e.currentTarget.dataset.diff;
                   bossRender(root, diff);
               });
           });

           // Renderização inicial
           bossRender(root, 'normal');
       });
   }

   // Inicialização padrão do MediaWiki
   if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', init);
   } else {
       init();
   }

   if (typeof mw !== 'undefined' && mw.hook) {
       mw.hook('wikipage.content').add(init);
   }

})(); </script>

   font-family: 'Segoe UI', Roboto, Arial, sans-serif;
   max-width: 900px;
   margin: 0 auto;
   background-color: #3a3a3c;
   border-radius: 12px;
   overflow: hidden;
   color: #e0e0e0;
   display: flex;
   text-align: center;
   justify-content: center;
   flex-direction: column;

}

/* Título do boss */ .boss-titulo {

   font-size: 42px;
   font-weight: bold;
   color: #5488ad;
   margin: 0 0 12px 0;
   letter-spacing: 1px;

}

/* Botões de dificuldade */ .boss-diff-buttons {

   display: flex;
   justify-content: center;
   text-align: center;
   gap: 4px;
   padding: 16px 20px;
   border-bottom: 2px solid #3a3a3c;

}

.boss-diff-btn {

   background: #3a3a3c;
   border: none;
   color: #e0e0e0;
   padding: 10px 28px;
   border-radius: 8px;
   font-weight: bold;
   cursor: pointer;
   transition: all 0.2s;
   font-size: 14px;
   letter-spacing: 1px;

}

.boss-diff-btn:hover {

   background: #5488ad;
   color: white;

}

.boss-diff-btn.active {

   background: #5488ad;
   color: white;
   box-shadow: 0 2px 8px rgba(84, 136, 173, 0.3);

}

/* Conteúdo principal */ .boss-content {

   padding: 24px 28px;

}

/* Introdução */ .boss-content em {

   color: #a0a0a0;
   display: block;
   margin-bottom: 28px;
   padding-bottom: 16px;
   border-bottom: 1px solid #3a3a3c;
   font-style: italic;
   font-size: 14px;

}

/* Subtítulos (Localização, Requisitos, etc) */ .boss-content h3 {

   color: #5488ad;
   margin: 24px 0 12px 0;
   font-size: 16px;
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 1.5px;

}

.boss-content h3:first-of-type {

   margin-top: 0;

}

/* Grid */ .boss-content-grid {

   display: flex;
   text-align: center;
   justify-content: center;
   gap: 10px;

}

/* Requisitos */ .boss-content-requisitos{

   background-color: #1f1f20;
   padding: 6px;

}

/* Recompensas */

/* Listas */ .boss-content ul {

   margin: 0;
   padding-left: 24px;
   list-style-type: none;

}

.boss-content li {

   margin: 10px 0;
   color: #d0d0d0;
   position: relative;
   padding-left: 20px;

}

.boss-content li::before {

   content: "▸";
   color: #5488ad;
   position: absolute;
   left: 0;

}

/* Linha divisória entre seções */ .boss-content hr {

   border: none;
   border-top: 1px solid #3a3a3c;
   margin: 20px 0;

}

/* Responsivo */ @media (max-width: 600px) {

   .boss-diff-buttons {
       justify-content: center;
       flex-wrap: wrap;
       gap: 8px;
   }
   
   .boss-diff-btn {
       padding: 8px 20px;
       font-size: 12px;
   }
   
   .boss-content {
       padding: 20px;
   }
   
   .boss-content h2 {
       font-size: 24px;
   }
   
   .boss-content h3 {
       font-size: 14px;
   }

} </style>

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

Edição das 23h31min de 9 de abril de 2026

Índice

Requisitos

Recompensas Garantidas

Possíveis Recompensas

Menu de navegação

Pesquisa

@@ Linha 1: / Linha 1: @@
-<main class = "boss-container-teste">
+<main class="boss-container-teste">
-<h1 class = "boss-titulo"></h1>
+    <h1 class="boss-titulo"></h1>
-<div class="boss-diff-buttons">
+    <div class="boss-diff-buttons">
-    <button class="boss-diff-btn active" data-diff="normal">NORMAL</button>
+        <button class="boss-diff-btn active" data-diff="normal">NORMAL</button>
-    <button class="boss-diff-btn" data-diff="elite">ELITE</button>
+        <button class="boss-diff-btn" data-diff="elite">ELITE</button>
-    <button class="boss-diff-btn" data-diff="hard">HARD</button>
+        <button class="boss-diff-btn" data-diff="hard">HARD</button>
-</div>
+    </div>
-<div class="boss-content"></div>
+    <div class="boss-content"></div>
+</main>
-</main>
 <script>
 (function() {
      function escapeHtml(str) {
          if (!str) return '';
-         return str.replace(/[&<>]/g, function(m) {
+         return str.replace(/[&<>]/g, m => ({
-             if (m === '&') return '&amp;';
+             '&': '&amp;',
-             if (m === '<') return '&lt;';
+             '<': '&lt;',
-             if (m === '>') return '&gt;';
+             '>': '&gt;'
-            return m;
+         }[m]));
-         });
      }
-     async function bossRender(root, diff) {
+     // Note: Removi o "async" pois agora tudo é síncrono e instantâneo
+    function bossRender(root, diff) {
          const data = JSON.parse(root.dataset.json);
-    const d = data[diff];
+        const d = data[diff];
-    const content = root.querySelector(".boss-content");
+        const content = root.querySelector(".boss-content");
-    if (!content) return;
+        if (!content || !d) return;
-    let html = `<div class="boss-content-grid">`;
+        // Atualiza o título apenas se necessário
+        const titulo = root.querySelector(".boss-titulo");
+        if (data.nome && titulo) titulo.textContent = data.nome;
-    // Requisitos
+        let html = `<div class="boss-content-grid">`;
-    html += `<div class="boss-content-requisitos"><h3>Requisitos</h3><ul>`;
-    (d.requisitos || []).forEach(r => html += `<li>${escapeHtml(r)}</li>`);
-    html += `</ul></div>`;
-    // Grid Recompensas
+        // Requisitos
-    html += `<div class="boss-content-grid-recompensas">`;
+        html += `<div class="boss-content-requisitos"><h3>Requisitos</h3><ul>`;
+        (d.requisitos || []).forEach(r => html += `<li>${escapeHtml(r)}</li>`);
-    // Garantidas
+        if (!(d.requisitos || []).length) html += `<li>Nenhum requisito</li>`;
-    html += `<h3>Recompensas Garantidas</h3><ul>`;
+        html += `</ul></div>`;
-    (d.recompensas || []).forEach(r => html += `<li>${escapeHtml(r)}</li>`);
-    html += `</ul>`;
-    // Possíveis (HTML já processado pelo Lua)
+        // Grid recompensas
-    html += `<h3>Possíveis Recompensas</h3>`;
+        html += `<div class="boss-content-grid-recompensas">`;
-    if (d.recompensasRenderizadas) {
-        // IMPORTANTE: Aqui NÃO usamos escapeHtml, pois queremos renderizar o HTML da Wiki
+        // Recompensas Garantidas
-        html += d.recompensasRenderizadas;
+        html += `<h3>Recompensas Garantidas</h3><ul>`;
-    } else {
+        (d.recompensas || []).forEach(r => html += `<li>${escapeHtml(r)}</li>`);
-        html += `<ul><li>Nenhuma recompensa possível</li></ul>`;
+        if (!(d.recompensas || []).length) html += `<li>Nenhuma recompensa garantida</li>`;
-    }
+        html += `</ul>`;
+        // Possíveis Recompensas (O HTML já vem pronto do Módulo Lua)
+        html += `<h3>Possíveis Recompensas</h3>`;
+        if (d.recompensasRenderizadas) {
+            // Inserimos o HTML direto (imagens e tooltips processados pela Wiki)
+            html += d.recompensasRenderizadas;
+        } else {
+            html += `<ul><li>Nenhuma recompensa possível</li></ul>`;
+        }
+        html += `</div></div>`;
+        content.innerHTML = html;
-    html += `</div></div>`;
-    content.innerHTML = html;
          // Atualiza botão ativo
          root.querySelectorAll('.boss-diff-btn').forEach(btn => {
-             const diffBtn = btn.dataset.diff;
+             btn.classList.toggle('active', btn.dataset.diff === diff);
-            if (diffBtn === diff) {
-                btn.classList.add('active');
-            } else {
-                btn.classList.remove('active');
-            }
          });
      }
@@ Linha 71: / Linha 73: @@
              if (root.dataset.initialized === 'true') return;
              root.dataset.initialized = 'true';
-            // Adiciona event listeners nos botões
              const buttons = root.querySelectorAll('.boss-diff-btn');
              buttons.forEach(btn => {
-                 btn.removeEventListener('click', handleClick);
+                 btn.addEventListener('click', (e) => {
-                btn.addEventListener('click', handleClick);
+                    const diff = e.currentTarget.dataset.diff;
+                    bossRender(root, diff);
+                });
              });
-             // Renderiza dificuldade normal
+             // Renderização inicial
              bossRender(root, 'normal');
          });
      }
-     function handleClick(e) {
+     // Inicialização padrão do MediaWiki
-        const btn = e.currentTarget;
-        const root = btn.closest('.boss-component');
-        const diff = btn.dataset.diff;
-        if (root && diff) {
-            bossRender(root, diff);
-        }
-    }
      if (document.readyState === 'loading') {
          document.addEventListener('DOMContentLoaded', init);
@@ Linha 102: / Linha 97: @@
          mw.hook('wikipage.content').add(init);
      }
-    async function processReward(itemString) {
-    const wikiText = `{{Reward|itens=${itemString};1}}`;
-    const apiUrl = `https://wiki.gla.com.br/api.php?action=parse&text=${encodeURIComponent(wikiText)}&format=json&origin=*`;
-    //expandtemplates
-    try {
-        const response = await fetch(apiUrl);
-        const data = await response.json();
-        return data.parse.text['*'].replace(/<p[^>]*>[\s\S]*?<\/p>/g, '');
-    } catch(e) {
-        console.error('Erro ao processar reward:', e);
-        return '';
-    }
-    }
 })();
 </script>