More drop stuff
This commit is contained in:
+22
-1
@@ -8,6 +8,7 @@
|
||||
rows: [],
|
||||
table: null,
|
||||
filters: {
|
||||
mode: "",
|
||||
episode: "",
|
||||
difficulty: "",
|
||||
section: "",
|
||||
@@ -27,6 +28,7 @@
|
||||
function labelValue(value) {
|
||||
return String(value || "")
|
||||
.replace(/^Episode(\d+)$/, "Episode $1")
|
||||
.replace(/^VeryHard$/, "Very Hard")
|
||||
.replaceAll("_", " ");
|
||||
}
|
||||
|
||||
@@ -81,9 +83,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
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"), uniqueSorted(rows, "difficulty"), "All difficulties");
|
||||
fillSelect(qs("#drops-difficulty"), orderedDifficultyValues(rows), "All difficulties");
|
||||
fillSelect(qs("#drops-section"), uniqueSorted(rows, "section_id"), "All Section IDs");
|
||||
}
|
||||
|
||||
@@ -91,6 +104,7 @@
|
||||
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;
|
||||
@@ -191,6 +205,7 @@
|
||||
state.table = table;
|
||||
state.rows = await fetchJson(`generated/drops/peeps/${table.path}`);
|
||||
|
||||
state.filters.mode = "";
|
||||
state.filters.episode = "";
|
||||
state.filters.difficulty = "";
|
||||
state.filters.section = "";
|
||||
@@ -200,6 +215,7 @@
|
||||
|
||||
populateFilters(state.rows);
|
||||
|
||||
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 = "";
|
||||
@@ -230,6 +246,11 @@
|
||||
qs("#drops-mode")?.addEventListener("change", updateMode);
|
||||
qs("#drops-version")?.addEventListener("change", loadPeeps);
|
||||
|
||||
qs("#drops-rare-mode")?.addEventListener("change", (event) => {
|
||||
state.filters.mode = event.target.value;
|
||||
renderTable();
|
||||
});
|
||||
|
||||
qs("#drops-episode")?.addEventListener("change", (event) => {
|
||||
state.filters.episode = event.target.value;
|
||||
renderTable();
|
||||
|
||||
+7
-2
@@ -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?v=drops-peeps-table-viewer-20260613-1">
|
||||
<link rel="stylesheet" href="style.css?v=drops-peeps-table-viewer-20260613-2">
|
||||
<script src="app.js?v=saves-synced-20260609-2" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
@@ -46,6 +46,11 @@
|
||||
<option value="bb">BB</option>
|
||||
</select>
|
||||
|
||||
<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>
|
||||
@@ -101,6 +106,6 @@
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="drop-tables.js?v=drops-peeps-table-viewer-20260613-1" defer></script>
|
||||
<script src="drop-tables.js?v=drops-peeps-table-viewer-20260613-2" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user