Added rank showing and better filters to match it

services/m=hiscore/helpers.js

@@ -30,7 +30,7 @@ hiscores.sName = [
 hiscores.page = 0;
 hiscores.currentSkillId = "";
 
-hiscores.apiURL = "https://18f35cfbb30b.ngrok.io";
+hiscores.apiURL = "http://localhost:3000";
 
 hiscores.tableData = [];
 hiscores.defaultTableData = [];
@@ -84,7 +84,6 @@ hiscores.initalizeRightsideButtons = () => {
 
     document.getElementById("filter_submit").addEventListener("click", function (e) {
         e.preventDefault();
-        hiscores.page++;
         let pageRemovedFiltersLocation = window.location.search.split(/\?iron=[A-z]+|\?ultiron=[A-z]+|\?hciron=[A-z]+|\?maxXP=\d+/).join('');
         const ironparam = `?iron=${document.getElementById('check_iron').checked}`;
         const ultironparam = `?ultiron=${document.getElementById('check_ultiron').checked}`;
@@ -92,6 +91,16 @@ hiscores.initalizeRightsideButtons = () => {
         const maxXP = `?maxXP=${document.getElementById("maxXP").value}`;
         window.location.replace(`./hiscores.html${pageRemovedFiltersLocation}${ironparam}${ultironparam}${hcironparam}${maxXP}`);
     });
+
+    if (document.getElementById("filter_clear")) {
+        console.log("filter clear is here");
+        // Filter clear only appears when filters are present 
+        document.getElementById("filter_clear").addEventListener("click", function (e) {
+            e.preventDefault();
+            let pageRemovedFiltersLocation = window.location.search.split(/\?iron=[A-z]+|\?ultiron=[A-z]+|\?hciron=[A-z]+|\?maxXP=\d+/).join('');
+            window.location.replace(`./hiscores.html${pageRemovedFiltersLocation}`);
+        })    
+    }
 }
 
 hiscores.filter = (result) => {

services/m=hiscore/hiscores.html

@@ -587,7 +587,7 @@ English
                   </form>
                 </div>
                 <div class="subsectionHeader search_title">Filter</div>
-                <div class="search_tiny_bit_more_large">
+                <div id="filter_div" class="search_tiny_bit_more_large" style="height: 110px;">
                   <form action="./hiscores.html" method="post" class="no_margin">
                     <div id="remember">
                       <label for="rem">
@@ -629,6 +629,9 @@ English
                       </label>
                     </div>
                     <input id="filter_submit" type="submit" name="submit" class="buttonmedium" value="Filter" style="margin-top: 2px;">
+                    <div id="filter_clear_div">
+
+                    </div>
                   </form>
                 </div>
                 <div class="subsectionHeader search_title">Legend</div>

services/m=hiscore/hiscores.js

@@ -45,6 +45,14 @@ hiscores.loadUserTable = (username) => {
             hiscores.populatePlayerHSTable();
             hiscores.setHeadSkillText(hiscores.formatName(username, 0, result.info.exp_multiplier, true));
         })
+        .then(() => {
+            // Now get the player ranks (done seperately)
+            fetch(`${hiscores.apiURL}/highscores/rankedMap`)
+                .then(response => response.json())
+                .then(result => {
+                    hiscores.populatePlayerRanks(username, result);
+                })
+        })
         .catch(error => {
             document.getElementById('search_name').style.color = 'red';
             console.log('error', error);
@@ -71,7 +79,7 @@ hiscores.populatePlayerHSTable = () => {
 
         row.childNodes[1].replaceWith(document.createElement("td"));
         row.childNodes[1].className = "rankCol";
-        row.childNodes[1].innerHTML = "0";
+        row.childNodes[1].innerHTML = "";
 
         row.childNodes[3].replaceWith(document.createElement("td"));
         row.childNodes[3].className = "alL";
@@ -87,6 +95,18 @@ hiscores.populatePlayerHSTable = () => {
     }
 }
 
+hiscores.populatePlayerRanks = (username, result) => {
+    for (let i = 1; i <= 24; i++) {
+        result[i - 1] = hiscores.filter(result[i - 1]);
+        row = document.getElementsByClassName(`row row${i}`)[0];
+
+        row.childNodes[1].replaceWith(document.createElement("td"));
+        row.childNodes[1].className = "rankCol";
+        let rank = (result[i - 1].findIndex(player => player.username === username) + 1)
+        row.childNodes[1].innerHTML = rank ? rank : i % 2 === 1 ? "N/A" : "Bad Filter";
+    }
+}
+
 hiscores.loadSkillTable = (skillId) => {
     fetch(`${hiscores.apiURL}/highscores/playersBySkill/${skillId}`)
         .then(response => response.json())
@@ -125,9 +145,6 @@ hiscores.populateSkillHSTable = () => {
     }
 }
 
-hiscores.initializePageArrows();
-hiscores.initalizeRightsideButtons();
-hiscores.linkLeftTabSkillNames();
 
 /**
  * In URL ?player=guthix, passing param "player" will return "guthix"
@@ -153,8 +170,16 @@ if (getParam("skill")) {
 }
 
 if (getParam("iron")) {
-    document.getElementById("filter_submit").value = "Filter";
     document.getElementById('check_iron').checked = getParam("iron") === "true";
+
+    document.getElementById("filter_submit").value = "Filter";
+    document.getElementById("filter_div").style.height = "134px";
+    // Add disable button
+    document.getElementById("filter_clear_div").innerHTML = `<input id="filter_clear" type="submit" name="submit" class="buttonmedium" value="Clear" style="margin-top: 2px;">`
+} else {
+    document.getElementById("filter_clear_div").innerHTML = "";
+    // Change width to 134 minus button size
+    document.getElementById("filter_div").style.height = "110px";
 }
 if (getParam("ultiron")) {
     document.getElementById('check_ultiron').checked = getParam("ultiron") === "true";
@@ -165,4 +190,9 @@ if (getParam("hciron")) {
 if (getParam("maxXP")) {
     document.getElementById('maxXP').value = getParam("maxXP");
     document.getElementById('maxXPoutput').innerHTML = getParam("maxXP");
-}
+}
+
+
+hiscores.initializePageArrows();
+hiscores.initalizeRightsideButtons();
+hiscores.linkLeftTabSkillNames();

site/css/hiscores-17.css

@@ -605,11 +605,11 @@
     background: transparent url(../img/hiscores/search_largeeccb.png?3) repeat-x;
    }
   .search_tiny_bit_more_large {
-    height: 114px;
-    background: transparent url(../img/hiscores/search_tiny_bit_more_largeeccb.png?3) repeat-x;
+    height: 134px;
+    background: transparent url(../img/hiscores/search_custom_largeeccb.png?3) repeat-x;
    }
   .search_custom_large {
-   height: 122px;
+   height: 102px;
    background: transparent url(../img/hiscores/search_custom_largeeccb.png?3) repeat-x;
   }
    #friends_search {