diff options
| author | Fuwn <[email protected]> | 2024-10-09 00:41:20 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-10-09 00:41:43 -0700 |
| commit | 998b63a35256ac985a5a2714dd1ca451af4dfd8a (patch) | |
| tree | 50796121a9d5ab0330fdc5d7e098bda2860d9726 /src/lib/Tools/UmaMusumeBirthdays.svelte | |
| parent | feat(graphql): add badgeCount field (diff) | |
| download | due.moe-998b63a35256ac985a5a2714dd1ca451af4dfd8a.tar.xz due.moe-998b63a35256ac985a5a2714dd1ca451af4dfd8a.zip | |
chore(prettier): use spaces instead of tabs
Diffstat (limited to 'src/lib/Tools/UmaMusumeBirthdays.svelte')
| -rw-r--r-- | src/lib/Tools/UmaMusumeBirthdays.svelte | 222 |
1 files changed, 111 insertions, 111 deletions
diff --git a/src/lib/Tools/UmaMusumeBirthdays.svelte b/src/lib/Tools/UmaMusumeBirthdays.svelte index faf962f8..29b1faa6 100644 --- a/src/lib/Tools/UmaMusumeBirthdays.svelte +++ b/src/lib/Tools/UmaMusumeBirthdays.svelte @@ -1,134 +1,134 @@ <script lang="ts"> - import { browser } from '$app/environment'; - import { page } from '$app/stores'; - import Error from '$lib/Error/RateLimited.svelte'; - import { onMount } from 'svelte'; - import { clearAllParameters, parseOrDefault } from '../Utility/parameters'; - import Skeleton from '$lib/Loading/Skeleton.svelte'; - import Message from '$lib/Loading/Message.svelte'; - import tooltip from '$lib/Tooltip/tooltip'; - import settings from '$stores/settings'; - import locale from '$stores/locale'; + import { browser } from '$app/environment'; + import { page } from '$app/stores'; + import Error from '$lib/Error/RateLimited.svelte'; + import { onMount } from 'svelte'; + import { clearAllParameters, parseOrDefault } from '../Utility/parameters'; + import Skeleton from '$lib/Loading/Skeleton.svelte'; + import Message from '$lib/Loading/Message.svelte'; + import tooltip from '$lib/Tooltip/tooltip'; + import settings from '$stores/settings'; + import locale from '$stores/locale'; - interface Birthday { - birth_day: number; - birth_month: number; - game_id: number; - id: number; - name_en: string; - name_jp: string; - preferred_url: string; - sns_icon: string; - } + interface Birthday { + birth_day: number; + birth_month: number; + game_id: number; + id: number; + name_en: string; + name_jp: string; + preferred_url: string; + sns_icon: string; + } - 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()); - let umapyoi: Promise<Birthday[]>; + 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()); + let umapyoi: Promise<Birthday[]>; - $: { - 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']); - umapyoi = fetch('https://umapyoi.net/api/v1/character/birthday').then((r) => r.json()); - }); + umapyoi = fetch('https://umapyoi.net/api/v1/character/birthday').then((r) => r.json()); + }); </script> {#await umapyoi} - <Message message="Loading birthdays ..." /> + <Message message="Loading birthdays ..." /> - <Skeleton grid={true} count={100} width="150px" height="170px" /> + <Skeleton grid={true} count={100} width="150px" height="170px" /> {:then birthdays} - {#if birthdays} - {@const todaysBirthdays = birthdays.filter( - (birthday) => birthday.birth_month === month && birthday.birth_day === day - )} + {#if birthdays} + {@const todaysBirthdays = birthdays.filter( + (birthday) => birthday.birth_month === month && birthday.birth_day === day + )} - <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> + <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={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> + <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" - /> - {:else} - <div class="characters"> - {#each todaysBirthdays as birthday} - {@const name = $settings.displayLanguage === 'en' ? birthday.name_en : birthday.name_jp} - {@const nameOther = - $settings.displayLanguage === 'ja' ? birthday.name_en : birthday.name_jp} + {#if todaysBirthdays.length === 0} + <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} + {@const name = $settings.displayLanguage === 'en' ? birthday.name_en : birthday.name_jp} + {@const nameOther = + $settings.displayLanguage === 'ja' ? birthday.name_en : birthday.name_jp} - <div class="card card-small"> - <a - href={`https://anilist.co/search/characters?search=${encodeURIComponent( - birthday.name_en - ).replace(/%20/g, '+')}`} - target="_blank" - title={nameOther} - use:tooltip - > - {name} - <img src={birthday.sns_icon} alt="Character" class="character-image" /> - </a> - </div> - {/each} - </div> - {/if} - {:else} - <Message message="Validating birthdays ..." /> + <div class="card card-small"> + <a + href={`https://anilist.co/search/characters?search=${encodeURIComponent( + birthday.name_en + ).replace(/%20/g, '+')}`} + target="_blank" + title={nameOther} + use:tooltip + > + {name} + <img src={birthday.sns_icon} alt="Character" class="character-image" /> + </a> + </div> + {/each} + </div> + {/if} + {:else} + <Message message="Validating birthdays ..." /> - <Skeleton grid={true} count={100} width="150px" height="170px" /> - {/if} + <Skeleton grid={true} count={100} width="150px" height="170px" /> + {/if} {:catch} - <Error type="Character" card /> + <Error type="Character" card /> {/await} <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> |