diff options
Diffstat (limited to 'src/lib/Schedule/Crunchyroll.svelte')
| -rw-r--r-- | src/lib/Schedule/Crunchyroll.svelte | 164 |
1 files changed, 82 insertions, 82 deletions
diff --git a/src/lib/Schedule/Crunchyroll.svelte b/src/lib/Schedule/Crunchyroll.svelte index 0cfd0811..d22cff42 100644 --- a/src/lib/Schedule/Crunchyroll.svelte +++ b/src/lib/Schedule/Crunchyroll.svelte @@ -1,100 +1,100 @@ <script lang="ts"> - import crunchyroll from '$lib/Data/Static/crunchyroll.json'; - import './container.css'; + import crunchyroll from '$lib/Data/Static/crunchyroll.json'; + import './container.css'; - interface CrunchyrollMedia<T = number | 'soon' | 'continuing'> { - year: number; - month: number; - day: T; - title: string; - } + interface CrunchyrollMedia<T = number | 'soon' | 'continuing'> { + year: number; + month: number; + day: T; + title: string; + } - type KnownMedia = { [key: string]: CrunchyrollMedia<number>[] }; + type KnownMedia = { [key: string]: CrunchyrollMedia<number>[] }; - const days: KnownMedia = crunchyroll - .filter((media) => media.day !== 'soon' && media.day !== 'continuing') - .reduce((acc: KnownMedia, media) => { - const date = new Date(media.year, media.month - 1, media.day as number).toLocaleDateString(); + const days: KnownMedia = crunchyroll + .filter((media) => media.day !== 'soon' && media.day !== 'continuing') + .reduce((acc: KnownMedia, media) => { + const date = new Date(media.year, media.month - 1, media.day as number).toLocaleDateString(); - if (!acc[date]) acc[date] = []; + if (!acc[date]) acc[date] = []; - acc[date].push(media as CrunchyrollMedia<number>); + acc[date].push(media as CrunchyrollMedia<number>); - return acc; - }, {}); - const continuing: CrunchyrollMedia<number | string>[] = crunchyroll.filter( - (media) => media.day === 'continuing' - ); - const soon: CrunchyrollMedia<number | string>[] = crunchyroll.filter( - (media) => media.day === 'soon' - ); + return acc; + }, {}); + const continuing: CrunchyrollMedia<number | string>[] = crunchyroll.filter( + (media) => media.day === 'continuing' + ); + const soon: CrunchyrollMedia<number | string>[] = crunchyroll.filter( + (media) => media.day === 'soon' + ); - $: columnCount = Math.ceil(Object.keys(days).length / 2); + $: columnCount = Math.ceil(Object.keys(days).length / 2); - const ordinalSuffix = (i: number) => { - const j = i % 10; - const k = i % 100; + const ordinalSuffix = (i: number) => { + const j = i % 10; + const k = i % 100; - if (j === 1 && k !== 11) return i + 'st'; - if (j === 2 && k !== 12) return i + 'nd'; - if (j === 3 && k !== 13) return i + 'rd'; + if (j === 1 && k !== 11) return i + 'st'; + if (j === 2 && k !== 12) return i + 'nd'; + if (j === 3 && k !== 13) return i + 'rd'; - return i + 'th'; - }; + return i + 'th'; + }; </script> <div class="list-container" id="crunchyroll" style={`column-count: ${columnCount};`}> - {#each Object.values(days) as day} - {@const date = new Date(day[0].year, day[0].month - 1, day[0].day)} - - <div class="card day"> - <details open class="details-unstyled"> - <summary> - {date.toLocaleString('default', { month: 'long' })} - {ordinalSuffix(day[0].day)}, {day[0].year} - </summary> - <ol> - {#each day as media} - <li>{media.title}</li> - {/each} - </ol> - </details> - </div> - - <p /> - {/each} - - <div class="card day"> - <details open class="details-unstyled"> - <summary>Coming soon</summary> - - <ol> - {#each soon as media} - <li>{media.title}</li> - {/each} - </ol> - </details> - </div> - - <p /> - - <div class="card day"> - <details open class="details-unstyled"> - <summary>Continuing from previous season</summary> - - <ol> - {#each continuing as media} - <li>{media.title}</li> - {/each} - </ol> - </details> - </div> + {#each Object.values(days) as day} + {@const date = new Date(day[0].year, day[0].month - 1, day[0].day)} + + <div class="card day"> + <details open class="details-unstyled"> + <summary> + {date.toLocaleString('default', { month: 'long' })} + {ordinalSuffix(day[0].day)}, {day[0].year} + </summary> + <ol> + {#each day as media} + <li>{media.title}</li> + {/each} + </ol> + </details> + </div> + + <p /> + {/each} + + <div class="card day"> + <details open class="details-unstyled"> + <summary>Coming soon</summary> + + <ol> + {#each soon as media} + <li>{media.title}</li> + {/each} + </ol> + </details> + </div> + + <p /> + + <div class="card day"> + <details open class="details-unstyled"> + <summary>Continuing from previous season</summary> + + <ol> + {#each continuing as media} + <li>{media.title}</li> + {/each} + </ol> + </details> + </div> </div> <style> - .day { - overflow-y: auto; - break-inside: avoid; - page-break-inside: avoid; - } + .day { + overflow-y: auto; + break-inside: avoid; + page-break-inside: avoid; + } </style> |