refactor(settings): Move back to localStorage

2 files changed, 97 insertions, 124 deletions

diff --git a/src/app.html b/src/app.html
index d485fc70..498e3f9c 100644
--- a/src/app.html
+++ b/src/app.html
@@ -84,124 +84,99 @@
 
       document.addEventListener('DOMContentLoaded', () => {
         const mai = document.getElementById('mai');
-        const openRequest = indexedDB.open('localforage');
 
-        openRequest.onsuccess = (event) => {
-          const database = event.target.result;
-          const transaction = database.transaction(['keyvaluepairs'], 'readonly');
-          const objectStore = transaction.objectStore('keyvaluepairs');
-          const getRequest = objectStore.get('settings');
-
-          getRequest.onsuccess = () => {
-            const settings = getRequest.result;
-
-            aoButa = settings?.displayAoButa || 'none';
-            mai.style.display = 'block';
-
-            if (aoButa === 'random') {
-              const random = Math.floor(Math.random() * 8);
-
-              switch (random) {
-                case 0:
-                  aoButa = 'mai';
-
-                  break;
-
-                case 1:
-                  aoButa = 'nodoka';
-
-                  break;
-
-                case 2:
-                  aoButa = 'kaede';
-
-                  break;
-
-                case 3:
-                  aoButa = 'rio';
-
-                  break;
-
-                case 4:
-                  aoButa = 'sakuta';
-
-                  break;
-
-                case 5:
-                  aoButa = 'shouko';
-
-                  break;
-
-                case 6:
-                  aoButa = 'tomoe';
-
-                  break;
-
-                default:
-                  aoButa = 'mai_2';
-
-                  break;
-              }
+        aoButa = JSON.parse(localStorage.getItem('settings')).displayAoButa;
+        mai.style.display = 'block';
+
+        if (aoButa === 'random') {
+          const random = Math.floor(Math.random() * 8);
+
+          switch (random) {
+            case 0:
+              aoButa = 'mai';
+              break;
+            case 1:
+              aoButa = 'nodoka';
+              break;
+            case 2:
+              aoButa = 'kaede';
+              break;
+            case 3:
+              aoButa = 'rio';
+              break;
+            case 4:
+              aoButa = 'sakuta';
+              break;
+            case 5:
+              aoButa = 'shouko';
+              break;
+            case 6:
+              aoButa = 'tomoe';
+              break;
+            case 6:
+            default:
+              aoButa = 'mai_2';
+              break;
+          }
+        }
+
+        switch (aoButa) {
+          case 'mai_2':
+            {
+              mai.src = '/aobuta/mai.png';
+              mai.alt = 'Mai Sakurajima';
             }
-
-            switch (aoButa) {
-              case 'mai_2':
-                mai.src = '/aobuta/mai.png';
-                mai.alt = 'Mai Sakurajima';
-
-                break;
-
-              case 'mai':
-                mai.src = '/aobuta/mai_2.webp';
-                mai.alt = 'Mai Sakurajima';
-
-                break;
-
-              case 'nodoka':
-                mai.src = '/aobuta/nodoka.webp';
-                mai.alt = 'Nodoka Toyohama';
-
-                break;
-
-              case 'kaede':
-                mai.src = '/aobuta/kaede.png';
-                mai.alt = 'Kaede Azusagawa';
-
-                break;
-
-              case 'rio':
-                mai.src = '/aobuta/rio.webp';
-                mai.alt = 'Rio Futaba';
-
-                break;
-
-              case 'sakuta':
-                mai.src = '/aobuta/sakuta.webp';
-                mai.alt = 'Sakuta Azusagawa';
-
-                break;
-
-              case 'shouko':
-                mai.src = '/aobuta/shouko.webp';
-                mai.alt = 'Shouko Makinohara';
-
-                break;
-
-              case 'tomoe':
-                mai.src = '/aobuta/tomoe.webp';
-                mai.alt = 'Tomoe Koga';
-
-                break;
-
-              case 'none':
-              default:
-                mai.style.display = 'none';
-                mai.alt = 'No one';
-
-                break;
+            break;
+          case 'mai':
+            {
+              mai.src = '/aobuta/mai_2.webp';
+              mai.alt = 'Mai Sakurajima';
+            }
+            break;
+          case 'nodoka':
+            {
+              mai.src = '/aobuta/nodoka.webp';
+              mai.alt = 'Nodoka Toyohama';
+            }
+            break;
+          case 'kaede':
+            {
+              mai.src = '/aobuta/kaede.png';
+              mai.alt = 'Kaede Azusagawa';
+            }
+            break;
+          case 'rio':
+            {
+              mai.src = '/aobuta/rio.webp';
+              mai.alt = 'Rio Futaba';
+            }
+            break;
+          case 'sakuta':
+            {
+              mai.src = '/aobuta/sakuta.webp';
+              mai.alt = 'Sakuta Azusagawa';
+            }
+            break;
+          case 'shouko':
+            {
+              mai.src = '/aobuta/shouko.webp';
+              mai.alt = 'Shouko Makinohara';
+            }
+            break;
+          case 'tomoe':
+            {
+              mai.src = '/aobuta/tomoe.webp';
+              mai.alt = 'Tomoe Koga';
+            }
+            break;
+          case 'none': {
+            {
+              mai.style.display = 'none';
+              mai.alt = 'No one';
             }
-          };
-        };
+            break;
+          }
+        }
       });
     </script>
 
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index c8ae9c94..4076a991 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -136,18 +136,16 @@ const defaultSettings: Settings = {
 };
 
 const createStore = () => {
-  const store = writable<Settings>(defaultSettings);
-  let state: Settings = defaultSettings;
-
-  if (browser)
-    localforage.getItem<Settings>('settings').then((value) => {
-      if (value && typeof value === 'object') store.set(value);
-    });
+  const initialValue = browser
+    ? JSON.parse(localStorage.getItem('settings') || JSON.stringify(defaultSettings))
+    : defaultSettings;
+  const store = writable<Settings>(initialValue);
+  let state: Settings = initialValue;
 
   store.subscribe((value) => {
     state = value;
 
-    if (browser) localforage.setItem('settings', value);
+    if (browser) localStorage.setItem('settings', JSON.stringify(value));
   });
 
   return {
@@ -165,7 +163,7 @@ const createStore = () => {
         if (!settingsKeys.includes(key))
           updatedSettings[key as keyof Settings] = defaultSettings[key as keyof Settings];
 
-      if (browser) localforage.setItem('settings', updatedSettings);
+      if (browser) localStorage.setItem('settings', JSON.stringify(updatedSettings));
 
       return updatedSettings;
     },