Merge pull request 'Add Peeps drop table viewer' (#7) from feature/drops-peeps-table-viewer into main
Reviewed-on: #7
This commit was merged in pull request #7.
This commit is contained in:
Executable
+187
@@ -0,0 +1,187 @@
|
||||
#!/usr/bin/env python3
|
||||
import json
|
||||
import re
|
||||
from pathlib import Path
|
||||
|
||||
NEWSERV = Path.home() / ".local/share/github/psopeeps-newserv"
|
||||
PEEPS_OUT = Path("site/generated/drops/peeps")
|
||||
HARDCORE_OUT = Path("site/generated/drops/hardcore")
|
||||
|
||||
PEEPS_TABLES = {
|
||||
"v1": NEWSERV / "system/tables/rare-table-v1.json",
|
||||
"v2": NEWSERV / "system/tables/rare-table-v2.json",
|
||||
"v3": NEWSERV / "system/tables/rare-table-v3.json",
|
||||
"bb": NEWSERV / "system/tables/rare-table-v4.json",
|
||||
}
|
||||
|
||||
HARDCORE_TABLES = {
|
||||
"bb": Path("source-drops/hardcore/rare-table-v4.json"),
|
||||
}
|
||||
|
||||
def strip_json_comments(text):
|
||||
out = []
|
||||
in_str = False
|
||||
esc = False
|
||||
i = 0
|
||||
while i < len(text):
|
||||
c = text[i]
|
||||
n = text[i + 1] if i + 1 < len(text) else ""
|
||||
|
||||
if in_str:
|
||||
out.append(c)
|
||||
if esc:
|
||||
esc = False
|
||||
elif c == "\\":
|
||||
esc = True
|
||||
elif c == '"':
|
||||
in_str = False
|
||||
i += 1
|
||||
continue
|
||||
|
||||
if c == '"':
|
||||
in_str = True
|
||||
out.append(c)
|
||||
i += 1
|
||||
continue
|
||||
|
||||
if c == "/" and n == "/":
|
||||
while i < len(text) and text[i] not in "\r\n":
|
||||
i += 1
|
||||
continue
|
||||
|
||||
out.append(c)
|
||||
i += 1
|
||||
|
||||
return "".join(out)
|
||||
|
||||
def quote_hex_numbers(text):
|
||||
return re.sub(r'(?<!["\w])0x[0-9A-Fa-f]+', lambda m: f'"{m.group(0)}"', text)
|
||||
|
||||
|
||||
def remove_trailing_commas(text):
|
||||
out = []
|
||||
in_str = False
|
||||
esc = False
|
||||
i = 0
|
||||
|
||||
while i < len(text):
|
||||
c = text[i]
|
||||
|
||||
if in_str:
|
||||
out.append(c)
|
||||
if esc:
|
||||
esc = False
|
||||
elif c == "\\":
|
||||
esc = True
|
||||
elif c == '"':
|
||||
in_str = False
|
||||
i += 1
|
||||
continue
|
||||
|
||||
if c == '"':
|
||||
in_str = True
|
||||
out.append(c)
|
||||
i += 1
|
||||
continue
|
||||
|
||||
if c == ",":
|
||||
j = i + 1
|
||||
while j < len(text) and text[j] in " \t\r\n":
|
||||
j += 1
|
||||
if j < len(text) and text[j] in "}]":
|
||||
i += 1
|
||||
continue
|
||||
|
||||
out.append(c)
|
||||
i += 1
|
||||
|
||||
return "".join(out)
|
||||
|
||||
def load_newserv_jsonish(path):
|
||||
text = path.read_text(encoding="utf-8", errors="replace")
|
||||
text = strip_json_comments(text)
|
||||
text = quote_hex_numbers(text)
|
||||
text = remove_trailing_commas(text)
|
||||
return json.loads(text)
|
||||
|
||||
def normalize_item_code(value):
|
||||
if isinstance(value, str) and value.startswith("0x"):
|
||||
return "0x" + value[2:].upper()
|
||||
if isinstance(value, int):
|
||||
return f"0x{value:06X}"
|
||||
return str(value)
|
||||
|
||||
def flatten_table(version, table):
|
||||
rows = []
|
||||
|
||||
for game_mode, episodes in table.items():
|
||||
if not isinstance(episodes, dict):
|
||||
continue
|
||||
for episode, difficulties in episodes.items():
|
||||
if not isinstance(difficulties, dict):
|
||||
continue
|
||||
for difficulty, section_ids in difficulties.items():
|
||||
if not isinstance(section_ids, dict):
|
||||
continue
|
||||
for section_id, sources in section_ids.items():
|
||||
if not isinstance(sources, dict):
|
||||
continue
|
||||
for source, drops in sources.items():
|
||||
if not isinstance(drops, list):
|
||||
continue
|
||||
for drop in drops:
|
||||
if not isinstance(drop, list) or len(drop) < 2:
|
||||
continue
|
||||
|
||||
rows.append({
|
||||
"version": version,
|
||||
"mode": str(game_mode),
|
||||
"episode": str(episode),
|
||||
"difficulty": str(difficulty),
|
||||
"section_id": str(section_id),
|
||||
"source": str(source),
|
||||
"rate": str(drop[0]),
|
||||
"item_code": normalize_item_code(drop[1]),
|
||||
"item": str(drop[2]) if len(drop) >= 3 and drop[2] else "",
|
||||
})
|
||||
|
||||
return rows
|
||||
|
||||
def write_group(mode, label, tables, out_dir):
|
||||
out_dir.mkdir(parents=True, exist_ok=True)
|
||||
|
||||
index = {
|
||||
"mode": mode,
|
||||
"label": label,
|
||||
"tables": [],
|
||||
}
|
||||
|
||||
labels = {"v1": "V1", "v2": "V2", "v3": "V3", "bb": "BB"}
|
||||
|
||||
for version, src in tables.items():
|
||||
table = load_newserv_jsonish(src)
|
||||
rows = flatten_table(version, table)
|
||||
|
||||
out_name = f"{version}.json"
|
||||
out_path = out_dir / out_name
|
||||
out_path.write_text(json.dumps(rows, indent=2, sort_keys=True) + "\n")
|
||||
|
||||
index["tables"].append({
|
||||
"version": version,
|
||||
"label": labels[version],
|
||||
"path": out_name,
|
||||
"rows": len(rows),
|
||||
})
|
||||
|
||||
print(f"{mode} {version}: {len(rows)} rows -> {out_path}")
|
||||
|
||||
index_path = out_dir / "index.json"
|
||||
index_path.write_text(json.dumps(index, indent=2, sort_keys=True) + "\n")
|
||||
print(f"{mode} index -> {index_path}")
|
||||
|
||||
def main():
|
||||
write_group("peeps", "Peeps", PEEPS_TABLES, PEEPS_OUT)
|
||||
write_group("hardcore", "Hardcore", HARDCORE_TABLES, HARDCORE_OUT)
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
@@ -0,0 +1,498 @@
|
||||
(() => {
|
||||
"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();
|
||||
});
|
||||
})();
|
||||
+55
-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-3">
|
||||
<script src="app.js?v=saves-synced-20260609-2" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
@@ -37,25 +37,64 @@
|
||||
<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>
|
||||
<p class="drops-field-note" id="drops-v2-note" hidden>V2 drop tables apply to PSO PC only.</p>
|
||||
<p class="drops-field-note" id="drops-hardcore-note" hidden>Hardcore uses the BB/V4 drop table.</p>
|
||||
|
||||
<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>
|
||||
<div id="drops-rare-modifier-wrap" hidden>
|
||||
<label for="drops-rare-modifier">Rare bonus modifier</label>
|
||||
<select id="drops-rare-modifier">
|
||||
<option value="0">No modifier</option>
|
||||
<option value="0.1">Brutal Peeps +1 (+0.1%)</option>
|
||||
<option value="0.2">Brutal Peeps +2 (+0.2%)</option>
|
||||
<option value="0.5">Brutal Peeps +3 (+0.5%)</option>
|
||||
<option value="0.6">Brutal Peeps +4 (+0.6%)</option>
|
||||
<option value="0.8">Brutal Peeps +5 (+0.8%)</option>
|
||||
<option value="0.9">Brutal Peeps +6 (+0.9%)</option>
|
||||
<option value="1.0">Brutal Peeps +7 (+1.0%)</option>
|
||||
<option value="2.0">Brutal Peeps +8 (+2.0%)</option>
|
||||
<option value="3.0">Brutal Peeps +9 (+3.0%)</option>
|
||||
<option value="4.0">Brutal Peeps +10 (+4.0%)</option>
|
||||
<option value="5.0">Brutal Peeps +11 (+5.0%)</option>
|
||||
</select>
|
||||
<p class="drops-field-note">Applies to the Rate column for V2 PC and BB/V4.</p>
|
||||
</div>
|
||||
|
||||
<label for="drops-rare-mode">Mode</label>
|
||||
<select id="drops-rare-mode">
|
||||
<option value="">All modes</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 +127,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-12" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"label": "Hardcore",
|
||||
"mode": "hardcore",
|
||||
"tables": [
|
||||
{
|
||||
"label": "BB",
|
||||
"path": "bb.json",
|
||||
"rows": 7200,
|
||||
"version": "bb"
|
||||
}
|
||||
]
|
||||
}
|
||||
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
+134
@@ -2739,3 +2739,137 @@ 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.drops-field-note {
|
||||
margin: 0.35rem 0 0.75rem;
|
||||
color: rgba(255, 255, 255, 0.62);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.drops-rate-base {
|
||||
display: block;
|
||||
margin-top: 0.15rem;
|
||||
color: rgba(255, 255, 255, 0.58);
|
||||
font-size: 0.72rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
.drops-sort-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.4rem;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
letter-spacing: inherit;
|
||||
text-align: left;
|
||||
text-transform: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.drops-sort-button:hover,
|
||||
.drops-sort-button.is-active {
|
||||
color: rgba(255, 255, 255, 0.96);
|
||||
}
|
||||
|
||||
.drops-sort-arrow {
|
||||
min-width: 0.75rem;
|
||||
color: rgba(255, 255, 255, 0.62);
|
||||
font-size: 0.66rem;
|
||||
}
|
||||
|
||||
|
||||
.drops-pager {
|
||||
margin: 0.9rem 1rem 1rem;
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user