Update timeline

pull/1/head
Made Baruna 2022-07-11 23:25:42 +07:00
parent 4d5e130474
commit 44624938d5
9 changed files with 160 additions and 222 deletions

View File

@ -1,64 +1,5 @@
export const eventsData = [ export const eventsData = [
[ [
{
name: 'Marvelous Merchandise',
pos: '0% 80%',
image: 'marvelous_merchandise_event.jpg',
start: '2022-05-06 10:00:00',
end: '2022-05-13 03:59:59',
color: '#fad688',
zoom: '200%',
url: 'https://www.hoyolab.com/article/4245426',
showOnHome: true,
},
],
[
{
name: 'Ley Line Overflow',
pos: '0% 20%',
image: 'leyline_overflow.jpg',
start: '2022-04-28 04:00:00',
end: '2022-05-05 03:59:59',
color: '#5baced',
zoom: '200%',
url: 'https://www.hoyolab.com/article/4245426',
showOnHome: true,
},
],
[
{
name: 'Outside the Canvas, Inside the Lens',
pos: '0% 100%',
image: 'inside_the_lens.jpg',
start: '2022-04-01 10:00:00',
end: '2022-04-11 03:59:59',
color: '#bbcde7',
zoom: '100%',
url: 'https://www.hoyolab.com/article/4043686',
showOnHome: true,
},
{
name: 'Vibro-Crystal Research',
pos: '0% 25%',
image: 'vibro_crysta_research.jpg',
start: '2022-04-21 10:00:00',
end: '2022-05-05 03:59:59',
color: '#64a3f3',
zoom: '220%',
url: 'https://www.hoyolab.com/article/4245426',
showOnHome: true,
},
{
name: 'Overflowing Mastery',
pos: '0% 50%',
image: 'overflowing_mastery.jpg',
start: '2022-05-22 04:00:00',
end: '2022-05-29 03:59:59',
color: '#f5debc',
zoom: '200%',
url: 'https://www.hoyolab.com/article/4592260',
showOnHome: true,
},
{ {
name: 'A Muddy Bizzare Adventure', name: 'A Muddy Bizzare Adventure',
pos: '0% 50%', pos: '0% 50%',
@ -83,17 +24,6 @@ export const eventsData = [
}, },
], ],
[ [
{
name: 'Hues of the Violet Garden',
pos: '0% 15%',
zoom: '200%',
image: 'hues_of_the_violet_garden.jpg',
start: '2022-04-07 10:00:00',
end: '2022-04-25 03:59:59',
color: '#d98498',
url: 'https://www.hoyolab.com/article/3993068',
showOnHome: true,
},
{ {
name: 'Spices From the West', name: 'Spices From the West',
pos: '0% 40%', pos: '0% 40%',
@ -116,39 +46,19 @@ export const eventsData = [
url: 'https://www.hoyolab.com/article/5350611', url: 'https://www.hoyolab.com/article/5350611',
showOnHome: true, showOnHome: true,
}, },
{
name: 'Hidden Strife',
pos: '0% 20%',
image: 'hidden_strife.jpg',
start: '2022-07-27 10:00:00',
end: '2022-08-15 03:59:59',
color: '#ff7c84',
zoom: '200%',
url: 'https://www.hoyolab.com/article/5916190',
showOnHome: true,
},
], ],
[ [
{
name: 'Act I',
start: '2022-04-07 10:00:00',
end: '2022-04-09 03:59:59',
color: '#d98498',
url: 'https://www.hoyolab.com/article/3992100',
},
{
name: 'II',
start: '2022-04-09 04:00:00',
end: '2022-04-11 03:59:59',
color: '#d98498',
url: 'https://www.hoyolab.com/article/3992100',
},
{
name: 'III',
start: '2022-04-11 04:00:00',
end: '2022-04-13 03:59:59',
color: '#d98498',
url: 'https://www.hoyolab.com/article/3992100',
},
{
name: 'Act IV',
pos: '0% 15%',
zoom: '200%',
image: 'hues_of_the_violet_garden.jpg',
start: '2022-04-13 04:00:00',
end: '2022-04-25 03:59:59',
color: '#d98498',
url: 'https://www.hoyolab.com/article/3993068',
},
{ {
name: 'Perilous Trail', name: 'Perilous Trail',
pos: '0% 20%', pos: '0% 20%',
@ -172,20 +82,19 @@ export const eventsData = [
url: 'https://www.hoyolab.com/article/5444663', url: 'https://www.hoyolab.com/article/5444663',
showOnHome: true, showOnHome: true,
}, },
{
name: 'Summertime Odyssey',
pos: '40% 20%',
zoom: '200%',
image: 'summertime_odyssey.jpg',
start: '2022-07-15 10:00:00',
end: '2022-08-24 06:00:00',
color: '#7eebff',
url: 'https://www.hoyolab.com/article/5916190',
showOnHome: true,
},
], ],
[ [
{
name: 'Azure Excursion - Ayato Banner',
pos: '20% 15%',
zoom: '200%',
image: 'azure_excursion_1.jpg',
start: '2022-03-30 06:00:00',
end: '2022-04-19 17:59:59',
color: '#90bce9',
url: 'https://www.hoyolab.com/article/3992944',
showOnHome: true,
timezoneDependent: true,
},
{ {
name: 'Discerner of Enigmas - Yelan Banner', name: 'Discerner of Enigmas - Yelan Banner',
pos: '20% 15%', pos: '20% 15%',
@ -198,31 +107,20 @@ export const eventsData = [
showOnHome: true, showOnHome: true,
timezoneDependent: true, timezoneDependent: true,
}, },
],
[
{ {
name: 'Ballad in Goblets - Venti Banner', name: 'Leaves in the Wind - Kazuha Banner',
pos: '20% 15%', pos: '30% 15%',
zoom: '200%', zoom: '200%',
image: 'ballad_in_goblets_3.jpg', image: 'leaves_in_the_wind_2.jpg',
start: '2022-03-30 06:00:00', start: '2022-07-13 06:00:00',
end: '2022-04-19 17:59:59', end: '2022-08-02 17:59:59',
color: '#55E4B0', color: '#7edec3',
url: 'https://www.hoyolab.com/article/3992945', url: 'https://www.hoyolab.com/article/5915985',
showOnHome: true, showOnHome: true,
timezoneDependent: true, timezoneDependent: true,
}, },
{ ],
name: "The Heron's Court - Ayaka Banner", [
pos: '0% 20%',
zoom: '150%',
image: 'the_herons_court_2.jpg',
start: '2022-04-19 18:00:00',
end: '2022-05-31 05:59:59',
color: '#FFFBF7',
url: 'https://www.hoyolab.com/article/4245293',
showOnHome: true,
},
{ {
name: 'Invitation to Mundane Life - Xiao Banner', name: 'Invitation to Mundane Life - Xiao Banner',
pos: '20% 15%', pos: '20% 15%',
@ -246,31 +144,20 @@ export const eventsData = [
url: 'https://www.hoyolab.com/article/5444430', url: 'https://www.hoyolab.com/article/5444430',
showOnHome: true, showOnHome: true,
}, },
],
[
{ {
name: 'Epitome Invocation - Weapon Banner', name: 'Leaves in the Wind - Klee Banner',
pos: '30% 30%', pos: '35% 25%',
zoom: '150%', zoom: '200%',
image: 'epitome_invocation_27.jpg', image: 'sparkling_steps_3.jpg',
start: '2022-03-30 06:00:00', start: '2022-07-13 06:00:00',
end: '2022-04-19 17:59:59', end: '2022-08-02 17:59:59',
color: '#FFAA4B', color: '#ff7763',
url: 'https://www.hoyolab.com/article/3992947', url: 'https://www.hoyolab.com/article/5915988',
showOnHome: true, showOnHome: true,
timezoneDependent: true, timezoneDependent: true,
}, },
{ ],
name: 'Epitome Invocation - Weapon Banner', [
pos: '30% 30%',
zoom: '150%',
image: 'epitome_invocation_28.jpg',
start: '2022-04-19 18:00:00',
end: '2022-05-31 05:59:59',
color: '#FFAA4B',
url: 'https://www.hoyolab.com/article/4245294',
showOnHome: true,
},
{ {
name: 'Epitome Invocation - Weapon Banner', name: 'Epitome Invocation - Weapon Banner',
pos: '30% 30%', pos: '30% 30%',
@ -294,38 +181,20 @@ export const eventsData = [
url: 'https://www.hoyolab.com/article/5444431', url: 'https://www.hoyolab.com/article/5444431',
showOnHome: true, showOnHome: true,
}, },
{
name: 'Epitome Invocation - Weapon Banner',
pos: '30% 30%',
zoom: '150%',
image: 'epitome_invocation_31.jpg',
start: '2022-07-13 06:00:00',
end: '2022-08-02 17:59:59',
color: '#FFAA4B',
url: 'https://www.hoyolab.com/article/5915986',
showOnHome: true,
timezoneDependent: true,
},
], ],
[ [
{
name: 'Spiral Abyss',
image: 'spiral_abyss.jpg',
pos: '50% 20%',
start: '2022-04-01 04:00:00',
end: '2022-04-16 04:00:00',
color: '#4299E1',
description:
"After a character's Normal Attack hits an opponent, this opponent will be afflicted with a Mark of Ending. After 10s, this Mark of Ending will be removed, dealing True DMG to this opponent. When a character's Normal Attack hits an opponent with a Mark of Ending, the DMG dealt by the Mark of Ending's removal will be increased. This DMG can be increased 9 times.",
},
{
name: 'Spiral Abyss',
image: 'spiral_abyss.jpg',
pos: '50% 20%',
start: '2022-04-16 04:00:00',
end: '2022-05-01 04:00:00',
color: '#4299E1',
description:
"After a character's Normal Attacks hit opponents, the DMG dealt by this character's Normal Attacks will increase by 12% for 5s. This effect can stack up to 5 times. Each stack is calculated independently. This effect can be triggered once every 0.1s.",
},
{
name: 'Spiral Abyss',
image: 'spiral_abyss.jpg',
pos: '50% 20%',
start: '2022-05-01 04:00:00',
end: '2022-05-16 04:00:00',
color: '#4299E1',
description:
"After a character's Normal Attack deals DMG to an opponent, the Physical/Elemental RES of this opponent will decrease by 6% for 5s, matching the type of DMG dealt. This can stack up to 7 times. RES decreases of different types can co-exist, and their stacks and timers will be independent of each other.",
},
{ {
name: 'Spiral Abyss', name: 'Spiral Abyss',
image: 'spiral_abyss.jpg', image: 'spiral_abyss.jpg',
@ -366,28 +235,38 @@ export const eventsData = [
description: description:
"After the active character uses an Elemental Skill, that character's next Normal Attack that hits an opponent will unleash a shockwave at that opponent's position, dealing DMG. This effect can occur once every 1.2s.", "After the active character uses an Elemental Skill, that character's next Normal Attack that hits an opponent will unleash a shockwave at that opponent's position, dealing DMG. This effect can occur once every 1.2s.",
}, },
{
name: 'Spiral Abyss',
image: 'spiral_abyss.jpg',
pos: '50% 20%',
start: '2022-07-16 04:00:00',
end: '2022-08-01 04:00:00',
color: '#4299E1',
description:
"When a character takes the field, they will gain 1 Fortitude stack every 2s. This will increase their ATK by 20%. Max 3 stacks. When characters with 3 Fortitude stacks hit opponents with Charged Attacks, a shockwave will be unleashed at the opponents' position, dealing True DMG. A shockwave can be unleashed in this manner once every 2s. When the character leaves the field, all their Fortitude stacks will be cleared.",
},
{
name: 'Spiral Abyss',
image: 'spiral_abyss.jpg',
pos: '50% 20%',
start: '2022-08-01 04:00:00',
end: '2022-08-16 04:00:00',
color: '#4299E1',
description:
"When a character triggers Swirl on an opponent, that opponent's DEF is decreased by 12% for 10s. Max 3 stacks. Each stack's duration is counted independently.",
},
{
name: 'Spiral Abyss',
image: 'spiral_abyss.jpg',
pos: '50% 20%',
start: '2022-08-16 04:00:00',
end: '2022-09-01 04:00:00',
color: '#4299E1',
description:
"After the active character's Normal, Charged, or Plunging Attacks hit opponents, that character's Normal, Charged, and Plunging Attack DMG is increased by 12% for 8s. This effect can be triggered once every 0.1s. Max 4 stacks. Each stack's duration is counted independently. This effect will be cleared if the character leaves the field.",
},
], ],
[ [
{
name: "Paimon's Bargain - Razor, Amber, and Royal",
pos: '0% 50%',
zoom: '150%',
start: '2022-04-01 04:00:00',
end: '2022-05-01 04:00:00',
color: '#B6A1EA',
image: 'paimon_bargain.png',
description: 'Now selling: Razor, Amber, and Royal Weapons.',
},
{
name: "Paimon's Bargain - Bennett, Lisa, and Blackcliff",
pos: '0% 50%',
zoom: '150%',
start: '2022-05-01 04:00:00',
end: '2022-06-01 04:00:00',
color: '#B6A1EA',
image: 'paimon_bargain.png',
description: 'Now selling: Bennett, Lisa, and Blackcliff Weapons.',
},
{ {
name: "Paimon's Bargain - Barbara, Kaeya, and Royal", name: "Paimon's Bargain - Barbara, Kaeya, and Royal",
pos: '0% 50%', pos: '0% 50%',
@ -398,18 +277,28 @@ export const eventsData = [
image: 'paimon_bargain.png', image: 'paimon_bargain.png',
description: 'Now selling: Barbara, Kaeya, and Royal Weapons.', description: 'Now selling: Barbara, Kaeya, and Royal Weapons.',
}, },
{
name: "Paimon's Bargain - Fischl, Xiangling, and Blackcliff",
pos: '0% 50%',
zoom: '150%',
start: '2022-07-01 04:00:00',
end: '2022-08-01 04:00:00',
color: '#B6A1EA',
image: 'paimon_bargain.png',
description: 'Now selling: Fischl, Xiangling, and Blackcliff Weapons.',
},
{
name: "Paimon's Bargain - Beidou, Noelle, and Royal",
pos: '0% 50%',
zoom: '150%',
start: '2022-08-01 04:00:00',
end: '2022-09-01 04:00:00',
color: '#B6A1EA',
image: 'paimon_bargain.png',
description: 'Now selling: Beidou, Noelle, and Royal Weapons.',
},
], ],
[ [
{
name: 'Battle Pass - Luxuriant Vibrance',
pos: '0% 12%',
image: 'luxuriant_vibrance.jpg',
start: '2022-03-30 06:00:00',
end: '2022-05-09 03:59:59',
color: '#ff9486',
url: 'https://www.hoyolab.com/article/3993068',
timezoneDependent: true,
},
{ {
name: 'Battle Pass - Gorge Sunset', name: 'Battle Pass - Gorge Sunset',
pos: '0% 12%', pos: '0% 12%',
@ -420,5 +309,15 @@ export const eventsData = [
url: 'https://www.hoyolab.com/article/4998961', url: 'https://www.hoyolab.com/article/4998961',
timezoneDependent: true, timezoneDependent: true,
}, },
{
name: 'Battle Pass - Gorge Sunset',
pos: '0% 12%',
image: 'azure_main.jpg',
start: '2022-07-13 06:00:00',
end: '2022-08-22 03:59:59',
color: '#8fc2ea',
url: 'https://www.hoyolab.com/article/5916190',
timezoneDependent: true,
},
], ],
]; ];

View File

@ -1,3 +1,4 @@
import dayjs from 'dayjs';
import { register, addMessages, init, getLocaleFromNavigator, locale as $locale } from 'svelte-i18n'; import { register, addMessages, init, getLocaleFromNavigator, locale as $locale } from 'svelte-i18n';
import en from './locales/en.json'; import en from './locales/en.json';
@ -17,6 +18,7 @@ $locale.subscribe((value) => {
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
localStorage.setItem('locale', value); localStorage.setItem('locale', value);
dayjsLocales[value]().then(() => dayjs.locale(value));
} }
}); });
@ -48,6 +50,22 @@ register('de', () => import('./locales/items/de.json'));
register('th', () => import('./locales/items/th.json')); register('th', () => import('./locales/items/th.json'));
register('vi', () => import('./locales/items/vi.json')); register('vi', () => import('./locales/items/vi.json'));
const dayjsLocales = {
en: () => import('dayjs/locale/en'),
id: () => import('dayjs/locale/id'),
ru: () => import('dayjs/locale/ru'),
ja: () => import('dayjs/locale/ja'),
ko: () => import('dayjs/locale/ko'),
fr: () => import('dayjs/locale/fr'),
zh: () => import('dayjs/locale/zh'),
pt: () => import('dayjs/locale/pt'),
tw: () => import('dayjs/locale/zh-tw'),
es: () => import('dayjs/locale/es'),
de: () => import('dayjs/locale/de'),
th: () => import('dayjs/locale/th'),
vi: () => import('dayjs/locale/vi'),
};
export function startClient() { export function startClient() {
let used = 'en'; let used = 'en';
const savedLocale = localStorage.getItem('locale'); const savedLocale = localStorage.getItem('locale');

View File

@ -146,7 +146,10 @@
monthList[i][1].offset = i - 1 >= 0 ? monthList[i - 1][1].total + monthList[i - 1][1].offset : 0; monthList[i][1].offset = i - 1 >= 0 ? monthList[i - 1][1].total + monthList[i - 1][1].offset : 0;
} }
dates = [...new Array(dayTotal)].map((_, i) => firstDay.add(i, 'day').date()); dates = [...new Array(dayTotal)].map((_, i) => {
const cur = firstDay.add(i, 'day');
return [cur.date(), cur.format('dd')];
});
} }
async function toggleLocalTime() { async function toggleLocalTime() {
@ -266,21 +269,21 @@
style={`width: 1px; height: calc(100% - ${eventHeight}px); position: absolute; style={`width: 1px; height: calc(100% - ${eventHeight}px); position: absolute;
left: ${i * dayWidth}px; top: ${eventHeight}px;`} left: ${i * dayWidth}px; top: ${eventHeight}px;`}
> >
<span <span class="absolute top-0 text-gray-200 text-center pb-1 " style="width: 20px; left: -10px;">
class="absolute top-0 text-gray-200 text-center pb-1 bg-background-secondary" {date[0]}
style="width: 20px; left: -10px;" </span>
> <span class="absolute top-0 text-gray-600 text-center pb-1 " style="width: 20px; left: -10px; top: -24px;">
{date} {date[1]}
</span> </span>
</div> </div>
{/each} {/each}
<!-- MONTH TITLE --> <!-- MONTH TITLE -->
{#each monthList as [month, item]} {#each monthList as [month, item]}
<div <div
class="absolute bg-background-secondary pr-4" class="absolute pr-4"
style={`top: 12px; width: ${item.total * dayWidth}px; left: ${item.offset * dayWidth}px;`} style={`top: 12px; width: ${item.total * dayWidth}px; left: ${item.offset * dayWidth}px;`}
> >
<span class="text-legendary-from font-bold sticky left-0">{month}</span> <span class="text-legendary-from font-bold sticky left-0 month">{month}</span>
</div> </div>
{/each} {/each}
<!-- EVENT STRIP --> <!-- EVENT STRIP -->
@ -343,4 +346,22 @@
background: rgba(0, 0, 0, 0.35); background: rgba(0, 0, 0, 0.35);
@apply rounded-xl; @apply rounded-xl;
} }
.month::before {
content: '';
width: 100%;
height: 100%;
z-index: -1;
display: inline-block;
padding: 0 50px;
position: absolute;
left: calc(50% - 50px);
background: linear-gradient(
90deg,
rgba(0, 0, 0, 0) 0%,
rgb(37, 41, 74, 100) 10%,
rgb(37, 41, 74, 100) 90%,
rgba(0, 0, 0, 0) 100%
);
}
</style> </style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 122 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 251 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 246 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 318 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 314 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 145 KiB