Add character filter

src/locales/en.json

@@ -78,6 +78,7 @@
     "talents": "Talents",
     "passiveTalents": "Passive Talents",
     "constellations": "Constellations",
+    "const": "Const",
     "asc": "ASC",
     "lvl": "LVL",
     "hp": "HP",
@@ -98,7 +99,8 @@
     "cryoDamageBonus": "Cryo DMG Bonus",
     "anemoDamageBonus": "Anemo DMG Bonus",
     "physicalDamageBonus": "Physical DMG Bonus",
-    "geoDamageBonus": "Geo DMG Bonus"
+    "geoDamageBonus": "Geo DMG Bonus",
+    "sortBy": "Sort by..."
   },
   "wish": {
     "title": "Wish Counter",

src/routes/characters/index.svelte

@@ -1,7 +1,7 @@
 <script>
   import { t } from 'svelte-i18n';
   import { onMount } from 'svelte';
-  import { mdiStar, mdiViewGrid, mdiViewList } from '@mdi/js';
+  import { mdiSortAscending, mdiSortDescending, mdiStar, mdiViewGrid, mdiViewList } from '@mdi/js';
 
   import Icon from '../../components/Icon.svelte';
   import TableHeader from '../../components/Table/TableHeader.svelte';
@@ -9,59 +9,99 @@
   import { characters } from '../../data/characters';
   import { getAccountPrefix } from '../../stores/account';
   import { readSave, updateSave } from '../../stores/saveManager';
+  import Select from '../../components/Select.svelte';
+  import Button from '../../components/Button.svelte';
 
+  const sortOptions = [
+    { label: $t('characters.name'), value: 'name' },
+    { label: $t('characters.element'), value: 'element' },
+    { label: $t('characters.rarity'), value: 'rarity' },
+    { label: $t('characters.weapon'), value: 'weapon' },
+    { label: $t('characters.constellations'), value: 'constellation' },
+  ];
+
+  let sortBySelect = null;
   let sortBy = '';
   let sortOrder = false;
   let type = 'grid';
   let showConstellation = false;
   let constellation = {};
+  let elementFilter = {
+    pyro: true,
+    hydro: true,
+    anemo: true,
+    electro: true,
+    cryo: true,
+    dendro: true,
+  };
+  let weaponFilter = {
+    sword: true,
+    claymore: true,
+    polearm: true,
+    catalyst: true,
+    bow: true,
+  };
 
-  $: chars = Object.entries(characters).sort((a, b) => {
+  $: chars = Object.entries(characters)
-    switch (sortBy) {
+    .filter((e) => elementFilter[e[1].element.id] && weaponFilter[e[1].weapon.id])
-      case 'name':
+    .sort((a, b) => {
-        if (sortOrder) {
+      switch (sortBy) {
-          return a[1].name.localeCompare(b[1].name);
+        case 'name':
-        } else {
+          if (sortOrder) {
-          return b[1].name.localeCompare(a[1].name);
+            return a[1].name.localeCompare(b[1].name);
-        }
+          } else {
-      case 'element':
+            return b[1].name.localeCompare(a[1].name);
-        if (sortOrder) {
+          }
-          return a[1].element.name.localeCompare(b[1].element.name);
+        case 'element':
-        } else {
+          if (sortOrder) {
-          return b[1].element.name.localeCompare(a[1].element.name);
+            return a[1].element.name.localeCompare(b[1].element.name);
-        }
+          } else {
-      case 'rarity':
+            return b[1].element.name.localeCompare(a[1].element.name);
-        if (sortOrder) {
+          }
-          return a[1].rarity - b[1].rarity;
+        case 'rarity':
-        } else {
+          if (sortOrder) {
-          return b[1].rarity - a[1].rarity;
+            return a[1].rarity - b[1].rarity;
-        }
+          } else {
-      case 'weapon':
+            return b[1].rarity - a[1].rarity;
-        if (sortOrder) {
+          }
-          return a[1].weapon.name.localeCompare(b[1].weapon.name);
+        case 'weapon':
-        } else {
+          if (sortOrder) {
-          return b[1].weapon.name.localeCompare(a[1].weapon.name);
+            return a[1].weapon.name.localeCompare(b[1].weapon.name);
-        }
+          } else {
-      case 'hp':
+            return b[1].weapon.name.localeCompare(a[1].weapon.name);
-        if (sortOrder) {
+          }
-          return a[1].stats.hp - b[1].stats.hp;
+        case 'hp':
-        } else {
+          if (sortOrder) {
-          return b[1].stats.hp - a[1].stats.hp;
+            return a[1].stats.hp - b[1].stats.hp;
-        }
+          } else {
-      case 'atk':
+            return b[1].stats.hp - a[1].stats.hp;
-        if (sortOrder) {
+          }
-          return a[1].stats.atk - b[1].stats.atk;
+        case 'atk':
-        } else {
+          if (sortOrder) {
-          return b[1].stats.atk - a[1].stats.atk;
+            return a[1].stats.atk - b[1].stats.atk;
-        }
+          } else {
-      case 'def':
+            return b[1].stats.atk - a[1].stats.atk;
-        if (sortOrder) {
+          }
-          return a[1].stats.def - b[1].stats.def;
+        case 'def':
-        } else {
+          if (sortOrder) {
-          return b[1].stats.def - a[1].stats.def;
+            return a[1].stats.def - b[1].stats.def;
-        }
+          } else {
-    }
+            return b[1].stats.def - a[1].stats.def;
-  });
+          }
+        case 'constellation':
+          const ca = constellation[a[0]]
+            ? constellation[a[0]].default + constellation[a[0]].wish + constellation[a[0]].manual - 1
+            : -999999;
+          const cb = constellation[b[0]]
+            ? constellation[b[0]].default + constellation[b[0]].wish + constellation[b[0]].manual - 1
+            : -999999;
+          if (sortOrder) {
+            return ca - cb;
+          } else {
+            return cb - ca;
+          }
+      }
+    });
 
   function sort(by) {
     if (sortBy === by) {
@@ -71,6 +111,22 @@
     }
   }
 
+  function orderSelectChanged() {
+    sort(sortBySelect.value);
+  }
+
+  function orderGridChange() {
+    sortOrder = !sortOrder;
+  }
+
+  function toggleElement(element) {
+    elementFilter[element] = !elementFilter[element];
+  }
+
+  function toggleWeapon(weapon) {
+    weaponFilter[weapon] = !weaponFilter[weapon];
+  }
+
   async function processWishes() {
     const chars = {
       amber: {
@@ -153,6 +209,7 @@
   onMount(async () => {
     await getConstellation();
   });
+
 </script>
 
 <svelte:head>
@@ -192,6 +249,106 @@
   </div>
 
   {#if type === 'grid'}
+    <div class="flex flex-col lg:flex-row flex-wrap px-4 md:pl-8 md:pr-4 mb-4">
+      <div class="flex mr-2 mb-2 lg:mb-0">
+        <Select
+          bind:selected={sortBySelect}
+          on:change={orderSelectChanged}
+          options={sortOptions}
+          className="w-full md:w-48 mr-2"
+          placeholder={$t('characters.sortBy')}
+        />
+        <Button on:click={orderGridChange}>
+          <Icon path={sortOrder ? mdiSortAscending : mdiSortDescending} />
+        </Button>
+      </div>
+      <div class="flex flex-col md:flex-row">
+        <div class="flex items-center justify-center md:justify-start md:mr-4">
+          <button
+            on:click={() => toggleElement('pyro')}
+            class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.pyro
+              ? ''
+              : 'opacity-25'}"
+          >
+            <img src="/images/elements/pyro.png" alt="pyro" class="w-8 h-8" style="min-width: 2rem;" />
+          </button>
+          <button
+            on:click={() => toggleElement('hydro')}
+            class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.hydro
+              ? ''
+              : 'opacity-25'}"
+          >
+            <img src="/images/elements/hydro.png" alt="hydro" class="w-8 h-8" style="min-width: 2rem;" />
+          </button>
+          <button
+            on:click={() => toggleElement('anemo')}
+            class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.anemo
+              ? ''
+              : 'opacity-25'}"
+          >
+            <img src="/images/elements/anemo.png" alt="anemo" class="w-8 h-8" style="min-width: 2rem;" />
+          </button>
+          <button
+            on:click={() => toggleElement('electro')}
+            class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.electro
+              ? ''
+              : 'opacity-25'}"
+          >
+            <img src="/images/elements/electro.png" alt="electro" class="w-8 h-8" style="min-width: 2rem;" />
+          </button>
+          <button
+            on:click={() => toggleElement('cryo')}
+            class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.cryo
+              ? ''
+              : 'opacity-25'}"
+          >
+            <img src="/images/elements/cryo.png" alt="cryo" class="w-8 h-8" style="min-width: 2rem;" />
+          </button>
+        </div>
+        <div class="flex items-center justify-center md:justify-start">
+          <button
+            on:click={() => toggleWeapon('sword')}
+            class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.sword
+              ? ''
+              : 'opacity-25'}"
+          >
+            <img src="/images/weapons/sword.png" alt="sword" class="w-8 h-8" style="min-width: 2rem;" />
+          </button>
+          <button
+            on:click={() => toggleWeapon('claymore')}
+            class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.claymore
+              ? ''
+              : 'opacity-25'}"
+          >
+            <img src="/images/weapons/claymore.png" alt="claymore" class="w-8 h-8" style="min-width: 2rem;" />
+          </button>
+          <button
+            on:click={() => toggleWeapon('polearm')}
+            class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.polearm
+              ? ''
+              : 'opacity-25'}"
+          >
+            <img src="/images/weapons/polearm.png" alt="polearm" class="w-8 h-8" style="min-width: 2rem;" />
+          </button>
+          <button
+            on:click={() => toggleWeapon('catalyst')}
+            class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.catalyst
+              ? ''
+              : 'opacity-25'}"
+          >
+            <img src="/images/weapons/catalyst.png" alt="catalyst" class="w-8 h-8" style="min-width: 2rem;" />
+          </button>
+          <button
+            on:click={() => toggleWeapon('bow')}
+            class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.bow
+              ? ''
+              : 'opacity-25'}"
+          >
+            <img src="/images/weapons/bow.png" alt="bow" class="w-8 h-8" style="min-width: 2rem;" />
+          </button>
+        </div>
+      </div>
+    </div>
     <div class="px-4 md:pl-6 md:pr-4 flex flex-wrap max-w-screen-xl mt-2">
       {#each chars as [id, char] (id)}
         <a
@@ -214,7 +371,7 @@
           >
             {#if constellation[id]}
               <span class="mx-1 text-white text-xs font-semibold">
-                C{Math.max(0, (constellation[id].default + constellation[id].wish + constellation[id].manual) - 1)}
+                C{Math.max(0, constellation[id].default + constellation[id].wish + constellation[id].manual - 1)}
               </span>
             {/if}
             <img class="w-4 h-4" src={`/images/elements/${char.element.id}.png`} alt={char.element.name} />
@@ -240,6 +397,14 @@
             <TableHeader on:click={() => sort('element')} sort={sortBy === 'element'} order={sortOrder} align="center">
               {$t('characters.element')}
             </TableHeader>
+            <TableHeader
+              on:click={() => sort('constellation')}
+              sort={sortBy === 'constellation'}
+              order={sortOrder}
+              align="center"
+            >
+              {$t('characters.const')}
+            </TableHeader>
             <TableHeader on:click={() => sort('rarity')} sort={sortBy === 'rarity'} order={sortOrder} align="center">
               {$t('characters.rarity')}
             </TableHeader>
@@ -266,6 +431,11 @@
                 <td class="text-center">
                   <img class="w-8 h-8 inline" src={`/images/elements/${char.element.id}.png`} alt={char.element.name} />
                 </td>
+                <td class="text-center">
+                  C{constellation[id]
+                    ? Math.max(0, constellation[id].default + constellation[id].wish + constellation[id].manual - 1)
+                    : 0}
+                </td>
                 <td class="text-center">
                   <Icon color={char.rarity === 5 ? '#B9812E' : '#AD76B0'} path={mdiStar} />
                 </td>
@@ -319,4 +489,5 @@
     padding-top: 0.85rem;
     padding-bottom: 0.85rem;
   }
+
 </style>