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

De Wiki Gla
Ir para navegação Ir para pesquisar
(Criou página com ' <tabber class="boss-diff"> <button onclick="bossSetDiff(this,'normal')">NORMAL</button> <button onclick="bossSetDiff(this,'elite')">ELITE</button> <button onclick="boss...')
 
 
(15 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:


<tabber class="boss-diff">
<main class="boss-container-teste">
  <button onclick="bossSetDiff(this,'normal')">NORMAL</button>
    <h1 class="boss-titulo"></h1>
  <button onclick="bossSetDiff(this,'elite')">ELITE</button>
    <div class="boss-diff-buttons">
  <button onclick="bossSetDiff(this,'hard')">HARD</button>
        <button class="boss-diff-btn active" data-diff="normal">NORMAL</button>
</tabber>
        <button class="boss-diff-btn" data-diff="elite">ELITE</button>
        <button class="boss-diff-btn" data-diff="hard">HARD</button>
    </div>


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


<script>
<script>
(function() {
(function() {
  async function getImageUrlFromWiki(imageName) {
    function escapeHtml(str) {
    const apiUrl = `https://wiki.gla.com.br/api.php?action=query&titles=${encodeURIComponent(imageName)}&prop=imageinfo&iiprop=url&format=json&origin=*`;
         if (!str) return '';
   
         return str.replace(/[&<>]/g, m => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[m]));
    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) {
    function bossRender(root, diff) {
    const moduleStr = String(moduleName || "");
        try {
    if (!moduleStr) return "";
            const data = JSON.parse(root.dataset.json);
   
            const d = data[diff];
    const apiUrl = `https://wiki.gla.com.br/api.php?action=expandtemplates&text={{BossSkills|module=${encodeURIComponent(moduleStr)}|lang=pt}}&format=json&origin=*`;
            const content = root.querySelector(".boss-content");
   
           
    try {
            if (!content || !d) return;
        const response = await fetch(apiUrl);
 
        const data = await response.json();
            const titulo = root.querySelector(".boss-titulo");
        console.log("Dados recebidos:", data);
            if (data.nome && titulo) titulo.textContent = data.nome;
       
 
        if (data && data.expandtemplates && data.expandtemplates['*']) {
            let html = `<div class="boss-content-grid">`;
             let html = data.expandtemplates['*'];
 
             html = html.replace(/START_WIDGET[a-f0-9]+-?\d*END_WIDGET/g, '');
            // Requisitos
             console.log("HTML processado:", html.substring(0, 200));
            html += `<div class="boss-content-requisitos"><h3>Requisitos</h3><ul>`;
            return html;
            (d.requisitos || []).forEach(r => html += `<li>${escapeHtml(r)}</li>`);
            if (!(d.requisitos || []).length) html += `<li>Nenhum requisito</li>`;
            html += `</ul></div>`;
 
            // Grid recompensas
            html += `<div class="boss-content-grid-recompensas">`;
 
            // Garantidas
            html += `<h3>Recompensas Garantidas</h3><ul>`;
            let divOculta = root.querySelector(`.boss-html-recompensas[data-diff="${diff}"]`);
            if (divOculta) {
                html += divOculta.innerHTML; // Pega o HTML processado pela Wiki perfeitamente!
            } else {
                html += `<ul><li>Nenhuma recompensa possível</li></ul>`;
            }
 
            // Possíveis Recompensas
            html += `<h3>Possíveis Recompensas</h3>`;
           
            // Em vez de pegar do JSON, o JS "pesca" o HTML da div invisível
            divOculta = root.querySelector(`.boss-html-recompensas-possiveis[data-diff="${diff}"]`);
            if (divOculta) {
                html += divOculta.innerHTML; // Pega o HTML processado pela Wiki perfeitamente!
             } else {
                html += `<ul><li>Nenhuma recompensa possível</li></ul>`;
            }
 
             html += `</div></div>`;
            content.innerHTML = html;
 
            // Atualiza o CSS do botão clicado
            root.querySelectorAll('.boss-diff-btn').forEach(btn => {
                btn.classList.toggle('active', btn.dataset.diff === diff);
            });
           
        } catch (error) {
             console.error("Erro ao renderizar o Boss:", error);
         }
         }
        return "";
    } catch(e) {
        console.error('Erro ao carregar skills:', e);
        return '';
     }
     }
  }


  async function bossRender(root, diff) {
    function init() {
    const data = JSON.parse(root.dataset.json);
        document.querySelectorAll('.boss-component').forEach(root => {
    const d = data[diff];
            if (root.dataset.initialized === 'true') return;
    const content = root.querySelector(".boss-content");
            root.dataset.initialized = 'true';


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


    // Nome do boss
            // Inicia na aba normal
    if (data.nome) {
            bossRender(root, 'normal');
      console.log("Nome achado");
        });
      html += `<h2>${data.nome}</h2>`;
     }
     }


    // Introdução
     if (document.readyState === 'loading') {
     if (data.introducao) {
        document.addEventListener('DOMContentLoaded', init);
      html += `<p><em>${data.introducao}</em></p>`;
    } else {
        init();
     }
     }


    // Localização
     if (typeof mw !== 'undefined' && mw.hook) {
     if (data.localizacao && data.localizacao.caminho) {
        mw.hook('wikipage.content').add(init);
      html += `<h3>Localizaçãoooo</h3>`;
      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>`;
      }
     }
     }
})();
</script>
<style>
.boss-container-teste {
    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;
}


    // Requisitos
.boss-content h3:first-of-type {
    html += `<h3>Requisitos</h3><ul>`;
     margin-top: 0;
    console.log("Requisitos antes");
}
     if (d.requisitos && d.requisitos.length) {
      d.requisitos.forEach(r => html += `<li>${r}</li>`);
    }
    html += `</ul>`;
    console.log("Requisitos depois");


    // Recompensas
/* Grid */
     html += `<h3>Recompensas</h3><ul>`;
.boss-content-grid {
     if (d.recompensas && d.recompensas.length) {
    display: flex;
      d.recompensas.forEach(r => html += `<li>${r}</li>`);
     text-align: center;
     }
     justify-content: center;
     html += `</ul>`;
    justify-content: space-around;
     gap: 10px;
     width: 90%;
}


    // Skills via API
/* Requisitos */
    const skillModule = `Boss.${data.nome}`;
.boss-content-requisitos{
     console.log("Conectando com ", skillModule);
     background-color: #1f1f20;
    const skillsHTML = await loadSkills(skillModule);
     padding: 6px;
     console.log("skillsHTML recebido:", skillsHTML ? skillsHTML.substring(0, 100) : "vazio");
}
    if (skillsHTML) {
      html += skillsHTML;
    }


    content.innerHTML = html;
/* Recompensas */
  }


  function init() {
/* Listas */
    document.querySelectorAll(".boss-component").forEach(root => {
.boss-content ul {
      if (root.dataset.rendered === 'true') return;
    margin: 0;
      root.dataset.rendered = 'true';
    padding-left: 24px;
      bossRender(root, "normal");
     list-style-type: none;
     });
}
  }


  window.bossSetDiff = function(el, diff) {
.boss-content li {
     const root = el.closest(".boss-component");
     margin: 10px 0;
     bossRender(root, diff);
    color: #d0d0d0;
  };
    position: relative;
     padding-left: 20px;
}


  if (document.readyState === 'loading') {
.boss-content li::before {
     document.addEventListener('DOMContentLoaded', init);
     content: "▸";
  } else {
    color: #5488ad;
     init();
    position: absolute;
  }
     left: 0;
}


  if (typeof mw !== 'undefined' && mw.hook) {
/* Linha divisória entre seções */
     mw.hook('wikipage.content').add(init);
.boss-content hr {
  }
     border: none;
})();
    border-top: 1px solid #3a3a3c;
</script>
    margin: 20px 0;
}


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

Edição atual tal como às 00h51min de 10 de abril de 2026

<main class="boss-container-teste"> 

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

<script> (function() { 

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

   function bossRender(root, diff) {
       try {
           const data = JSON.parse(root.dataset.json);
           const d = data[diff];
           const content = root.querySelector(".boss-content");
           
           if (!content || !d) return;

           const titulo = root.querySelector(".boss-titulo");
           if (data.nome && titulo) titulo.textContent = data.nome;

let html = `

`; 
           // Requisitos
html += `

Requisitos

    `; (d.requisitos || []).forEach(r => html += `
  • ${escapeHtml(r)}
    • `); if (!(d.requisitos || []).length) html += `
  • Nenhum requisito
    • `; html += `
`; 
           // Grid recompensas
html += `
`; 
           // Garantidas
html += `

Recompensas Garantidas

    `; 
               let divOculta = root.querySelector(`.boss-html-recompensas[data-diff="${diff}"]`);
           if (divOculta) {
               html += divOculta.innerHTML; // Pega o HTML processado pela Wiki perfeitamente!
           } else {
    html += `
    • Nenhuma recompensa possível
    `; 
               }

               // Possíveis Recompensas
    html += `

    Possíveis Recompensas

    `; 
               // Em vez de pegar do JSON, o JS "pesca" o HTML da div invisível
           divOculta = root.querySelector(`.boss-html-recompensas-possiveis[data-diff="${diff}"]`);
           if (divOculta) {
               html += divOculta.innerHTML; // Pega o HTML processado pela Wiki perfeitamente!
           } else {
    html += `
    • Nenhuma recompensa possível
    `; 
               }
    html += `

`; 

           content.innerHTML = html;

           // Atualiza o CSS do botão clicado
           root.querySelectorAll('.boss-diff-btn').forEach(btn => {
               btn.classList.toggle('active', btn.dataset.diff === diff);
           });
           
       } catch (error) {
           console.error("Erro ao renderizar o Boss:", error);
       }
   }

   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);
               });
           });

           // Inicia na aba normal
           bossRender(root, 'normal');
       });
   }

   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-container-teste { 

   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;
   justify-content: space-around;
   gap: 10px;
   width: 90%;

}

/* 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>

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:TesteBossYawnv2&oldid=45929”