Add item list

src/components/Sidebar/Sidebar.svelte

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

src/data/characters.js

@@ -1562,24 +1562,24 @@ export const characters = {
     stats: { hp: 10122, atk: 198, def: 635 },
     material: {
       book: [
-        'teachings_of_freedom',
-        'guide_to_resistance',
-        'guide_to_ballad',
-        'guide_to_freedom',
-        'guide_to_resistance',
-        'philosophies_of_ballad',
-        'philosophies_of_freedom',
-        'philosophies_of_resistance',
+        itemList.teachings_of_freedom,
+        itemList.guide_to_resistance,
+        itemList.guide_to_ballad,
+        itemList.guide_to_freedom,
+        itemList.guide_to_resistance,
+        itemList.philosophies_of_ballad,
+        itemList.philosophies_of_freedom,
+        itemList.philosophies_of_resistance,
       ],
       material: [
-        'divining_scroll',
-        'sealed_scroll',
-        'sealed_scroll',
-        'sealed_scroll',
-        'sealed_scroll',
-        'forbidden_curse_scroll',
-        'forbidden_curse_scroll',
-        'forbidden_curse_scroll',
+        itemList.divining_scroll,
+        itemList.sealed_scroll,
+        itemList.sealed_scroll,
+        itemList.sealed_scroll,
+        itemList.sealed_scroll,
+        itemList.forbidden_curse_scroll,
+        itemList.forbidden_curse_scroll,
+        itemList.forbidden_curse_scroll,
       ],
       boss: itemList.dvalins_sigh,
     },

src/data/itemGroup.js

@@ -0,0 +1,82 @@
+import { itemList } from './itemList';
+
+export const itemGroup = {
+  teachings_of_freedom: {
+    name: 'Freedom',
+    items: [itemList.teachings_of_freedom, itemList.guide_to_freedom, itemList.philosophies_of_freedom],
+  },
+  teachings_of_ballad: {
+    name: 'Ballad',
+    items: [itemList.teachings_of_ballad, itemList.guide_to_ballad, itemList.philosophies_of_ballad],
+  },
+  teachings_of_gold: {
+    name: 'Gold',
+    items: [itemList.teachings_of_gold, itemList.guide_to_gold, itemList.philosophies_of_gold],
+  },
+  teachings_of_resistance: {
+    name: 'Resistance',
+    items: [itemList.teachings_of_resistance, itemList.guide_to_resistance, itemList.philosophies_of_resistance],
+  },
+  teachings_of_diligence: {
+    name: 'Diligence',
+    items: [itemList.teachings_of_diligence, itemList.guide_to_diligence, itemList.philosophies_of_diligence],
+  },
+  teachings_of_prosperity: {
+    name: 'Prosperrity',
+    items: [itemList.teachings_of_prosperity, itemList.guide_to_prosperity, itemList.philosophies_of_prosperity],
+  },
+  tile_of_decarabians_tower: {
+    name: 'Decarabian',
+    items: [
+      itemList.tile_of_decarabians_tower,
+      itemList.debris_of_decarabians_city,
+      itemList.fragment_of_decarabians_epic,
+      itemList.scattered_piece_of_decarabians_dream,
+    ],
+  },
+  luminous_sands_from_guyun: {
+    name: 'Guyun',
+    items: [
+      itemList.luminous_sands_from_guyun,
+      itemList.lustrous_stone_from_guyun,
+      itemList.relic_from_guyun,
+      itemList.divine_body_from_guyun,
+    ],
+  },
+  boreal_wolfs_milk_tooth: {
+    name: 'Boreal Wolf',
+    items: [
+      itemList.boreal_wolfs_milk_tooth,
+      itemList.boreal_wolfs_cracked_tooth,
+      itemList.boreal_wolfs_broken_fang,
+      itemList.boreal_wolfs_nostalgia,
+    ],
+  },
+  mist_veiled_lead_elixir: {
+    name: 'Mist Veiled Elixir',
+    items: [
+      itemList.mist_veiled_lead_elixir,
+      itemList.mist_veiled_mercury_elixir,
+      itemList.mist_veiled_gold_elixir,
+      itemList.mist_veiled_primo_elixir,
+    ],
+  },
+  fetters_of_the_dandelion_gladiator: {
+    name: 'Dandelion Gladiator',
+    items: [
+      itemList.fetters_of_the_dandelion_gladiator,
+      itemList.chains_of_the_dandelion_gladiator,
+      itemList.shackles_of_the_dandelion_gladiator,
+      itemList.dream_of_the_dandelion_gladiator,
+    ],
+  },
+  grain_of_aerosiderite: {
+    name: 'Aerosiderite',
+    items: [
+      itemList.grain_of_aerosiderite,
+      itemList.piece_of_aerosiderite,
+      itemList.bit_of_aerosiderite,
+      itemList.chunk_of_aerosiderite,
+    ],
+  },
+};

src/data/weaponList.js

@@ -600,7 +600,56 @@ export const weaponList = {
     secondary: 'ATK',
     type: weapons.sword,
     source: 'wish',
-    ascension: [],
+    ascension: [
+      {
+        items: [
+          { item: itemList.unknown, amount: 0 },
+          { item: itemList.unknown, amount: 0 },
+          { item: itemList.unknown, amount: 0 },
+        ],
+        mora: 0,
+      },
+      {
+        items: [
+          { item: itemList.unknown, amount: 0 },
+          { item: itemList.unknown, amount: 0 },
+          { item: itemList.unknown, amount: 0 },
+        ],
+        mora: 0,
+      },
+      {
+        items: [
+          { item: itemList.unknown, amount: 0 },
+          { item: itemList.unknown, amount: 0 },
+          { item: itemList.unknown, amount: 0 },
+        ],
+        mora: 0,
+      },
+      {
+        items: [
+          { item: itemList.unknown, amount: 0 },
+          { item: itemList.unknown, amount: 0 },
+          { item: itemList.unknown, amount: 0 },
+        ],
+        mora: 0,
+      },
+      {
+        items: [
+          { item: itemList.unknown, amount: 0 },
+          { item: itemList.unknown, amount: 0 },
+          { item: itemList.unknown, amount: 0 },
+        ],
+        mora: 0,
+      },
+      {
+        items: [
+          { item: itemList.unknown, amount: 0 },
+          { item: itemList.unknown, amount: 0 },
+          { item: itemList.unknown, amount: 0 },
+        ],
+        mora: 0,
+      },
+    ],
   },
   skyward_blade: {
     name: 'Skyward Blade',

src/routes/characters.svelte

@@ -100,7 +100,7 @@
 <div class="lg:ml-64 pt-20 lg:pt-8">
   <h1 class="font-display px-8 font-black text-5xl text-white">Characters</h1>
   <p class="text-gray-400 px-8 font-medium pb-4" style="margin-top: -1rem;">
-    ※ Stat numbers are at level 60. You can also click the header to sort!
+    ※ Stat numbers are at level 80 Ascension 6. You can also click the header to sort!
   </p>
 
   <div class="block overflow-x-auto whitespace-no-wrap pb-8">

src/routes/items.svelte

@@ -0,0 +1,226 @@
+<script>
+  import { characters } from '../data/characters';
+  import { itemGroup } from '../data/itemGroup';
+  import { itemList } from '../data/itemList';
+  import { weaponList } from '../data/weaponList';
+
+  let dayName = {
+    monday_thursday: ['Monday', 'Thursday'],
+    tuesday_friday: ['Tuesday', 'Friday'],
+    wednesday_saturday: ['Wednesday', 'Saturday'],
+  };
+
+  let charactersDays = {
+    monday_thursday: {},
+    tuesday_friday: {},
+    wednesday_saturday: {},
+  };
+
+  let weaponsDays = {
+    monday_thursday: {},
+    tuesday_friday: {},
+    wednesday_saturday: {},
+  };
+
+  let allItems = {};
+
+  function parseData() {
+    for (const [_, character] of Object.entries(characters)) {
+      const item = character.material.book[0];
+      if (charactersDays[item.day.join('_')][item.id] === undefined) {
+        charactersDays[item.day.join('_')][item.id] = [];
+      }
+      charactersDays[item.day.join('_')][item.id].push(character.id);
+
+      const ascension = character.ascension[0];
+      for (const item of ascension.items) {
+        if (item.amount) {
+          if (allItems[item.item.id] === undefined) {
+            allItems[item.item.id] = {};
+          }
+          allItems[item.item.id][character.id] = 'characters';
+        }
+      }
+    }
+
+    for (const [_, weapon] of Object.entries(weaponList)) {
+      if (weapon.rarity < 4) continue;
+      const items = weapon.ascension[0].items;
+      for (const itemData of items) {
+        const item = itemData.item;
+        if (item.day) {
+          if (weaponsDays[item.day.join('_')][item.id] === undefined) {
+            weaponsDays[item.day.join('_')][item.id] = [];
+          }
+          weaponsDays[item.day.join('_')][item.id].push(weapon.id);
+        } else if (itemData.amount) {
+          if (allItems[item.id] === undefined) {
+            allItems[item.id] = {};
+          }
+          allItems[item.id][weapon.id] = 'weapons';
+        }
+      }
+    }
+
+    console.log(allItems);
+  }
+
+  parseData();
+</script>
+
+<style>
+  td {
+    @apply text-white;
+    @apply px-4;
+    @apply align-top;
+
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+
+    &.weapon-cell {
+      min-width: 29.5rem;
+      @apply whitespace-normal;
+      @apply overflow-x-scroll;
+      @apply overflow-y-hidden;
+    }
+  }
+</style>
+
+<svelte:head>
+  <title>Item List - Paimon.moe</title>
+</svelte:head>
+<div class="lg:ml-64 pt-20 lg:pt-8">
+  <h1 class="font-display px-8 font-black text-5xl text-white">Item List</h1>
+  <p class="text-gray-400 px-8 font-medium pb-4" style="margin-top: -1rem;">
+    ※ Click the item image to add it to the todo list
+  </p>
+  <div class="block overflow-x-auto whitespace-no-wrap pb-8">
+    <div class="px-8 table max-w-full">
+      <table class="w-full block p-4 bg-item rounded-xl">
+        <thead>
+          <th class="text-gray-400 select-none font-display text-lg text-left px-4 pb-2 border-gray-700 border-b">
+            Days
+          </th>
+          <th class="text-gray-400 select-none font-display text-lg text-left px-4 pb-2 border-gray-700 border-b">
+            Materials
+          </th>
+          <th class="text-gray-400 select-none font-display text-lg text-left px-4 pb-2 border-gray-700 border-b">
+            Characters
+          </th>
+        </thead>
+        <tbody>
+          {#each Object.entries(dayName) as [day, dayArr]}
+            {#each Object.entries(charactersDays[day]) as [itemName, chars], index}
+              <tr>
+                <td class="py-2">
+                  {#if index === 0}{dayArr[0]}<br />{dayArr[1]}{/if}
+                </td>
+                <td class="border-gray-700 border-b text-center align-middle py-2">
+                  <div class="flex items-center">
+                    <div
+                      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
+                        class="w-full max-h-full object-contain"
+                        src={`/images/items/${itemName}.png`}
+                        alt={itemName} />
+                    </div>
+                    <span>{itemGroup[itemName].name}</span>
+                  </div>
+                </td>
+                <td class="border-gray-700 border-b py-2">
+                  {#each chars as char}
+                    <div
+                      class="h-12 w-12 md:h-14 md:w-14 cursor-pointer mr-2 hover:bg-background rounded-xl 
+                       inline-flex items-center justify-center align-top">
+                      <img class="w-full max-h-full object-contain" src={`/images/characters/${char}.png`} alt={char} />
+                    </div>
+                  {/each}
+                </td>
+              </tr>
+            {/each}
+            {#each Object.entries(weaponsDays[day]) as [itemName, weapons], index}
+              <tr>
+                <td
+                  class={index === Object.entries(charactersDays[day]).length - 1 ? 'border-gray-700 border-b py-2' : 'py-2'} />
+                <td class="border-gray-700 border-b text-center py-2">
+                  <div class="flex items-center">
+                    <div
+                      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
+                        class="w-full max-h-full object-contain"
+                        src={`/images/items/${itemName}.png`}
+                        alt={itemName} />
+                    </div>
+                    <span class="whitespace-normal text-left w-0">{itemGroup[itemName].name}</span>
+                  </div>
+                </td>
+                <td class="border-gray-700 border-b weapon-cell pt-2">
+                  {#each weapons as weapon}
+                    <div
+                      class="h-12 w-12 md:h-14 md:w-14 cursor-pointer mr-2 mb-2 hover:bg-background rounded-xl 
+                       inline-flex items-center justify-center align-top">
+                      <img
+                        class="w-full max-h-full object-contain"
+                        src={`/images/weapons/${weapon}.png`}
+                        alt={weapon} />
+                    </div>
+                  {/each}
+                </td>
+              </tr>
+            {/each}
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  </div>
+  <div class="block overflow-x-auto whitespace-no-wrap pb-8">
+    <div class="px-8 table max-w-full">
+      <table class="w-full block p-4 bg-item rounded-xl">
+        <thead>
+          <th class="text-gray-400 select-none font-display text-lg text-left px-4 pb-2 border-gray-700 border-b">
+            Material
+          </th>
+          <th class="text-gray-400 select-none font-display text-lg text-left px-4 pb-2 border-gray-700 border-b">
+            Characters
+          </th>
+        </thead>
+        <tbody>
+          {#each Object.entries(allItems).sort((a, b) => a[0].localeCompare(b[0])) as [itemName, char]}
+            <tr>
+              <td class="border-gray-700 border-b align-middle py-2">
+                <div class="flex items-center">
+                  <div
+                    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={`/images/items/${itemName}.png`}
+                      alt={itemName} />
+                  </div>
+                  <span>{itemList[itemName].name}</span>
+                </div>
+              </td>
+              <td class="border-gray-700 border-b align-middle pt-2 weapon-cell">
+                {#each Object.entries(char) as [charName, type]}
+                  <div
+                    class="h-12 w-12 md:h-14 md:w-14 mb-2 cursor-pointer mr-2 hover:bg-background rounded-xl 
+             inline-flex items-center justify-center align-top">
+                    <img
+                      class="w-full max-h-full object-contain"
+                      src={`/images/${type}/${charName}.png`}
+                      alt={charName} />
+                  </div>
+                {/each}
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>

src/routes/todo.svelte

@@ -1,7 +1,6 @@
 <script>
   import { getContext, tick } from 'svelte';
-  import { mdiChevronLeft, mdiChevronRight, mdiClose, mdiLoading } from '@mdi/js';
-  import dayjs from 'dayjs';
+  import { mdiChevronLeft, mdiChevronRight, mdiClose, mdiLoading, mdiPlus } from '@mdi/js';
   import { todos, loading } from '../stores/todo';
   import { itemList } from '../data/itemList';
   import Masonry from 'svelte-masonry/Masonry.svelte';
@@ -109,12 +108,9 @@
       {#if $loading}
         <Icon path={mdiLoading} color="white" spin />
       {:else if $todos.length > 0}
-        <div>
-          <Button className="float-right" size="md" on:click={toggleTodayOnly}>
-            Show
-            {todayOnly ? 'All Day' : 'Today Only'}
-          </Button>
-          <p class="font-bold text-xl mb-4">Summary</p>
+        <div class="flex items-center mb-4">
+          <p class="font-bold text-xl mr-2 flex-1">Summary</p>
+          <Button size="md" on:click={toggleTodayOnly}>Show {todayOnly ? 'All Day' : 'Today Only'}</Button>
         </div>
       {:else}
         <p class="font-bold text-xl">Nothing to do yet 😀<br />Add some here or from the Calculator!</p>

tailwind.config.js

@@ -43,6 +43,9 @@ module.exports = {
       height: {
         14: '3.5rem',
       },
+      width: {
+        14: '3.5rem',
+      },
     },
   },
   variants: {
@@ -51,6 +54,7 @@ module.exports = {
     backgroundImage: ['responsive', 'hover', 'focus'],
     borderColor: ['responsive', 'hover', 'focus', 'focus-within', 'disabled'],
     opacity: ['group-hover', 'responsive', 'hover', 'focus', 'disabled'],
+    borderWidth: ['responsive', 'last', 'hover', 'focus'],
   },
   plugins: [],
   future: {