Add order achievement

src/routes/achievement/index.svelte

@@ -11,6 +11,7 @@
   import debounce from 'lodash/debounce';
 
   import Check from '../../components/Check.svelte';
+  import Checkbox from '../../components/Checkbox.svelte';
   import { getAccountPrefix } from '../../stores/account';
   import { readSave, updateSave } from '../../stores/saveManager';
 
@@ -29,6 +30,9 @@
   let obtainedPrimogem = 0;
   let categories = [];
 
+  let originalList = [];
+  let sort = false;
+
   function parseCategories() {
     categories = Object.entries(achievement).map(([id, data]) => ({
       id,
@@ -66,6 +70,28 @@
     }));
   }
 
+  function orderAchievement() {
+    if (!sort) {
+      if (originalList.length === 0) return;
+      list = originalList;
+      return;
+    }
+
+    originalList = list.slice();
+    list = list.sort((a, b) => {
+      let first = a;
+      let second = b;
+      if (Array.isArray(a)) first = a[a.length - 1];
+      if (Array.isArray(b)) second = b[b.length - 1];
+      return first.checked === second.checked ? 0 : first.checked ? 1 : -1;
+    });
+  }
+
+  function changeSort(val) {
+    sort = val;
+    orderAchievement();
+  }
+
   const saveData = debounce(() => {
     const data = JSON.stringify(checkList);
 
@@ -93,6 +119,17 @@
       }
     });
 
+    if (sort) {
+      originalList = list.slice();
+      list = list.sort((a, b) => {
+        let first = a;
+        let second = b;
+        if (Array.isArray(a)) first = a[a.length - 1];
+        if (Array.isArray(b)) second = b[b.length - 1];
+        return first.checked === second.checked ? 0 : first.checked ? 1 : -1;
+      });
+    }
+
     if (firstLoad) return;
     await tick();
     achievementContainer.scrollIntoView({
@@ -189,6 +226,9 @@
         <img src="/images/primogem.png" class="w-4 h-4 ml-1" alt="primogem" />
       </div>
     </div>
+    <div class="lg:pl-4 text-white">
+      <Checkbox checked={sort} on:change={() => changeSort(!sort)}>Show not achieved first</Checkbox>
+    </div>
   </div>
   <div class="flex flex-col lg:flex-row space-y-3 lg:space-y-0 lg:space-x-3">
     <div class="flex flex-col space-y-2 lg:h-screen lg:overflow-auto lg:sticky lg:pr-1 pb-4 category">