Spotligh:mapas: mudanças entre as edições
Ir para navegação
Ir para pesquisar
Sem resumo de edição Etiquetas: Reversão manual Revertido |
Sem resumo de edição |
||
| (19 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) | |||
| Linha 1: | Linha 1: | ||
{{DISPLAYTITLE:<span style="display:none">{{PAGENAME}}</span>}} | |||
__TOC__ | |||
<html> | <html> | ||
<style> | <style> | ||
:root{--bg:#0b1020;--panel:#121a2d;--panel2:#182238;--text:#edf2ff;--muted:#98a7c3;--accent:#79a7ff;--green:#62d49b;--border:#27344f} | :root{--bg:#0b1020;--panel:#121a2d;--panel2:#182238;--text:#edf2ff;--muted:#98a7c3;--accent:#79a7ff;--green:#62d49b;--border:#27344f} | ||
.guia-up *{box-sizing:border-box} | .guia-up *{box-sizing:border-box} | ||
.guia-up{background:linear-gradient(180deg,#080d19,#0e1527);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;padding:20px;border-radius:12px;margin:10px 0} | .guia-up{background:linear-gradient(180deg,#080d19,#0e1527);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;padding:20px;border-radius:12px;margin:10px 0;position:relative} | ||
.guia-up h1{margin:0;font-size:28px;color:#edf2ff} | .guia-up h1{margin:0;font-size:28px;color:#edf2ff} | ||
.guia-up .sub{color:var(--muted);margin:8px 0 20px;font-size:14px} | .guia-up .sub{color:var(--muted);margin:8px 0 20px;font-size:14px} | ||
| Linha 19: | Linha 21: | ||
.guia-up .tablebox{overflow:auto;border:1px solid var(--border);border-radius:14px;background:var(--panel)} | .guia-up .tablebox{overflow:auto;border:1px solid var(--border);border-radius:14px;background:var(--panel)} | ||
.guia-up table{width:100%;border-collapse:collapse;min-width:800px} | .guia-up table{width:100%;border-collapse:collapse;min-width:800px} | ||
.guia-up th{position:sticky;top:0;background:#17213a;color:#b9c7df;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding:13px} | .guia-up th{position:sticky;top:0;background:#17213a;color:#b9c7df;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding:13px;cursor:pointer;user-select:none;white-space:nowrap} | ||
.guia-up th:hover{color:#edf2ff} | |||
.guia-up th .sort-arrow{margin-left:6px;font-size:11px;opacity:.45} | |||
.guia-up th.sorted .sort-arrow{opacity:1;color:var(--accent)} | |||
.guia-up td{padding:12px 13px;border-top:1px solid var(--border);color:#edf2ff} | .guia-up td{padding:12px 13px;border-top:1px solid var(--border);color:#edf2ff} | ||
.guia-up tr:hover td{background:#162038} | .guia-up tr:hover td{background:#162038} | ||
| Linha 26: | Linha 31: | ||
.guia-up .max{font-weight:700} | .guia-up .max{font-weight:700} | ||
.guia-up .rec{font-weight:800;color:var(--green)} | .guia-up .rec{font-weight:800;color:var(--green)} | ||
.guia-up .map-name{cursor:pointer;color:#a9c7ff;border-bottom:1px dashed #5a7ab0;transition:color .15s} | |||
.guia-up .map-name:hover{color:#79a7ff} | |||
.guia-up footer{color:var(--muted);font-size:12px;margin-top:14px;line-height:1.5} | .guia-up footer{color:var(--muted);font-size:12px;margin-top:14px;line-height:1.5} | ||
.guia-tooltip{ | |||
display:none;position:fixed;z-index:9999;background:#0f1729;border:1px solid #2c3b5c; | |||
border-radius:12px;padding:14px 16px;max-width:340px;box-shadow:0 12px 40px rgba(0,0,0,.55); | |||
font-size:13px;line-height:1.55;pointer-events:none; | |||
} | |||
.guia-tooltip.visible{display:block;pointer-events:auto} | |||
.guia-tooltip .tt-title{font-weight:700;color:#79a7ff;margin-bottom:8px;font-size:14px} | |||
.guia-tooltip .tt-list{margin:0;padding:0;list-style:none} | |||
.guia-tooltip .tt-list li{padding:3px 0;color:#d0daf0} | |||
.guia-tooltip .tt-list li span{color:#62d49b;font-weight:600} | |||
.guia-tooltip .tt-mvp{color:#ff9f43 !important} | |||
.guia-tooltip .tt-close{position:absolute;top:8px;right:10px;cursor:pointer;color:#98a7c3;font-size:16px} | |||
.guia-tooltip .tt-close:hover{color:#fff} | |||
@media(max-width:650px){.guia-up .cards{grid-template-columns:1fr}} | @media(max-width:650px){.guia-up .cards{grid-template-columns:1fr}} | ||
</style> | </style> | ||
<div class="guia-up"> | <div class="guia-up"> | ||
<h1> | <h1>Mapas Spotlight</h1> | ||
<p class="sub"> | <p class="sub">Mín/Máx = nível do monstro mais comum ±10. Recomendado = nível − 5. Passe o mouse no <b>nome do mapa</b> para ver os monstros. Clique para abrir no Divine Pride.</p> | ||
<div class="cards"> | <div class="cards"> | ||
<div class="card"><b id="total-maps">0</b><span>mapas nesta lista</span></div> | <div class="card"><b id="total-maps">0</b><span>mapas nesta lista</span></div> | ||
<div class="card"><b>1 → | <div class="card"><b>1 → 178</b><span>faixa total de níveis</span></div> | ||
<div class="card"><b> | <div class="card"><b>Principal − 5</b><span>regra do nível recomendado</span></div> | ||
</div> | </div> | ||
<div class="tools"> | <div class="tools"> | ||
<input id="search" placeholder="Buscar por código ou nome do mapa..." oninput="filterRows()"> | <input id="search" placeholder="Buscar por código ou nome do mapa..." oninput="filterRows()"> | ||
| Linha 61: | Linha 78: | ||
<button class="btn-clear" onclick="clearFilters()">Limpar</button> | <button class="btn-clear" onclick="clearFilters()">Limpar</button> | ||
</div> | </div> | ||
<div class="info-bar"> | <div class="info-bar"> | ||
<span>Mostrando <b id="result-count">0</b> mapas</span> | <span>Mostrando <b id="result-count">0</b> mapas</span> | ||
<span> | <span>Hover: monstros · Clique: Divine Pride · Clique no cabeçalho para ordenar</span> | ||
</div> | </div> | ||
<div class="tablebox"> | <div class="tablebox"> | ||
<table> | <table> | ||
| Linha 72: | Linha 87: | ||
<tr> | <tr> | ||
<th>#</th> | <th>#</th> | ||
<th>Mapa</th> | <th data-col="0" onclick="sortBy(0)">Mapa <span class="sort-arrow">▲</span></th> | ||
<th>Nome</th> | <th data-col="1" onclick="sortBy(1)">Nome <span class="sort-arrow">▲</span></th> | ||
<th class="num">Mín.</th> | <th class="num" data-col="2" onclick="sortBy(2)">Mín. <span class="sort-arrow">▲</span></th> | ||
<th class="num">Máx.</th> | <th class="num" data-col="3" onclick="sortBy(3)">Máx. <span class="sort-arrow">▲</span></th> | ||
<th class="num">Recomendado</th> | <th class="num" data-col="4" onclick="sortBy(4)">Recomendado <span class="sort-arrow">▲</span></th> | ||
</tr> | </tr> | ||
</thead> | </thead> | ||
| Linha 82: | Linha 97: | ||
</table> | </table> | ||
</div> | </div> | ||
<footer>Mínimo e máximo usam o monstro com mais spawns no mapa (±10). O recomendado é 5 níveis abaixo desse monstro.</footer> | |||
<footer>O | </div> | ||
< | <div class="guia-tooltip" id="tooltip"> | ||
<div class="tt-close" onclick="hideTooltip()">×</div> | |||
<div class="tt-title" id="tt-title"></div> | |||
<ul class="tt-list" id="tt-list"></ul> | |||
</div> | </div> | ||
<script> | <script> | ||
const monsters = { | |||
"abbey02":[["Zombie Slaughter",124],["Ragged Zombie",123],["Flame Skull",121],["Necromancer",133],["Falling Bishop",138,"MVP"]], | |||
"abyss_03":[["Acidus",130],["Mimic",56],["Ancient Mimic",112],["Dragon Egg",119],["Ferus",126],["Hydrolancer",121],["Detardeurus",135,"MVP"]], | |||
"ama_dun03":[["Shinobi",95],["Tengu",98],["Firelock Soldier",88],["The Paper",97],["Mimic",56],["Miyabi Doll",85],["Samurai Specter",100,"MVP"]], | |||
"ayo_dun01":[["Leaf Cat",64],["Ghoul",61],["Whisper",46],["Kraben",70]], | |||
"c_tower2":[["Clock",81],["Punk",82],["Rideword",74],["Mimic",56], | |||
const lists = { | const lists = { | ||
"Spotlight Solar": solar, | "Spotlight Solar": solar, | ||
| Linha 211: | Linha 391: | ||
"Spotlight Astral": astral | "Spotlight Astral": astral | ||
}; | }; | ||
let currentList = []; | |||
let sortCol = -1; | |||
let sortDir = 1; // 1 = crescente, -1 = decrescente | |||
function recommended(max){return Math.max(1,max-15)} | function recommended(max){return Math.max(1,max-15)} | ||
function render(list){ | function showTooltip(e, mapCode, mapName){ | ||
const tip = document.getElementById("tooltip"); | |||
const title = document.getElementById("tt-title"); | |||
const list = document.getElementById("tt-list"); | |||
const data = monsters[mapCode]; | |||
title.textContent = mapName; | |||
if(!data || data.length === 0){ | |||
list.innerHTML = "<li style='color:#98a7c3'>Nenhuma informação de monstros cadastrada.</li>"; | |||
} else { | |||
list.innerHTML = data.map(m => { | |||
const isMvp = m[2] === "MVP" || m[2] === "especial"; | |||
const label = isMvp ? ` <span class="tt-mvp">(${m[2]})</span>` : ""; | |||
return `<li>${m[0]} — <span>Nv. ${m[1]}</span>${label}</li>`; | |||
}).join(""); | |||
} | |||
tip.classList.add("visible"); | |||
const x = Math.min(e.clientX + 14, window.innerWidth - 360); | |||
const y = Math.min(e.clientY + 14, window.innerHeight - 300); | |||
tip.style.left = x + "px"; | |||
tip.style.top = y + "px"; | |||
} | |||
function hideTooltip(){ | |||
document.getElementById("tooltip").classList.remove("visible"); | |||
} | |||
function updateSortArrows(){ | |||
document.querySelectorAll("th[data-col]").forEach(th => { | |||
const arrow = th.querySelector(".sort-arrow"); | |||
const col = parseInt(th.dataset.col); | |||
th.classList.remove("sorted"); | |||
if(col === sortCol){ | |||
th.classList.add("sorted"); | |||
arrow.textContent = sortDir === 1 ? "▲" : "▼"; | |||
} else { | |||
arrow.textContent = "▲"; | |||
} | |||
}); | |||
} | |||
function sortBy(col){ | |||
if(sortCol === col){ | |||
sortDir *= -1; | |||
} else { | |||
sortCol = col; | |||
sortDir = 1; | |||
} | |||
currentList.sort((a,b) => { | |||
let va, vb; | |||
if(col === 0){ // código do mapa | |||
va = a[0].toLowerCase(); | |||
vb = b[0].toLowerCase(); | |||
} else if(col === 1){ // nome | |||
va = a[1].toLowerCase(); | |||
vb = b[1].toLowerCase(); | |||
} else if(col === 2){ // min | |||
va = a[2]; vb = b[2]; | |||
} else if(col === 3){ // max | |||
va = a[3]; vb = b[3]; | |||
} else { // recomendado | |||
va = recommended(a[3]); | |||
vb = recommended(b[3]); | |||
} | |||
if(va < vb) return -1 * sortDir; | |||
if(va > vb) return 1 * sortDir; | |||
return 0; | |||
}); | |||
updateSortArrows(); | |||
render(currentList, lists[document.getElementById("spotlight").value].length); | |||
} | |||
function render(list, totalInSpotlight){ | |||
const tbody = document.getElementById("rows"); | const tbody = document.getElementById("rows"); | ||
document.getElementById("result-count").textContent = list.length; | document.getElementById("result-count").textContent = list.length; | ||
document.getElementById("total-maps").textContent = | document.getElementById("total-maps").textContent = totalInSpotlight; | ||
if(list.length === 0){ | if(list.length === 0){ | ||
tbody.innerHTML = `<tr><td colspan="6" style="text-align:center;padding:28px;color:#98a7c3">Nenhum mapa encontrado com os filtros atuais.</td></tr>`; | tbody.innerHTML = `<tr><td colspan="6" style="text-align:center;padding:28px;color:#98a7c3">Nenhum mapa encontrado com os filtros atuais.</td></tr>`; | ||
return; | return; | ||
} | } | ||
tbody.innerHTML = list.map((x,i)=>`<tr> | tbody.innerHTML = list.map((x,i)=>`<tr> | ||
<td>${i+1}</td> | <td>${i+1}</td> | ||
<td><code>${x[0]}</code></td> | <td><code>${x[0]}</code></td> | ||
<td>${x[1]}</td> | <td><span class="map-name" data-code="${x[0]}" data-name="${x[1]}">${x[1]}</span></td> | ||
<td class="num">${x[2]}</td> | <td class="num">${x[2]}</td> | ||
<td class="num max">${x[3]}</td> | <td class="num max">${x[3]}</td> | ||
<td class="num rec">${recommended(x[3])}</td> | <td class="num rec">${recommended(x[3])}</td> | ||
</tr>`).join(""); | </tr>`).join(""); | ||
document.querySelectorAll(".map-name").forEach(el => { | |||
el.addEventListener("mouseenter", e => showTooltip(e, el.dataset.code, el.dataset.name)); | |||
el.addEventListener("mouseleave", () => setTimeout(hideTooltip, 180)); | |||
el.addEventListener("click", e => { | |||
e.stopPropagation(); | |||
window.open("https://www.divine-pride.net/database/map/" + el.dataset.code, "_blank", "noopener,noreferrer"); | |||
}); | |||
}); | |||
} | } | ||
| Linha 238: | Linha 498: | ||
const range = document.getElementById("level").value; | const range = document.getElementById("level").value; | ||
const selected = document.getElementById("spotlight").value; | const selected = document.getElementById("spotlight").value; | ||
const spotlightList = lists[selected] || []; | |||
let list = spotlightList.filter(x => (x[0] + " " + x[1]).toLowerCase().includes(q)); | |||
if(range){ | if(range){ | ||
const [a,b] = range.split("-").map(Number); | const [a,b] = range.split("-").map(Number); | ||
| Linha 248: | Linha 507: | ||
}); | }); | ||
} | } | ||
render(list); | currentList = list; | ||
// reaplica a ordenação atual se existir | |||
if(sortCol >= 0){ | |||
sortBy(sortCol); // isso já chama o render | |||
// corrige a direção porque o sortBy inverte quando clica de novo | |||
sortDir *= -1; | |||
sortBy(sortCol); | |||
} else { | |||
render(list, spotlightList.length); | |||
} | |||
} | } | ||
| Linha 255: | Linha 523: | ||
document.getElementById("level").value = ""; | document.getElementById("level").value = ""; | ||
document.getElementById("spotlight").value = "Spotlight Solar"; | document.getElementById("spotlight").value = "Spotlight Solar"; | ||
sortCol = -1; | |||
sortDir = 1; | |||
updateSortArrows(); | |||
filterRows(); | filterRows(); | ||
} | } | ||
document.addEventListener("click", e => { | |||
if(!e.target.closest(".guia-tooltip") && !e.target.closest(".map-name")) hideTooltip(); | |||
}); | |||
filterRows(); | filterRows(); | ||
</script> | </script> | ||
</html> | </html> | ||
Edição atual tal como às 22h56min de 26 de julho de 2026
Mapas Spotlight
Mín/Máx = nível do monstro mais comum ±10. Recomendado = nível − 5. Passe o mouse no nome do mapa para ver os monstros. Clique para abrir no Divine Pride.
0mapas nesta lista
1 → 178faixa total de níveis
Principal − 5regra do nível recomendado
| # | Mapa ▲ | Nome ▲ | Mín. ▲ | Máx. ▲ | Recomendado ▲ |
|---|
×