From a5cdea3ce3f388aae78b63cac4df6eaf381281c8 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 7 Dec 2023 03:41:24 -0800
Subject: feat(settings): helper options

---
 src/app.html                     | 31 +++++++++++++++++++++++-----
 src/routes/settings/+page.svelte | 44 +++++++++++++++++++++++++++++++---------
 src/stores/settings.ts           |  4 ++--
 3 files changed, 62 insertions(+), 17 deletions(-)

(limited to 'src')

diff --git a/src/app.html b/src/app.html
index 4808664a..6f1ca2c5 100644
--- a/src/app.html
+++ b/src/app.html
@@ -81,11 +81,32 @@
 
 		document.addEventListener('DOMContentLoaded', () => {
 			const mai = document.getElementById('mai')
-
-			if (JSON.parse(localStorage.getItem("settings")).displayMai === true) {
-				mai.style.display = 'block'
-			} else {
-				mai.style.display = 'none'
+			const aoButa = JSON.parse(localStorage.getItem("settings")).displayAoButa;
+
+			mai.style.display = 'block'
+
+			switch (AoButa) {
+				case "mai":
+					{
+						mai.src = "/aobuta/mai.png"
+					}
+					break;
+				case "nodoka":
+					{
+						mai.src = "/aobuta/nodoka.webp"
+					}
+					break;
+				case "kaede":
+					{
+						mai.src = "/aobuta/kaede.png"
+					}
+					break;
+				case "none": {
+					{
+						mai.style.display = 'none'
+					}
+					break;
+				}
 			}
 		})
 	</script>
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 8c9517ef..0234c12c 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -100,23 +100,47 @@
 
 		<br />
 
-		<SettingCheckboxToggle
-			setting="displayMai"
-			text={`Display <a href="https://anilist.co/character/127222/Mai-Sakurajima" target="_blank">Mai</a>`}
-			onChange={() => {
+		<select
+			bind:value={$settings.displayAoButa}
+			on:change={() => {
 				const mai = document.getElementById('mai');
 
 				if (!mai) return;
 
-				if ($settings.displayMai) {
-					mai.style.display = 'block';
-				} else {
-					mai.style.display = 'none';
+				mai.style.display = 'block';
+
+				switch ($settings.displayAoButa) {
+					case 'mai':
+						{
+							mai.src = '/aobuta/mai.png';
+						}
+						break;
+					case 'nodoka':
+						{
+							mai.src = '/aobuta/nodoka.webp';
+						}
+						break;
+					case 'kaede':
+						{
+							mai.src = '/aobuta/kaede.png';
+						}
+						break;
+					case 'none': {
+						{
+							mai.style.display = 'none';
+						}
+						break;
+					}
 				}
 			}}
 		>
-			<SettingHint lineBreak>Let her remind you. It's for your own benefit.</SettingHint>
-		</SettingCheckboxToggle>
+			<option value="mai">Mai</option>
+			<option value="nodoka">Nodoka</option>
+			<option value="kaede">Kaede</option>
+			<option value="none">None</option>
+		</select>
+		Display Helper
+		<SettingHint lineBreak>Let them remind you. It's for your own benefit.</SettingHint>
 
 		<p />
 
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index aefbd4ac..c57a6268 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -21,7 +21,7 @@ export interface Settings {
 	disableOutOfDateVolumeWarning: boolean;
 	displayPlannedAnime: boolean;
 	displayFurigana: boolean;
-	displayMai: boolean;
+	displayAoButa: 'mai' | 'nodoka' | 'kaede' | 'none';
 }
 
 const defaultSettings: Settings = {
@@ -39,7 +39,7 @@ const defaultSettings: Settings = {
 	closeAnimeByDefault: false,
 	closeMangaByDefault: false,
 	sortByDifference: false,
-	displayMai: true,
+	displayAoButa: 'mai',
 
 	// Calculation
 	roundDownChapters: true,
-- 
cgit v1.2.3