From dcc87c2e451ed7884825a66e1ad7931a73673abd Mon Sep 17 00:00:00 2001
From: I Made Setia Baruna <setia.baruna@sprintasia.co.id>
Date: Tue, 9 Mar 2021 00:04:50 +0800
Subject: [PATCH] Add separate rare summary

---
 src/components/WishCounterHowToModal.svelte |  4 +++
 src/routes/wish/_summaryItem.svelte         | 28 +++++++++++++++++++++
 tailwind.config.js                          |  2 +-
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/components/WishCounterHowToModal.svelte b/src/components/WishCounterHowToModal.svelte
index 308a44a1..2f49b2c0 100644
--- a/src/components/WishCounterHowToModal.svelte
+++ b/src/components/WishCounterHowToModal.svelte
@@ -6,6 +6,10 @@
 <div>
   <h1 class="font-display text-white text-xl mb-4">How to use Wish Counter</h1>
   <div class="text-white p-2 bg-background rounded-xl">
+    <p>Consider using the Auto Import first, access it on button beside the button you click to open this How To</p>
+    <p class="text-red-300">Using the Auto Import and manual input together is not recommended, still need some testing!</p>
+  </div>
+  <div class="text-white p-2 bg-background rounded-xl mt-4">
     <p class="mb-2">After you do 1 pull Wish:</p>
     <p class="mb-2">
       Press
diff --git a/src/routes/wish/_summaryItem.svelte b/src/routes/wish/_summaryItem.svelte
index 03d8d897..ba9e3498 100644
--- a/src/routes/wish/_summaryItem.svelte
+++ b/src/routes/wish/_summaryItem.svelte
@@ -57,6 +57,34 @@
         {numberFormat.format(avg.rare.pity)}
       </td>
     </tr>
+    <tr>
+      <td class="text-rare-from font-semibold pl-4 md:pl-4 pr-2 md:pr-4 border-t border-gray-700">
+        └ Character
+      </td>
+      <td class="text-rare-from font-semibold pr-2 md:pr-4 text-right border-t border-gray-700">
+        {numberFormat.format(avg.rare.character.total)}
+      </td>
+      <td class="text-rare-from font-semibold pr-2 md:pr-4 text-right border-t border-gray-700">
+        {numberFormat.format(avg.rare.character.percentage * 100)}%
+      </td>
+      <td class="text-rare-from font-semibold text-right border-t border-gray-700">
+        {numberFormat.format(avg.rare.character.pity)}
+      </td>
+    </tr>
+    <tr>
+      <td class="text-rare-from font-semibold pl-4 md:pl-4 pr-2 md:pr-4 border-t border-gray-700">
+        └ Weapon
+      </td>
+      <td class="text-rare-from font-semibold pr-2 md:pr-4 text-right border-t border-gray-700">
+        {numberFormat.format(avg.rare.weapon.total)}
+      </td>
+      <td class="text-rare-from font-semibold pr-2 md:pr-4 text-right border-t border-gray-700">
+        {numberFormat.format(avg.rare.weapon.percentage * 100)}%
+      </td>
+      <td class="text-rare-from font-semibold text-right border-t border-gray-700">
+        {numberFormat.format(avg.rare.weapon.pity)}
+      </td>
+    </tr>
   </table>
   {#if avg.legendary.pulls.length > 0}
     <div class="flex flex-wrap mt-2">
diff --git a/tailwind.config.js b/tailwind.config.js
index de29a4ff..4326d2de 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -21,7 +21,7 @@ module.exports = {
         primary: '#4E7CFF',
         button: '#394076',
         rare: {
-          from: '#AD76B0',
+          from: '#D28FD6',
           to: '#665680',
         },
         legendary: {