diff --git a/base.html b/base.html index 1b8a386..91622be 100644 --- a/base.html +++ b/base.html @@ -5,163 +5,7 @@ avg convo - + @@ -239,6 +83,14 @@ +
+

um

+
+ heonian:
+ type: +
+

+



diff --git a/html/words/definition/cell_start.html b/html/words/definition/cell_start.html index fec1599..e74157c 100644 --- a/html/words/definition/cell_start.html +++ b/html/words/definition/cell_start.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/html/words/start.html b/html/words/start.html index 495ff6a..cb2fe31 100644 --- a/html/words/start.html +++ b/html/words/start.html @@ -4,4 +4,10 @@ (psst, turn on javascript, and you can click words for explanations!)

- \ No newline at end of file + + + + + + + \ No newline at end of file diff --git a/main.js b/main.js index 58c7560..2f64005 100644 --- a/main.js +++ b/main.js @@ -10,17 +10,18 @@ let currentFont = "r"; let timeout = ""; function init() { - // createWordList(); + createWordList(); // injectWords(); - // 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", () => { + 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 showPopup(word) { + clearHover(); let p = document.querySelector("#popup"); let c = document.querySelector("#popup-container") p.querySelector("h1").innerText = word; @@ -31,7 +32,7 @@ function showPopup(word) { c.style.pointerEvents = "all"; } -function showSmolPopup(word) { +function showSmolPopup(word, event) { let p = document.querySelector("#smol-popup"); p.querySelector("h1").innerText = word; p.querySelector("#smol-heo").innerText = words[word]["heonian"]; @@ -39,14 +40,20 @@ function showSmolPopup(word) { p.querySelector("#smol-meaning").innerText = words[word]["meaning"]; p.style.opacity = 1; p.style.pointerEvents = "all"; + // set position to cursor position + let rect = document.body.getBoundingClientRect(); + let x = event.clientX - rect.left; + let y = event.clientY - rect.top; + p.style.left = x - 100 + "px"; + p.style.top = y + 25 + "px"; } -function checkHover(word) { +function checkHover(word, event) { if (timeout != "") { clearTimeout(timeout); } timeout = setTimeout(() => { - showSmolPopup(word); + showSmolPopup(word, event); }, 450); } @@ -54,6 +61,9 @@ 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.. @@ -94,7 +104,7 @@ function injectWords() { showPopup(element.innerText); }, false); element.addEventListener('mouseover', function(e) { - checkHover(element.innerText); + checkHover(element.innerText, e); } , false); element.addEventListener('mouseout', function(e) { diff --git a/test.html b/test.html index 8bcb985..048d057 100644 --- a/test.html +++ b/test.html @@ -566,926 +566,932 @@ relfur chu arilaen dedaka'nya.
heonianromanizationtypemeaning
- + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/text_analysis.css b/text_analysis.css index 3b1598b..f54f34b 100644 --- a/text_analysis.css +++ b/text_analysis.css @@ -181,11 +181,23 @@ main { cursor: default; } -#popup h1 { +#smol-popup { + width: 200px; + background-color: white; + border-radius: 8px; + padding: 8px; + box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); + position: fixed; + top: 0; + left: 0; + transition: opacity 0.3s; +} + +#popup h1, #smol-popup h1 { text-align: center; } -#popup-heo { +#popup-heo, #smol-heo { font-family: "heonian"; }
+ heonianromanizationtypemeaning
- + - + ??? - + ???
+  - + nyan.pash - + expression - + hello!, good morning!
+  - + balfur - + ??? - + ???
+  - + yu - + marker - + denotes topic, emphasis
+  - + e - + pronoun - + which
+  - + she - + noun - + food
+  - + poliku - + ??? - + ???
+  - + dre - + ??? - + ???
+  - + re - + pronoun - + i
+  - + chu - + marker - + denotes the subject
+  - + meshu - + ??? - + ???
+  - + ponyash - + ??? - + ???
+  - + aa - + expression, modifier - + correct, very
+  - + an.ko - + expression - + thank you
+  - + ba - + pronoun - + you
+  - + wa.wo.te - + noun - + rain
+  - + to - + marker - + and, along (in physical presence)
+  - + pu - + noun - + sun
+  - + mipura - + ??? - + ???
+  - + lilinya - + ??? - + ???
+  - + uwu - + ??? - + ???
+  - + relfur - + ??? - + ???
+  - + mya - + marker - + preceeds subordinate clause
+  - + lup - + modifier - + slow
+  - + a.pat.ku - + verb - + to lie (on a surface)
+  - + ku - + verb - + to be
+  - + pon.me - + marker - + because
+  - + pee.ka.ku - + verb - + to think, to become aware
+  - + mishipash - + ??? - + ???
+  - + ton - + ??? - + ???
+  - + relfurla - + ??? - + ???
+  - + me.lu.ton - + noun - + red
+  - + balfurla - + ??? - + ???
+  - + dra - + marker - + indicates question
+  - + esh.dre - + noun - + moon, secret
+  - + pu.ro.ton - + modifier - + yellow
+  - + shi.ro.bae.pu - + noun - + night sky
+  - + po.nya - + modifier - + good
+  - + be.nyui - + noun - + bunny
+  - + rerenlafura - + ??? - + ???
+  - + mi.mi.ku - + verb - + to see
+  - + oo - + ??? - + ???
+  - + pa.re.ku - + verb - + to know, to learn
+  - + babanlafura - + ??? - + ???
+  - + nao.mi.min.ku - + verb - + to dream
+  - + u.u - + expression - + no
+  - + mimifuku - + ??? - + ???
+  - + gu.ra.ton - + modifier - + green
+  - + i.shi - + noun - + beauty
+  - + arilaen - + ??? - + ???
+  - + en - + noun - + being
+  - + fadre - + ??? - + ???
+  - + yesh - + modifier - + adorable
+  - + de.da.ku - + verb - + to hate
+  - + imanla - + ??? - + ???
+  - + ri.la - + noun - + horns
+  - + shash.ku - + verb - + to split, to cut, to divide
+  - + shoo - + noun - + essence, core, heart
+  - + i.ke - + modifier - + bad
+  - + pi.ke.she - + modifier - + rotten
+  - + arilaenlan - + ??? - + ???
+  - + lu.ku - + verb - + to die
+  - + arilaenla - + ??? - + ???
+  - + fuku - + ??? - + ???
+  - + ga.o - + pronoun - + that
+  - + fayu - + ??? - + ???