Improve wish stuff

src/components/WishImportModal.svelte

@@ -1,6 +1,6 @@
 <script>
   import { mdiClose, mdiDownload, mdiHelpCircle, mdiLoading } from '@mdi/js';
-  import { onMount, tick } from 'svelte';
+  import { onMount } from 'svelte';
   import dayjs from 'dayjs';
 
   import { pushToast } from '../stores/toast';

src/routes/wish/_counter.svelte

@@ -39,6 +39,7 @@
     readLocalData();
   }
   $: sortedPull = pulls
+    .slice()
     .filter((e) => {
       if (e.type === 'character') {
         return showRarity[5 - characters[e.id].rarity];
@@ -46,7 +47,7 @@
         return showRarity[5 - weaponList[e.id].rarity];
       }
     })
-    .sort((a, b) => b.time - a.time);
+    .reverse();
 
   onMount(() => {
     readLocalData();

src/routes/wish/_summary.svelte

@@ -57,16 +57,23 @@
         let legendaryPity = 0;
         let legendaryPulls = [];
         let rare = 0;
+        let rareWeapon = 0;
+        let rarePityWeapon = 0;
+        let rareCharacter = 0;
+        let rarePityCharacter = 0;
         let rarePity = 0;
         for (let pull of pulls) {
           let rarity;
           let itemName;
+          let currentType;
           if (pull.type === 'character') {
             rarity = characters[pull.id].rarity;
             itemName = characters[pull.id].name;
+            currentType = 'character';
           } else if (pull.type === 'weapon') {
             rarity = weaponList[pull.id].rarity;
             itemName = weaponList[pull.id].name;
+            currentType = 'weapon';
           }
 
           if (rarity === 5) {
@@ -76,6 +83,14 @@
           } else if (rarity === 4) {
             rare++;
             rarePity += pull.pity;
+
+            if (currentType === 'character') {
+              rareCharacter++;
+              rarePityCharacter += pull.pity;
+            } else if (currentType === 'weapon') {
+              rareWeapon++;
+              rarePityWeapon += pull.pity;
+            }
           }
         }
 
@@ -84,6 +99,16 @@
             total: rare,
             percentage: total > 0 ? rare / total : 0,
             pity: rare > 0 ? rarePity / rare : 0,
+            weapon: {
+              total: rareWeapon,
+              percentage: total > 0 ? rareWeapon / total : 0,
+              pity: rare > 0 ? rarePityWeapon / rare : 0,
+            },
+            character: {
+              total: rareCharacter,
+              percentage: total > 0 ? rareCharacter / total : 0,
+              pity: rare > 0 ? rarePityCharacter / rare : 0,
+            },
           },
           legendary: {
             total: legendary,

src/routes/wish/_summaryItem.svelte

@@ -13,19 +13,15 @@
   });
 
   function calculateColor(percentage) {
-    const a = [255, 177, 63];
-    const b = [255, 77, 77];
-
-    const av = percentage;
-    const bv = 1 - percentage;
-
-    const color = [a[0] * av + b[0] * bv, a[1] * av + b[1] * bv, a[2] * av + b[2] * bv];
-
-    return `color: rgb(${color[0]},${color[1]},${color[2]});`;
+    const hue = percentage * 120;
+    return `color: hsl(${hue}, 100%, 60%);`;
   }
 </script>
 
-<div class={`bg-item rounded-xl p-4 flex flex-col w-full ${withBottomSpace ? 'mb-4' : ''}`} style="height: min-content;">
+<div
+  class={`bg-item rounded-xl p-4 flex flex-col w-full ${withBottomSpace ? 'mb-4' : ''}`}
+  style="height: min-content;"
+>
   <table>
     <tr>
       <td class="text-white text-md font-semibold pr-2 md:pr-4 flex-1 w-full">{type.name}</td>