diff --git a/index.html b/index.html index 6813642..9c1c837 100644 --- a/index.html +++ b/index.html @@ -42,7 +42,8 @@ - + + diff --git a/js/main.js b/js/main.js index 0f8637e..6382460 100644 --- a/js/main.js +++ b/js/main.js @@ -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(); })();