Merge pull request #7 from Cametendo/codex/add-images-for-characters-and-devil-fruits

Fetch/hydrate proper wiki images, improve portraits, and add deceased filter
This commit is contained in:
Cametendo
2026-08-15 02:21:33 +02:00
committed by GitHub
2 changed files with 11 additions and 2 deletions

View File

@@ -42,7 +42,8 @@
<select id="affiliation-select" class="select">
<option value="">All affiliations</option>
</select>
<label class="checkbox"><input type="checkbox" id="fruit-only-checkbox" /> Devil Fruit users only</label>
<label class="checkbox"><input type="checkbox" id="fruit-only-checkbox" autocomplete="off" /> Devil Fruit users only</label>
<label class="checkbox"><input type="checkbox" id="deceased-only-checkbox" autocomplete="off" /> Deceased only</label>
<span class="filter-meta" id="result-count"></span>
</div>
</section>

View File

@@ -1,12 +1,17 @@
/* Home page: character grid with search + affiliation + devil-fruit filters. */
/* Home page: character grid with search + affiliation + devil-fruit + deceased filters. */
(function () {
const grid = document.getElementById('character-grid');
const searchInput = document.getElementById('search-input');
const affiliationSelect = document.getElementById('affiliation-select');
const fruitOnlyCheckbox = document.getElementById('fruit-only-checkbox');
const deceasedOnlyCheckbox = document.getElementById('deceased-only-checkbox');
const resultCount = document.getElementById('result-count');
// Browsers may restore checkbox state across reloads; start with the full roster visible.
fruitOnlyCheckbox.checked = false;
deceasedOnlyCheckbox.checked = false;
document.getElementById('stat-characters').textContent = CHARACTERS.length;
document.getElementById('stat-fruits').textContent = FRUITS.length;
@@ -22,9 +27,11 @@
const term = searchInput.value.trim().toLowerCase();
const affiliation = affiliationSelect.value;
const fruitOnly = fruitOnlyCheckbox.checked;
const deceasedOnly = deceasedOnlyCheckbox.checked;
const results = CHARACTERS.filter((c) => {
if (fruitOnly && !c.devilFruit) return false;
if (deceasedOnly && !/deceased/i.test(c.status || '')) return false;
if (affiliation && c.affiliation !== affiliation) return false;
if (term) {
const haystack = `${c.name} ${c.epithet || ''} ${c.affiliation} ${c.role}`.toLowerCase();
@@ -41,6 +48,7 @@
searchInput.addEventListener('input', applyFilters);
affiliationSelect.addEventListener('change', applyFilters);
fruitOnlyCheckbox.addEventListener('change', applyFilters);
deceasedOnlyCheckbox.addEventListener('change', applyFilters);
applyFilters();
})();