diff --git a/index.html b/index.html index c86e798..959dffc 100644 --- a/index.html +++ b/index.html @@ -19,25 +19,6 @@ click search box or show all words, screen animates search box and. title and all that to top of screen and. results appear n stuff, Vewy Cool Fancy Totally Not Waste Of Resources - - RUBY TAGS HOLY SHIT - um, - results layout would kinda look like,,, - - [words - 420 found / expressions - 69 found / wahtever else - ygettheidea] (click one to filter to just those) - - word { - word [word in latin, in ruby] - [tags like. common word, slang, formal???, type, etc] - [maybe formal and non-formal versions of word could be shown] - [show inflections button (steal from jisho)] - [play audio clip would also be cool....] - - short english translation, followed by . long description/explanation of word - maybe an example? usage? - and. source/who made it/etc - repeat for all meanings of word, - } -->
 diff --git a/main.css b/main.css index 226cd1e..7877e7f 100644 --- a/main.css +++ b/main.css @@ -146,4 +146,11 @@ main { .main-animation-reverse { animation: not-cheating 0.5s ease-in-out reverse; -} \ No newline at end of file +} + +.result-header { + font-family: var(--font-h); + font-size: 2rem; +} + +/* todo. organize this file better. this is a fucking mess */ \ No newline at end of file diff --git a/main.js b/main.js index c395191..e392cf8 100644 --- a/main.js +++ b/main.js @@ -15,22 +15,22 @@ function animateHeader(inout = false) { header.classList.add("fullscreen"); main.style.opacity = "0"; main.classList.remove("main-animation-reverse"); - },500); + }, 500); setTimeout(() => { header.classList.remove("header-animation-reverse"); - },1000); + }, 1000); } else { header.classList.add("header-animation"); header.classList.remove("header-animation-reverse"); setTimeout(() => { header.classList.remove("fullscreen"); main.classList.add("main-animation"); - },500); + }, 500); setTimeout(() => { header.classList.remove("header-animation"); main.style.opacity = "1"; main.classList.remove("main-animation"); - },1000); + }, 1000); } //somewhere here we animate in the actual page too, but it.. doesnt exist yet } @@ -53,7 +53,9 @@ document.addEventListener("keydown", (e) => { if (header.querySelector("input").matches(":focus")) { //search e.preventDefault(); - animateHeader(); //just in case + if (header.classList.contains("fullscreen")) { + animateHeader(); + } doSearch(); } } @@ -121,7 +123,7 @@ function heonianToRoman(text) { if (h[1] == 0 && h[2] == 0) { roman += heonianVowelsSeparate[h[3]]; } else { - roman += heonianConsonants[h[1]+""+h[2]]+heonianVowels[h[3]-1]; + roman += heonianConsonants[h[1] + "" + h[2]] + heonianVowels[h[3] - 1]; } } else { roman += text.charAt(i); @@ -144,21 +146,26 @@ function loadDictionary() { //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: word + searchDictionary[keys[i]].push(keys[i]); - //add: translation (will always exist, i hope) - searchDictionary[keys[i]].push(stripWord(values[i].translation)); + //add: romanized word + searchDictionary[keys[i]].push(heonianToRoman(keys[i])); + + //add: translations, meanings + for (let o = 0; o < values[i].length; o++) { + searchDictionary[keys[i]].push(values[i][o]["meaning"]); + searchDictionary[keys[i]].push(values[i][o]["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; - } + } }); } @@ -169,6 +176,7 @@ function search(word) { for (let value in searchDictionary[key]) { if (searchDictionary[key][value].includes(word)) { result.push(key); + break; //???? } } } @@ -180,7 +188,40 @@ function doSearch() { if (results.length == 0) { main.innerHTML = "no results lulw"; } else { - //actually render results or w/e + main.innerHTML = ""; + /* + [words - 420 found / expressions - 69 found / wahtever else - ygettheidea] (click one to filter to just those) + */ + for (let i = 0; i < results.length; i++) { + let div = document.createElement("div"); + + // 1. add word in heo + romanized ruby as header + let header = document.createElement("ruby"); + header.classList.add("result-header"); + header.innerHTML = results[i] + " " + heonianToRoman(results[i]) + ""; + + // 2. add tags [tags like. common word, slang, formal???, type, etc] + + // 3. formal/nonformal versions, inflections button + + // 4. audio clip if found + + // 5. render all meanings of word + /* + short english translation, followed by . long description/explanation of word + maybe an example? usage? + and. source/who made it/etc + repeat for all meanings of word, + */ + div.appendChild(header); + for (let o = 0; o < json[results[i]].length; o++) { + let div2 = document.createElement("div"); + div2.classList.add("result-meaning"); + div2.innerHTML = json[results[i]][o]["meaning"]; + div.appendChild(div2); //y, yeah. + } + main.appendChild(div); + } } } diff --git a/wordlist.json b/wordlist.json index 0b5ca1f..74a35a9 100644 --- a/wordlist.json +++ b/wordlist.json @@ -17,5 +17,16 @@ "im safe with ari": ":3" } } + ], + "": [ + { + "type": "verb", + "meaning": "to like", + "translation": "snAAAAow", + "notes": "ari is cute", + "examples": { + "     ": "i hope ari can see snAAAAow" + } + } ] } \ No newline at end of file