add (client-side) story position syncing

directly links to chapter on Saved Stories page, otherwise there's a button in the Details tab to return to your last viewed chapter

css/index.scss

@@ -147,6 +147,7 @@ img {
 
 .favorite-story-button {
     margin-top: 0.5em;
+    margin-right: 0.5em;
 }
 
 .saved-container {
@@ -180,4 +181,9 @@ img {
         padding: 0.2em;
         margin-bottom: 0.5em;
     }
+}
+
+.detail-buttons {
+    display: flex;
+    flex-direction: row;
 }

routes/story.tsx

@@ -5,7 +5,8 @@ import watt from "../wattpad.ts";
 import FourOhFour from "./404.tsx";
 
 import Script from "../components/Script.tsx";
-import FavoriteStoryButtonScript from "../scripts/FavoriteStory.ts";
+import StoryButtonScript from "../scripts/Story.ts";
+import StoryProgressSavingScript from "../scripts/StoryProgressSaving.ts";
 
 export default async (params: URLSearchParams) => {
     if (!params.get("id")) return <FourOhFour />;
@@ -15,11 +16,9 @@ export default async (params: URLSearchParams) => {
     // chapters
     if (params.get("chapter")) {
         await story.chapters[Number(params.get("chapter") as string)].init();
-
-        console.log(story.chapters.length);
-        console.log(Number(params.get("chapter")));
         return (
             <Story story={story} stylepath="css/index.scss">
+                <Script function={StoryProgressSavingScript} />
                 <div style="margin-left: 1em; margin-right: 1em;">
                     {
                         story.chapters[Number(params.get("chapter") as string)]
@@ -76,7 +75,7 @@ export default async (params: URLSearchParams) => {
     else {
         return (
             <Story story={story} stylepath="css/index.scss">
-                <Script function={FavoriteStoryButtonScript} />
+                <Script function={StoryButtonScript} />
                 <div style="display:flex;align-items:center;justify-content:center;flex-direction:column;">
                     <div class="story">
                         <img id="storycover" src={story.storyJSON.cover} />
@@ -99,9 +98,11 @@ export default async (params: URLSearchParams) => {
                             </div>
                         </div>
                     </div>
-                    <button id="favorite" class="favorite-story-button">
-                        Favorite
-                    </button>
+                    <div id="detail-buttons" class="detail-buttons">
+                        <button id="favorite" class="favorite-story-button">
+                            Favorite
+                        </button>
+                    </div>
                 </div>
             </Story>
         );

scripts/Index.ts

@@ -34,7 +34,10 @@ export default () => {
             const searchEle = document.createElement("a");
             searchEle.className = "story";
             /* TODO: perhaps save story progress as well? */
-            searchEle.href = "/story?id=" + story.id;
+            searchEle.href = "/story?id=" + story.id +
+                (localStorage.getItem(`${story.id}_progress`)
+                    ? `&chapter=${localStorage.getItem(`${story.id}_progress`)}`
+                    : "");
             const coverEle = document.createElement("img");
             coverEle.src = story.coverURL;
             const div = document.createElement("div");

scripts/Story.ts

@@ -7,6 +7,28 @@ interface SavedStory {
 
 export default () => {
     window.onload = () => {
+        // Sync to position button
+        const position = localStorage.getItem(
+            (new URL(document.URL)).searchParams.get(
+                "id",
+            ) as string + "_progress",
+        );
+
+        if (position) {
+            const buttonsList = document.getElementById("detail-buttons");
+
+            const buttonEle = document.createElement("button");
+            buttonEle.className = "favorite-story-button";
+            buttonEle.textContent = "Sync to story position";
+            buttonEle.onclick = () => {
+                const currURL = new URL(document.location.href);
+                currURL.searchParams.set("chapter", position);
+                window.location.href = currURL.toString();
+            };
+            buttonsList?.appendChild(buttonEle);
+        }
+
+        // Favorite button
         const button = document.getElementById("favorite");
 
         if (!button) throw "how did your button not init what";

scripts/StoryProgressSaving.ts

@@ -0,0 +1,9 @@
+export default () => {
+    window.onload = () => {
+        const params = new URL(document.location.href).searchParams;
+        localStorage.setItem(
+            `${params.get("id")}_progress`,
+            params.get("chapter") as string,
+        );
+    };
+};