Verify guess, move on to next

3 files changed, 73 insertions, 12 deletions

diff --git a/index.css b/index.css
index f37bdea..7299a8e 100644
--- a/index.css
+++ b/index.css
@@ -50,6 +50,11 @@ h1 {
     width: 50px;
 }
 
+#report {
+    font-weight: bold;
+    font-size: 1.5em;
+}
+
 #controls {
     position: relative;
     width: 300px;
@@ -69,7 +74,7 @@ h1 {
     color: #eee;
 }
 
-#ok {
+#next {
     background-color: #6cc0da;
 }
 
diff --git a/index.html b/index.html
index f1e251f..e2df1ab 100644
--- a/index.html
+++ b/index.html
@@ -20,16 +20,17 @@
                             <!-- to be filled with javascript -->
                         </table>
                     </div>
+                    <div hidden id="report"></div>
                     <div id="controls">
-                        <button id="ok">Next</button> <br />
+                        <button id="next">Next</button> <br />
                         <button id="hint">Hint</button> <br />
                         <button id="show-answer">Show answer</button>
                     </div>
                 </div>
-                <div class="block" id="answer">
-                    <div id="album">Trench</div>
-                    <div id="track">Pet Cheetah</div>
-                    <div id="lines">Pet cheetah, cheetah</div>
+                <div hidden class="block" id="answer">
+                    <div id="album"></div>
+                    <div id="track"></div>
+                    <div id="lines"></div>
                 </div>
             </article>
             <footer>
diff --git a/index.js b/index.js
index 95326cd..38db23d 100644
--- a/index.js
+++ b/index.js
@@ -2,22 +2,49 @@ const wordElem = document.querySelector("#word");
 const inputElem = document.querySelector("#input");
 const candidateListElem = document.querySelector("#candidate-list");
 const candidateContainerElem = document.querySelector("#candidate-container");
+const reportElem = document.querySelector("#report")
+const nextElem = document.querySelector("#next");
+const hintElem = document.querySelector("#hint");
+const showAnswerElem = document.querySelector("#show-answer");
 const answerElem = document.querySelector("#answer");
 const albumElem = document.querySelector("#album");
 const trackElem = document.querySelector("#track");
 const linesElem = document.querySelector("#lines");
 
 let currentWord = {};
+let hintTaken = false;
 
 function newWord() {
     const word = WORDS[Math.floor(Math.random() * WORDS.length)];
+    for (let album in ALBUMS) {
+        if (ALBUMS[album].tracks.includes(word.track)) {
+            word.album = album;
+        }
+    }
+
     currentWord = word;
     wordElem.innerHTML = word["word"];
+    hintTaken = false;
+
+    // clean after the mess
+    for (let elem of [inputElem, nextElem, hintElem]) {
+        elem.disabled = false;
+    }
+
+    for (let elem of [candidateContainerElem, reportElem, answerElem]) {
+        elem.hidden = true;
+    }
+
+    for (let elem of [candidateListElem, reportElem, albumElem, trackElem, linesElem]) {
+        elem.innerHTML = "";
+    }
+
+    inputElem.focus();
 }
 
 function acronymOf(track) {
     let acronym = "";
-    for (word of track.split(" ")) {
+    for (let word of track.split(" ")) {
         acronym += word[0].toLowerCase();
     }
     return acronym;
@@ -25,13 +52,14 @@ function acronymOf(track) {
 
 function makeCandidate(track, album) {
     /*
-     * <tr class="candidate">
+     * <tr class="candidate" onclick="pickSong()">
      *     <td><img class="album-cover" src="filepath"/></td>
      *     <td><span>Track Title</span></td>
      * </tr>
      */
     const candidate = document.createElement("tr");
     candidate.setAttribute("class", "candidate");
+    candidate.addEventListener("click", pickSong);
 
     const albumCoverCell = document.createElement("td");
     const albumCover = document.createElement("img");
@@ -58,9 +86,9 @@ inputElem.oninput = () => {
 
     let candidates = [];
 
-    for (albumTitle in ALBUMS) {
+    for (let albumTitle in ALBUMS) {
         album = ALBUMS[albumTitle];
-        for (track of album.tracks) {
+        for (let track of album.tracks) {
             if (acronymOf(track).startsWith(input)) {
                 candidates.unshift(makeCandidate(track, album));
             } else if (track.toLowerCase().startsWith(input)) {
@@ -71,11 +99,38 @@ inputElem.oninput = () => {
 
     // display candidates if they exist and don't take forever to scroll
     if (candidates.length > 0 && candidates.length <= 5) {
-        for (candidate of candidates) {
+        for (let candidate of candidates) {
             candidateListElem.appendChild(candidate);
         }
         candidateContainerElem.hidden = false;
     }
 }
 
-window.onload = () => { newWord(); }
+function pickSong(event) {
+    const candidate = event.currentTarget;
+    const trackTitleElem = candidate.querySelector("span");
+    if (trackTitleElem.innerText === currentWord.track) {
+        // the guess is correct
+        reportElem.innerHTML = "Correct!";
+        reportElem.style.color = "#7faa55";
+        for (let elem of [inputElem, hintElem, showAnswerElem]) {
+            elem.disabled = true;
+        }
+        answerElem.hidden = false;
+        albumElem.innerHTML = currentWord.album;
+        trackElem.innerHTML = currentWord.track;
+        linesElem.innerHTML = currentWord.lines.join("<br />");
+    } else {
+        if (!hintTaken) {
+            reportElem.innerHTML = "Sorry, not this song :) <br /> Try a hint?";
+        } else {
+            reportElem.innerHTML = "Not this one either…";
+        }
+        reportElem.style.color = "#aa5555";
+    }
+    inputElem.value = "";
+    reportElem.hidden = false;
+}
+
+window.onload = newWord;
+nextElem.onclick = newWord;