Your Name
499 lines
15 KiB
JavaScript
499 lines
15 KiB
JavaScript
(() => {
|
|
"use strict";
|
|
|
|
const qs = (sel) => document.querySelector(sel);
|
|
|
|
const state = {
|
|
index: null,
|
|
rows: [],
|
|
table: null,
|
|
filters: {
|
|
mode: "",
|
|
episode: "",
|
|
difficulty: "",
|
|
section: "",
|
|
search: "",
|
|
},
|
|
sort: {
|
|
key: "source",
|
|
dir: "asc",
|
|
},
|
|
page: 1,
|
|
pageSize: 100,
|
|
};
|
|
|
|
const RARE_MODIFIER_VERSIONS = new Set(["v2", "bb"]);
|
|
|
|
function esc(value) {
|
|
return String(value ?? "")
|
|
.replaceAll("&", "&")
|
|
.replaceAll("<", "<")
|
|
.replaceAll(">", ">")
|
|
.replaceAll('"', """)
|
|
.replaceAll("'", "'");
|
|
}
|
|
|
|
function labelValue(value) {
|
|
return String(value || "")
|
|
.replace(/^Episode(\d+)$/, "Episode $1")
|
|
.replace(/^VeryHard$/, "Very Hard")
|
|
.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>`;
|
|
}
|
|
|
|
function currentVersion() {
|
|
return qs("#drops-version")?.value || "v1";
|
|
}
|
|
|
|
function rareModifierEnabled() {
|
|
const selectedMode = qs("#drops-mode")?.value || "peeps";
|
|
return selectedMode === "peeps" && RARE_MODIFIER_VERSIONS.has(currentVersion());
|
|
}
|
|
|
|
function currentRareModifier() {
|
|
const select = qs("#drops-rare-modifier");
|
|
const pct = rareModifierEnabled() ? Number(select?.value || 0) : 0;
|
|
const label = select?.selectedOptions?.[0]?.textContent || "No modifier";
|
|
return { pct, label, multiplier: 1 + (pct / 100) };
|
|
}
|
|
|
|
function modifierMultiplierLabel(modifier) {
|
|
return `x${modifier.multiplier.toFixed(3).replace(/0+$/, "").replace(/\.$/, "")}`;
|
|
}
|
|
|
|
function updateRareModifierControls() {
|
|
const wrap = qs("#drops-rare-modifier-wrap");
|
|
const v2Note = qs("#drops-v2-note");
|
|
const select = qs("#drops-rare-modifier");
|
|
const enabled = rareModifierEnabled();
|
|
|
|
if (wrap) wrap.hidden = !enabled;
|
|
if (v2Note) v2Note.hidden = currentVersion() !== "v2";
|
|
|
|
if (!enabled && select) {
|
|
select.value = "0";
|
|
}
|
|
}
|
|
|
|
function formatOddsDenominator(value) {
|
|
if (!Number.isFinite(value) || value <= 0) return "—";
|
|
|
|
if (value >= 1000) {
|
|
return Math.round(value).toLocaleString();
|
|
}
|
|
|
|
if (value >= 100) {
|
|
return value.toFixed(1).replace(/\.0$/, "");
|
|
}
|
|
|
|
return value.toFixed(2).replace(/0+$/, "").replace(/\.$/, "");
|
|
}
|
|
|
|
function adjustedRate(rate) {
|
|
const text = String(rate || "");
|
|
const match = text.match(/^(\d+)\/(\d+)$/);
|
|
if (!match) return text || "—";
|
|
|
|
const num = Number(match[1]);
|
|
const den = Number(match[2]);
|
|
const modifier = currentRareModifier();
|
|
|
|
if (!rareModifierEnabled() || modifier.pct <= 0) {
|
|
return text;
|
|
}
|
|
|
|
const baseProbability = num / den;
|
|
const adjustedProbability = Math.min(1, baseProbability * modifier.multiplier);
|
|
|
|
if (adjustedProbability >= 1) {
|
|
return "1/1";
|
|
}
|
|
|
|
return `1/${formatOddsDenominator(1 / adjustedProbability)}`;
|
|
}
|
|
|
|
function rateCellHtml(rate) {
|
|
const base = String(rate || "—");
|
|
const adjusted = adjustedRate(base);
|
|
const modifier = currentRareModifier();
|
|
|
|
if (!rareModifierEnabled() || modifier.pct <= 0 || adjusted === base) {
|
|
return esc(base);
|
|
}
|
|
|
|
return esc(adjusted);
|
|
}
|
|
|
|
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 orderedDifficultyValues(rows) {
|
|
const order = ["Normal", "Hard", "VeryHard", "Ultimate"];
|
|
const present = new Set(rows.map((row) => row.difficulty).filter(Boolean));
|
|
const ordered = order.filter((value) => present.has(value));
|
|
const extras = [...present]
|
|
.filter((value) => !order.includes(value))
|
|
.sort((a, b) => String(a).localeCompare(String(b)));
|
|
return [...ordered, ...extras];
|
|
}
|
|
|
|
function populateFilters(rows) {
|
|
fillSelect(qs("#drops-rare-mode"), uniqueSorted(rows, "mode"), "All modes");
|
|
fillSelect(qs("#drops-episode"), uniqueSorted(rows, "episode"), "All episodes");
|
|
fillSelect(qs("#drops-difficulty"), orderedDifficultyValues(rows), "All difficulties");
|
|
fillSelect(qs("#drops-section"), uniqueSorted(rows, "section_id"), "All Section IDs");
|
|
}
|
|
|
|
const SORT_COLUMNS = [
|
|
["mode", "Mode"],
|
|
["episode", "Episode"],
|
|
["difficulty", "Difficulty"],
|
|
["section_id", "SECID"],
|
|
["source", "Source"],
|
|
["item", "Item"],
|
|
["item_code", "Code"],
|
|
["rate", "Rate"],
|
|
];
|
|
|
|
const DIFFICULTY_SORT_ORDER = {
|
|
Normal: 0,
|
|
Hard: 1,
|
|
VeryHard: 2,
|
|
Ultimate: 3,
|
|
};
|
|
|
|
function rateSortValue(rate) {
|
|
const text = String(rate || "").replaceAll(",", "");
|
|
const match = text.match(/^(\d+(?:\.\d+)?)\/(\d+(?:\.\d+)?)$/);
|
|
if (!match) return Number.NEGATIVE_INFINITY;
|
|
|
|
const num = Number(match[1]);
|
|
const den = Number(match[2]);
|
|
|
|
if (!Number.isFinite(num) || !Number.isFinite(den) || den <= 0) {
|
|
return Number.NEGATIVE_INFINITY;
|
|
}
|
|
|
|
// Sort by actual probability, same as percentage conversion.
|
|
// 5/8 => 0.625, 1/8192 => 0.000122...
|
|
return num / den;
|
|
}
|
|
|
|
function sortValue(row, key) {
|
|
if (key === "difficulty") {
|
|
return DIFFICULTY_SORT_ORDER[row.difficulty] ?? 999;
|
|
}
|
|
|
|
if (key === "rate") {
|
|
return rateSortValue(adjustedRate(row.rate));
|
|
}
|
|
|
|
if (key === "item") {
|
|
return row.item || row.item_code || "";
|
|
}
|
|
|
|
return row[key] || "";
|
|
}
|
|
|
|
function sortedRows(rows) {
|
|
const { key, dir } = state.sort;
|
|
const factor = dir === "desc" ? -1 : 1;
|
|
|
|
return [...rows].sort((a, b) => {
|
|
const av = sortValue(a, key);
|
|
const bv = sortValue(b, key);
|
|
|
|
if (typeof av === "number" && typeof bv === "number") {
|
|
return (av - bv) * factor;
|
|
}
|
|
|
|
return String(av).localeCompare(String(bv), undefined, {
|
|
numeric: true,
|
|
sensitivity: "base",
|
|
}) * factor;
|
|
});
|
|
}
|
|
|
|
function sortHeader(key, label) {
|
|
const active = state.sort.key === key;
|
|
const arrow = active ? (state.sort.dir === "asc" ? "▲" : "▼") : "";
|
|
const ariaSort = active ? (state.sort.dir === "asc" ? "ascending" : "descending") : "none";
|
|
|
|
return `<th aria-sort="${ariaSort}">
|
|
<button class="drops-sort-button ${active ? "is-active" : ""}" type="button" data-drops-sort="${esc(key)}">
|
|
<span>${esc(label)}</span>
|
|
<span class="drops-sort-arrow" aria-hidden="true">${arrow}</span>
|
|
</button>
|
|
</th>`;
|
|
}
|
|
|
|
function visibleRows() {
|
|
const search = state.filters.search.trim().toLowerCase();
|
|
|
|
return state.rows.filter((row) => {
|
|
if (state.filters.mode && row.mode !== state.filters.mode) return false;
|
|
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 = sortedRows(visibleRows());
|
|
const tableLabel = state.table?.label || "BB";
|
|
const groupLabel = state.table?.groupLabel || "Peeps";
|
|
const totalPages = Math.max(1, Math.ceil(rows.length / state.pageSize));
|
|
state.page = Math.min(Math.max(1, state.page), totalPages);
|
|
|
|
const start = (state.page - 1) * state.pageSize;
|
|
const shown = rows.slice(start, start + state.pageSize);
|
|
const end = start + shown.length;
|
|
|
|
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">${rateCellHtml(row.rate || "—")}</td>
|
|
</tr>
|
|
`;
|
|
}).join("");
|
|
|
|
const rangeText = rows.length
|
|
? ` Showing ${Number(start + 1).toLocaleString()}-${Number(end).toLocaleString()}.`
|
|
: "";
|
|
const modifier = currentRareModifier();
|
|
const modifierNote = rareModifierEnabled() && modifier.pct > 0
|
|
? `<span>Rate modifier: ${esc(modifier.label)} / ${esc(modifierMultiplierLabel(modifier))}</span>`
|
|
: "";
|
|
|
|
box.innerHTML = `
|
|
<div class="drops-summary">
|
|
<div>
|
|
<strong>${esc(groupLabel)} ${esc(tableLabel)} drop table</strong>
|
|
<span>${rows.length.toLocaleString()} matching rows.${rangeText}</span>
|
|
${modifierNote}
|
|
</div>
|
|
<span>${state.rows.length.toLocaleString()} total rows</span>
|
|
</div>
|
|
<div class="drops-table-wrap">
|
|
<table class="drops-table">
|
|
<thead>
|
|
<tr>
|
|
${SORT_COLUMNS.map(([key, label]) => sortHeader(key, label)).join("")}
|
|
</tr>
|
|
</thead>
|
|
<tbody>${body || `<tr><td colspan="8">No drops match these filters.</td></tr>`}</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="leaderboard-pager drops-pager">
|
|
<button type="button" data-drops-page="prev" ${state.page <= 1 ? "disabled" : ""}>Previous</button>
|
|
<span>Page ${state.page} of ${totalPages}</span>
|
|
<button type="button" data-drops-page="next" ${state.page >= totalPages ? "disabled" : ""}>Next</button>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
async function loadDropGroup() {
|
|
const selectedMode = qs("#drops-mode")?.value || "peeps";
|
|
const groupPath = selectedMode === "hardcore" ? "hardcore" : "peeps";
|
|
const groupLabel = selectedMode === "hardcore" ? "Hardcore" : "Peeps";
|
|
|
|
setStatus(`Loading ${groupLabel} drop tables...`);
|
|
|
|
state.index = await fetchJson(`generated/drops/${groupPath}/index.json`);
|
|
|
|
if (selectedMode === "peeps") {
|
|
populateVersions(state.index);
|
|
}
|
|
|
|
const version = selectedMode === "hardcore" ? "bb" : currentVersion();
|
|
const table = (state.index.tables || []).find((entry) => entry.version === version);
|
|
|
|
if (!table) {
|
|
setStatus(`No ${groupLabel} drop table is configured.`, "error");
|
|
return;
|
|
}
|
|
|
|
state.table = { ...table, groupLabel };
|
|
state.rows = await fetchJson(`generated/drops/${groupPath}/${table.path}`);
|
|
|
|
state.filters.mode = "";
|
|
state.filters.episode = "";
|
|
state.filters.difficulty = "";
|
|
state.filters.section = "";
|
|
state.filters.search = "";
|
|
state.page = 1;
|
|
|
|
if (qs("#drops-search")) qs("#drops-search").value = "";
|
|
|
|
populateFilters(state.rows);
|
|
updateRareModifierControls();
|
|
|
|
if (qs("#drops-rare-mode")) qs("#drops-rare-mode").value = "";
|
|
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 versionSelect = qs("#drops-version");
|
|
const versionLabel = document.querySelector('label[for="drops-version"]');
|
|
const v2Note = qs("#drops-v2-note");
|
|
const hardcoreNote = qs("#drops-hardcore-note");
|
|
|
|
if (versionSelect) versionSelect.hidden = mode === "hardcore";
|
|
if (versionLabel) versionLabel.hidden = mode === "hardcore";
|
|
if (v2Note) v2Note.hidden = true;
|
|
if (hardcoreNote) hardcoreNote.hidden = mode !== "hardcore";
|
|
|
|
try {
|
|
await loadDropGroup();
|
|
} 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", loadDropGroup);
|
|
qs("#drops-rare-modifier")?.addEventListener("change", () => {
|
|
state.page = 1;
|
|
state.page = 1;
|
|
renderTable();
|
|
});
|
|
|
|
qs("#drops-rare-mode")?.addEventListener("change", (event) => {
|
|
state.filters.mode = event.target.value;
|
|
state.page = 1;
|
|
renderTable();
|
|
});
|
|
|
|
qs("#drops-episode")?.addEventListener("change", (event) => {
|
|
state.filters.episode = event.target.value;
|
|
state.page = 1;
|
|
renderTable();
|
|
});
|
|
|
|
qs("#drops-difficulty")?.addEventListener("change", (event) => {
|
|
state.filters.difficulty = event.target.value;
|
|
state.page = 1;
|
|
renderTable();
|
|
});
|
|
|
|
qs("#drops-section")?.addEventListener("change", (event) => {
|
|
state.filters.section = event.target.value;
|
|
state.page = 1;
|
|
renderTable();
|
|
});
|
|
|
|
qs("#drops-search")?.addEventListener("input", (event) => {
|
|
state.filters.search = event.target.value;
|
|
state.page = 1;
|
|
renderTable();
|
|
});
|
|
|
|
qs("#drops-placeholder")?.addEventListener("click", (event) => {
|
|
const pageButton = event.target.closest("[data-drops-page]");
|
|
if (pageButton) {
|
|
state.page += pageButton.dataset.dropsPage === "next" ? 1 : -1;
|
|
renderTable();
|
|
return;
|
|
}
|
|
|
|
const button = event.target.closest("[data-drops-sort]");
|
|
if (!button) return;
|
|
|
|
const key = button.dataset.dropsSort;
|
|
if (state.sort.key === key) {
|
|
state.sort.dir = state.sort.dir === "asc" ? "desc" : "asc";
|
|
} else {
|
|
state.sort.key = key;
|
|
state.sort.dir = "asc";
|
|
}
|
|
|
|
renderTable();
|
|
});
|
|
|
|
updateMode();
|
|
});
|
|
})();
|