Mudanças entre as edições de "Widget:Conquistas"
Ir para navegação
Ir para pesquisar
m |
m |
||
| (Uma revisão intermediária pelo mesmo usuário não está sendo mostrada) | |||
| Linha 61: | Linha 61: | ||
<span class="gla-conquistas-filter is-active" data-filter="all">Todas</span> | <span class="gla-conquistas-filter is-active" data-filter="all">Todas</span> | ||
<span class="gla-conquistas-filter" data-filter="normal">Normal</span> | <span class="gla-conquistas-filter" data-filter="normal">Normal</span> | ||
<span class="gla-conquistas-filter" data-filter="hidden"> | <span class="gla-conquistas-filter" data-filter="hidden">Secreta</span> | ||
</div> | </div> | ||
<div class="gla-conquistas-filters" id="gla-filter-coliseu" style="display:none"> | <div class="gla-conquistas-filters" id="gla-filter-coliseu" style="display:none"> | ||
| Linha 275: | Linha 275: | ||
} | } | ||
/* Cresce no espaço livre até max-width; os filtros ficam encostados à | |||
direita dela em vez de no fim da linha. */ | |||
.gla-conquistas-search { | .gla-conquistas-search { | ||
flex: 1 1 auto; | flex: 1 1 auto; | ||
min-width: 160px; | min-width: 160px; | ||
max-width: 360px; | |||
padding: 8px 16px; | padding: 8px 16px; | ||
border: 1px solid var(--gla-rule); | border: 1px solid var(--gla-rule); | ||
| Linha 299: | Linha 302: | ||
/* ─── Filtros ────────────────────────────────────────────────────────── */ | /* ─── Filtros ────────────────────────────────────────────────────────── */ | ||
/* Encostados na search via gap natural do .gla-conquistas-controls. */ | |||
.gla-conquistas-filters { | .gla-conquistas-filters { | ||
display: flex; | display: flex; | ||
| Linha 688: | Linha 692: | ||
} | } | ||
.gla-item[data-hidden="true"] .gla-item-main, | |||
.gla-item[data-hidden="true"] .gla-item-title, | .gla-item[data-hidden="true"] .gla-item-title, | ||
.gla-item[data-hidden="true"] .gla-item-desc { | .gla-item[data-hidden="true"] .gla-item-desc { | ||
| Linha 693: | Linha 698: | ||
} | } | ||
/* — BLUR | /* — BLUR | ||
Aplicado no .gla-item-main (pai que envolve icon + title + desc + | |||
.gla-conquistas-root[data-reveal-mode="blur"] .gla-item[data-hidden="true"]:not(.is-revealed) .gla-item- | reward + spoiler-toggle) — borra TUDO de uma vez. Antes só borrava | ||
título e descrição, mas o ícone da conquista também entregava a | |||
secreta. O ribbon "SECRETA" tá no ::before do .gla-item (fora do | |||
main), então continua nítido. */ | |||
.gla-conquistas-root[data-reveal-mode="blur"] .gla-item[data-hidden="true"]:not(.is-revealed) .gla-item-main { | |||
filter: blur(5px); | filter: blur(5px); | ||
user-select: none; | user-select: none; | ||
} | } | ||
| Linha 1 273: | Linha 1 277: | ||
}); | }); | ||
// Reveal | // ─── Reveal + persistência ──────────────────────────────────────── | ||
// Só ativa se data-reveal-mode no root | // Click no card hidden remove a censura (anti-spoiler) e o estado | ||
// blur/redacted/placeholder/veil. Ignora | // é salvo no localStorage. Próxima visita à página, conquistas que | ||
// dentro do card (botão de spoiler, ícones de reward com tooltip, | // o jogador já revelou voltam reveladas — não precisa clicar de novo. | ||
// | |||
// Chave: "glaConquistasRevealed" → JSON com array de data-id. | |||
// Robusto a localStorage indisponível (modo privado, cookies | |||
// bloqueados) — só falha silenciosamente. | |||
var REVEAL_STORAGE_KEY = "glaConquistasRevealed"; | |||
function loadRevealed() { | |||
try { | |||
var raw = window.localStorage.getItem(REVEAL_STORAGE_KEY); | |||
if (!raw) return {}; | |||
var arr = JSON.parse(raw); | |||
if (!Array.isArray(arr)) return {}; | |||
var set = {}; | |||
for (var i = 0; i < arr.length; i++) { | |||
if (arr[i] != null) set[String(arr[i])] = true; | |||
} | |||
return set; | |||
} catch (e) { | |||
return {}; | |||
} | |||
} | |||
function saveRevealed(set) { | |||
try { | |||
var arr = Object.keys(set); | |||
window.localStorage.setItem(REVEAL_STORAGE_KEY, JSON.stringify(arr)); | |||
} catch (e) { /* localStorage indisponível — ok */ } | |||
} | |||
var revealedSet = loadRevealed(); | |||
// Re-aplica .is-revealed nos cards que já tavam revelados em | |||
// sessões anteriores. Roda agora (depois do JS já ter movido os | |||
// cards do source pros painéis). | |||
root.querySelectorAll('.gla-item[data-hidden="true"][data-id]').forEach(function (card) { | |||
if (revealedSet[card.getAttribute("data-id")]) { | |||
card.classList.add("is-revealed"); | |||
} | |||
}); | |||
// Click — revela e persiste. Só ativa se data-reveal-mode no root | |||
// estiver definido como blur/redacted/placeholder/veil. Ignora | |||
// clicks em interativos dentro do card (botão de spoiler, ícones | |||
// de reward com tooltip, links na descrição, chip "+N" de overflow). | |||
root.addEventListener("click", function (e) { | root.addEventListener("click", function (e) { | ||
var mode = root.getAttribute("data-reveal-mode") || "none"; | var mode = root.getAttribute("data-reveal-mode") || "none"; | ||
| Linha 1 286: | Linha 1 333: | ||
if (e.target.closest(".gla-item-spoiler-toggle, .item-wrapper, a, .reward-more-chip, .reward-overflow-popover")) return; | if (e.target.closest(".gla-item-spoiler-toggle, .item-wrapper, a, .reward-more-chip, .reward-overflow-popover")) return; | ||
card.classList.add("is-revealed"); | card.classList.add("is-revealed"); | ||
var id = card.getAttribute("data-id"); | |||
if (id) { | |||
revealedSet[id] = true; | |||
saveRevealed(revealedSet); | |||
} | |||
}); | }); | ||