2026-04-09T23:33:58Z

Yawn:

local p = {}

function p.loadBossData(bossName)
-- Garante que a primeira letra seja maiúscula para o require
local normalizedName = bossName:gsub("^%l", string.upper)

local success, bossData = pcall(function()
return require("Módulo:" .. normalizedName .. "/data")
end)

if not success then
return nil
end

return bossData
end

function p.render(frame)
local bossName = frame.args.boss
if not bossName or bossName == "" then
return "<b>Erro:</b> Parâmetro 'boss' não especificado."
end

local bossData = p.loadBossData(bossName)
if not bossData then
return "<b>Erro:</b> Módulo de dados para '" .. bossName .. "' não encontrado."
end

-- Lista das chaves de dificuldade para iterar
local diffs = {"normal", "elite", "hard"}

for _, diffKey in ipairs(diffs) do
local diffData = bossData[diffKey]

if diffData and diffData.recompensasPossiveis then
-- 1. Transforma a lista de itens em string separada por ponto e vírgula
local itensStr = table.concat(diffData.recompensasPossiveis, ";")

-- 2. Monta o Wikitexto da predefinição Reward
local wikiText = "{{Reward|t|itens=" .. itensStr .. ";1}}"

-- 3. PROCESSAMENTO CRUCIAL:
-- Usamos o frame do módulo para expandir a predefinição em HTML real.
-- Adicionamos uma string vazia para garantir que o parser trate como conteúdo de bloco se necessário.
diffData.recompensasRenderizadas = frame:preprocess(wikiText)
end
end

-- Transforma a tabela bossData (agora com o HTML das recompensas) em JSON
local jsonData = mw.text.jsonEncode(bossData)

-- Escapa o JSON para que as aspas internas não fechem o atributo data-json="
local safeJson = mw.text.encode(jsonData)

-- Processa o Widget separadamente
local widgetHTML = frame:preprocess("{{#widget:TesteBossYawnv3}}")

-- RETORNO FINAL:
-- Montamos a string manualmente CONCATENANDO.
-- IMPORTANTE: Não use frame:preprocess() aqui no retorno final,
-- caso contrário o Parser da Wiki tentará ler o que está dentro do data-json e causará o erro da imagem.
return '<div class="boss-component" data-json="' .. safeJson .. '">' .. widgetHTML .. '</div>'
end

return p

Widget:TesteBossYawnv2

2026-04-09T23:31:37Z

Yawn:

<main class="boss-container-teste">
<h1 class="boss-titulo"></h1>
<div class="boss-diff-buttons">
<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>
</div>

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

<script>
(function() {
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 = `<div class="boss-content-grid">`;

// Requisitos
html += `<div class="boss-content-requisitos"><h3>Requisitos</h3><ul>`;
(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">`;

// Recompensas Garantidas
html += `<h3>Recompensas Garantidas</h3><ul>`;
(d.recompensas || []).forEach(r => html += `<li>${escapeHtml(r)}</li>`);
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;

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

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

2026-04-09T19:12:34Z

Yawn:

<main class = "boss-container-teste">
<h1 class = "boss-titulo"></h1>
<div class="boss-diff-buttons">
<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>
</div>

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

</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");

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);
html += `<li>${d.recompensasPossiveis }</li>`
} 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();
}

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

async function processReward(itemString) {
const wikiText = `{{Reward|t|itens=${itemString};1}}`;
const apiUrl = `https://wiki.gla.com.br/api.php?action=expandtemplates&text=${encodeURIComponent(wikiText)}&format=json&origin=*`;

try {
const response = await fetch(apiUrl);
const data = await response.json();
return data.expandtemplates['*'];
} 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>