Add Peeps drop table viewer

This commit is contained in:
Your Name
2026-06-13 16:57:14 -04:00
parent d1965b01e4
commit 773511a6d3
9 changed files with 286981 additions and 16 deletions
+178
View File
@@ -0,0 +1,178 @@
#!/usr/bin/env python3
import json
import re
from pathlib import Path
NEWSERV = Path.home() / ".local/share/github/psopeeps-newserv"
OUT = Path("site/generated/drops/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",
}
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 main():
OUT.mkdir(parents=True, exist_ok=True)
index = {
"mode": "peeps",
"label": "Peeps",
"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 / 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"{version}: {len(rows)} rows -> {out_path}")
index_path = OUT / "index.json"
index_path.write_text(json.dumps(index, indent=2, sort_keys=True) + "\n")
print(f"index -> {index_path}")
if __name__ == "__main__":
main()
+255
View File
@@ -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("&", "&amp;")
.replaceAll("<", "&lt;")
.replaceAll(">", "&gt;")
.replaceAll('"', "&quot;")
.replaceAll("'", "&#039;");
}
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
View File
@@ -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
+30
View File
@@ -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
+85
View File
@@ -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;
}
}