Flesh out volume data

src/lib/components/Reader/Reader.svelte

@@ -62,7 +62,13 @@
       if (showSecondPage() && page + 1 === pages.length && newPage > page) {
         return;
       }
-      updateProgress(volume.mokuroData.volume_uuid, clamp(newPage, 1, pages?.length));
+      const pageClamped = clamp(newPage, 1, pages?.length);
+      updateProgress(
+        volume.mokuroData.volume_uuid,
+        pageClamped,
+        getCharCount(pages, pageClamped) || 0,
+        pageClamped === pages.length
+      );
       zoomDefault();
     }
   }

src/lib/components/Settings/Settings.svelte

@@ -8,6 +8,7 @@
   import ReaderSettings from './Reader/ReaderSettings.svelte';
   import Profiles from './Profiles/Profiles.svelte';
   import CatalogSettings from './CatalogSettings.svelte';
+  import Stats from './Stats.svelte';
 
   let transitionParams = {
     x: 320,
@@ -47,6 +48,7 @@
       <AnkiConnectSettings />
       <Profiles />
       <CatalogSettings />
+      <Stats />
     </Accordion>
     <div class="flex flex-col gap-2">
       <Button outline on:click={onReset}>Reset</Button>

src/lib/components/Settings/Stats.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { volumes } from '$lib/settings';
+  import { AccordionItem, P } from 'flowbite-svelte';
+
+  $: completed = Object.values($volumes).reduce((total: number, { completed }) => {
+    if (completed) {
+      total++;
+    }
+    return total;
+  }, 0);
+
+  $: pagesRead = Object.values($volumes).reduce((total: number, { progress }) => {
+    total += progress;
+    return total;
+  }, 0);
+
+  $: charsRead = Object.values($volumes).reduce((total: number, { chars }) => {
+    total += chars;
+    return total;
+  }, 0);
+</script>
+
+<AccordionItem>
+  <span slot="header">Stats</span>
+  <div>
+    <p>Completed volumes: {completed}</p>
+    <p>Pages read: {pagesRead}</p>
+    <p>Characters read: {charsRead}</p>
+  </div>
+</AccordionItem>

src/lib/components/VolumeItem.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
   import { page } from '$app/stores';
   import { progress } from '$lib/settings';
   import type { Volume } from '$lib/types';

src/lib/settings/index.ts

@@ -1,2 +1,2 @@
-export * from './progress'
+export * from './volume-data'
 export * from './settings'

src/lib/settings/progress.ts

@@ -1,24 +0,0 @@
-import { browser } from '$app/environment';
-import { writable } from 'svelte/store';
-
-type Progress = Record<string, number> | undefined;
-
-const stored = browser ? window.localStorage.getItem('progress') : undefined;
-const initial: Progress = stored && browser ? JSON.parse(stored) : undefined;
-
-export const progress = writable<Progress>(initial);
-
-export function updateProgress(volume: string, value: number) {
-  progress.update((prev) => {
-    return {
-      ...prev,
-      [volume]: value
-    };
-  });
-}
-
-progress.subscribe((progress) => {
-  if (browser) {
-    window.localStorage.setItem('progress', progress ? JSON.stringify(progress) : '');
-  }
-});

src/lib/settings/volume-data.ts

@@ -0,0 +1,77 @@
+import { browser } from '$app/environment';
+import { derived, get, writable } from 'svelte/store';
+import { settings } from './settings';
+
+type VolumeSettings = {
+  rightToLeft: boolean;
+  singlePageView: boolean;
+  hasCover: boolean;
+}
+
+type Progress = Record<string, number> | undefined;
+
+type VolumeData = {
+  progress: number;
+  chars: number;
+  settings: VolumeSettings;
+  completed: boolean;
+}
+
+type Volumes = Record<string, VolumeData>;
+
+
+const stored = browser ? window.localStorage.getItem('volumes') : undefined;
+const initial: Volumes = stored && browser ? JSON.parse(stored) : undefined;
+
+export const volumes = writable<Volumes>(initial);
+
+export function initializeVolume(volume: string) {
+  const { hasCover, rightToLeft, singlePageView } = get(settings)
+  volumes.update((prev) => {
+    return {
+      ...prev,
+      [volume]: {
+        chars: 0,
+        completed: false,
+        progress: 0,
+        settings: {
+          hasCover,
+          rightToLeft,
+          singlePageView
+        }
+      }
+    };
+  });
+}
+
+export function updateProgress(volume: string, progress: number, chars: number, completed = false) {
+  volumes.update((prev) => {
+    return {
+      ...prev,
+      [volume]: {
+        ...prev?.[volume],
+        progress,
+        chars,
+        completed
+      }
+    };
+  });
+}
+
+volumes.subscribe((volumes) => {
+  if (browser) {
+    window.localStorage.setItem('volumes', volumes ? JSON.stringify(volumes) : '');
+  }
+});
+
+export const progress = derived(volumes, ($volumes) => {
+  const progress: Progress = {}
+
+  if ($volumes) {
+    Object.keys($volumes).forEach((key) => {
+      progress[key] = $volumes[key].progress
+    });
+  }
+
+  return progress
+})

src/routes/[manga]/[volume]/+page.svelte

@@ -1,5 +1,16 @@
 <script lang="ts">
+  import { page } from '$app/stores';
   import Reader from '$lib/components/Reader/Reader.svelte';
+  import { initializeVolume, volumes } from '$lib/settings';
+  import { onMount } from 'svelte';
+
+  onMount(() => {
+    const volumeId = $page.params.volume;
+
+    if (!$volumes?.[volumeId]) {
+      initializeVolume(volumeId);
+    }
+  });
 </script>
 
 <Reader />