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 = "";

function init() {
    createWordList();
    document.querySelector("#popup-container").addEventListener("click", () => {
        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"];
    let wq = "";
    if (quirks.trim() != "") {
        wq = quirks.split(" ").join(", ");
    }
    p.querySelector("#popup-quirks").innerText = wq;
    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("#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)
    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();
}