fix(umamusume): null-check birthdays

4 files changed, 66 insertions, 39 deletions

diff --git a/src/lib/Locale/english.ts b/src/lib/Locale/english.ts
index d994475f..34666978 100644
--- a/src/lib/Locale/english.ts
+++ b/src/lib/Locale/english.ts
@@ -297,6 +297,12 @@ const English: Locale = {
 		minute: 'numeric'
 		// second: 'numeric'
 		// timeZoneName: 'short'
+	}).format,
+	dayFormatter: new Intl.DateTimeFormat('en-US', {
+		year: 'numeric',
+		month: 'long',
+		day: 'numeric',
+		weekday: 'long'
 	}).format
 };
 
diff --git a/src/lib/Locale/japanese.ts b/src/lib/Locale/japanese.ts
index 6004ce4e..3caea474 100644
--- a/src/lib/Locale/japanese.ts
+++ b/src/lib/Locale/japanese.ts
@@ -301,6 +301,13 @@ const Japanese: Locale = {
 		minute: 'numeric'
 		// second: 'numeric'
 		// timeZoneName: 'short'
+	}).format,
+	dayFormatter: new Intl.DateTimeFormat('ja-JP', {
+		// era: 'long',
+		year: 'numeric',
+		month: 'long',
+		day: 'numeric',
+		weekday: 'long'
 	}).format
 };
 
diff --git a/src/lib/Locale/layout.ts b/src/lib/Locale/layout.ts
index 2064ed00..c1a0df5f 100644
--- a/src/lib/Locale/layout.ts
+++ b/src/lib/Locale/layout.ts
@@ -277,4 +277,5 @@ export interface Locale {
 		parseError: LocaleValue;
 	};
 	dateFormatter: (date?: number | Date | undefined) => string;
+	dayFormatter: (date?: number | Date | undefined) => string;
 }
diff --git a/src/lib/Tools/UmaMusumeBirthdays.svelte b/src/lib/Tools/UmaMusumeBirthdays.svelte
index d941cabe..8a8e33db 100644
--- a/src/lib/Tools/UmaMusumeBirthdays.svelte
+++ b/src/lib/Tools/UmaMusumeBirthdays.svelte
@@ -8,6 +8,7 @@
 	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;
@@ -51,50 +52,62 @@
 
 	<Skeleton grid={true} count={100} width="150px" height="170px" />
 {:then 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 today." fullscreen={false} loader="ripple" />
+		{#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}
-		<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}
+		<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>
+		<Skeleton grid={true} count={100} width="150px" height="170px" />
 	{/if}
 {:catch}
 	<Error type="Character" card />