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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
m
Linha 33: Linha 33:
                 <span class="gla-conquistas-tab" data-tab="celular">Celular</span>
                 <span class="gla-conquistas-tab" data-tab="celular">Celular</span>
                 <span class="gla-conquistas-tab" data-tab="bossrush">Boss Rush</span>
                 <span class="gla-conquistas-tab" data-tab="bossrush">Boss Rush</span>
            </div>
            <div class="gla-conquistas-controls">
                <input type="text" class="gla-conquistas-search" placeholder="Buscar conquista...">
                <div class="gla-conquistas-filters" id="gla-filter-default">
                    <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="hidden">Oculta</span>
                </div>
                <div class="gla-conquistas-filters" id="gla-filter-coliseu" style="display:none">
                    <span class="gla-conquistas-filter is-active" data-filter="all">Todas</span>
                    <span class="gla-conquistas-filter" data-filter="onemany">One Man Army</span>
                    <span class="gla-conquistas-filter" data-filter="corrida">Corrida Colosseum</span>
                </div>
             </div>
             </div>
         </div>
         </div>
Linha 159: Linha 173:
         }
         }


         /* ITEM */
         /* ITEM — normal = acento azul */
         .gla-item {
         .gla-item {
            display: flex;
            flex-direction: column;
            border-radius: 12px;
            border: 2px solid #93c5fd;
            background: #f0f7ff;
        }
        .gla-item-main {
             display: flex;
             display: flex;
             align-items: center;
             align-items: center;
Linha 166: Linha 188:
             gap: 16px;
             gap: 16px;
             padding: 12px 14px;
             padding: 12px 14px;
             border-radius: 12px;
            min-height: 72px;
             border: 1px solid #e5e7eb;
        }
 
        /* SPOILER */
        .gla-item-spoiler {
            display: none;
            border-top: 1px solid #bfdbfe;
            padding: 14px 16px;
            gap: 16px;
            flex-direction: row;
            align-items: flex-start;
        }
 
        .gla-item.is-open .gla-item-spoiler {
            display: flex;
        }
 
        .gla-item.is-hidden .gla-item-spoiler,
        .gla-item[data-hidden="true"] .gla-item-spoiler {
            border-top-color: #e2e8f0;
        }
 
        .gla-item-spoiler-info {
            flex: 1;
            font-size: 13px;
            color: #475569;
            line-height: 1.6;
            min-width: 0;
        }
 
        .gla-item-spoiler-media {
            flex-shrink: 0;
            max-width: 400px;
        }
 
        .gla-item-spoiler-media img,
        .gla-item-spoiler-media video {
            max-width: 100%;
            border-radius: 8px;
            border: none !important;
        }
 
        /* Chevron indicador de expansão */
        .gla-item-chevron {
            font-size: 20px;
            color: #93c5fd;
            line-height: 1;
            flex-shrink: 0;
            display: inline-block;
            transition: transform .2s;
            user-select: none;
        }
 
        .gla-item.is-hidden .gla-item-chevron,
        .gla-item[data-hidden="true"] .gla-item-chevron {
            color: #cbd5e1;
        }
 
        .gla-item.has-spoiler {
            cursor: pointer;
        }
 
        .gla-item.has-spoiler.is-open .gla-item-chevron {
            transform: rotate(90deg);
        }
 
        /* CONTROLES — busca + filtros */
        .gla-conquistas-controls {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 14px;
        }
 
        .gla-conquistas-search {
            flex: 1;
            min-width: 180px;
            padding: 7px 14px;
            border: 1px solid #cbd5e1;
            border-radius: 999px;
            font-size: 13px;
            outline: none;
            color: #0f172a;
            background: #f8fafc;
            font-family: inherit;
        }
 
        .gla-conquistas-search:focus {
            border-color: #93c5fd;
            background: #fff;
        }
 
        .gla-conquistas-filters {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
 
        .gla-conquistas-filter {
            display: inline-block;
            padding: 6px 13px;
             border-radius: 999px;
             border: 1px solid #cbd5e1;
             background: #f8fafc;
             background: #f8fafc;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            color: #0f172a;
         }
         }


         /* OCULTAS — borda + acento em vermelho */
        .gla-conquistas-filter:hover {
            background: #e2e8f0;
        }
 
        .gla-conquistas-filter.is-active {
            background: #3b82f6;
            color: #fff;
            border-color: #3b82f6;
        }
 
         /* OCULTAS — acento cinza */
         .gla-item.is-hidden,
         .gla-item.is-hidden,
         .gla-item[data-hidden="true"] {
         .gla-item[data-hidden="true"] {
             border-color: #fecaca;
             border-color: #cbd5e1;
             background: #fef2f2;
             background: #f8fafc;
         }
         }


         .gla-item.is-hidden .gla-item-title,
         .gla-item.is-hidden .gla-item-title,
         .gla-item[data-hidden="true"] .gla-item-title {
         .gla-item[data-hidden="true"] .gla-item-title {
             color: #b91c1c;
             color: #475569;
         }
         }


         .gla-item.is-hidden .gla-item-desc,
         .gla-item.is-hidden .gla-item-desc,
         .gla-item[data-hidden="true"] .gla-item-desc {
         .gla-item[data-hidden="true"] .gla-item-desc {
             color: #991b1b;
             color: #94a3b8;
         }
         }


Linha 193: Linha 331:
             align-items: center;
             align-items: center;
             gap: 12px;
             gap: 12px;
            flex: 1;
            min-width: 0;
         }
         }


