badges

main.js

@@ -9,11 +9,65 @@ let currentFont = "r";
 
 let timeout = "";
 
+let quirkBadges = {
+    "present-tense": {
+        "name": "Present tense",
+        "description": "The word is in the present tense.",
+        "color": "#00dd00",
+        "type": "Tense",
+        "bending": "ka'nya"
+    },
+    "past-tense": {
+        "name": "Past tense",
+        "description": "The word is in the past tense.",
+        "color": "#dd00dd",
+        "type": "Tense",
+        "bending": "kome"
+    },
+    "volitional-mood": {
+        "name": "Feeling mood",
+        "description": "A feeling,",
+        "color": "#dd00dd",
+        "type": "Mood",
+        "bending": "pash"
+    },
+    "imperative-mood": {
+        "name": "Imperative mood",
+        "description": "Commanding mood.",
+        "color": "#dd0000",
+        "type": "Mood",
+        "bending": "dash"
+    },
+    "shy-mood": {
+        "name": "Shy mood",
+        "description": "Shy mood.",
+        "color": "#dddd00",
+        "type": "Mood",
+        "bending": "bash"
+    },
+    "threat-mood": {
+        "name": "Threat mood",
+        "description": "Threat mood.",
+        "color": "#00dddd",
+        "type": "Mood",
+        "bending": "tash"
+    },
+    "negated": {
+        "name": "Negated",
+        "description": "The word is negated.",
+        "color": "#7777dd",
+        "type": "Negation",
+        "bending": "fa"
+    }
+}
+
 function init() {
     createWordList();
-    document.querySelector("#popup-container").addEventListener("click", () => {
-        document.querySelector("#popup-container").style.opacity = 0;
-        document.querySelector("#popup-container").style.pointerEvents = "none";
+    document.querySelector("#popup-container").addEventListener("click", (e) => {
+        if (e.target.id == "popup-container") {
+            document.querySelector("#popup-container").style.opacity = 0;
+            document.querySelector("#popup-container").style.pointerEvents = "none";
+        }
     });
     // above are commented out until wordlist is added~
     document.querySelector("#font-button").addEventListener("click", () => {fontButton();});
@@ -45,11 +99,28 @@ function showPopup(ogword, word, quirks = "") {
     }
     p.querySelector("#popup-type").innerText = words[word]["type"];
     p.querySelector("#popup-meaning").innerText = words[word]["meaning"];
-    let wq = "";
+    p.querySelector("#popup-quirks").innerHTML = "";
     if (quirks.trim() != "") {
-        wq = quirks.split(" ").join(", ");
+        p.querySelector("#popup-quirks-container").style.display = "block";
+        let qyuirks = quirks.split(" ");
+        qyuirks.forEach(quirk => {
+            let badge = document.createElement("div");
+            badge.classList.add("badge");
+            badge.style.backgroundColor = quirkBadges[quirk]["color"];
+            badge.innerText = quirkBadges[quirk]["name"];
+            badge.onclick = () => {
+                p.querySelector("h1").innerText = quirkBadges[quirk]["name"];
+                p.querySelector("#popup-meaning").innerText = quirkBadges[quirk]["description"];
+                p.querySelector("#popup-type").innerText = quirkBadges[quirk]["type"];
+                p.querySelector("#popup-quirks-container").style.display = "none";
+                p.querySelector("#popup-e").innerText = "bending: ";
+                p.querySelector("#popup-heo").innerText = quirkBadges[quirk]["bending"];
+            }
+            p.querySelector("#popup-quirks").appendChild(badge);
+        });
+    } else {
+        p.querySelector("#popup-quirks-container").style.display = "none";
     }
-    p.querySelector("#popup-quirks").innerText = wq;
     c.style.opacity = 1;
     c.style.pointerEvents = "all";
     } catch (e) {
@@ -65,22 +136,12 @@ function showSmolPopup(ogword, word, self, quirks) {
     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 = "";
-    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 (but we dont have the event)