Update todo from items

src/components/Button.svelte

@@ -19,6 +19,10 @@
       textColor = 'red-400';
       borderColor = 'red-400';
       break;
+    case 'green':
+      textColor = 'green-400';
+      borderColor = 'green-400';
+      break;
   }
 
   $: switch (size) {

src/components/TodoAddModal.svelte

@@ -0,0 +1,83 @@
+<script>
+  import { mdiClose } from '@mdi/js';
+
+  import { itemGroup } from '../data/itemGroup';
+  import { itemList } from '../data/itemList';
+  import Button from './Button.svelte';
+  import Icon from './Icon.svelte';
+  import Input from './Input.svelte';
+
+  export let item;
+  export let addTodo;
+  export let cancel;
+
+  let withRarity = !!itemGroup[item];
+  let selectedItem = withRarity ? itemGroup[item].items[0] : itemList[item];
+  let selected = 0;
+  let amount = 1;
+
+  function select(index, item) {
+    console.log(index, item);
+    selected = index;
+    selectedItem = item;
+  }
+
+  function addAmount(val) {
+    amount += val;
+  }
+</script>
+
+<div>
+  {#if withRarity}
+    <p class="text-white font-bold mb-4 text-lg">Select Rarity</p>
+    <div class="flex items-center mb-4 text-white">
+      {#each itemGroup[item].items as item, index}
+        <div
+          on:click={() => select(index, item)}
+          class={`h-20 w-20 p-2 mr-2 flex items-center justify-center cursor-pointer rounded-xl transition duration-300
+        ${selected === index ? 'bg-background border-primary border-2' : ''}`}>
+          <img
+            class="w-full max-h-full object-contain"
+            src={`/images/items/${item.id}.png`}
+            alt={item.name}
+            title={item.name} />
+        </div>
+      {/each}
+    </div>
+  {:else}
+    <div class="flex items-center mb-4 text-white">
+      <div class={`h-20 w-20 p-2 flex items-center justify-center`}>
+        <img
+          class="w-full max-h-full object-contain"
+          src={`/images/items/${item}.png`}
+          alt={itemList[item].name}
+          title={itemList[item].name} />
+      </div>
+    </div>
+  {/if}
+  <p class="text-white font-bold mb-4 text-lg">Amount</p>
+  <div class="inline-flex mb-4">
+    <Input className="mr-2" type="number" min={1} bind:value={amount} placeholder="Input amount..." />
+    <Button className="mr-2 w-16" on:click={() => addAmount(1)}>+1</Button>
+    <Button className="mr-2 w-16" on:click={() => addAmount(5)}>+5</Button>
+    <Button className="w-16" on:click={() => addAmount(10)}>+10</Button>
+  </div>
+  <div class="text-white font-bold mb-4 text-lg rounded-xl bg-background px-4 py-2 inline-flex items-center">
+    <div class="h-8 w-8 mr-2 flex items-center justify-center flex-shrink-0">
+      <img
+        class="w-full max-h-full object-contain"
+        src={`/images/items/${selectedItem.id}.png`}
+        alt={selectedItem.name}
+        title={selectedItem.name} />
+    </div>
+    <span>{selectedItem.name}</span>
+    <div class="mx-2 w-4 flex-shrink-0">
+      <Icon size={0.5} path={mdiClose} />
+    </div>
+    <span>{amount}</span>
+  </div>
+  <div class="flex justify-end gap-2">
+    <Button on:click={cancel}>Cancel</Button>
+    <Button on:click={() => addTodo(selectedItem, amount)} color="green">Add to Todo</Button>
+  </div>
+</div>

src/data/itemGroup.js

@@ -22,7 +22,7 @@ export const itemGroup = {
     items: [itemList.teachings_of_diligence, itemList.guide_to_diligence, itemList.philosophies_of_diligence],
   },
   teachings_of_prosperity: {
-    name: 'Prosperrity',
+    name: 'Prosperity',
     items: [itemList.teachings_of_prosperity, itemList.guide_to_prosperity, itemList.philosophies_of_prosperity],
   },
   tile_of_decarabians_tower: {
@@ -79,4 +79,171 @@ export const itemGroup = {
       itemList.chunk_of_aerosiderite,
     ],
   },
+  agnidus_agate_sliver: {
+    name: 'Agnidus Agate',
+    items: [
+      itemList.agnidus_agate_sliver,
+      itemList.agnidus_agate_fragment,
+      itemList.agnidus_agate_chunk,
+      itemList.agnidus_agate_gemstone,
+    ],
+  },
+  brilliant_diamond_sliver: {
+    name: 'Brilliant Diamond',
+    items: [
+      itemList.brilliant_diamond_sliver,
+      itemList.brilliant_diamond_fragment,
+      itemList.brilliant_diamond_chunk,
+      itemList.brilliant_diamond_gemstone,
+    ],
+  },
+  prithiva_topaz_sliver: {
+    name: 'Prithiva Topaz',
+    items: [
+      itemList.prithiva_topaz_sliver,
+      itemList.prithiva_topaz_fragment,
+      itemList.prithiva_topaz_chunk,
+      itemList.prithiva_topaz_gemstone,
+    ],
+  },
+  shivada_jade_sliver: {
+    name: 'Shivada Jade',
+    items: [
+      itemList.shivada_jade_sliver,
+      itemList.shivada_jade_fragment,
+      itemList.shivada_jade_chunk,
+      itemList.shivada_jade_gemstone,
+    ],
+  },
+  vajrada_amethyst_sliver: {
+    name: 'Vajrada Amethyst',
+    items: [
+      itemList.vajrada_amethyst_sliver,
+      itemList.vajrada_amethyst_fragment,
+      itemList.vajrada_amethyst_chunk,
+      itemList.vajrada_amethyst_gemstone,
+    ],
+  },
+  varunada_lazurite_sliver: {
+    name: 'Varunada Lazurite',
+    items: [
+      itemList.varunada_lazurite_sliver,
+      itemList.varunada_lazurite_fragment,
+      itemList.varunada_lazurite_chunk,
+      itemList.varunada_lazurite_gemstone,
+    ],
+  },
+  vayuda_turquoise_sliver: {
+    name: 'Vayuda Turquoise',
+    items: [
+      itemList.vayuda_turquoise_sliver,
+      itemList.vayuda_turquoise_fragment,
+      itemList.vayuda_turquoise_chunk,
+      itemList.vayuda_turquoise_gemstone,
+    ],
+  },
+  chaos_device: {
+    name: 'Chaos',
+    items: [
+      itemList.chaos_device,
+      itemList.chaos_circuit,
+      itemList.chaos_core,
+    ],
+  },
+  damaged_mask: {
+    name: 'Mask',
+    items: [
+      itemList.damaged_mask,
+      itemList.stained_mask,
+      itemList.ominous_mask,
+    ],
+  },
+  dead_ley_line_branch: {
+    name: 'Dead Ley Line',
+    items: [
+      itemList.dead_ley_line_branch,
+      itemList.dead_ley_line_leaves,
+      itemList.ley_line_sprouts,
+    ],
+  },
+  divining_scroll: {
+    name: 'Scroll',
+    items: [
+      itemList.divining_scroll,
+      itemList.sealed_scroll,
+      itemList.forbidden_curse_scroll,
+    ],
+  },
+  firm_arrowhead: {
+    name: 'Arrowhead',
+    items: [
+      itemList.firm_arrowhead,
+      itemList.sharp_arrowhead,
+      itemList.weathered_arrowhead,
+    ],
+  },
+  fragile_bone_shard: {
+    name: 'Bone Shard',
+    items: [
+      itemList.fragile_bone_shard,
+      itemList.sturdy_bone_shard,
+      itemList.fossilized_bone_shard,
+    ],
+  },
+  heavy_horn: {
+    name: 'Horn',
+    items: [
+      itemList.heavy_horn,
+      itemList.black_bronze_horn,
+      itemList.black_crystal_horn,
+    ],
+  },
+  hunters_sacrificial_knife: {
+    name: 'Knife',
+    items: [
+      itemList.hunters_sacrificial_knife,
+      itemList.agents_sacrificial_knife,
+      itemList.inspectors_sacrificial_knife,
+    ],
+  },
+  mist_grass_pollen: {
+    name: 'Mist Grass',
+    items: [
+      itemList.mist_grass_pollen,
+      itemList.mist_grass,
+      itemList.mist_grass_wick,
+    ],
+  },
+  recruits_insignia: {
+    name: 'Insignia',
+    items: [
+      itemList.recruits_insignia,
+      itemList.sergeants_insignia,
+      itemList.lieutenants_insignia,
+    ],
+  },
+  slime_condensate: {
+    name: 'Slime',
+    items: [
+      itemList.slime_condensate,
+      itemList.slime_secretions,
+      itemList.slime_concentrate,
+    ],
+  },
+  treasure_hoarder_insignia: {
+    name: 'Treasure Hoarder Insignia',
+    items: [
+      itemList.treasure_hoarder_insignia,
+      itemList.silver_raven_insignia,
+      itemList.golden_raven_insignia,
+    ],
+  },
+  whopperflower_nectar: {
+    name: 'Nectar',
+    items: [
+      itemList.whopperflower_nectar,
+      itemList.shimmering_nectar,
+      itemList.energy_nectar,
+    ],
+  },
 };

src/routes/items.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { getContext } from 'svelte';
+
   import { characters } from '../data/characters';
   import { itemGroup } from '../data/itemGroup';
   import { itemList } from '../data/itemList';
@@ -6,6 +8,10 @@
 
   import CharacterSelect from '../components/CharacterSelect.svelte';
   import WeaponSelect from '../components/WeaponSelect.svelte';
+  import TodoAddModal from '../components/TodoAddModal.svelte';
+import { addTodo } from '../stores/todo';
+
+  const { open: openModal, close: closeModal } = getContext('simple-modal');
 
   let dayName = {
     monday_thursday: ['Monday', 'Thursday'],
@@ -30,6 +36,31 @@
   let selectedCharacter = null;
   let selectedWeapon = null;
 
+  function addTodoItem(item, amount) {
+    addTodo({
+      type: 'item',
+      item,
+      amount,
+    });
+
+    closeModal();
+  }
+
+  function openAddTodo(item) {
+    openModal(
+      TodoAddModal,
+      {
+        item,
+        addTodo: addTodoItem,
+        cancel: closeModal,
+      },
+      {
+        closeButton: false,
+        styleWindow: { background: '#25294A', width: '400px' },
+      },
+    );
+  }
+
   function parseData() {
     dayName = {
       monday_thursday: ['Monday', 'Thursday'],
@@ -51,8 +82,6 @@
 
     allItems = {};
 
-    console.log('parsing', selectedCharacter);
-
     if (
       (selectedCharacter === null && selectedWeapon === null) ||
       (selectedCharacter !== null && selectedWeapon === null) ||
@@ -179,6 +208,7 @@
                 <td class="border-gray-700 border-b text-center align-middle py-2">
                   <div class="flex items-center">
                     <div
+                      on:click={() => openAddTodo(itemName)}
                       class="h-12 w-12 md:h-14 md:w-14 mr-2 cursor-pointer hover:bg-background rounded-xl
                        inline-flex items-center justify-center align-top">
                       <img
@@ -213,6 +243,7 @@
                 <td class="border-gray-700 border-b text-center py-2">
                   <div class="flex items-center">
                     <div
+                      on:click={() => openAddTodo(itemName)}
                       class="h-12 w-12 md:h-14 md:w-14 mr-2 cursor-pointer hover:bg-background rounded-xl 
                        inline-flex items-center justify-center align-top">
                       <img
@@ -260,6 +291,7 @@
               <td class="border-gray-700 border-b align-middle py-2">
                 <div class="flex items-center">
                   <div
+                    on:click={() => openAddTodo(itemName)}
                     class="h-12 w-12 md:h-14 md:w-14 mr-2 cursor-pointer hover:bg-background rounded-xl inline-flex items-center justify-center">
                     <img
                       class="w-full max-h-full object-contain"

src/routes/todo.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { getContext, tick } from 'svelte';
+  import { getContext, onMount, tick } from 'svelte';
   import { mdiChevronLeft, mdiChevronRight, mdiClose, mdiLoading, mdiPlus } from '@mdi/js';
   import { todos, loading } from '../stores/todo';
   import { itemList } from '../data/itemList';
@@ -16,6 +16,7 @@
   let adding = false;
   let todayOnly = false;
   let today = getCurrentDay();
+  let summary = [];
 
   async function reorder(index, pos) {
     if ((index === 0 && pos === -1) || (index === $todos.length - 1 && pos === 1)) return;
@@ -83,19 +84,29 @@
     });
   }
 
-  $: summary = $todos.reduce((prev, current) => {
+  async function updateSummary() {
-    for (const [id, amount] of Object.entries(current.resources)) {
+    summary = $todos.reduce((prev, current) => {
-      if (todayOnly && itemList[id].day && !itemList[id].day.includes(today)) continue;
+      for (const [id, amount] of Object.entries(current.resources)) {
+        if (todayOnly && itemList[id].day && !itemList[id].day.includes(today)) continue;
 
-      if (prev[id] === undefined) {
+        if (prev[id] === undefined) {
-        prev[id] = 0;
+          prev[id] = 0;
+        }
+
+        prev[id] += amount;
       }
 
-      prev[id] += amount;
+      return prev;
-    }
+    }, {});
 
-    return prev;
+    await tick();
-  }, {});
+    refreshLayout();
+  }
+
+  onMount(() => {});
+
+  $: $todos, updateSummary();
+  $: todayOnly, updateSummary();
 </script>
 
 <svelte:head>
@@ -177,6 +188,12 @@
               <p class="font-bold">{todo.character ? todo.character.name : 'Character'}</p>
               <p class="text-gray-500">Level {`${todo.level.from}-${todo.level.to}`}</p>
             </div>
+          {:else if todo.type === 'item'}
+            <img class="h-8 inline-block mr-2" src={`/images/items.png`} alt="Item" />
+            <div class="flex-1">
+              <p class="font-bold">Items</p>
+              <p class="text-gray-500">Added from items page</p>
+            </div>
           {/if}
           <Button disabled={i === 0} on:click={() => reorder(i, -1)} rounded={false} size="sm" className="rounded-l-xl">
             <Icon path={mdiChevronLeft} color="white" />

src/stores/todo.js

@@ -5,7 +5,34 @@ export const todos = writable([]);
 
 export function addTodo(data) {
   todos.update((value) => {
-    console.log([...value, data]);
+    if (data.type === 'item') {
-    return [...value, data];
+      const itemsIndex = value.findIndex((e) => e.type === 'item');
+
+      if (itemsIndex > -1) {
+        const items = value[itemsIndex].resources;
+
+        if (items[data.item.id] !== undefined) {
+          items[data.item.id] += data.amount;
+        } else {
+          items[data.item.id] = data.amount;
+        }
+
+        value[itemsIndex] = {
+          type: 'item',
+          resources: items,
+        };
+      } else {
+        const items = { [data.item.id]: data.amount };
+
+        value.push({
+          type: 'item',
+          resources: items,
+        });
+      }
+
+      return value;
+    } else {
+      return [...value, data];
+    }
   });
 }