Add wish counter manual edit

src/components/Input.svelte

@@ -32,5 +32,5 @@
     {max}
     on:change
     on:input={handleInput}
-    class={`w-full ${icon ? 'pl-12' : 'pl-4'} pr-4 text-white placeholder-gray-500 leading-none bg-transparent border-none focus:outline-none`} />
+    class={`w-full ${icon ? 'pl-12' : 'pl-4'} min-h-full pr-4 text-white placeholder-gray-500 leading-none bg-transparent border-none focus:outline-none`} />
 </div>

src/components/WishCounterHowToModal.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { mdiStar } from '@mdi/js';
+  import { mdiPencil, mdiStar } from '@mdi/js';
   import Icon from './Icon.svelte';
 </script>
 
@@ -60,4 +60,11 @@
       occur (maybe you got it on the 1st or even the 10th). To make the counter still accurate, you need to check it on
       the history table and add it 1 by 1 like you do 1 pull Wish.</span>
   </div>
+  <div class="text-white p-2 bg-background rounded-xl mt-4">
+    You can also press
+    <b class="rounded-lg px-2 py-1 border-white border inline-flex items-center"><Icon
+        path={mdiPencil}
+        size={0.7} /></b>
+    button to edit the values manually!
+  </div>
 </div>

src/routes/wish/_counter.svelte

@@ -1,18 +1,26 @@
 <script>
   import { onMount } from 'svelte';
-  import { mdiStar } from '@mdi/js';
+  import { mdiPencil, mdiStar } from '@mdi/js';
   import debounce from 'lodash/debounce';
 
   import Button from '../../components/Button.svelte';
   import Icon from '../../components/Icon.svelte';
+  import Input from '../../components/Input.svelte';
   import { readSave, updateSave, fromRemote } from '../../stores/saveManager';
 
   export let id = '';
   export let name = '';
+
+  let isEdit = false;
+
   let total = 0;
   let legendary = 0;
   let rare = 0;
 
+  let totalEdit = 0;
+  let legendaryEdit = 0;
+  let rareEdit = 0;
+
   $: path = `wish-counter-${id}`;
   $: if ($fromRemote) {
     readLocalData();
@@ -22,6 +30,24 @@
     readLocalData();
   });
 
+  function toggleEdit() {
+    isEdit = !isEdit;
+    if (isEdit) {
+      totalEdit = total;
+      legendaryEdit = legendary;
+      rareEdit = rare;
+    }
+  }
+
+  function saveEdit() {
+    total = totalEdit;
+    legendary = legendaryEdit;
+    rare = rareEdit;
+    saveData();
+
+    isEdit = false;
+  }
+
   function readLocalData() {
     console.log('wish read local');
     const data = readSave(path);
@@ -82,44 +108,62 @@
 </script>
 
 <div class="bg-item rounded-xl p-4 inline-flex flex-col w-full">
-  <h2 class="font-display font-bold text-2xl text-white mb-2">{name}</h2>
+  <div class="flex justify-between mb-2">
+    <h2 class="font-display font-bold text-2xl text-white">{name}</h2>
+    <Button size="sm" on:click={toggleEdit}>
+      <Icon path={mdiPencil} color="white" />
+    </Button>
+  </div>
   <div class="flex flex-col w-full">
-    <div class="bg-background rounded-xl p-4 flex flex-row items-center justify-center mb-2">
+    <div
+      class={`${isEdit ? 'bg-item flex-col py-2' : 'bg-background flex-row items-center justify-center mb-2 p-4'} rounded-xl flex`}>
       <span class="text-gray-200 whitespace-no-wrap flex-1">Lifetime Pulls</span>
-      <span class="font-black text-3xl text-white ml-4">{total}</span>
+      {#if isEdit}
+        <Input type="number" min={1} bind:value={totalEdit} />
+      {:else}<span class="font-black text-3xl text-white ml-4">{total}</span>{/if}
     </div>
-    <div class="bg-background rounded-xl p-4 flex flex-row items-center justify-center mb-2">
+    <div
+      class={`${isEdit ? 'bg-item flex-col py-2' : 'bg-background flex-row items-center justify-center mb-2 p-4'} rounded-xl flex`}>
       <span class="text-gray-200 whitespace-no-wrap flex-1">
         5
         <Icon path={mdiStar} size={0.75} className="mb-1" />
         Pity
         <br /><span class="text-gray-600">Guaranteed at 90</span>
       </span>
-      <span class="font-black text-3xl text-legendary-from ml-4">{legendary}</span>
+      {#if isEdit}
+        <Input type="number" min={1} bind:value={legendaryEdit} />
+      {:else}<span class="font-black text-3xl text-legendary-from ml-4">{legendary}</span>{/if}
     </div>
-    <div class="bg-background rounded-xl p-4 flex flex-row items-center justify-center">
+    <div
+      class={`${isEdit ? 'bg-item flex-col py-2' : 'bg-background flex-row items-center justify-center mb-2 p-4'} rounded-xl flex`}>
       <span class="text-gray-200 whitespace-no-wrap flex-1">
         4
         <Icon path={mdiStar} size={0.75} className="mb-1" />
         Pity
         <br /><span class="text-gray-600">Guaranteed at 10</span>
       </span>
-      <span class="font-black text-3xl text-rare-from ml-4">{rare}</span>
+      {#if isEdit}
-    </div>
+        <Input type="number" min={1} bind:value={rareEdit} />
-    <div class="flex gap-2 mt-2">
+      {:else}<span class="font-black text-3xl text-rare-from ml-4">{rare}</span>{/if}
-      <Button on:click={getLegendary} className="flex-1">
-        Get 5
-        <Icon path={mdiStar} size={0.75} className="mb-1" />
-      </Button>
-      <Button on:click={getRare} className="flex-1">
-        Get 4
-        <Icon path={mdiStar} size={0.75} className="mb-1" />
-      </Button>
-    </div>
-    <div class="flex gap-2 mt-2">
-      <Button on:click={() => add(1)} className="flex-1">+1</Button>
-      <Button on:click={() => add(10)} className="flex-1">+10</Button>
-      <Button on:click={() => add(-1)} className="flex-1">-1</Button>
     </div>
+    {#if isEdit}
+      <Button on:click={saveEdit} className="mt-4">Save</Button>
+    {:else}
+      <div class="flex gap-2 mt-2">
+        <Button on:click={getLegendary} className="flex-1">
+          Get 5
+          <Icon path={mdiStar} size={0.75} className="mb-1" />
+        </Button>
+        <Button on:click={getRare} className="flex-1">
+          Get 4
+          <Icon path={mdiStar} size={0.75} className="mb-1" />
+        </Button>
+      </div>
+      <div class="flex gap-2 mt-2">
+        <Button on:click={() => add(1)} className="flex-1">+1</Button>
+        <Button on:click={() => add(10)} className="flex-1">+10</Button>
+        <Button on:click={() => add(-1)} className="flex-1">-1</Button>
+      </div>
+    {/if}
   </div>
 </div>