From 9c950c626b00ace97fc095a240e5956cb5b2fdb9 Mon Sep 17 00:00:00 2001 From: remi Date: Wed, 4 May 2022 20:12:25 +0200 Subject: [PATCH] update base, css, and add js (currently unused outside of base file) --- base.html | 186 ++++++++++++++++++++++++++++++++++++- main.js | 73 +++++++++++++++ text_analysis.css | 231 +++++++++++++++++++++++++++------------------- 3 files changed, 394 insertions(+), 96 deletions(-) create mode 100644 main.js diff --git a/base.html b/base.html index 35d9999..ac6b6e2 100644 --- a/base.html +++ b/base.html @@ -4,8 +4,164 @@ avg convo - + @@ -18,7 +174,7 @@ ariri 2022/05/04 -

this is some text +

nyan'pash, re chu yesh :3

@@ -34,13 +190,16 @@ 2022/05/04

- ariri is really cute actually + ee ee n_n

words used:

+ @@ -61,10 +220,31 @@ + + + + + +
verb to like (but twice, for emphasis)
swagreallythis is a testyolo swag
+ + +



+



+ + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..4d38611 --- /dev/null +++ b/main.js @@ -0,0 +1,73 @@ +//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 = {} + +function init() { + createWordList(); + injectWords(); + document.querySelector("#popup-container").addEventListener("click", () => { + document.querySelector("#popup-container").style.opacity = 0; + document.querySelector("#popup-container").style.pointerEvents = "none"; + }) +} + +function showPopup(word) { + let p = document.querySelector("#popup"); + let c = document.querySelector("#popup-container") + p.querySelector("h1").innerText = word; + p.querySelector("#popup-heo").innerText = words[word]["heonian"]; + p.querySelector("#popup-type").innerText = words[word]["type"]; + p.querySelector("#popup-meaning").innerText = words[word]["meaning"]; + c.style.opacity = 1; + c.style.pointerEvents = "all"; +} + +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; + words[n] = {}; + words[n]["heonian"] = e[0].innerText; + words[n]["romanization"] = 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); + }); + } + }); + }); +} + +window.onload = () => { + init(); +} \ No newline at end of file diff --git a/text_analysis.css b/text_analysis.css index 8de459a..6f87002 100644 --- a/text_analysis.css +++ b/text_analysis.css @@ -1,113 +1,158 @@ :root { - --notes-color: rgb(255, 235, 181); - --spacer-color: rgba(0,0,0,0.4); - --spacer-color-2: rgba(0,0,0,0.2); - --left-color: rgb(167, 179, 167); - --right-color: rgb(97, 206, 97); - } + --notes-color: rgb(255, 235, 181); + --spacer-color: rgba(0, 0, 0, 0.4); + --spacer-color-2: rgba(0, 0, 0, 0.2); + --left-color: rgb(167, 179, 167); + --right-color: rgb(97, 206, 97); +} - @font-face { - font-family: "heonian"; - src: url('https://cronut.cafe/~lustlion/myrheon/HeonianAlone.otf'); - } +@font-face { + font-family: "heonian"; + src: url('https://cronut.cafe/~lustlion/myrheon/HeonianAlone.otf'); +} - body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif - } +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif +} - main { - max-width: 600px; - margin: auto; - } +main { + max-width: 600px; + margin: auto; +} - .convo-container { - display: flex; - justify-content: space-between; - align-items: center; - margin: 8px; - } +.convo-container { + display: flex; + justify-content: space-between; + align-items: center; + margin: 8px; +} - .right { - flex-direction: row-reverse; - } +.right { + flex-direction: row-reverse; +} - .convo { - width: 400px; - border: 1px solid var(--left-color); - border-radius: 8px; - padding: 8px; - } +.convo { + width: 400px; + border: 1px solid var(--left-color); + border-radius: 8px; + padding: 8px; +} - .right .convo { - border: 1px solid var(--right-color); - } +.right .convo { + border: 1px solid var(--right-color); +} - .convo p { - margin: 0; - margin-top: 8px; - } +.convo p { + margin: 0; + margin-top: 8px; +} - .convo-header { - display: flex; - justify-content: space-between; - align-items: center; - font-size: 1.5rem; - } +.convo-header { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 1.5rem; +} - .convo-header img { - border-radius: 42069px; - width: 48px; - margin-right: 8px; - } +.convo-header img { + border-radius: 42069px; + width: 48px; + margin-right: 8px; +} - .convo-date { - font-size: 0.75rem; - color: var(--spacer-color); - flex-grow: 1; - text-align: right; - } +.convo-date { + font-size: 0.75rem; + color: var(--spacer-color); + flex-grow: 1; + text-align: right; +} - .notes { - width: 300px; - margin: 8px; - border-top: 1px solid var(--notes-color); - border-bottom: 1px solid var(--notes-color); - text-align: center; - } +.notes { + width: 300px; + margin: 8px; + border-top: 1px solid var(--notes-color); + border-bottom: 1px solid var(--notes-color); + text-align: center; +} - .spacer { - width: calc(100% - 16px); - height: 1px; - margin-top: 8px; margin-bottom: 8px; - margin: auto; - background-color: var(--spacer-color); - } +.spacer { + width: calc(100% - 16px); + height: 1px; + margin-top: 8px; + margin-bottom: 8px; + margin: auto; + background-color: var(--spacer-color); +} - .words { - text-align: center; - } +.words { + text-align: center; +} - .words table { - margin: auto; - border-collapse: collapse; - text-align: left; - } +.words table { + margin: auto; + border-collapse: collapse; + text-align: left; +} - .words table td, .words table th { - padding: 8px; - border-right: 1px solid var(--spacer-color-2); - } +.words table td, +.words table th { + padding: 8px; + border-right: 1px solid var(--spacer-color-2); +} - .words table td:last-child, .words table th:last-child { - border-right: none; - } +.words table td:last-child, +.words table th:last-child { + border-right: none; +} - .words table th { - border-top: 1px solid var(--spacer-color); - border-bottom: 1px solid var(--spacer-color); - } +.words table th { + border-top: 1px solid var(--spacer-color); + border-bottom: 1px solid var(--spacer-color); +} - .words table td:first-of-type { - font-family: "heonian"; - } \ No newline at end of file +.words table td:first-of-type { + font-family: "heonian"; +} + +.clickable { + cursor: pointer; +} + +#popup-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + /* backdrop-filter: blur(20px); */ + /* -webkit-backdrop-filter: blur(20px); */ + /* above is completely unnecessary, but looks pretty */ + transition: opacity 0.3s; + cursor: pointer; +} + +#popup { + width: 300px; + background-color: white; + border-radius: 8px; + padding: 8px; + box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); + cursor: default; +} + +#popup h1 { + text-align: center; +} + +#popup-heo { + font-family: "heonian"; +} + +data-swap { + display: none; +} \ No newline at end of file