diff --git a/css/index.scss b/css/index.scss index 2459d2b..1ba373d 100644 --- a/css/index.scss +++ b/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; } \ No newline at end of file diff --git a/routes/story.tsx b/routes/story.tsx index db25be4..c23a67c 100644 --- a/routes/story.tsx +++ b/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 ; @@ -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.chapters[Number(params.get("chapter") as string)] @@ -76,7 +75,7 @@ export default async (params: URLSearchParams) => { else { return ( - + @@ -99,9 +98,11 @@ export default async (params: URLSearchParams) => { - - Favorite - + + + Favorite + + ); diff --git a/scripts/Index.ts b/scripts/Index.ts index c8c83ed..17c5274 100644 --- a/scripts/Index.ts +++ b/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"); diff --git a/scripts/FavoriteStory.ts b/scripts/Story.ts similarity index 68% rename from scripts/FavoriteStory.ts rename to scripts/Story.ts index a9adf39..128143d 100644 --- a/scripts/FavoriteStory.ts +++ b/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"; diff --git a/scripts/StoryProgressSaving.ts b/scripts/StoryProgressSaving.ts new file mode 100644 index 0000000..67f1a56 --- /dev/null +++ b/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, + ); + }; +};