From 22b0df2fe6fa77f0f17b944d36032e313e7edce2 Mon Sep 17 00:00:00 2001
From: Ryze <50497128+ryze312@users.noreply.github.com>
Date: Thu, 2 Nov 2023 05:03:33 +0300
Subject: [PATCH] Rewrite in TypeScript

---
 .gitignore      |  2 ++
 js/memories.js  | 39 ---------------------------------------
 memories.html   |  2 +-
 src/memories.ts | 31 +++++++++++++++++++++++++++++++
 src/types.ts    | 38 ++++++++++++++++++++++++++++++++++++++
 tsconfig.json   | 18 ++++++++++++++++++
 6 files changed, 90 insertions(+), 40 deletions(-)
 create mode 100644 .gitignore
 delete mode 100644 js/memories.js
 create mode 100644 src/memories.ts
 create mode 100644 src/types.ts
 create mode 100644 tsconfig.json

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..3d9ee50
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+# Don't track JS build files
+*.js
diff --git a/js/memories.js b/js/memories.js
deleted file mode 100644
index ef5992e..0000000
--- a/js/memories.js
+++ /dev/null
@@ -1,39 +0,0 @@
-// I don't know if this will work, but we can try..... -fs64
-// https://codingartistweb.com/2022/06/testimonial-slider-using-javascript/ heavily modified from this -64
-console.info("Loading memories.js...");
-
-
-// browser js is so bootleg
-let memories; // contain the memories 
-let cm = 0; // (C)urrent (m)emory
-// Get our memeoriesBox and buttons from HTML elements on the HTML page
-let memoriesBox = document.getElementById("memoriesBox");
-let nxtBtn = document.getElementById("next");
-let bckBtn = document.getElementById("prev");
-let displayMemory = () => {
-    memoriesBox.innerHTML = `
-    <h2>${memories[cm].name}</h2>
-    <p>${memories[cm].memory}</p>
-    `;
-};
-(async() => {
-    await fetch("./conf/memories.json").then(r=>r.json()).then(d=>memories=d).catch(e=>{
-        // error code when fetching here
-        console.log(e)
-    });
-
-    let l = memories.length; // Total file length
-    console.info(`Found ${l} memory keys!`);
-
-    nxtBtn.addEventListener("click", () => {
-        cm = (l + cm + 1) % l; 
-        displayMemory();
-    }); // Switch to the next memory
-    bckBtn.addEventListener("click", () => {
-        cm = (l + cm - 1) % l; 
-        displayMemory();
-    }); // Switch back to the previous memory, nopony tell anyone else that we copied this :^) -64
-
-    displayMemory(); // This will executed as soon as all the above has. -TCG
-})();
-console.info("Done!");
diff --git a/memories.html b/memories.html
index 4dcd6d7..a7928a1 100644
--- a/memories.html
+++ b/memories.html
@@ -24,7 +24,7 @@
             <div class="memoriesBox" id="memoriesBox"></div>
                 <button id="prev">&lt;</button>
                 <button id="next">&gt;</button>
-            <script src="/js/memories.js"></script>
+            <script src="/js/memories.js" type="module"></script>
             </div>  
         </div>
     </div>
diff --git a/src/memories.ts b/src/memories.ts
new file mode 100644
index 0000000..0212ada
--- /dev/null
+++ b/src/memories.ts
@@ -0,0 +1,31 @@
+import { MemoryPage, MemoryInfo, } from "./types.js";
+
+{
+    async function getMemories(): Promise<MemoryInfo[]> {
+        const response = await fetch("./conf/memories.json");
+        const memories = await response.json() as MemoryInfo[];
+
+        return memories;
+    }
+
+    function setupButtons(memoryPage: MemoryPage) {
+        const nextButton = document.getElementById("next") as HTMLButtonElement;
+        const prevButton = document.getElementById("prev") as HTMLButtonElement;
+
+        nextButton.addEventListener("click", () => memoryPage.goToNextMemory())
+        prevButton.addEventListener("click", () => memoryPage.goToPreviousMemory());
+    }
+
+
+    async function loadPage() {
+        const memories = await getMemories();
+        const memoryBox = document.getElementById("memoriesBox") as HTMLDivElement;
+        const memoryPage = new MemoryPage(memories, memoryBox);
+
+        setupButtons(memoryPage);
+        memoryPage.renderMemorybox();
+    }
+
+    loadPage();
+
+}
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..8f46397
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,38 @@
+export type MemoryBox = HTMLDivElement;
+
+export interface MemoryInfo {
+    name: string
+    memory: string
+}
+
+export class MemoryPage {
+    readonly memories: MemoryInfo[];
+    readonly memoryBox: MemoryBox;
+    protected currentMemoryIndex: number;
+
+    constructor(memories: MemoryInfo[], memoryBox: MemoryBox) {
+        this.memories = memories;
+        this.memoryBox = memoryBox;
+        this.currentMemoryIndex = 0;
+    }
+
+    goToNextMemory() {
+        this.currentMemoryIndex = (this.currentMemoryIndex + 1) % this.memories.length;
+        this.renderMemorybox();
+    }
+
+    goToPreviousMemory() {
+        this.currentMemoryIndex = (this.currentMemoryIndex - 1) % this.memories.length;
+        this.renderMemorybox();
+    }
+
+    renderMemorybox() {
+        const memoryInfo = this.memories[this.currentMemoryIndex];
+        if (memoryInfo) {
+            this.memoryBox.innerHTML = `
+            <h2>${memoryInfo.name}</h2>
+            <p>${memoryInfo.memory}</p>
+            `;
+        }
+    }
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..18e4c3c
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "target": "ES2022",
+        "strict": true,
+        "exactOptionalPropertyTypes": true,
+        "noImplicitReturns": true,
+        "noImplicitOverride": true,
+        "noImplicitAny": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true,
+        "noUncheckedIndexedAccess": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "removeComments": true,
+        "outDir": "js",
+    },
+    "include": ["src/**/*"],
+}