From e40bdc2a397dc3f92f5f088a9f05f86253064cae Mon Sep 17 00:00:00 2001 From: remi Date: Thu, 5 May 2022 13:10:36 +0200 Subject: [PATCH] changes (a lot) --- base.html | 2 +- input.txt | 2 +- input_test.txt | 23 +++++++++++++++++++++++ main.js | 37 ++++++++++++++++++++++++++++++++++++- test.html | 6 ------ text_analysis.css | 26 +++++++++++++++++--------- 6 files changed, 78 insertions(+), 18 deletions(-) create mode 100644 input_test.txt diff --git a/base.html b/base.html index ac6b6e2..1b8a386 100644 --- a/base.html +++ b/base.html @@ -190,7 +190,7 @@ 2022/05/04

- ee ee n_n + ee ee n_n ariri

diff --git a/input.txt b/input.txt index be2a8c3..3a0969d 100644 --- a/input.txt +++ b/input.txt @@ -2,7 +2,7 @@ LU'NYA i lunya.jpeg d 2022/05/04 nyan'pash! balfur yu e she polika'nya dre? - + ESH'NYUI i eshnyui.png re chu meshu yu polika'nya diff --git a/input_test.txt b/input_test.txt new file mode 100644 index 0000000..2e0d901 --- /dev/null +++ b/input_test.txt @@ -0,0 +1,23 @@ +ITS ME PEKORA +d deez +r hiiiii!!!! +! uwu + +HOLY SHIT REMI +d a + amogus + + +it's meee pekora!!!! +i eshnyui.png +d yolo + so cool + so cool + so cool + + how this work owo + + + so cool + so uwu + very good \ No newline at end of file diff --git a/main.js b/main.js index ce10409..58c7560 100644 --- a/main.js +++ b/main.js @@ -7,13 +7,15 @@ 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();}); } @@ -29,6 +31,31 @@ function showPopup(word) { c.style.pointerEvents = "all"; } +function showSmolPopup(word) { + let p = document.querySelector("#smol-popup"); + p.querySelector("h1").innerText = word; + p.querySelector("#smol-heo").innerText = words[word]["heonian"]; + p.querySelector("#smol-type").innerText = words[word]["type"]; + p.querySelector("#smol-meaning").innerText = words[word]["meaning"]; + p.style.opacity = 1; + p.style.pointerEvents = "all"; +} + +function checkHover(word) { + if (timeout != "") { + clearTimeout(timeout); + } + timeout = setTimeout(() => { + showSmolPopup(word); + }, 450); +} + +function clearHover() { + if (timeout != "") { + clearTimeout(timeout); + } +} + function createWordList() { //sometimes i really dislike javascript.. let t = document.querySelector("tbody"); t.querySelectorAll("tr").forEach(element => { @@ -66,6 +93,14 @@ function injectWords() { element.addEventListener('click', function(e) { showPopup(element.innerText); }, false); + element.addEventListener('mouseover', function(e) { + checkHover(element.innerText); + } + , false); + element.addEventListener('mouseout', function(e) { + clearHover(); + } + , false); }); } }); diff --git a/test.html b/test.html index 350af16..b6cbc66 100644 --- a/test.html +++ b/test.html @@ -58,12 +58,6 @@ nyan'pash! balfur yu e she polika'nya dre?

!      ?

-

- -

-

- -

diff --git a/text_analysis.css b/text_analysis.css index 4662680..3b1598b 100644 --- a/text_analysis.css +++ b/text_analysis.css @@ -9,8 +9,8 @@ --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: #a7b3a7; - --right-color: #61ce61; + --left-color: rgb(230, 229, 235); + --right-color: rgb(75, 187, 251); --font-normal: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; --font-heonian: "heonian", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } @@ -43,7 +43,7 @@ main { display: flex; justify-content: space-between; align-items: center; - margin: 8px; + margin: 16px; } .right { @@ -52,13 +52,19 @@ main { .convo { width: 400px; - border: 1px solid var(--left-color); - border-radius: 8px; + border-radius: 16px; padding: 8px; + padding-top: 0px; + padding-bottom: 10px; + /* padding bottom isnt actually required, but due to how + browsers render fonts, it makes things look better... */ + background-color: var(--left-color); + box-shadow: 0px 0px 6px var(--spacer-color); } .right .convo { - border: 1px solid var(--right-color); + background-color: var(--right-color); + color: white; } .convo p { @@ -66,9 +72,9 @@ main { margin-top: 8px; } -.convo *:first-child { - margin-top: 0; - /* edge case for when a p is alone in a .convo */ +.convo p:first-child { + margin-top: 8px; + /* wow! */ } .convo-header { @@ -82,6 +88,8 @@ main { border-radius: 42069px; width: 48px; margin-right: 8px; + margin-left: -8px; + border-radius: 16px 0px 16px 0px; } .convo-date {