diff options
Diffstat (limited to 'src/lib/Tools/HololiveBirthdays.svelte')
| -rw-r--r-- | src/lib/Tools/HololiveBirthdays.svelte | 152 |
1 files changed, 76 insertions, 76 deletions
diff --git a/src/lib/Tools/HololiveBirthdays.svelte b/src/lib/Tools/HololiveBirthdays.svelte index 059a1f91..68a591de 100644 --- a/src/lib/Tools/HololiveBirthdays.svelte +++ b/src/lib/Tools/HololiveBirthdays.svelte @@ -1,95 +1,95 @@ <script lang="ts"> - import { browser } from '$app/environment'; - import { page } from '$app/stores'; - import { onMount } from 'svelte'; - import { clearAllParameters, parseOrDefault } from '../Utility/parameters'; - import Message from '$lib/Loading/Message.svelte'; - import locale from '$stores/locale'; - import birthdays from '$lib/Data/Static/hololiveBirthdays.json'; + import { browser } from '$app/environment'; + import { page } from '$app/stores'; + import { onMount } from 'svelte'; + import { clearAllParameters, parseOrDefault } from '../Utility/parameters'; + import Message from '$lib/Loading/Message.svelte'; + import locale from '$stores/locale'; + import birthdays from '$lib/Data/Static/hololiveBirthdays.json'; - const urlParameters = browser ? new URLSearchParams(window.location.search) : null; - let date = new Date(); - let month = parseOrDefault(urlParameters, 'month', date.getMonth() + 1); - let day = parseOrDefault(urlParameters, 'day', date.getDate()); + const urlParameters = browser ? new URLSearchParams(window.location.search) : null; + let date = new Date(); + let month = parseOrDefault(urlParameters, 'month', date.getMonth() + 1); + let day = parseOrDefault(urlParameters, 'day', date.getDate()); - $: todaysBirthdays = birthdays.filter( - (birthday) => birthday.month === month && birthday.day === day - ); + $: todaysBirthdays = birthdays.filter( + (birthday) => birthday.month === month && birthday.day === day + ); - $: { - month = Math.min(month, 12); - month = Math.max(month, 1); - day = Math.min(day, new Date(new Date().getFullYear(), month, 0).getDate()); - day = Math.max(day, 1); + $: { + month = Math.min(month, 12); + month = Math.max(month, 1); + day = Math.min(day, new Date(new Date().getFullYear(), month, 0).getDate()); + day = Math.max(day, 1); - if (browser) { - $page.url.searchParams.set('month', month.toString()); - $page.url.searchParams.set('day', day.toString()); - clearAllParameters(['month', 'day']); - history.replaceState(null, '', `?${$page.url.searchParams.toString()}`); - } - } + if (browser) { + $page.url.searchParams.set('month', month.toString()); + $page.url.searchParams.set('day', day.toString()); + clearAllParameters(['month', 'day']); + history.replaceState(null, '', `?${$page.url.searchParams.toString()}`); + } + } - onMount(() => clearAllParameters(['month', 'day'])); + onMount(() => clearAllParameters(['month', 'day'])); </script> <p> - <select bind:value={month}> - {#each Array.from({ length: 12 }, (_, i) => i + 1) as month} - <option value={month}> - {new Date(0, month - 1).toLocaleString('default', { month: 'long' })} - </option> - {/each} - </select> + <select bind:value={month}> + {#each Array.from({ length: 12 }, (_, i) => i + 1) as month} + <option value={month}> + {new Date(0, month - 1).toLocaleString('default', { month: 'long' })} + </option> + {/each} + </select> - <select bind:value={day}> - {#each Array.from({ length: new Date(new Date().getFullYear(), month, 0).getDate() }, (_, i) => i + 1) as day} - <option value={day}>{day}</option> - {/each} - </select> + <select bind:value={day}> + {#each Array.from({ length: new Date(new Date().getFullYear(), month, 0).getDate() }, (_, i) => i + 1) as day} + <option value={day}>{day}</option> + {/each} + </select> </p> {#if todaysBirthdays.length === 0} - <Message - message={`No birthdays for ${$locale().dayFormatter( - new Date(new Date().getFullYear(), month - 1, day) - )}.`} - fullscreen={false} - loader="ripple" - /> + <Message + message={`No birthdays for ${$locale().dayFormatter( + new Date(new Date().getFullYear(), month - 1, day) + )}.`} + fullscreen={false} + loader="ripple" + /> {:else} - <div class="characters"> - {#each todaysBirthdays as birthday} - <div class="card card-small"> - <a - href={`https://anilist.co/search/characters?search=${encodeURIComponent( - birthday.name - ).replace(/%20/g, '+')}`} - target="_blank" - > - {birthday.name} - <img src={birthday.image} alt="Character" class="character-image" /> - </a> - </div> - {/each} - </div> + <div class="characters"> + {#each todaysBirthdays as birthday} + <div class="card card-small"> + <a + href={`https://anilist.co/search/characters?search=${encodeURIComponent( + birthday.name + ).replace(/%20/g, '+')}`} + target="_blank" + > + {birthday.name} + <img src={birthday.image} alt="Character" class="character-image" /> + </a> + </div> + {/each} + </div> {/if} <style lang="scss"> - .characters { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); - gap: 1rem; - grid-row-gap: 1rem; - align-items: start; + .characters { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); + gap: 1rem; + grid-row-gap: 1rem; + align-items: start; - img { - width: 100%; - height: auto; - object-fit: cover; - border-radius: 8px; - margin-top: 0.5rem; - box-shadow: 0 4px 30px var(--base01); - } - } + img { + width: 100%; + height: auto; + object-fit: cover; + border-radius: 8px; + margin-top: 0.5rem; + box-shadow: 0 4px 30px var(--base01); + } + } </style> |