WIP: Todo List

src/components/Sidebar/Sidebar.svelte

@@ -62,6 +62,12 @@
     image="/images/calculator.png"
     label="Calculator"
     href="/calculator" />
+  <SidebarItem
+    on:clicked={close}
+    active={segment === 'todo'}
+    image="/images/settings.png"
+    label="Todo List"
+    href="/todo" />
   <SidebarItem
     on:clicked={close}
     active={segment === 'settings'}

src/data/itemList.js

@@ -352,4 +352,10 @@ export const itemList = {
   cecilia: { id: 'cecilia', name: 'Cecilia' },
   jueyun_chili: { id: 'jueyun_chili', name: 'Jueyun Chili' },
   silk_flower: { id: 'silk_flower', name: 'Silk Flower' },
+  mystic_enhancement_ore: { id: 'mystic_enhancement_ore', name: 'Mystic Enhancement Ore' },
+  fine_enhancement_ore: { id: 'fine_enhancement_ore', name: 'Fine Enhancement Ore' },
+  enhancement_ore: { id: 'enhancement_ore', name: 'Enhancement Ore' },
+  any_weapon_1: { id: 'any_weapon_1', name: '1 Star Weapon' },
+  any_weapon_2: { id: 'any_weapon_2', name: '2 Star Weapon' },
+  any_weapon_3: { id: 'any_weapon_3', name: '3 Star Weapon' },
 };

src/routes/calculator/_weapon.svelte

@@ -1,6 +1,6 @@
 <script>
   import { fade } from 'svelte/transition';
-  import { mdiStar, mdiClose, mdiInformationOutline } from '@mdi/js';
+  import { mdiStar, mdiClose, mdiInformationOutline, mdiCheckCircleOutline } from '@mdi/js';
 
   import Select from '../../components/Select.svelte';
   import Input from '../../components/Input.svelte';
@@ -12,6 +12,7 @@
   import Icon from '../../components/Icon.svelte';
 
   import { weaponExp } from '../../data/weaponExp';
+  import { addTodo } from '../../stores/todo';
 
   let weaponsRarity = [
     { label: '3 Star', value: 3 },
@@ -23,17 +24,55 @@
     {
       selected: true,
       disabled: true,
-      image: '/images/crystal_3.png',
+      id: 'mystic_enhancement_ore',
+      image: '/images/items/mystic_enhancement_ore.png',
       label: 'Mystic Enhancement Ore',
       value: '10000',
     },
-    { selected: true, disabled: false, image: '/images/crystal_2.png', label: 'Fine Enhancement Ore', value: '2000' },
-    { selected: true, disabled: false, image: '/images/crystal_1.png', label: 'Enhancement Ore', value: '400' },
-    { selected: true, disabled: false, image: '/images/weapons/sword.png', label: '1 Star Weapon', value: '600' },
-    { selected: true, disabled: false, image: '/images/weapons/sword.png', label: '2 Star Weapon', value: '1200' },
-    { selected: true, disabled: false, image: '/images/weapons/sword.png', label: '3 Star Weapon', value: '1800' },
+    {
+      selected: true,
+      disabled: false,
+      id: 'fine_enhancement_ore',
+      image: '/images/items/fine_enhancement_ore.png',
+      label: 'Fine Enhancement Ore',
+      value: '2000',
+    },
+    {
+      selected: true,
+      disabled: false,
+      id: 'enhancement_ore',
+      image: '/images/items/enhancement_ore.png',
+      label: 'Enhancement Ore',
+      value: '400',
+    },
+    {
+      selected: true,
+      disabled: false,
+      id: 'any_weapon_1',
+      image: '/images/weapons/sword.png',
+      label: '1 Star Weapon',
+      value: '600',
+    },
+    {
+      selected: true,
+      disabled: false,
+      id: 'any_weapon_2',
+      image: '/images/weapons/sword.png',
+      label: '2 Star Weapon',
+      value: '1200',
+    },
+    {
+      selected: true,
+      disabled: false,
+      id: 'any_weapon_3',
+      image: '/images/weapons/sword.png',
+      label: '3 Star Weapon',
+      value: '1800',
+    },
   ];
 
+  let addedToTodo = false;
+
   let withAscension = true;
 
   let rarity = null;
@@ -248,6 +287,40 @@
 
     changed = false;
   }
+
+  function addToTodo() {
+    const levelRes = usedResource.reduce((prev, item, i) => {
+      if (currentMax.usage[i] > 0) {
+        prev[item.id] = currentMax.usage[i];
+      }
+
+      return prev;
+    }, {});
+
+    const ascensionRes = Object.keys(ascensionResouce).reduce((prev, item) => {
+      if (ascensionResouce[item].amount > 0) {
+        prev[item] = ascensionResouce[item].amount;
+      }
+
+      return prev;
+    }, {});
+
+    addTodo({
+      type: 'weapon',
+      weapon: selectedWeapon,
+      level: { from: currentLevel, to: intendedLevel },
+      resources: {
+        mora: moraNeeded,
+        ...levelRes,
+        ...ascensionRes,
+      },
+    });
+
+    addedToTodo = true;
+    setTimeout(() => {
+      addedToTodo = false;
+    }, 2000);
+  }
 </script>
 
 <div class="bg-item rounded-xl p-4">
@@ -400,6 +473,14 @@
               </tr>
             {/if}
           </table>
+          <Button className="mt-2 w-full" on:click={addToTodo}>
+            {#if addedToTodo}
+              <span class="text-green-400" in:fade={{ duration: 100 }}>
+                <Icon path={mdiCheckCircleOutline} size={0.8} />
+                Added to Todo List
+              </span>
+            {:else}<span in:fade={{ duration: 100 }}>Add to Todo List </span>{/if}
+          </Button>
         </div>
       {/if}
     </div>

src/routes/todo.svelte

@@ -0,0 +1,6 @@
+<svelte:head>
+  <title>Todo List - Paimon.moe</title>
+</svelte:head>
+<div class="lg:ml-64 pt-20 px-8 lg:pt-8">
+  <h1 class="font-display font-black text-5xl text-white">Todo List</h1>
+</div>

src/stores/todo.js

@@ -0,0 +1,10 @@
+import { writable } from 'svelte/store';
+
+export const todos = writable([]);
+
+export function addTodo(data) {
+  todos.update((value) => {
+    console.log([...value, data]);
+    return [...value, data];
+  });
+}