Add separate rare summary

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

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">

tailwind.config.js

@@ -21,7 +21,7 @@ module.exports = {
         primary: '#4E7CFF',
         button: '#394076',
         rare: {
-          from: '#AD76B0',
+          from: '#D28FD6',
           to: '#665680',
         },
         legendary: {