Linha 220: Linha 360:
             font-weight: 700;
             font-weight: 700;
             font-size: 15px;
             font-size: 15px;
             color: #0f172a;
             color: #1d4ed8;
         }
         }


Linha 229: Linha 369:
         }
         }


         /* RECOMPENSA */
         /* RECOMPENSA — bloco vertical de largura fixa, label centrado em cima */
         .gla-item-reward {
         .gla-item-reward {
             font-size: 13px;
             flex-shrink: 0;
             color: #2563eb;
             width: 224px;
            font-weight: 600;
             display: flex;
             display: flex;
            flex-direction: column;
             align-items: center;
             align-items: center;
             gap: 6px;
             gap: 6px;
            padding: 0 14px;
        }
        .gla-item-reward-label {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .05em;
            text-transform: uppercase;
            white-space: nowrap;
            text-align: center;
            width: 100%;
            color: #3b82f6;
        }
        .gla-item.is-hidden .gla-item-reward-label,
        .gla-item[data-hidden="true"] .gla-item-reward-label {
            color: #94a3b8;
         }
         }


         .gla-item-reward .reward-wrapper {
         .gla-item-reward .reward-wrapper {
             display: inline-flex;
            width: 100%;
             align-items: center;
             display: block;
        }
 
        /* override do .reward-items do Widget:Item — linha única, sem quebra */
        .gla-item-reward .reward-items {
            display: flex !important;
             flex-wrap: nowrap !important;
            justify-content: center;
            gap: 4px;
            width: 100%;
         }
         }
     </style>
     </style>
Linha 250: Linha 416:
             if (!root) return;
             if (!root) return;


            // Aviso amigável se Widget:Item não foi incluído na página.
            // Sem ele, .reward-wrapper/.item-wrapper/.item-tooltip ficam sem CSS.
            if (!document.querySelector(".item-wrapper") === false) {
                // (presença ainda nem renderizou, deixamos passar — só checa no fim)
            }
             setTimeout(function () {
             setTimeout(function () {
                var hasItemCss = false;
                 var probe = document.querySelector(".item-wrapper");
                 var probe = document.querySelector(".item-wrapper");
                 if (probe) {
                 if (probe) {
                     var cs = window.getComputedStyle(probe);
                     var cs = window.getComputedStyle(probe);
                     if (cs && cs.position === "relative") hasItemCss = true;
                     if (cs && cs.position !== "relative" && console && console.warn) {
                }
                        console.warn("[Widget:Conquistas] Widget:Item não detectado. Adicione {{#widget:Item}} antes de {{#widget:Conquistas}}.");
                if (!hasItemCss && console && console.warn) {
                    }
                    console.warn("[Widget:Conquistas] Widget:Item não detectado na página. " +
                        "Adicione {{#widget:Item}} antes de {{#widget:Conquistas}} para ativar " +
                        "estilos e tooltip dos rewards.");
                 }
                 }
             }, 200);
             }, 200);
