diff --git a/src/data/timeline.js b/src/data/timeline.js index 9cd3309b..7390ca23 100644 --- a/src/data/timeline.js +++ b/src/data/timeline.js @@ -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, + }, ], ]; diff --git a/src/i18n.js b/src/i18n.js index 96e89b19..ece241f0 100644 --- a/src/i18n.js +++ b/src/i18n.js @@ -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'); diff --git a/src/routes/timeline/index.svelte b/src/routes/timeline/index.svelte index aa7e2854..9810929f 100644 --- a/src/routes/timeline/index.svelte +++ b/src/routes/timeline/index.svelte @@ -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;`} > - - {date} + + {date[0]} + + + {date[1]} {/each} {#each monthList as [month, item]}
- {month} + {month}
{/each} @@ -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% + ); + } diff --git a/static/images/events/azure_main.jpg b/static/images/events/azure_main.jpg new file mode 100644 index 00000000..39e4220c Binary files /dev/null and b/static/images/events/azure_main.jpg differ diff --git a/static/images/events/epitome_invocation_31.jpg b/static/images/events/epitome_invocation_31.jpg new file mode 100644 index 00000000..408a8b7c Binary files /dev/null and b/static/images/events/epitome_invocation_31.jpg differ diff --git a/static/images/events/hidden_strife.jpg b/static/images/events/hidden_strife.jpg new file mode 100644 index 00000000..60e7c825 Binary files /dev/null and b/static/images/events/hidden_strife.jpg differ diff --git a/static/images/events/leaves_in_the_wind_2.jpg b/static/images/events/leaves_in_the_wind_2.jpg new file mode 100644 index 00000000..8f895059 Binary files /dev/null and b/static/images/events/leaves_in_the_wind_2.jpg differ diff --git a/static/images/events/sparkling_steps_3.jpg b/static/images/events/sparkling_steps_3.jpg new file mode 100644 index 00000000..c695b433 Binary files /dev/null and b/static/images/events/sparkling_steps_3.jpg differ diff --git a/static/images/events/summertime_odyssey.jpg b/static/images/events/summertime_odyssey.jpg new file mode 100644 index 00000000..7359ae10 Binary files /dev/null and b/static/images/events/summertime_odyssey.jpg differ