heonian web dictionary

commit 5fc1858e75acd5d4a71a9ca7f60fb71d1306abd7 Author: remi Date: Tue Jun 7 00:18:05 2022 +0200 initial commit diff --git a/font.otf b/font.otf new file mode 100644 index 0000000..4750c7b Binary files /dev/null and b/font.otf differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..c86e798 --- /dev/null +++ b/index.html @@ -0,0 +1,61 @@ + + + + + heonian web dictionary + + + + + + + +

+  +

+ + +

+ show all words uh. something else +

+ +

+ + + + \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 0000000..c6d7891 --- /dev/null +++ b/main.css @@ -0,0 +1,128 @@ +@font-face { + font-family: "heonian"; + src: url("./font.otf"); +} + +@keyframes clearly-cheating { + 0% { + opacity: 1; + transform: translateY(0); + } + 50% { + opacity: 0; + transform: translateY(-20px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +:root { + --font: "Helvetica Neue", Helvetica, Arial, sans-serif; + --font-h: "heonian", "Helvatica Neue", Helvetica, Arial, sans-serif; + --nice-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); + --grey: rgb(226, 226, 226); + --darkgrey: rgb(150, 150, 150); +} + +body { + margin: 0; + padding: 0; + font-family: var(--font); +} + +a { + color: rgb(119, 205, 233); + text-decoration: none; +} + +a:hover { + text-decoration: underline; + cursor: pointer; +} + +.heonian { + font-family: "heonian"; +} + +header { + display: flex; + justify-content: space-around; + align-items: center; + flex-flow: row wrap; + padding-bottom: 8px; + border-bottom: 1px solid var(--grey); +} + +header * { + margin: 8px; +} + +header #search { + flex-grow: 1; + white-space: nowrap; + overflow-x: hidden; +} + +header #search button { + all: unset; + position: relative; + left: -64px; + top: -2px; + width: 48px; + text-align: center; + height: 2rem; + border-left: 1px solid var(--grey); +} + +header input { + height: 2rem; + font-size: 1.5rem; + font-family: var(--font-h); + padding: 4px; + padding-right: calc(4px + 48px); /* space for heonian ime button */ + border: 1px solid var(--grey); + border-radius: 4px; + font-weight: 100; + transition: border-color 0.3s; + width: calc(100% - 52px - 24px); +} + +header input:focus { + outline: none; + border: 1px solid var(--darkgrey); +} + +header span.heonian { + font-size: 1.5rem; +} + +header.fullscreen { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + flex-flow: column; + justify-content: center; + padding-bottom: 0px; + border-bottom: none; +} + +header.fullscreen span.heonian { + font-size: 8rem; +} + +header.fullscreen #search { + flex-grow: 0; + max-width: 500px; +} + +.header-animation { + animation: clearly-cheating 1s ease-in-out; +} + +.header-animation-reverse { + animation: clearly-cheating 1s ease-in-out reverse; +} \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..dc26d55 --- /dev/null +++ b/main.js @@ -0,0 +1,118 @@ +let json = null; + +let searchDictionary = {}; + +let header = null; +let main = null; + +function animateHeader(inout = false) { + //todo: debounce this + if (inout) { + header.classList.add("header-animation-reverse"); + header.classList.remove("header-animation"); + setTimeout(() => { + header.classList.add("fullscreen"); + },500); + setTimeout(() => { + header.classList.remove("header-animation-reverse"); + },1000); + } else { + header.classList.add("header-animation"); + header.classList.remove("header-animation-reverse"); + setTimeout(() => { + header.classList.remove("fullscreen"); + },500); + setTimeout(() => { + header.classList.remove("header-animation"); + },1000); + } + //somewhere here we animate in the actual page too, but it.. doesnt exist yet +} + +// on space animateHeader() +document.addEventListener("keydown", (e) => { + //on / key press + if (e.keyCode === 191) { + e.preventDefault(); + header.querySelector("input").focus(); + } + if (e.keyCode === 27) { + //if search box not focused, and if we're not on the home page, go back to home page + if (!header.querySelector("input").matches(":focus") && !header.classList.contains("fullscreen")) { + e.preventDefault(); + animateHeader(true); + } + } + if (e.keyCode === 13) { + if (header.querySelector("input").matches(":focus")) { + //search + e.preventDefault(); + animateHeader(); //just in case + doSearch(); + } + } +}); + +function stripWord(word) { + return word.replace(/[^a-zA-Z]/g, ""); +} + +function loadDictionary() { + fetch("/wordlist.json").then((e) => { + if (e.status === 200) { + //convert to json lmao + e.json().then((e) => { + json = e; + + let values = Object.values(json); + let keys = Object.keys(json); + //prepare search. maybe async this if we're loading a specific word? + for (let i = 0; i < keys.length; i++) { + //create array + searchDictionary[keys[i]] = []; + + //add: base word (obvious, will always exist) + searchDictionary[keys[i]].push(stripWord(keys[i])); + //add: base word, but in heonian (todo, needs translator) + + //add: translation (will always exist, i hope) + searchDictionary[keys[i]].push(stripWord(values[i].translation)); + } + + //ok, we're all ready! + document.querySelector("header input").placeholder = "search"; + }); + } else { + alert("yeah something went horribly wrong loading the wordlist so uh,,, certified ike moment"); + return; + } + }); +} + +function search(word) { + word = stripWord(word); + let result = []; + for (let key in searchDictionary) { + for (let value in searchDictionary[key]) { + if (searchDictionary[key][value].includes(word)) { + result.push(key); + } + } + } + return result; +} + +function doSearch() { + let results = search(header.querySelector("input").value); + if (results.length == 0) { + main.innerHTML = "no results lulw"; + } else { + //actually render results or w/e + } +} + +window.onload = () => { + header = document.querySelector("header"); + main = document.querySelector("main"); + loadDictionary(); +} \ No newline at end of file diff --git a/wordlist.json b/wordlist.json new file mode 100644 index 0000000..646198f --- /dev/null +++ b/wordlist.json @@ -0,0 +1,15 @@ +{ + "a.bae": { + "translation": "young", + "type": "modifier" + }, + "a.e mo?": { + "translation": "isn't it right?", + "type": "expression" + }, + "a.ga.ka": { + "translation": "at, towards, for", + "type": "marker", + "notes": "also used like" + } +} \ No newline at end of file