Merge pull request #2 from ryze312/typescript_rewrite

Rewrite memories in TypeScript

.gitignore

@@ -0,0 +1,2 @@
+# Don't track JS build files
+*.js

js/memories.js

@@ -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!");

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>

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();
+
+}

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>
+            `;
+        }
+    }
+}

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/**/*"],
+}