popup halfway (no error handling, fails to figure out where cursor is)

html/pop_up.html

@@ -3,7 +3,8 @@
                 <h1>um</h1>
                 <div>
                     heonian: <span id="popup-heo"></span><br>
-                    type: <span id="popup-type"></span>
+                    type: <span id="popup-type"></span><br>
+                    quirks: <span id="popup-quirks"></span>
                 </div>
                 <p id="popup-meaning"></p>
             </div>
@@ -11,8 +12,9 @@
         <div id="smol-popup" style="opacity: 0; pointer-events: none;">
             <h1>um</h1>
             <div>
-                heonian: <span id="smol-heo"></span><br>
+                <span id="smol-e">heonian: </span><span id="smol-heo"></span><br>
-                type: <span id="smol-type"></span>
+                type: <span id="smol-type"></span><br>
+                quirks: <span id="smol-quirks"></span>
             </div>
             <p id="smol-meaning"></p>
         </div>

main.js

@@ -20,40 +20,78 @@ function init() {
     document.querySelector("#font-button").addEventListener("click", () => {fontButton();});
 }
 
-function showPopup(word) {
+function cleanWord(word) {
+    //only a-z, lowercase, stripped
+    return word.replace(/[^a-zA-Z]/g, "").toLowerCase();
+}
+
+function showPopup(ogword, word, quirks) {
     clearHover();
+    //same shit as in smolpopup
     let p = document.querySelector("#popup");
-    let c = document.querySelector("#popup-container")
+    let c = document.querySelector("#popup-container");
-    p.querySelector("h1").innerText = word;
+    word = cleanWord(word);
+    if (currentFont == "r") {
+        p.querySelector("h1").innerText = words[word]["romanizationProper"];
         p.querySelector("#popup-heo").innerText = words[word]["heonian"];
+        p.querySelector("h1").style.fontFamily = "var(--font-normal)";
+        p.querySelector("#popup-heo").style.fontFamily = "var(--font-heonian)";
+    } else {
+        p.querySelector("h1").innerText = words[word]["heonian"];
+        p.querySelector("#popup-heo").innerText = words[word]["romanizationProper"];
+        p.querySelector("h1").style.fontFamily = "var(--font-heonian)";
+        p.querySelector("#popup-heo").style.fontFamily = "var(--font-normal)";
+    }
     p.querySelector("#popup-type").innerText = words[word]["type"];
     p.querySelector("#popup-meaning").innerText = words[word]["meaning"];
+    let wq = "";
+    //todo: make all of this less sphagetti LOL
+    if (quirks.trim() != "") {
+        wq = quirks.split(" ").join(", ");
+    }
+    p.querySelector("#popup-quirks").innerText = wq;
     c.style.opacity = 1;
     c.style.pointerEvents = "all";
 }
 
-function showSmolPopup(word, event) {
+function showSmolPopup(ogword, word, quirks) {
     let p = document.querySelector("#smol-popup");
-    p.querySelector("h1").innerText = word;
+    word = cleanWord(word);
+    if (currentFont == "r") {
+        p.querySelector("h1").innerText = words[word]["romanizationProper"];
         p.querySelector("#smol-heo").innerText = words[word]["heonian"];
+        p.querySelector("h1").style.fontFamily = "var(--font-normal)";
+        p.querySelector("#smol-e").innerText = "heonian: ";
+    } else {
+        p.querySelector("h1").innerText = words[word]["heonian"];
+        p.querySelector("#smol-heo").innerText = words[word]["romanizationProper"];
+        p.querySelector("h1").style.fontFamily = "var(--font-heonian)";
+        p.querySelector("#smol-e").innerText = "romanization: ";
+    }
     p.querySelector("#smol-type").innerText = words[word]["type"];
     p.querySelector("#smol-meaning").innerText = words[word]["meaning"];
+    let wq = "";
+    console.log(quirks);
+    if (quirks.trim() != "") {
+        wq = quirks.split(" ").join(", ");
+    }
+    p.querySelector("#smol-quirks").innerText = wq;
     p.style.opacity = 1;
     p.style.pointerEvents = "all";
-    // set position to cursor position
+    // set position to cursor position (but we dont have the event)
     let rect = document.body.getBoundingClientRect();
-    let x = event.clientX - rect.left;
+    let x = rect.left + window.event.clientX;
-    let y = event.clientY - rect.top;
+    let y = rect.top + window.event.clientY;
     p.style.left = x - 100 + "px";
     p.style.top = y + 25 + "px";
 }
 
-function checkHover(word, event) {
+function checkHover(ogword, word, quirks = "") {
     if (timeout != "") {
         clearTimeout(timeout);
     }
     timeout = setTimeout(() => {
-        showSmolPopup(word, event);
+        showSmolPopup(ogword, word, quirks);
     }, 450);
 }
 
@@ -71,10 +109,11 @@ function createWordList() { //sometimes i really dislike javascript..
     t.querySelectorAll("tr").forEach(element => {
         if (element.querySelector("td")) {
             let e = element.querySelectorAll("td");
-            let n = e[1].innerText;
+            let n = e[1].innerText.replace(".", "");
             words[n] = {};
             words[n]["heonian"] = e[0].innerText;
-            words[n]["romanization"] = e[1].innerText;
+            words[n]["romanization"] = e[1].innerText.replace(". ", "");
+            words[n]["romanizationProper"] = e[1].innerText;
             words[n]["type"] = e[2].innerText;
             words[n]["meaning"] = e[3].innerText;
         }

test.html

@@ -4331,7 +4331,8 @@ fayu
                 <h1>um</h1>
                 <div>
                     heonian: <span id="popup-heo"></span><br>
-                    type: <span id="popup-type"></span>
+                    type: <span id="popup-type"></span><br>
+                    quirks: <span id="popup-quirks"></span>
                 </div>
                 <p id="popup-meaning"></p>
             </div>
@@ -4339,8 +4340,9 @@ fayu
         <div id="smol-popup" style="opacity: 0; pointer-events: none;">
             <h1>um</h1>
             <div>
-                heonian: <span id="smol-heo"></span><br>
+                <span id="smol-e">heonian: </span><span id="smol-heo"></span><br>
-                type: <span id="smol-type"></span>
+                type: <span id="smol-type"></span><br>
+                quirks: <span id="smol-quirks"></span>
             </div>
             <p id="smol-meaning"></p>
         </div>