top 5 worst search features of all time. number 5

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,
-            }
         -->
         <header class="fullscreen">
             <span class="heonian"></span>

main.css

@@ -146,4 +146,11 @@ main {
 
 .main-animation-reverse {
     animation: not-cheating 0.5s ease-in-out reverse;
-}
+}
+
+.result-header {
+    font-family: var(--font-h);
+    font-size: 2rem;
+}
+
+/* todo. organize this file better. this is a fucking mess */

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] + " <rt>" + heonianToRoman(results[i]) + "</rt>";
+
+            // 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);
+        }
     }
 }
 

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"
+            }
+        }
     ]
 }