Linha 272: Linha 429:
             var panels = root.querySelectorAll(".gla-conquistas-panel");
             var panels = root.querySelectorAll(".gla-conquistas-panel");


            // Mapa data-tab-content -> .gla-list pra evitar querySelectorAll N vezes
             var validTabs = {};
             var validTabs = {};
             panels.forEach(function (p) {
             panels.forEach(function (p) {
                 var name = p.getAttribute("data-tab-content");
                 var name = p.getAttribute("data-tab-content");
                 if (name) {
                 if (name) validTabs[name] = p.querySelector(".gla-list");
                    validTabs[name] = p.querySelector(".gla-list");
                }
             });
             });


             // Pega TODOS os cards .gla-item[data-tab] do documento (vêm do
             // Move cards do invoke source para os painéis corretos
            // {{#invoke:Conquistas|renderAll}} que fica fora do widget) e
            // move pra dentro do painel correspondente.
             document.querySelectorAll(".gla-item[data-tab]").forEach(function (card) {
             document.querySelectorAll(".gla-item[data-tab]").forEach(function (card) {
                 if (root.contains(card)) return; // já está dentro
                 if (root.contains(card)) return;
                 var tag = (card.getAttribute("data-tab") || "").toLowerCase();
                 var tag = (card.getAttribute("data-tab") || "").toLowerCase();
                 var list = validTabs[tag] || validTabs["geral"];
                 var list = validTabs[tag] || validTabs["geral"];
Linha 291: Linha 443:
             });
             });


            // Limpa o container origem agora vazio (deixado pelo invoke).
             document.querySelectorAll(".gla-conquistas-source").forEach(function (src) {
             document.querySelectorAll(".gla-conquistas-source").forEach(function (src) {
                 if (src.parentNode) src.parentNode.removeChild(src);
                 if (src.parentNode) src.parentNode.removeChild(src);
            });
            // Estado global
            var currentSearch = "";
            var currentFilter = "all";
            var currentTab = "geral";
            var searchTimeout = null;
            var filterDefault = root.querySelector("#gla-filter-default");
            var filterColiseu = root.querySelector("#gla-filter-coliseu");
            var searchInput = root.querySelector(".gla-conquistas-search");
            function applyVisibility() {
                var panel = root.querySelector('.gla-conquistas-panel[data-tab-content="' + currentTab + '"]');
                if (!panel) return;
                var search = currentSearch.toLowerCase();
                panel.querySelectorAll(".gla-item").forEach(function (card) {
                    var titleEl = card.querySelector(".gla-item-title");
                    var descEl = card.querySelector(".gla-item-desc");
                    var titleText = titleEl ? titleEl.textContent : "";
                    var descText = descEl ? descEl.textContent : "";
                    var matchSearch = !search ||
                        titleText.toLowerCase().indexOf(search) >= 0 ||
                        descText.toLowerCase().indexOf(search) >= 0;
                    var hidden = card.getAttribute("data-hidden") === "true";
                    var subtype = (card.getAttribute("data-subtype") || "").toLowerCase();
                    var matchFilter = true;
                    if (currentFilter === "normal") matchFilter = !hidden;
                    else if (currentFilter === "hidden") matchFilter = hidden;
                    else if (currentFilter === "onemany") matchFilter = subtype === "onemany";
                    else if (currentFilter === "corrida") matchFilter = subtype === "corrida";
                    card.style.display = (matchSearch && matchFilter) ? "" : "none";
                });
            }
            // Busca com debounce
            if (searchInput) {
                searchInput.addEventListener("input", function () {
                    clearTimeout(searchTimeout);
                    searchTimeout = setTimeout(function () {
                        currentSearch = searchInput.value.trim();
                        applyVisibility();
                    }, 240);
                });
            }
            // Filtros (normal / oculta / subtype)
            root.querySelectorAll(".gla-conquistas-filter").forEach(function (pill) {
                pill.addEventListener("click", function () {
                    pill.parentNode.querySelectorAll(".gla-conquistas-filter").forEach(function (p) {
                        p.classList.remove("is-active");
                    });
                    pill.classList.add("is-active");
                    currentFilter = pill.getAttribute("data-filter");
                    applyVisibility();
                });
            });
            // Spoiler — abre/fecha ao clicar no card
            root.addEventListener("click", function (e) {
                var card = e.target.closest(".gla-item.has-spoiler");
                if (!card) return;
                if (e.target.closest(".gla-item-spoiler")) return;
                if (e.target.closest(".item-wrapper")) return;
                var isOpen = card.classList.contains("is-open");
                root.querySelectorAll(".gla-item.is-open").forEach(function (c) {
                    c.classList.remove("is-open");
                });
                if (!isOpen) card.classList.add("is-open");
             });
             });


             function abrirAba(nome) {
             function abrirAba(nome) {
                 tabs.forEach(function (t) {
                 currentTab = nome;
                     t.classList.remove("is-active");
                currentFilter = "all";
 
                // Troca entre filtros padrão e filtros do Coliseu
                if (filterDefault) filterDefault.style.display = nome === "coliseu" ? "none" : "";
                if (filterColiseu) filterColiseu.style.display = nome === "coliseu" ? "" : "none";
 
                // Reseta pill ativa para "Todas"
                root.querySelectorAll(".gla-conquistas-filter").forEach(function (p) {
                     p.classList.toggle("is-active", p.getAttribute("data-filter") === "all");
                 });
                 });


                 panels.forEach(function (p) {
                tabs.forEach(function (t) { t.classList.remove("is-active"); });
                    p.classList.remove("is-active");
                 panels.forEach(function (p) { p.classList.remove("is-active"); });
                });


                 var tab = root.querySelector('.gla-conquistas-tab[data-tab="' + nome + '"]');
                 var tab = root.querySelector('.gla-conquistas-tab[data-tab="' + nome + '"]');
                 var panel = root.querySelector('.gla-conquistas-panel[data-tab-content="' + nome + '"]');
                 var panel = root.querySelector('.gla-conquistas-panel[data-tab-content="' + nome + '"]');
                 if (tab) tab.classList.add("is-active");
                 if (tab) tab.classList.add("is-active");
                 if (panel) panel.classList.add("is-active");
                 if (panel) panel.classList.add("is-active");
                applyVisibility();
             }
             }


Edição das 19h11min de 18 de maio de 2026

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