diff --git a/src/components/Sidebar/Sidebar.svelte b/src/components/Sidebar/Sidebar.svelte index c08810c2..89e2a238 100644 --- a/src/components/Sidebar/Sidebar.svelte +++ b/src/components/Sidebar/Sidebar.svelte @@ -106,6 +106,7 @@ 'artifacts', 'radiant-spincrystal', 'calendar', + 'banners', ].includes(segment)} image="/images/items.png" label={$t('sidebar.database')} @@ -119,6 +120,7 @@ { label: $t('sidebar.fishing'), href: '/fishing' }, { label: $t('sidebar.radiantSpincrystal'), href: '/radiant-spincrystal' }, { label: $t('sidebar.calendar'), href: '/calendar' }, + { label: $t('sidebar.banners'), href: '/banners' }, ]} /> + import { onMount, tick } from 'svelte'; + import { t } from 'svelte-i18n'; + + import { banners } from '../../data/banners'; + import { characters } from '../../data/characters'; + + import Button from '../../components/Button.svelte'; + import Icon from '../../components/Icon.svelte'; + import { mdiSwapVertical } from '@mdi/js'; + import Ad from '../../components/Ad.svelte'; + + let container; + + let length = 0; + let versions = []; + let rows = [[]]; + let names = [{ name: '', length: 0 }]; + let hovered = -1; + + let __rows5; + let __rows4; + let __names5; + let __names4; + + let sort = false; + + async function process() { + length = banners.characters.length; + + let _versions = {}; + let _chars5 = {}; + let _chars4 = {}; + let _rows5 = []; + let _rows4 = []; + let _names5 = []; + let _names4 = []; + + let pos5 = 0; + let pos4 = 0; + let len = 0; + for (const banner of banners.characters) { + if (_versions[banner.version] === undefined) { + _versions[banner.version] = 0; + } + _versions[banner.version]++; + + for (const ch of Object.keys(_chars5)) { + _chars5[ch].length++; + _names5[_chars5[ch].pos].length++; + _rows5[_chars5[ch].pos][len] = { l: _chars5[ch].length, m: 15 }; + } + for (const ch of Object.keys(_chars4)) { + _chars4[ch].length++; + _names4[_chars4[ch].pos].length++; + _rows4[_chars4[ch].pos][len] = { l: _chars4[ch].length, m: 9 }; + } + + for (const char of banner.featured) { + if (_chars5[char] === undefined) { + _chars5[char] = { + pos: pos5, + length: 0, + }; + _names5[pos5] = { name: characters[char].name, length: 0 }; + _rows5[pos5] = [...new Array(len).fill({ l: '' }), { char, l: 0 }]; + pos5++; + } else { + _rows5[_chars5[char].pos][len] = { char, l: 0 }; + _names5[_chars5[char].pos].length = 0; + _chars5[char].length = 0; + } + } + + for (const char of banner.featuredRare) { + if (_chars4[char] === undefined) { + _chars4[char] = { + pos: pos4, + length: 0, + }; + _names4[pos4] = { name: characters[char].name, length: 0 }; + _rows4[pos4] = [...new Array(len).fill({ l: '' }), { char, l: 0 }]; + pos4++; + } else { + _rows4[_chars4[char].pos][len] = { char, l: 0 }; + _names4[_chars4[char].pos].length = 0; + _chars4[char].length = 0; + } + } + + len++; + } + + versions = Object.entries(_versions).map(([version, length]) => ({ + version, + length, + })); + + __rows5 = _rows5; + __rows4 = _rows4; + __names5 = _names5; + __names4 = _names4; + + rows = [..._rows5, new Array(length).fill({ l: '' }), ..._rows4]; + names = [..._names5, { name: '', length: 0 }, ..._names4]; + + await tick(); + + container.scrollTo({ + left: container.scrollWidth, + top: 0, + behavior: 'smooth', + }); + } + + function sortOrder() { + sort = !sort; + + if (!sort) { + rows = [...__rows5, new Array(length).fill({ l: '' }), ...__rows4]; + names = [...__names5, { name: '', length: 0 }, ...__names4]; + return; + } + + const _rows5 = [...__rows5].sort((a, b) => b[length - 1].l - a[length - 1].l); + const _rows4 = [...__rows4].sort((a, b) => b[length - 1].l - a[length - 1].l); + const _names5 = [...__names5].sort((a, b) => b.length - a.length); + const _names4 = [...__names4].sort((a, b) => b.length - a.length); + + console.log(_rows5); + + rows = [..._rows5, new Array(length).fill({ l: '' }), ..._rows4]; + names = [..._names5, { name: '', length: 0 }, ..._names4]; + } + + function getColor(index, max) { + if (index === '') return 'none'; + + const hue = ((max - index) / max) * 100; + return `hsl(${hue}, 60%, 70%)`; + } + + function onHover(index) { + hovered = index; + } + + onMount(() => { + process(); + }); + + + + Character Release Timeline - Paimon.moe + + + +
+
+

{$t('calendar.bannerTitle')}

+

+ {$t('calendar.bannerSubtitle')} +

+ +
+

+ {$t(sort ? 'calendar.sortByRerun' : 'calendar.sortByTime')} +

+ +
+
+
+ + + + {#each versions as v, index} + + {/each} + + {#each rows as r, rowIndex} + + {#each r as col, index} + {#if col.char} + + {:else} + + {/if} + {/each} + + + {/each} + +
{v.version}
onHover(index)} class="cell {hovered === index ? 'hovered' : ''}"> + {col.char} + onHover(index)} + class="cell {hovered === index ? 'hovered' : ''}" + style="background: {getColor(col.l, col.m)};">{col.l}{$t(names[rowIndex].name)}
+
+
+ + + + diff --git a/src/routes/calendar/index.svelte b/src/routes/calendar/index.svelte index 9e5a449b..21d58f6a 100644 --- a/src/routes/calendar/index.svelte +++ b/src/routes/calendar/index.svelte @@ -27,6 +27,7 @@ import { getAccountPrefix } from '../../stores/account'; import { readSave } from '../../stores/saveManager'; import { bannersDual } from '../../data/bannersDual'; + import Ad from '../../components/Ad.svelte'; const { open: openModal } = getContext('simple-modal'); @@ -527,6 +528,8 @@ + +