Added progress view button

static/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>סמנטעל</title>
     <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-PP8J7V4T0X"></script>
@@ -55,7 +56,8 @@ <h1>סמנטעל</h1>
     <input placeholder="ניחוש" autocorrect="off" autocapitalize="none"
            autocomplete="off"
            type="search" id="guess">
-    <input type="submit" value="ניחוש" id="guess-btn">
+           <input type="submit" value="ניחוש" id="guess-btn">
+
 <!--    <input type="button" value="נמאס לי" id="give-up-btn">-->
     </div>
     </form>

static/js/semantle.js

@@ -61,6 +61,8 @@ let Semantle = (function() {
     let guessed = new Set();
     let firstGuess = true;
     let guesses = [];
+    let guessesByID = [];
+    let progress_view = false;
     let guessCount = 0;
     let gameOver = false;
     const handleStats = false;
@@ -186,14 +188,20 @@ let Semantle = (function() {
         $("#settings-close")[0].focus();
     }
 
-    function updateGuesses(guess) {
-        let inner = `<tr>
-        <th>#</th>
-        <th>ניחוש</th>
-        <th>קרבה</th>
-        <th>מתחמם?</th></tr>`;
-        /* This is dumb: first we find the most-recent word, and put
-           it at the top.  Then we do the rest. */
+    function toggleProgressView(event) {
+        var element = event.target;
+        if (element.className.includes("progress-button")){
+            progress_view = !progress_view
+            updateGuesses()
+        }
+    }
+
+    function showGuesses(){
+        let inner = ''
+        if (guessesByID.length == 0){
+            return inner;
+        }
+        let guess = guessesByID[guessesByID.length - 1][1]
         for (let entry of guesses) {
             let [similarity, oldGuess, guessNumber, percentile, egg] = entry;
             if (oldGuess == guess) {
@@ -207,6 +215,41 @@ let Semantle = (function() {
                 inner += guessRow(similarity, oldGuess, percentile, guessNumber, guess, egg);
             }
         }
+        return inner
+    }
+
+    function showProgress(){
+        let highest_simlirity = Number.MIN_SAFE_INTEGER
+        let gusses = [];
+        for (let entry of guessesByID) {
+            let [similarity, oldGuess, guessNumber, percentile, egg] = entry;
+            if (similarity < highest_simlirity) {
+                continue
+            }
+            highest_simlirity = similarity
+            gusses.push(guessRow(similarity, oldGuess, percentile, guessNumber, guess, egg));
+        }
+        return gusses.reverse().join("")
+    }
+
+    function updateGuesses() {
+        let header = `<tr>
+        <th>#</th>
+        <th>ניחוש</th>
+        <th>קרבה</th>
+        <th>מתחמם?</th>
+        <th><button class="btn progress-button"><i class="fa fa-sort progress-button"></i></button></th>
+        </tr>`;
+        let inner = '';
+        if (!progress_view){
+            inner += showGuesses()
+        }
+        else{
+            inner += showProgress()
+        }
+        if (inner != ''){
+            inner = header + inner;
+        }
         $('#guesses')[0].innerHTML = inner;
     }
 
@@ -226,6 +269,8 @@ let Semantle = (function() {
 
         $("#rules-button")[0].addEventListener('click', openRules);
         $("#settings-button")[0].addEventListener('click', openSettings);
+        $("#guesses")[0].addEventListener('click', toggleProgressView);
+
 
         [$("#rules-underlay"), $("#rules-close")].forEach((el) => {
             el[0].addEventListener('click', () => {
@@ -303,6 +348,7 @@ let Semantle = (function() {
 
                 const newEntry = [similarity, guess, guessCount, distance, egg];
                 guesses.push(newEntry);
+                guessesByID.push(newEntry);
                 if (distance == 1000){
                     endGame(true, true);
                 }
@@ -313,7 +359,7 @@ let Semantle = (function() {
             }
 
 
-            updateGuesses(guess);
+            updateGuesses();
 
             firstGuess = false;
 //            if (guess.toLowerCase() === secret && !gameOver) {