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

index.html

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

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();
 })();