Japanese flashcards!

content/nihongo/flashcards/script.js

@@ -0,0 +1,49 @@
+// Eryn Wells <eryn@erynwells.me>
+
+document.addEventListener("DOMContentLoaded", (event) => {
+    const furiganaRegex = /(「(.*?)『(.*?)』」)|.*/g;
+
+    let parseFlashcardString = str => {
+        let innerHTML = "";
+
+        for (let match of str.matchAll(furiganaRegex)) {
+            if (match[2] && match[3]) {
+                const mainText = match[2];
+                const furiganaText = match[3];
+                console.debug(`${mainText} is ${mainText.length} characters long`);
+                innerHTML += `<ruby>${mainText}<rp>(</rp><rt>${furiganaText}</rt><rp>)</rp></ruby>`;
+            } else {
+                innerHTML += match[0];
+            }
+        }
+
+        return innerHTML;
+    };
+
+    let cardsContainer = document.querySelector("section.flashcards > ul");
+    if (!cardsContainer) {
+        console.error("Can't find flashcards <ul> element");
+        return;
+    }
+
+    for (let card of flashcards.cards) {
+        let frontElement = `<div class="front" lang="${card.front.lang}">${parseFlashcardString(card.front.value)}</div>`;
+        let backElement = `<div class="back" lang="${card.back.lang}">${parseFlashcardString(card.back.value)}</div>`;
+
+        let cardElement = document.createElement("div");
+        cardElement.classList.add("card")
+        cardElement.innerHTML = frontElement + backElement;
+
+        cardElement.addEventListener("click", (event) => {
+            let element = event.target;
+            console.log("Flipping", element);
+            element.classList.toggle("flipped");
+        }, true);
+
+        let cardContainerElement = document.createElement("li");
+        cardContainerElement.classList.add("card-container");
+        cardContainerElement.appendChild(cardElement);
+
+        cardsContainer.appendChild(cardContainerElement);
+    }
+});