Update wish counter

src/components/WishCounterHowToModal.svelte

@@ -1,14 +1,34 @@
 <script>
   import { mdiPencil, mdiStar } from '@mdi/js';
   import Icon from './Icon.svelte';
+  import Checkbox from '../components/Checkbox.svelte';
+
+  export let setManualInput;
+  export let settings;
+
+  let enableManual = settings.manualInput;
+
+  function toggleManual() {
+    setManualInput(enableManual);
+  }
+
+  $: enableManual, toggleManual();
 </script>
 
 <div>
-  <h1 class="font-display text-white text-xl mb-4">How to use Wish Counter</h1>
+  <h1 class="font-display text-white text-xl mb-4">Wish Counter Help & Settings</h1>
   <div class="text-white p-2 bg-background rounded-xl">
+    <div class="py-2 pl-4">
+      <Checkbox disabled={false} bind:checked={enableManual}
+        ><span class="select-none cursor-pointer">Enable Manual Input</span></Checkbox
+      >
+    </div>
+    <p class="text-red-300">
+      Using the Auto Import and manual input together is not recommended, still need some testing!
+    </p>
     <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>
+  <h1 class="font-display text-white text-xl mt-6 mb-4">How to use manual input</h1>
   <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">

src/routes/wish/_counter.svelte

@@ -18,6 +18,7 @@
 
   let numberFormat = Intl.NumberFormat();
 
+  export let manualInput = false;
   export let id = '';
   export let name = '';
   export let legendaryPity = 90;
@@ -241,9 +242,11 @@
 <div class="bg-item rounded-xl p-4 inline-flex flex-col w-full" style="height: min-content;">
   <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>
