From 4bc8cdd68a236107a1c6e74525d946381508456f Mon Sep 17 00:00:00 2001
From: I Made Setia Baruna <setia.baruna@sprintasia.co.id>
Date: Mon, 8 Mar 2021 23:02:43 +0800
Subject: [PATCH] Improve wish stuff

---
 src/components/WishImportModal.svelte |  2 +-
 src/routes/wish/_counter.svelte       |  3 ++-
 src/routes/wish/_summary.svelte       | 25 +++++++++++++++++++++++++
 src/routes/wish/_summaryItem.svelte   | 16 ++++++----------
 4 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/components/WishImportModal.svelte b/src/components/WishImportModal.svelte
index 1f0d3139..7cfc2ab1 100644
--- a/src/components/WishImportModal.svelte
+++ b/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';
diff --git a/src/routes/wish/_counter.svelte b/src/routes/wish/_counter.svelte
index a48f712a..e7ddc659 100644
--- a/src/routes/wish/_counter.svelte
+++ b/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();
diff --git a/src/routes/wish/_summary.svelte b/src/routes/wish/_summary.svelte
index 9f61bd0a..c1705e4a 100644
--- a/src/routes/wish/_summary.svelte
+++ b/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,
diff --git a/src/routes/wish/_summaryItem.svelte b/src/routes/wish/_summaryItem.svelte
index dd92b3eb..03d8d897 100644
--- a/src/routes/wish/_summaryItem.svelte
+++ b/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>