update base, css, and add js (currently unused outside of base file)

main.js

@@ -0,0 +1,73 @@
+//since this _entire thing_ will be generated,
+//you could "theoretically" (you definitive can)
+//just sorta. skip the whole "scan all words" bit,
+//which is why that's in a separate function
+
+let words = {}
+
+function init() {
+    createWordList();
+    injectWords();
+    document.querySelector("#popup-container").addEventListener("click", () => {
+        document.querySelector("#popup-container").style.opacity = 0;
+        document.querySelector("#popup-container").style.pointerEvents = "none";
+    })
+}
+
+function showPopup(word) {
+    let p = document.querySelector("#popup");
+    let c = document.querySelector("#popup-container")
+    p.querySelector("h1").innerText = word;
+    p.querySelector("#popup-heo").innerText = words[word]["heonian"];
+    p.querySelector("#popup-type").innerText = words[word]["type"];
+    p.querySelector("#popup-meaning").innerText = words[word]["meaning"];
+    c.style.opacity = 1;
+    c.style.pointerEvents = "all";
+}
+
+function createWordList() { //sometimes i really dislike javascript..
+    let t = document.querySelector("tbody");
+    t.querySelectorAll("tr").forEach(element => {
+        if (element.querySelector("td")) {
+            let e = element.querySelectorAll("td");
+            let n = e[1].innerText;
+            words[n] = {};
+            words[n]["heonian"] = e[0].innerText;
+            words[n]["romanization"] = e[1].innerText;
+            words[n]["type"] = e[2].innerText;
+            words[n]["meaning"] = e[3].innerText;
+        }
+    });
+}
+
+function injectWords() {
+    Object.values(words).forEach(word => {
+        document.querySelectorAll(".convo p").forEach(convo => {
+            if (convo.innerText.includes(word["romanization"])) {
+                let m = convo.innerHTML.split(word["romanization"]);
+                let newhtml = document.createElement("p");
+                let c = m.length*2-1;
+                for (let x = 0; x < c; x++) {
+                    if (x % 2 == 0) {
+                        newhtml.innerHTML += m[x/2];
+                    } else {
+                        var e = document.createElement("span");
+                        e.innerText = word["romanization"];
+                        e.classList.add("clickable");
+                        newhtml.appendChild(e)
+                    }
+                }
+                convo.innerHTML = newhtml.innerHTML;
+                convo.querySelectorAll(".clickable").forEach(element => {
+                    element.addEventListener('click', function(e) {
+                        showPopup(element.innerText);
+                    }, false);
+                });
+            }
+        });
+    });
+}
+
+window.onload = () => {
+    init();
+}