New way of displaying XP rate? And some fixes :)

services/m=hiscore/helpers.js

@@ -73,8 +73,8 @@ hiscores.initalizeRightsideButtons = () => {
     document.getElementById("search_rank_submit").addEventListener("click", function (e) {
         e.preventDefault();
         if (document.getElementById('search_rank').value) {
-            hiscores.loadUserTable(defaultTableData[document.getElementById('search_rank').value - 1].username)
-            hiscores.setHeadSkillText(defaultTableData[document.getElementById('search_rank').value - 1].username + "'s ");
+            hiscores.loadUserTable(hiscores.defaultTableData[document.getElementById('search_rank').value - 1].username)
+            hiscores.setHeadSkillText(hiscores.defaultTableData[document.getElementById('search_rank').value - 1].username + "'s ");
         }
         else {
             hiscores.loadDefaultHSTable();
@@ -82,7 +82,7 @@ hiscores.initalizeRightsideButtons = () => {
     });
 }
 
-hiscores.formatName = (name, aposS = false) => {
+hiscores.formatName = (name, ironStatus = 0, xpRate = 10, aposS = false,) => {
     name = name.replaceAll("_", " ");
     name = name.replace(/(^\w|\s\w)/g, match => match.toUpperCase()); // Capitalize first letter of each word
     if (aposS) {
@@ -93,7 +93,15 @@ hiscores.formatName = (name, aposS = false) => {
         }
     }
 
-    return name;
+    name = hiscores.getIronIcon(ironStatus) + name;
+    switch (Number(xpRate)) {
+        case 5:
+            return `<i>${name}</i>`
+        case 10:
+            return `${name}`
+        default:
+            return name + ` <span style="color: rgba(0, 0, 0, 0.4);">${xpRate > 10 ? Math.round(xpRate) : xpRate}x</span>` ;
+    }
 }
 
 hiscores.setHeadSkillIcon = (icon) => {
@@ -105,7 +113,7 @@ hiscores.setHeadSkillIcon = (icon) => {
 }
 
 hiscores.setHeadSkillText = (text) => {
-    document.getElementById("scores_head_skill").innerText = text;
+    document.getElementById("scores_head_skill").innerHTML = text;
 }
 
 hiscores.getIronIcon = (ironStatus) => {
@@ -122,4 +130,4 @@ hiscores.getIronIcon = (ironStatus) => {
         default:
             return "";
     }
-}
+}

services/m=hiscore/hiscores.html

@@ -155,7 +155,7 @@ English
 
         <div class="navigation">
           <div class="location">
-            <b>Location: </b> <a href="../../site/title.ws">Home</a> &gt;
+            <b>Location: </b> <a href="../../index.html">Home</a> &gt;
             Hiscores
           </div>
         </div>
@@ -614,24 +614,33 @@ English
                     <input id="search_rank_submit" type="submit" name="submit" class="buttonmedium" value="Search">
                   </form>
                 </div>
-                <div class="subsectionHeader search_title">Compare Users</div>
+                <div class="subsectionHeader search_title">Filter (Coming Soon)</div>
                 <div class="search_large">
                   <form action="http://services/m=hiscore/compare.ws" method="post" class="no_margin">
                     <input id="search_compare1" class="textinput text" maxlength="12" type="text" name="user1" value="">
                     <input id="search_compare2" class="textinput text" maxlength="12" type="text" name="user2" value="">
-                    <input type="submit" name="submit" class="buttonmedium" value="Compare">
+                    <input type="submit" name="submit" class="buttonmedium" value="Filter">
                   </form>
                 </div>
-                <div class="subsectionHeader search_title">Friends Hiscores</div>
-                <div class="search_large" id="friends_search">
-                  <div class="friendsContent">
-                    To view personal<br>
-                    hiscores and compare<br>
-                    yourself to your friends<br>
-                    <form action="http://services/m=hiscore/hiscorefriends_all.ws?category_type=0" method="POST"
-                      class="no_margin">
-                      <input id="search_friends" type="submit" name="action" class="buttonmedium" value="Log In">
-                    </form>
+                <div class="subsectionHeader search_title">Legend</div>
+                <div class="search_custom_large" id="friends_search">
+                  <div class="friendsContent" style="padding-top: 8px;">
+                    <img src="../../site/img/osrsimg/ironman.png" style="height: 11px;"> Ironman
+                    <br>
+                    <img src="../../site/img/osrsimg/ultimateironman.png" style="height: 11px"> Ultimate Ironman
+                    <br>
+                    <img src="../../site/img/osrsimg/hcim.png" style="height: 11px"> Hardcore Ironman
+                    <br>
+                    <span style="color: #4c350a;">---</span>
+                    <br>
+                    <b><i>1x exp rate</i></b>
+                    <br>
+                    <b>2.5x exp rate</b> 
+                    <br>
+                    <i>5x exp rate</i> 
+                    <br>
+                    10x exp rate
+                    <br>
                   </div>
                 </div>
               </div>

services/m=hiscore/hiscores.js

@@ -22,7 +22,7 @@ hiscores.populateDefaultHSTable = () => {
 
         row.childNodes[3].replaceWith(document.createElement("td"));
         row.childNodes[3].className = "alL";
-        row.childNodes[3].innerHTML = `${hiscores.getIronIcon(playerData.iron_mode)}<a href="./hiscores.html">${playerData ? hiscores.formatName(playerData.username) : ""}</a>`;
+        row.childNodes[3].innerHTML = `<a href="./hiscores.html">${playerData ? hiscores.formatName(playerData.username, playerData.iron_mode, playerData.exp_multiplier) : ""}</a>`;
         row.childNodes[3].addEventListener("click", function (e) {
             e.preventDefault();
             hiscores.loadUserTable(playerData.username);
@@ -46,7 +46,7 @@ hiscores.loadUserTable = (username) => {
             hiscores.tableData = result.skills;
             hiscores.tableInfo = result.info;
             hiscores.populatePlayerHSTable();
-            hiscores.setHeadSkillText(hiscores.formatName(username, true));
+            hiscores.setHeadSkillText(hiscores.formatName(username, 0, result.info.exp_multiplier, true));
         })
         .catch(error => {
             document.getElementById('search_name').style.color = 'red';
@@ -55,7 +55,20 @@ hiscores.loadUserTable = (username) => {
 }
 
 hiscores.populatePlayerHSTable = () => {
-    hiscores.setHeadSkillIcon(hiscores.tableInfo.iron_mode === "0" ? "Constitution" : "../../site/img/osrsimg/ironman.png");
+    switch (Number(hiscores.tableInfo.iron_mode)) {
+        case 1:
+            hiscores.setHeadSkillIcon("../../site/img/osrsimg/ironman.png");
+            break;
+        case 2:
+            hiscores.setHeadSkillIcon("../../site/img/osrsimg/hcim.png");
+            break;
+        case 3:
+            hiscores.setHeadSkillIcon("../../site/img/osrsimg/ultimateironman.png");
+            break;
+        default:
+            hiscores.setHeadSkillIcon("Constitution");
+    }
+
     for (let i = 1; i <= 24; i++) {
         row = document.getElementsByClassName(`row row${i}`)[0];
 
@@ -106,7 +119,7 @@ hiscores.populateSkillHSTable = () => {
 
         row.childNodes[3].replaceWith(document.createElement("td"));
         row.childNodes[3].className = "alL";
-        row.childNodes[3].innerHTML = `${hiscores.getIronIcon(playerData.iron_mode)}<a href="./hiscores.html">${playerData ? hiscores.formatName(playerData.username) : ""}</a>`;
+        row.childNodes[3].innerHTML = `<a href="./hiscores.html">${playerData ? hiscores.formatName(playerData.username, playerData.iron_mode, playerData.exp_multiplier) : ""}</a>`;
         row.childNodes[3].addEventListener("click", function (e) {
             e.preventDefault();
             hiscores.loadUserTable(playerData.username);

site/css/hiscores-17.css

@@ -591,7 +591,7 @@
    width: 156px;
    height: 505px;
   }
-  .search_small, .search_large {
+  .search_small, .search_large, .search_custom_large {
    margin-bottom: 2px;
    width: 156px;
    text-align: center;
@@ -601,10 +601,14 @@
    background: transparent url(../img/hiscores/search_smalleccb.png?3) repeat-x;
   }
   .search_large {
-   height: 98px;
-   background: transparent url(../img/hiscores/search_largeeccb.png?3) repeat-x;
+    height: 98px;
+    background: transparent url(../img/hiscores/search_largeeccb.png?3) repeat-x;
+   }
+  .search_custom_large {
+   height: 130px;
+   background: transparent url(../img/hiscores/search_custom_largeeccb.png?3) repeat-x;
   }
-  #friends_search {
+   #friends_search {
    margin-bottom: 0px;
    padding: 0px;
   }