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

De Wiki Gla
Ir para navegação Ir para pesquisar
 
(39 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<main class = "boss-container-teste">
<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>
Linha 7: Linha 10:
<div class="boss-content"></div>
<div class="boss-content"></div>


</main>
<script>
<script>
console.log("Widget carregado - versão simples");
(function() {
    function escapeHtml(str) {
        if (!str) return '';
        return str.replace(/[&<>]/g, function(m) {
            if (m === '&') return '&amp;';
            if (m === '<') return '&lt;';
            if (m === '>') return '&gt;';
            return m;
        });
    }
 
    async function bossRender(root, diff) {
        const data = JSON.parse(root.dataset.json);
        const d = data[diff];
        const content = root.querySelector(".boss-content");
        console.log(d.recompensasHTML);
 
        if (!content) return;
       
        let html = '';
 
        // Nome do boss
        if (data.nome) {
            titulo = root.querySelector(".boss-titulo")
            titulo.innerHTML = escapeHtml(data.nome);
        }
 
        // Introdução
        //if (data.introducao) {
        //    html += `<p><em>${escapeHtml(data.introducao)}</em></p>`;
        //}
 
        /* Localização
        if (data.localizacao) {
            html += `<h3>Localização</h3>`;
            html += `<p>${escapeHtml(data.localizacao.descricao)}</p>`;
        }*/
       
        //Grid de requisitos e recompensas
        html += `<div class = "boss-content-grid">`
 
        // Requisitos
        html += `<div class = "boss-content-requisitos"><h3>Requisitos</h3><ul>`;
        if (d.requisitos && d.requisitos.length) {
            d.requisitos.forEach(r => html += `<li>${escapeHtml(r)}</li>`);
        } else {
            html += `<li>Nenhum requisito</li>`;
        }
        html += `</ul></div>`;
       
        //Grid recompensas
        html += `<div class = "boss-content-grid-recompensas">`
 
        // Recompensas Garantidas
        html += `<h3>Recompensas Garantidas</h3><ul>`;
        if (d.recompensas && d.recompensas.length) {
            d.recompensas.forEach(r => html += `<li>${escapeHtml(r)}</li>`);
        } else {
            html += `<li>Nenhuma recompensa garantida</li>`;
        }
        html += `</ul>`;
 
        // Possíveis Recompensas
        html += `<h3>Possíveis Recompensas</h3><ul>`;
        if (d.recompensasPossiveis && d.recompensasPossiveis.length) {
            html += await processReward(d.recompensasPossiveis);
        } else {
            html += `<li>Nenhuma recompensa possível</li>`;
        }
        html += `</ul>`;
        html += `</div>`;
 
        //Fim da grid
        html += `</div>`;
 
        content.innerHTML = html;
       
        // Atualiza botão ativo
        root.querySelectorAll('.boss-diff-btn').forEach(btn => {
            const diffBtn = btn.dataset.diff;
            if (diffBtn === diff) {
                btn.classList.add('active');
            } else {
                btn.classList.remove('active');
            }
        });
    }
 
    function init() {
        document.querySelectorAll('.boss-component').forEach(root => {
            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', handleClick);
            });
           
            // Renderiza dificuldade normal
            bossRender(root, 'normal');
        });
    }
 
    function handleClick(e) {
        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);
    } else {
        init();
    }


