Display candidates

3 files changed, 105 insertions, 1 deletions

diff --git a/index.css b/index.css
index 01e8887..f37bdea 100644
--- a/index.css
+++ b/index.css
@@ -35,6 +35,21 @@ h1 {
     font-size: 1.5em;
 }
 
+#candidate-container {
+    background-color: #eee;
+    margin-top: 1em;
+    margin-bottom: 1em;
+    padding: 1em;
+}
+
+.candidate {
+    text-align: left;
+}
+
+.album-cover {
+    width: 50px;
+}
+
 #controls {
     position: relative;
     width: 300px;
diff --git a/index.html b/index.html
index 1edf2b2..f1e251f 100644
--- a/index.html
+++ b/index.html
@@ -15,8 +15,13 @@
                 <div class="block" id="interaction">
                     <p>What song is it? (acronym works too)</p>
                     <input id="input" autocomplete="off" autofocus />
+                    <div hidden id="candidate-container">
+                        <table id="candidate-list">
+                            <!-- to be filled with javascript -->
+                        </table>
+                    </div>
                     <div id="controls">
-                        <button id="ok">OK</button> <br />
+                        <button id="ok">Next</button> <br />
                         <button id="hint">Hint</button> <br />
                         <button id="show-answer">Show answer</button>
                     </div>
@@ -46,5 +51,8 @@
                 </details>
             </footer>
         </div>
+        <script src="words.js"></script>
+        <script src="albums.js"></script>
+        <script src="index.js"></script>
     </body>
 </html>
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..95326cd
--- /dev/null
+++ b/index.js
@@ -0,0 +1,81 @@
+const wordElem = document.querySelector("#word");
+const inputElem = document.querySelector("#input");
+const candidateListElem = document.querySelector("#candidate-list");
+const candidateContainerElem = document.querySelector("#candidate-container");
+const answerElem = document.querySelector("#answer");
+const albumElem = document.querySelector("#album");
+const trackElem = document.querySelector("#track");
+const linesElem = document.querySelector("#lines");
+
+let currentWord = {};
+
+function newWord() {
+    const word = WORDS[Math.floor(Math.random() * WORDS.length)];
+    currentWord = word;
+    wordElem.innerHTML = word["word"];
+}
+
+function acronymOf(track) {
+    let acronym = "";
+    for (word of track.split(" ")) {
+        acronym += word[0].toLowerCase();
+    }
+    return acronym;
+}
+
+function makeCandidate(track, album) {
+    /*
+     * <tr class="candidate">
+     *     <td><img class="album-cover" src="filepath"/></td>
+     *     <td><span>Track Title</span></td>
+     * </tr>
+     */
+    const candidate = document.createElement("tr");
+    candidate.setAttribute("class", "candidate");
+
+    const albumCoverCell = document.createElement("td");
+    const albumCover = document.createElement("img");
+    albumCover.setAttribute("class", "album-cover");
+    albumCover.setAttribute("src", album.cover);
+    albumCoverCell.appendChild(albumCover);
+
+    const trackTitleCell = document.createElement("td");
+    const trackTitle = document.createElement("span");
+    trackTitle.innerHTML = track;
+    trackTitleCell.appendChild(trackTitle);
+
+    candidate.appendChild(albumCoverCell);
+    candidate.appendChild(trackTitleCell);
+    return candidate;
+}
+
+inputElem.oninput = () => {
+    // clear candidates
+    candidateContainerElem.hidden = true;
+    candidateListElem.innerHTML = "";
+    const input = inputElem.value.toLowerCase();
+    if (!input) { return; }
+
+    let candidates = [];
+
+    for (albumTitle in ALBUMS) {
+        album = ALBUMS[albumTitle];
+        for (track of album.tracks) {
+            if (acronymOf(track).startsWith(input)) {
+                candidates.unshift(makeCandidate(track, album));
+            } else if (track.toLowerCase().startsWith(input)) {
+                candidates.push(makeCandidate(track, album));
+            }
+        }
+    }
+
+    // display candidates if they exist and don't take forever to scroll
+    if (candidates.length > 0 && candidates.length <= 5) {
+        for (candidate of candidates) {
+            candidateListElem.appendChild(candidate);
+        }
+        candidateContainerElem.hidden = false;
+    }
+}
+
+window.onload = () => { newWord(); }