scripts/import-newserv-drop-tables.py

@@ -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()

site/drop-tables.js

@@ -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("<", "&lt;")
+      .replaceAll(">", "&gt;")
+      .replaceAll('"', "&quot;")
+      .replaceAll("'", "&#039;");
+  }
+
+  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();
+  });
+})();

site/drops.html

@@ -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>
+          <div id="drops-peeps-controls">
-          <select id="drops-version" data-drops-version-wrap>
+            <label for="drops-version">Version</label>
-            <option>V1</option>
+            <select id="drops-version">
-            <option>V2</option>
+              <option value="v1">V1</option>
-            <option>V3</option>
+              <option value="v2">V2</option>
-            <option>V4</option>
+              <option value="v3">V3</option>
-          </select>
+              <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>
+            <div id="drops-rare-modifier-wrap" hidden>
-          <select id="drops-episode" data-drops-episode-wrap hidden>
+              <label for="drops-rare-modifier">Rare bonus modifier</label>
-            <option>Episode 1</option>
+              <select id="drops-rare-modifier">
-            <option>Episode 2</option>
+                <option value="0">No modifier</option>
-            <option>Episode 4</option>
+                <option value="0.1">Brutal Peeps +1 (+0.1%)</option>
-          </select>
+                <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>

site/generated/drops/hardcore/index.json

@@ -0,0 +1,12 @@
+{
+  "label": "Hardcore",
+  "mode": "hardcore",
+  "tables": [
+    {
+      "label": "BB",
+      "path": "bb.json",
+      "rows": 7200,
+      "version": "bb"
+    }
+  ]
+}

site/generated/drops/peeps/index.json

@@ -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"
+    }
+  ]
+}

site/style.css

@@ -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;
+}
+