function bossRender(root, diff) {
    if (typeof mw !== 'undefined' && mw.hook) {
    console.log("bossRender chamado para:", diff);
        mw.hook('wikipage.content').add(init);
    }
      
      
     let data;
     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 {
     try {
         data = JSON.parse(root.dataset.json);
         const response = await fetch(apiUrl);
         console.log("JSON parseado:", data);
         const data = await response.json();
         console.log("Keys do objeto:", Object.keys(data));
         return data.parse.text['*'].replace(/<p[^>]*>[\s\S]*?<\/p>/g, '');
     } catch(e) {
     } catch(e) {
         console.error("Erro no JSON:", e);
         console.error('Erro ao processar reward:', e);
         console.log("JSON bruto:", root.dataset.json);
         return '';
         return;
    }
    }
 
})();
</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;
    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;
     }
     }
      
      
     const d = data[diff];
     .boss-diff-btn {
    console.log("Dificuldade selecionada:", diff);
        padding: 8px 20px;
     console.log("Conteúdo da dificuldade:", d);
        font-size: 12px;
     }
      
      
     const content = root.querySelector(".boss-content");
     .boss-content {
     if (!content) return;
        padding: 20px;
     }
      
      
     if (!d) {
     .boss-content h2 {
         content.innerHTML = `<div style="color:red; padding:20px;">
         font-size: 24px;
            <h3>Erro: Dificuldade "${diff}" não encontrada</h3>
            <p>Keys disponíveis: ${Object.keys(data).join(', ')}</p>
            <p>JSON completo: <pre>${JSON.stringify(data, null, 2)}</pre></p>
        </div>`;
        return;
     }
     }
      
      
     let html = `<h2>${data.nome || 'Sem nome'}</h2>`;
     .boss-content h3 {
    html += `<h3>Requisitos</h3><ul>`;
         font-size: 14px;
    if (d.requisitos) {
         d.requisitos.forEach(r => html += `<li>${r}</li>`);
     }
     }
    html += `</ul>`;
   
    content.innerHTML = html;
}
}
 
</style>
function init() {
    console.log("init chamado, procurando .boss-component...");
    const components = document.querySelectorAll('.boss-component');
    console.log("Encontrados:", components.length);
   
    components.forEach(root => {
        console.log("Inicializando componente:", root);
        if (root.dataset.initialized === 'true') return;
        root.dataset.initialized = 'true';
       
        const buttons = root.querySelectorAll('.boss-diff-btn');
        buttons.forEach(btn => {
            btn.onclick = function() {
                bossRender(root, this.dataset.diff);
            };
        });
       
        bossRender(root, 'normal');
    });
}
 
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
} else {
    init();
}
</script>

Edição atual tal como às 23h00min de 9 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, function(m) {
           if (m === '&') return '&';
           if (m === '<') return '<';
           if (m === '>') return '>';
           return m;
       });
   }

   async function bossRender(root, diff) {
       const data = JSON.parse(root.dataset.json);
       const d = data[diff];
       const content = root.querySelector(".boss-content");
       console.log(d.recompensasHTML);

       if (!content) return;
       
       let html = ;

       // Nome do boss
       if (data.nome) {
           titulo = root.querySelector(".boss-titulo")
           titulo.innerHTML = escapeHtml(data.nome);
       }

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

// html += `

${escapeHtml(data.introducao)}

`; 

       //}

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

html += `

Localização

`; html += `

${escapeHtml(data.localizacao.descricao)}

`; 

       }*/
       
       //Grid de requisitos e recompensas

html += `

` 
       // Requisitos
html += `

Requisitos

    `; 
           if (d.requisitos && d.requisitos.length) {
    d.requisitos.forEach(r => html += `
  • ${escapeHtml(r)}
    • `); } else { html += `
  • Nenhum requisito
    • `; } html += `
`; 
       //Grid recompensas
html += `
` 
       // Recompensas Garantidas
html += `

Recompensas Garantidas

    `; 
           if (d.recompensas && d.recompensas.length) {
    d.recompensas.forEach(r => html += `
  • ${escapeHtml(r)}
    • `); } else { html += `
  • Nenhuma recompensa garantida
    • `; } html += `
`; 
       // Possíveis Recompensas
html += `

Possíveis Recompensas

    `; 
           if (d.recompensasPossiveis && d.recompensasPossiveis.length) {
           html += await processReward(d.recompensasPossiveis);
       } else {
    html += `
  • Nenhuma recompensa possível
    • `; } html += `
`; html += `
`; 
       //Fim da grid
html += `

`; 

       content.innerHTML = html;
       
       // Atualiza botão ativo
       root.querySelectorAll('.boss-diff-btn').forEach(btn => {
           const diffBtn = btn.dataset.diff;
           if (diffBtn === diff) {
               btn.classList.add('active');
           } else {
               btn.classList.remove('active');
           }
       });
   }

   function init() {
       document.querySelectorAll('.boss-component').forEach(root => {
           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', handleClick);
           });
           
           // Renderiza dificuldade normal
           bossRender(root, 'normal');
       });
   }

   function handleClick(e) {
       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);
   } else {
       init();
   }

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

const wikiText = `

[[Arquivo:${itemString}.png|32x32px|link=]]x1
${itemString}

`; 

   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>

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

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