Improve filters

web/index.html

@@ -172,16 +172,12 @@
           </label>
         </div>
         <label class="center">
-          <input form="filterControl" type="checkbox" name="nostart" hidden checked />
-          <span class="toggle-label | pill-shape highlight-border">
-            Hide Non-Start Forms
-          </span>
+          <input form="filterControl" type="checkbox" name="allowRepeatDexNum" hidden />
+          <span class="toggle-label | pill-shape highlight-border">Repeat Species</span>
         </label>
         <label class="center">
-          <input form="filterControl" type="checkbox" name="regional" hidden />
-          <span class="toggle-label | pill-shape highlight-border">
-            Hide Regional Forms
-          </span>
+          <input form="filterControl" type="checkbox" name="allowNoStartForms" hidden />
+          <span class="toggle-label | pill-shape highlight-border">Non-Start Forms</span>
         </label>
       </div>
       <hr />

web/main.js

@@ -500,12 +500,25 @@ const model = {
   },
 
   renderColorSearchResults() {
-    renderPokemon(
-      this.ranked
-        .filter(({ traits }) => traits.every(t => !filterElements[t]?.checked))
-        .slice(0, parseInt(colorDisplayElements.resultsToDisplay.value)),
-      colorSearchResultsTarget
-    );
+    const count = parseInt(colorDisplayElements.resultsToDisplay.value);
+    const dexNums = new Set();
+    const toRender = [];
+    for (const pkmn of this.ranked) {
+      if (toRender.length >= count) {
+        break;
+      }
+      if (!filterElements.allowNoStartForms.checked && pkmn.traits.includes("nostart")) {
+        continue;
+      }
+      if (!filterElements.allowRepeatDexNum.checked) {
+        if (dexNums.has(pkmn.num)) {
+          continue;
+        }
+        dexNums.add(pkmn.num);
+      }
+      toRender.push(pkmn);
+    }
+    renderPokemon(toRender, colorSearchResultsTarget);
   },
 };