Add Peeps drop table viewer
This commit is contained in:
Your Name
@@ -0,0 +1,255 @@
|
||||
(() => {
|
||||
"use strict";
|
||||
|
||||
const qs = (sel) => document.querySelector(sel);
|
||||
|
||||
const state = {
|
||||
index: null,
|
||||
rows: [],
|
||||
table: null,
|
||||
filters: {
|
||||
episode: "",
|
||||
difficulty: "",
|
||||
section: "",
|
||||
search: "",
|
||||
},
|
||||
};
|
||||
|
||||
function esc(value) {
|
||||
return String(value ?? "")
|
||||
.replaceAll("&", "&")
|
||||
.replaceAll("<", "<")
|
||||
.replaceAll(">", ">")
|
||||
.replaceAll('"', """)
|
||||
.replaceAll("'", "'");
|
||||
}
|
||||
|
||||
function labelValue(value) {
|
||||
return String(value || "")
|
||||
.replace(/^Episode(\d+)$/, "Episode $1")
|
||||
.replaceAll("_", " ");
|
||||
}
|
||||
|
||||
function setStatus(message, kind = "") {
|
||||
const box = qs("#drops-placeholder");
|
||||
if (!box) return;
|
||||
box.innerHTML = `<div class="drops-status ${kind ? `drops-status--${kind}` : ""}">${esc(message)}</div>`;
|
||||
}
|
||||
|
||||
async function fetchJson(path) {
|
||||
const res = await fetch(path, { cache: "no-store" });
|
||||
if (!res.ok) throw new Error(`${path}: HTTP ${res.status}`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
function uniqueSorted(rows, key) {
|
||||
return [...new Set(rows.map((row) => row[key]).filter(Boolean))]
|
||||
.sort((a, b) => String(a).localeCompare(String(b)));
|
||||
}
|
||||
|
||||
function fillSelect(select, values, allLabel) {
|
||||
if (!select) return;
|
||||
const previous = select.value;
|
||||
select.innerHTML = `<option value="">${esc(allLabel)}</option>`;
|
||||
for (const value of values) {
|
||||
const opt = document.createElement("option");
|
||||
opt.value = value;
|
||||
opt.textContent = labelValue(value);
|
||||
select.appendChild(opt);
|
||||
}
|
||||
if ([...select.options].some((opt) => opt.value === previous)) {
|
||||
select.value = previous;
|
||||
}
|
||||
}
|
||||
|
||||
function populateVersions(index) {
|
||||
const select = qs("#drops-version");
|
||||
if (!select) return;
|
||||
|
||||
const previous = select.value || "v1";
|
||||
select.innerHTML = "";
|
||||
|
||||
for (const table of index.tables || []) {
|
||||
const opt = document.createElement("option");
|
||||
opt.value = table.version;
|
||||
opt.textContent = table.label;
|
||||
select.appendChild(opt);
|
||||
}
|
||||
|
||||
if ([...select.options].some((opt) => opt.value === previous)) {
|
||||
select.value = previous;
|
||||
}
|
||||
}
|
||||
|
||||
function populateFilters(rows) {
|
||||
fillSelect(qs("#drops-episode"), uniqueSorted(rows, "episode"), "All episodes");
|
||||
fillSelect(qs("#drops-difficulty"), uniqueSorted(rows, "difficulty"), "All difficulties");
|
||||
fillSelect(qs("#drops-section"), uniqueSorted(rows, "section_id"), "All Section IDs");
|
||||
}
|
||||
|
||||
function visibleRows() {
|
||||
const search = state.filters.search.trim().toLowerCase();
|
||||
|
||||
return state.rows.filter((row) => {
|
||||
if (state.filters.episode && row.episode !== state.filters.episode) return false;
|
||||
if (state.filters.difficulty && row.difficulty !== state.filters.difficulty) return false;
|
||||
if (state.filters.section && row.section_id !== state.filters.section) return false;
|
||||
|
||||
if (search) {
|
||||
const haystack = [
|
||||
row.mode,
|
||||
row.episode,
|
||||
row.difficulty,
|
||||
row.section_id,
|
||||
row.source,
|
||||
row.item,
|
||||
row.item_code,
|
||||
row.rate,
|
||||
].join(" ").toLowerCase();
|
||||
|
||||
if (!haystack.includes(search)) return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
function renderTable() {
|
||||
const box = qs("#drops-placeholder");
|
||||
if (!box) return;
|
||||
|
||||
const rows = visibleRows();
|
||||
const tableLabel = state.table?.label || "Peeps";
|
||||
const shown = rows.slice(0, 1000);
|
||||
|
||||
const body = shown.map((row) => {
|
||||
const item = row.item || row.item_code || "—";
|
||||
const itemCode = row.item_code || "—";
|
||||
|
||||
return `
|
||||
<tr>
|
||||
<td data-label="Mode">${esc(labelValue(row.mode))}</td>
|
||||
<td data-label="Episode">${esc(labelValue(row.episode))}</td>
|
||||
<td data-label="Difficulty">${esc(labelValue(row.difficulty))}</td>
|
||||
<td data-label="Section ID">${esc(row.section_id || "—")}</td>
|
||||
<td data-label="Source">${esc(labelValue(row.source || "—"))}</td>
|
||||
<td data-label="Item">${esc(item)}</td>
|
||||
<td data-label="Item Code">${esc(itemCode)}</td>
|
||||
<td data-label="Rate">${esc(row.rate || "—")}</td>
|
||||
</tr>
|
||||
`;
|
||||
}).join("");
|
||||
|
||||
const truncation = rows.length > shown.length
|
||||
? ` Showing first ${shown.length.toLocaleString()}.`
|
||||
: "";
|
||||
|
||||
box.innerHTML = `
|
||||
<div class="drops-summary">
|
||||
<div>
|
||||
<strong>Peeps ${esc(tableLabel)} drop table</strong>
|
||||
<span>${rows.length.toLocaleString()} matching rows.${truncation}</span>
|
||||
</div>
|
||||
<span>${state.rows.length.toLocaleString()} total rows</span>
|
||||
</div>
|
||||
<div class="drops-table-wrap">
|
||||
<table class="drops-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Mode</th>
|
||||
<th>Episode</th>
|
||||
<th>Difficulty</th>
|
||||
<th>Section ID</th>
|
||||
<th>Source</th>
|
||||
<th>Item</th>
|
||||
<th>Item Code</th>
|
||||
<th>Rate</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>${body || `<tr><td colspan="8">No drops match these filters.</td></tr>`}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
async function loadPeeps() {
|
||||
setStatus("Loading Peeps drop tables...");
|
||||
|
||||
if (!state.index) {
|
||||
state.index = await fetchJson("generated/drops/peeps/index.json");
|
||||
populateVersions(state.index);
|
||||
}
|
||||
|
||||
const version = qs("#drops-version")?.value || "v1";
|
||||
const table = (state.index.tables || []).find((entry) => entry.version === version);
|
||||
|
||||
if (!table) {
|
||||
setStatus("No drop table is configured for that version.", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
state.table = table;
|
||||
state.rows = await fetchJson(`generated/drops/peeps/${table.path}`);
|
||||
|
||||
state.filters.episode = "";
|
||||
state.filters.difficulty = "";
|
||||
state.filters.section = "";
|
||||
state.filters.search = "";
|
||||
|
||||
if (qs("#drops-search")) qs("#drops-search").value = "";
|
||||
|
||||
populateFilters(state.rows);
|
||||
|
||||
if (qs("#drops-episode")) qs("#drops-episode").value = "";
|
||||
if (qs("#drops-difficulty")) qs("#drops-difficulty").value = "";
|
||||
if (qs("#drops-section")) qs("#drops-section").value = "";
|
||||
|
||||
renderTable();
|
||||
}
|
||||
|
||||
async function updateMode() {
|
||||
const mode = qs("#drops-mode")?.value || "peeps";
|
||||
const peepsControls = qs("#drops-peeps-controls");
|
||||
|
||||
if (mode === "hardcore") {
|
||||
if (peepsControls) peepsControls.hidden = true;
|
||||
setStatus("Hardcore drop tables coming next.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (peepsControls) peepsControls.hidden = false;
|
||||
|
||||
try {
|
||||
await loadPeeps();
|
||||
} catch (err) {
|
||||
setStatus(err?.message || "Unable to load drop table.", "error");
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
qs("#drops-mode")?.addEventListener("change", updateMode);
|
||||
qs("#drops-version")?.addEventListener("change", loadPeeps);
|
||||
|
||||
qs("#drops-episode")?.addEventListener("change", (event) => {
|
||||
state.filters.episode = event.target.value;
|
||||
renderTable();
|
||||
});
|
||||
|
||||
qs("#drops-difficulty")?.addEventListener("change", (event) => {
|
||||
state.filters.difficulty = event.target.value;
|
||||
renderTable();
|
||||
});
|
||||
|
||||
qs("#drops-section")?.addEventListener("change", (event) => {
|
||||
state.filters.section = event.target.value;
|
||||
renderTable();
|
||||
});
|
||||
|
||||
qs("#drops-search")?.addEventListener("input", (event) => {
|
||||
state.filters.search = event.target.value;
|
||||
renderTable();
|
||||
});
|
||||
|
||||
updateMode();
|
||||
});
|
||||
})();
|
||||
+29
-16
@@ -8,7 +8,7 @@
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="style.css?v=drops-peeps-table-viewer-20260613-1">
|
||||
<script src="app.js?v=saves-synced-20260609-2" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
@@ -37,25 +37,38 @@
|
||||
<option value="hardcore">Hardcore</option>
|
||||
</select>
|
||||
|
||||
<label for="drops-version" data-drops-version-wrap>Version</label>
|
||||
<select id="drops-version" data-drops-version-wrap>
|
||||
<option>V1</option>
|
||||
<option>V2</option>
|
||||
<option>V3</option>
|
||||
<option>V4</option>
|
||||
</select>
|
||||
<div id="drops-peeps-controls">
|
||||
<label for="drops-version">Version</label>
|
||||
<select id="drops-version">
|
||||
<option value="v1">V1</option>
|
||||
<option value="v2">V2</option>
|
||||
<option value="v3">V3</option>
|
||||
<option value="bb">BB</option>
|
||||
</select>
|
||||
|
||||
<label for="drops-episode" data-drops-episode-wrap hidden>Episode</label>
|
||||
<select id="drops-episode" data-drops-episode-wrap hidden>
|
||||
<option>Episode 1</option>
|
||||
<option>Episode 2</option>
|
||||
<option>Episode 4</option>
|
||||
</select>
|
||||
<label for="drops-episode">Episode</label>
|
||||
<select id="drops-episode">
|
||||
<option value="">All episodes</option>
|
||||
</select>
|
||||
|
||||
<label for="drops-difficulty">Difficulty</label>
|
||||
<select id="drops-difficulty">
|
||||
<option value="">All difficulties</option>
|
||||
</select>
|
||||
|
||||
<label for="drops-section">Section ID</label>
|
||||
<select id="drops-section">
|
||||
<option value="">All Section IDs</option>
|
||||
</select>
|
||||
|
||||
<label for="drops-search">Search</label>
|
||||
<input id="drops-search" type="search" placeholder="Enemy, box, item, code...">
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="card placeholder-results-card">
|
||||
<div class="blank-data-box" id="drops-placeholder">Drop table placeholder</div>
|
||||
<div class="blank-data-box drops-box" id="drops-placeholder">Drop table placeholder</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@@ -88,6 +101,6 @@
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="placeholder-pages.js?v=basic-pages-fixed-1" defer></script>
|
||||
<script src="drop-tables.js?v=drops-peeps-table-viewer-20260613-1" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"label": "Peeps",
|
||||
"mode": "peeps",
|
||||
"tables": [
|
||||
{
|
||||
"label": "V1",
|
||||
"path": "v1.json",
|
||||
"rows": 5328,
|
||||
"version": "v1"
|
||||
},
|
||||
{
|
||||
"label": "V2",
|
||||
"path": "v2.json",
|
||||
"rows": 7872,
|
||||
"version": "v2"
|
||||
},
|
||||
{
|
||||
"label": "V3",
|
||||
"path": "v3.json",
|
||||
"rows": 5636,
|
||||
"version": "v3"
|
||||
},
|
||||
{
|
||||
"label": "BB",
|
||||
"path": "bb.json",
|
||||
"rows": 7200,
|
||||
"version": "bb"
|
||||
}
|
||||
]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -2739,3 +2739,88 @@ button.inline-link,
|
||||
.leaderboard-list--home-hardcore .home-hardcore-line {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
|
||||
/* Drops table viewer */
|
||||
.drops-box {
|
||||
align-items: stretch;
|
||||
min-height: 360px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.drops-status {
|
||||
padding: 1.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.drops-status--error {
|
||||
color: #ff9b9b;
|
||||
}
|
||||
|
||||
.drops-summary {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 0.85rem 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
|
||||
color: rgba(255, 255, 255, 0.86);
|
||||
}
|
||||
|
||||
.drops-summary div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.drops-summary span {
|
||||
color: rgba(255, 255, 255, 0.62);
|
||||
}
|
||||
|
||||
.drops-table-wrap {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.drops-table {
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.drops-table th,
|
||||
.drops-table td {
|
||||
padding: 0.55rem 0.7rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.drops-table th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: rgba(18, 24, 42, 0.98);
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
font-size: 0.74rem;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.drops-table td:nth-child(5),
|
||||
.drops-table td:nth-child(6) {
|
||||
white-space: normal;
|
||||
min-width: 12rem;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.drops-summary {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.drops-table {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user