fix(save): support importing large data and data reset

wolimst · May 22, 2024 · 5ab65b7 · 5ab65b7
1 parent 0af2c78
commit 5ab65b7
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 8 deletions.
diff --git a/src/Nav.svelte b/src/Nav.svelte
@@ -37,9 +37,6 @@
     <Help />
     <LinkButton url={ROUTES.notice} useRouter underline={false}>
       <ChatIcon width={21} />
-      <div
-        class="tw-absolute tw-w-4 tw-h-[var(--nav-height)] tw-border-b-2 tw-border-b-app-primary"
-      />
     </LinkButton>
   </div>
 </nav>
diff --git a/src/components/nav/Config.svelte b/src/components/nav/Config.svelte
@@ -12,9 +12,20 @@
   import * as lzString from 'lz-string'
 
   let open = false
+  let inputImportData = false
+  let importDataForm: HTMLFormElement
 
   function handleClick() {
     open = !open
+
+    if (open) {
+      closeImportDataForm()
+    }
+  }
+
+  function closeImportDataForm() {
+    inputImportData = false
+    importDataForm?.reset()
   }
 
   interface Data {
@@ -34,10 +45,11 @@
   }
 
   function importData() {
-    const data = prompt('가져올 데이터를 입력해주세요.')
+    const data = new FormData(importDataForm).get('importData')?.toString()
     if (!data) {
       return
     }
+
     let parsedData: Data | undefined = undefined
     try {
       parsedData = JSON.parse(lzString.decompressFromUTF16(data)) as Data
@@ -64,8 +76,23 @@
       parsedData.config && config.import(parsedData.config)
       parsedData.savedata && savedata.import(parsedData.savedata)
       parsedData.statistics && statistics.import(parsedData.statistics)
+
+      closeImportDataForm()
+      alert('데이터를 가져왔어요! 페이지를 새로고침 할게요.')
+      window.location.href = getAbsoluteUrl('/').href
+    }
+  }
+
+  function cleanData() {
+    const answer = confirm('정말로 데이터를 초기화할까요? 되돌릴 수 없어요.')
+    if (answer) {
+      config.reset()
+      savedata.reset()
+      statistics.reset()
+
+      alert('데이터를 초기화했어요! 페이지를 새로고침 할게요.')
+      window.location.href = getAbsoluteUrl('/').href
     }
-    window.location.href = getAbsoluteUrl('/').href
   }
 </script>
 
@@ -85,10 +112,37 @@
       미입력 상자를 작게 표시
     </Toggle>
     <div class="tw-w-full tw-inline-flex tw-justify-between">
-      <span>데이터 (Beta)</span>
+      <span>데이터</span>
       <div class="tw-inline-flex tw-justify-between tw-gap-2">
-        <Badge><ClickButton on:click={exportData}>내보내기</ClickButton></Badge>
-        <Badge><ClickButton on:click={importData}>가져오기</ClickButton></Badge>
+        {#if inputImportData}
+          <form
+            bind:this={importDataForm}
+            on:submit|preventDefault={importData}
+          >
+            <input
+              id="importData"
+              name="importData"
+              class="tw-w-28 tw-px-2 tw-text-app-text tw-bg-transparent tw-border tw-rounded-lg tw-border-app-text-secondary tw-shadow"
+              required
+            />
+            <button type="submit" class="btn">
+              <Badge>입력</Badge>
+            </button>
+            <button class="btn" on:click={closeImportDataForm}>
+              <Badge>취소</Badge>
+            </button>
+          </form>
+        {:else}
+          <Badge
+            ><ClickButton on:click={exportData}>내보내기</ClickButton></Badge
+          >
+          <Badge
+            ><ClickButton on:click={() => (inputImportData = true)}>
+              가져오기
+            </ClickButton></Badge
+          >
+          <Badge><ClickButton on:click={cleanData}>초기화</ClickButton></Badge>
+        {/if}
       </div>
     </div>
 

diff --git a/src/stores/localStore.ts b/src/stores/localStore.ts
@@ -64,11 +64,17 @@ export function persistentStore<T>(
     set(parsedData)
   }
 
+  const resetData = () => {
+    localStorage.setItem(key, encoder.encode(JSON.stringify(initial, null, 0)))
+    set(initial)
+  }
+
   return {
     subscribe,
     set: persistentSet,
     update: persistentUpdate,
     export: exportData,
     import: importData,
+    reset: resetData,
   }
 }
diff --git a/src/stores/wordle/savedata.ts b/src/stores/wordle/savedata.ts
@@ -22,6 +22,7 @@ export const savedata = {
   subscribe: store.subscribe,
   export: store.export,
   import: store.import,
+  reset: store.reset,
   save: save,
   load: load,
   loadPrevious: loadPrevious,

diff --git a/src/stores/wordle/statistics.ts b/src/stores/wordle/statistics.ts
@@ -7,6 +7,7 @@ import { get, type Readable } from 'svelte/store'
 interface StatisticsStore extends Readable<StatisticsStorage> {
   export: () => string | undefined
   import: (encodedString: string) => void
+  reset: () => void
   getStats(gameType: string): Statistics
   update(gameData: Wordle.GameData): void
 }
@@ -35,6 +36,7 @@ export const statistics: StatisticsStore = {
   subscribe: store.subscribe,
   export: store.export,
   import: store.import,
+  reset: store.reset,
   getStats: getStats,
   update: update,
 }