+    {#if manualInput}
+      <Button size="sm" on:click={toggleEdit}>
+        <Icon path={mdiPencil} color="white" />
+      </Button>
+    {/if}
   </div>
   <div class="flex flex-col w-full">
     <div
@@ -294,7 +297,7 @@
     </div>
     {#if isEdit}
       <Button on:click={saveEdit} className="mt-4">Save</Button>
-    {:else}
+    {:else if manualInput}
       <div class="flex gap-2 mt-2">
         <Button on:click={getLegendary} className="flex-1">
           Get 5
@@ -312,7 +315,7 @@
       </div>
     {/if}
   </div>
-  <div class="flex justify-center items-end h-8 mt-2 cursor-pointer" on:click={toggleDetail}>
+  <div class={`flex justify-center items-end h-8 cursor-pointer ${manualInput ? 'mt-2' : ''}`} on:click={toggleDetail}>
     <Icon
       path={mdiChevronDown}
       color="white"
@@ -321,12 +324,14 @@
   </div>
   {#if isDetailOpen}
     <div transition:slide class="mt-4 text-white">
-      <div class="mb-2 flex justify-end">
-        <div class="bg-background rounded-xl w-full px-4 mr-2 flex items-center">
-          <span>Click the list to edit or delete</span>
+      {#if manualInput}
+        <div class="mb-2 flex justify-end">
+          <div class="bg-background rounded-xl w-full px-4 mr-2 flex items-center">
+            <span>Click the list to edit or delete</span>
+          </div>
+          <Button size="sm" className="w-16" on:click={() => openAddModal(0)}>Add</Button>
         </div>
-        <Button size="sm" className="w-16" on:click={() => openAddModal(0)}>Add</Button>
-      </div>
+      {/if}
       <div class="flex">
         <button on:click={() => toggleShowRarity(0)} class={`pill legendary ${showRarity[0] ? 'active' : ''}`}>
           5 <Icon path={mdiStar} size={0.75} className="mb-1" />
@@ -345,7 +350,7 @@
           <th class="border-b border-gray-700 text-gray-400 font-display text-right">Pity</th>
         </tr>
         {#each sortedPull as pull, index}
-          <tr on:click={() => openEditModal(index, pull.type, pull.id, pull.time, pull.pity)}>
+          <tr on:click={manualInput ? () => openEditModal(index, pull.type, pull.id, pull.time, pull.pity) : () => {}}>
             {#if pull.type === 'character'}
               <td
                 class={`border-b border-gray-700 py-1 pl-2 font-semibold ${

src/routes/wish/_firstTime.svelte

@@ -0,0 +1,42 @@
+<script>
+  import { fade } from 'svelte/transition';
+  import { mdiArrowUp, mdiClose } from '@mdi/js';
+
+  import Button from '../../components/Button.svelte';
+  import Icon from '../../components/Icon.svelte';
+
+  export let processFirstTimePopup;
+
+  function enableManual() {
+    processFirstTimePopup(false, true);
+  }
+
+  function closePopup() {
+    processFirstTimePopup(false, false);
+  }
+</script>
+
+<div transition:fade={{ duration: 100 }} class="bg-item p-4 rounded-xl mb-4 text-white flex items-start">
+  <div class="flex-1">
+    <p>
+      Welcome to Paimon.moe Wish Counter! The recommended usage is to import your wish history with the Auto Importer.
+    </p>
+    <p class="mb-2">
+      To start, press the <span class="bg-background px-2 rounded-xl">Auto Import</span> button up there <Icon
+        path={mdiArrowUp}
+      />
+    </p>
+    <p class="text-gray-400">
+      If you want to manually input the data, you can enable it here: <Button
+        on:click={enableManual}
+        className="text-gray-400"
+        size="sm">Use Manual Input</Button
+      >
+    </p>
+  </div>
+  <div>
+    <div on:click={closePopup} class="hover:opacity-50 cursor-pointer pl-2 pb-2">
+      <Icon path={mdiClose} color="white" />
+    </div>
+  </div>
+</div>

src/routes/wish/index.svelte

@@ -1,14 +1,16 @@
 <script>
   import { mdiDatabaseImport, mdiHelpCircle } from '@mdi/js';
-  import { getContext } from 'svelte';
+  import { getContext, onMount } from 'svelte';
 
   import Button from '../../components/Button.svelte';
   import Icon from '../../components/Icon.svelte';
   import HowToModal from '../../components/WishCounterHowToModal.svelte';
   import ImportModal from '../../components/WishImportModal.svelte';
-  
+  import { fromRemote, readSave, updateSave } from '../../stores/saveManager';
+
   import Summary from './_summary.svelte';
   import Counter from './_counter.svelte';
+  import FirstTimePopup from './_firstTime.svelte';
 
   const { open: openModal, close: closeModal } = getContext('simple-modal');
 
@@ -18,10 +20,62 @@
   let counter4;
   let summary;
 
+  const path = 'wish-counter-setting';
+
+  let settings = {
+    firstTime: false,
+    manualInput: false,
+  };
+
+  $: if ($fromRemote) {
+    readLocalData();
+  }
+
+  onMount(() => {
+    readLocalData();
+  });
+
+  function readLocalData() {
+    console.log('wish read setting');
+    const data = readSave(path);
+    if (data !== null) {
+      settings = JSON.parse(data);
+    } else {
+      settings = {
+        firstTime: true,
+        manualInput: false,
+      };
+    }
+  }
+
+  function setManualInput(val) {
+    if (settings.manualInput === val) return;
+
+    settings = {
+      ...settings,
+      manualInput: val,
+    };
+
+    updateSave(path, JSON.stringify(settings));
+  }
+
+  function processFirstTimePopup(val, manualVal) {
+    settings = {
+      ...settings,
+      firstTime: val,
+      manualInput: manualVal,
+    };
+
+    updateSave(path, JSON.stringify(settings));
+  }
+
   function openHowTo() {
     openModal(
       HowToModal,
-      {},
+      {
+        setManualInput,
+        settings,
+      },
       {
         closeButton: false,
         styleWindow: { background: '#25294A', width: '800px' },
@@ -43,7 +97,7 @@
     );
   }
 
-  function closeImportModal() {    
+  function closeImportModal() {
     closeModal();
     counter1.readLocalData();
     counter2.readLocalData();
@@ -66,30 +120,39 @@
 <div class="pt-20 lg:ml-64 lg:pt-8 px-4 md:px-8">
   <div class="flex flex-col md:flex-row mb-4 items-center">
     <h1 class="font-display font-black text-5xl text-white text-center md:text-left md:mr-4">Wish Counter</h1>
-    <Button on:click={openHowTo} className="hidden md:block">
-      <Icon size={0.8} path={mdiHelpCircle} />
-      How To Use
-    </Button>
-    <Button className="ml-2 hidden md:block" on:click={openImport}>
+    <Button className="mr-2 hidden md:block" on:click={openImport}>
       <Icon size={0.8} path={mdiDatabaseImport} />
       Auto Import
     </Button>
+    <Button on:click={openHowTo} className="hidden md:block">
+      <Icon size={0.8} path={mdiHelpCircle} />
+      Help & Setting
+    </Button>
     <div class="md:hidden flex flex-wrap justify-center">
-      <Button className="m-1" on:click={openHowTo}>
-        <Icon size={0.8} path={mdiHelpCircle} />
-        How To Use
-      </Button>
       <Button className="m-1" on:click={openImport}>
         <Icon size={0.8} path={mdiDatabaseImport} />
         Auto Import
       </Button>
+      <Button className="m-1" on:click={openHowTo}>
+        <Icon size={0.8} path={mdiHelpCircle} />
+        How To Use
+      </Button>
     </div>
   </div>
+  {#if settings.firstTime}
+    <FirstTimePopup {processFirstTimePopup} />
+  {/if}
   <div class="grid gap-4 grid-cols-1 md:grid-cols-2 xl:grid-cols-3 max-w-screen-xl">
-    <Counter bind:this={counter1} id="character-event" name="Character Event" />
-    <Counter bind:this={counter2} id="weapon-event" name="Weapon Event" legendaryPity={80} />
-    <Counter bind:this={counter3} id="standard" name="Standard" />
-    <Counter bind:this={counter4} id="beginners" name="Beginners' Wish" />
+    <Counter bind:this={counter1} manualInput={settings.manualInput} id="character-event" name="Character Event" />
+    <Counter
+      bind:this={counter2}
+      manualInput={settings.manualInput}
+      id="weapon-event"
+      name="Weapon Event"
+      legendaryPity={80}
+    />
+    <Counter bind:this={counter3} manualInput={settings.manualInput} id="standard" name="Standard" />
+    <Counter bind:this={counter4} manualInput={settings.manualInput} id="beginners" name="Beginners' Wish" />
     <Summary bind:this={summary} />
   </div>
 </div>