heonian-conversation/main.js

//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 = {}

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"
    },
    "unknown-tag": {
        "name": "Unknown tag",
        "color": "#393939",
    }
}

function init() {
    createWordList();
    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();});
}

function cleanWord(word) {
    //only a-z, lowercase, stripped
    return word.replace(/[^a-zA-Z]/g, "").toLowerCase();
}

function showPopup(ogword, word, quirks = "") {
    try {
    clearHover();
    //same shit as in smolpopup
    //todo: make all of this less sphagetti LOL
    let p = document.querySelector("#popup");
    let c = document.querySelector("#popup-container");
    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-e").innerText = "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-e").innerText = "romanization: ";
    }
    p.querySelector("#popup-type").innerText = words[word]["type"];
    p.querySelector("#popup-meaning").innerText = words[word]["meaning"];
    p.querySelector("#popup-quirks").innerHTML = "";
    if (quirks.trim() != "") {
        p.querySelector("#popup-quirks-container").style.display = "block";
        let qyuirks = quirks.split(" ");
        qyuirks.forEach(quirk => {
            let badge = document.createElement("div");
            badge.classList.add("badge");
            try {
                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"];
                }
            } catch (e) {
                badge.style.backgroundColor = quirkBadges["unknown-tag"]["color"];
                badge.innerText = quirkBadges["unknown-tag"]["name"];                    
            }
            p.querySelector("#popup-quirks").appendChild(badge);
        });
    } else {
        p.querySelector("#popup-quirks-container").style.display = "none";
    }
    c.style.opacity = 1;
    c.style.pointerEvents = "all";
    } catch (e) {
        console.log(e);
        //eya
        //failure is expected,
        //but mightaswell print less RED ERRORs to the console
    }
}

function showSmolPopup(ogword, word, self, quirks) {
    let p = document.querySelector("#smol-popup");
    word = cleanWord(word);
    if (currentFont == "r") {
        p.querySelector("h1").innerText = words[word]["romanizationProper"];
        p.querySelector("h1").style.fontFamily = "var(--font-normal)";
    } else {
        p.querySelector("h1").innerText = words[word]["heonian"];
        p.querySelector("h1").style.fontFamily = "var(--font-heonian)";
    }
    p.querySelector("#smol-meaning").innerText = words[word]["meaning"];
    p.style.opacity = 1;
    p.style.pointerEvents = "all";
    // set position to cursor position (but we dont have the event)
    let rect = self.getBoundingClientRect();
    let x = rect.left+rect.width/2;
    let y = rect.top;
    p.style.left = x - 100 + "px";
    p.style.top = y + 25 + "px";
}

function checkHover(ogword, word, self, quirks = "") {
    if (timeout != "") {
        clearTimeout(timeout);
    }
    timeout = setTimeout(() => {
        try {
            showSmolPopup(ogword, word, self, quirks);
        } catch (e) {  
            console.log(e);
            //i fucking love error handling
        }
    }, 450);
}

function clearHover() {
    if (timeout != "") {
        clearTimeout(timeout);
    }
    let p = document.querySelector("#smol-popup");
    p.style.opacity = 0;
    p.style.pointerEvents = "none";
}

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 = cleanWord(e[1].innerText);
            words[n] = {};
            words[n]["heonian"] = e[0].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;
        }
    });
}

function fontButton() {
    if (currentFont == "r") {
        document.querySelector("#style-heonian").disabled = false;
        document.querySelector("#style-roman").disabled = true;
        currentFont = "h";
    } else {
        document.querySelector("#style-heonian").disabled = true;
        document.querySelector("#style-roman").disabled = false;
        currentFont = "r";
    }
}

window.onload = () => {
    init();
}