Add item list

This commit is contained in:
I Made Setia Baruna 2021-01-08 15:25:59 +08:00
parent 33e14ec8e9
commit 14f6a4ae06
13 changed files with 389 additions and 26 deletions

View file

@ -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'}

View file

@ -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,
},

82
src/data/itemGroup.js Normal file
View file

@ -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,
],
},
};

View file

@ -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',

View file

@ -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">

226
src/routes/items.svelte Normal file
View file

@ -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>

View file

@ -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>

BIN
static/images/items.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

View file

@ -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: {