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();
    // injectWords();
    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) {
    clearHover();
    //same shit as in smolpopup
    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-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(ogword, word, 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 = "";
    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 (but we dont have the event)
    let rect = document.body.getBoundingClientRect();
    let x = rect.left + window.event.clientX;
    let y = rect.top + window.event.clientY;
    p.style.left = x - 100 + "px";
    p.style.top = y + 25 + "px";
}

function checkHover(ogword, word, quirks = "") {
    if (timeout != "") {
        clearTimeout(timeout);
    }
    timeout = setTimeout(() => {
        showSmolPopup(ogword, word, quirks);
    }, 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 = e[1].innerText.replace(".", "");
            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 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);
                    element.addEventListener('mouseover', function(e) {
                        checkHover(element.innerText, e);
                    }
                    , false);
                    element.addEventListener('mouseout', function(e) {
                        clearHover();
                    }
                    , false);
                });
            }
        });
    });
}

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();
}