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 = [
[
{
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',
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',
pos: '0% 40%',
@ -116,39 +46,19 @@ export const eventsData = [
url: 'https://www.hoyolab.com/article/5350611',
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',
pos: '0% 20%',
@ -172,20 +82,19 @@ export const eventsData = [
url: 'https://www.hoyolab.com/article/5444663',
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',
pos: '20% 15%',
@ -198,31 +107,20 @@ export const eventsData = [
showOnHome: true,
timezoneDependent: true,
},
],
[
{
name: 'Ballad in Goblets - Venti Banner',
pos: '20% 15%',
name: 'Leaves in the Wind - Kazuha Banner',
pos: '30% 15%',
zoom: '200%',
image: 'ballad_in_goblets_3.jpg',
start: '2022-03-30 06:00:00',
end: '2022-04-19 17:59:59',
color: '#55E4B0',
url: 'https://www.hoyolab.com/article/3992945',
image: 'leaves_in_the_wind_2.jpg',
start: '2022-07-13 06:00:00',
end: '2022-08-02 17:59:59',
color: '#7edec3',
url: 'https://www.hoyolab.com/article/5915985',
showOnHome: 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',
pos: '20% 15%',
@ -246,31 +144,20 @@ export const eventsData = [
url: 'https://www.hoyolab.com/article/5444430',
showOnHome: true,
},
],
[
{
name: 'Epitome Invocation - Weapon Banner',
pos: '30% 30%',
zoom: '150%',
image: 'epitome_invocation_27.jpg',
start: '2022-03-30 06:00:00',
end: '2022-04-19 17:59:59',
color: '#FFAA4B',
url: 'https://www.hoyolab.com/article/3992947',
name: 'Leaves in the Wind - Klee Banner',
pos: '35% 25%',
zoom: '200%',
image: 'sparkling_steps_3.jpg',
start: '2022-07-13 06:00:00',
end: '2022-08-02 17:59:59',
color: '#ff7763',
url: 'https://www.hoyolab.com/article/5915988',
showOnHome: 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',
pos: '30% 30%',
@ -294,38 +181,20 @@ export const eventsData = [
url: 'https://www.hoyolab.com/article/5444431',
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',
image: 'spiral_abyss.jpg',
@ -366,28 +235,38 @@ export const eventsData = [
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.",
},
{
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",
pos: '0% 50%',
@ -398,18 +277,28 @@ export const eventsData = [
image: 'paimon_bargain.png',
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',
pos: '0% 12%',
@ -420,5 +309,15 @@ export const eventsData = [
url: 'https://www.hoyolab.com/article/4998961',
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 en from './locales/en.json';
@ -17,6 +18,7 @@ $locale.subscribe((value) => {
if (typeof window !== 'undefined') {
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('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() {
let used = 'en';
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;
}
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() {
@ -266,21 +269,21 @@
style={`width: 1px; height: calc(100% - ${eventHeight}px); position: absolute;
left: ${i * dayWidth}px; top: ${eventHeight}px;`}
>
<span
class="absolute top-0 text-gray-200 text-center pb-1 bg-background-secondary"
style="width: 20px; left: -10px;"
>
{date}
<span class="absolute top-0 text-gray-200 text-center pb-1 " style="width: 20px; left: -10px;">
{date[0]}
</span>
<span class="absolute top-0 text-gray-600 text-center pb-1 " style="width: 20px; left: -10px; top: -24px;">
{date[1]}
</span>
</div>
{/each}
<!-- MONTH TITLE -->
{#each monthList as [month, item]}
<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;`}
>
<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>
{/each}
<!-- EVENT STRIP -->
@ -343,4 +346,22 @@
background: rgba(0, 0, 0, 0.35);
@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>

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