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

This commit is contained in:
dginovker 2020-12-09 18:52:05 -05:00
parent 44e52371d7
commit 2a08d37582
5 changed files with 61 additions and 27 deletions

View File

@ -73,8 +73,8 @@ hiscores.initalizeRightsideButtons = () => {
document.getElementById("search_rank_submit").addEventListener("click", function (e) { document.getElementById("search_rank_submit").addEventListener("click", function (e) {
e.preventDefault(); e.preventDefault();
if (document.getElementById('search_rank').value) { if (document.getElementById('search_rank').value) {
hiscores.loadUserTable(defaultTableData[document.getElementById('search_rank').value - 1].username) hiscores.loadUserTable(hiscores.defaultTableData[document.getElementById('search_rank').value - 1].username)
hiscores.setHeadSkillText(defaultTableData[document.getElementById('search_rank').value - 1].username + "'s "); hiscores.setHeadSkillText(hiscores.defaultTableData[document.getElementById('search_rank').value - 1].username + "'s ");
} }
else { else {
hiscores.loadDefaultHSTable(); 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.replaceAll("_", " ");
name = name.replace(/(^\w|\s\w)/g, match => match.toUpperCase()); // Capitalize first letter of each word name = name.replace(/(^\w|\s\w)/g, match => match.toUpperCase()); // Capitalize first letter of each word
if (aposS) { 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) => { hiscores.setHeadSkillIcon = (icon) => {
@ -105,7 +113,7 @@ hiscores.setHeadSkillIcon = (icon) => {
} }
hiscores.setHeadSkillText = (text) => { hiscores.setHeadSkillText = (text) => {
document.getElementById("scores_head_skill").innerText = text; document.getElementById("scores_head_skill").innerHTML = text;
} }
hiscores.getIronIcon = (ironStatus) => { hiscores.getIronIcon = (ironStatus) => {
@ -122,4 +130,4 @@ hiscores.getIronIcon = (ironStatus) => {
default: default:
return ""; return "";
} }
} }

View File

@ -155,7 +155,7 @@ English
<div class="navigation"> <div class="navigation">
<div class="location"> <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 Hiscores
</div> </div>
</div> </div>
@ -614,24 +614,33 @@ English
<input id="search_rank_submit" type="submit" name="submit" class="buttonmedium" value="Search"> <input id="search_rank_submit" type="submit" name="submit" class="buttonmedium" value="Search">
</form> </form>
</div> </div>
<div class="subsectionHeader search_title">Compare Users</div> <div class="subsectionHeader search_title">Filter (Coming Soon)</div>
<div class="search_large"> <div class="search_large">
<form action="http://services/m=hiscore/compare.ws" method="post" class="no_margin"> <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_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 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> </form>
</div> </div>
<div class="subsectionHeader search_title">Friends Hiscores</div> <div class="subsectionHeader search_title">Legend</div>
<div class="search_large" id="friends_search"> <div class="search_custom_large" id="friends_search">
<div class="friendsContent"> <div class="friendsContent" style="padding-top: 8px;">
To view personal<br> <img src="../../site/img/osrsimg/ironman.png" style="height: 11px;"> Ironman
hiscores and compare<br> <br>
yourself to your friends<br> <img src="../../site/img/osrsimg/ultimateironman.png" style="height: 11px"> Ultimate Ironman
<form action="http://services/m=hiscore/hiscorefriends_all.ws?category_type=0" method="POST" <br>
class="no_margin"> <img src="../../site/img/osrsimg/hcim.png" style="height: 11px"> Hardcore Ironman
<input id="search_friends" type="submit" name="action" class="buttonmedium" value="Log In"> <br>
</form> <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> </div>
</div> </div>

View File

@ -22,7 +22,7 @@ hiscores.populateDefaultHSTable = () => {
row.childNodes[3].replaceWith(document.createElement("td")); row.childNodes[3].replaceWith(document.createElement("td"));
row.childNodes[3].className = "alL"; 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) { row.childNodes[3].addEventListener("click", function (e) {
e.preventDefault(); e.preventDefault();
hiscores.loadUserTable(playerData.username); hiscores.loadUserTable(playerData.username);
@ -46,7 +46,7 @@ hiscores.loadUserTable = (username) => {
hiscores.tableData = result.skills; hiscores.tableData = result.skills;
hiscores.tableInfo = result.info; hiscores.tableInfo = result.info;
hiscores.populatePlayerHSTable(); hiscores.populatePlayerHSTable();
hiscores.setHeadSkillText(hiscores.formatName(username, true)); hiscores.setHeadSkillText(hiscores.formatName(username, 0, result.info.exp_multiplier, true));
}) })
.catch(error => { .catch(error => {
document.getElementById('search_name').style.color = 'red'; document.getElementById('search_name').style.color = 'red';
@ -55,7 +55,20 @@ hiscores.loadUserTable = (username) => {
} }
hiscores.populatePlayerHSTable = () => { 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++) { for (let i = 1; i <= 24; i++) {
row = document.getElementsByClassName(`row row${i}`)[0]; row = document.getElementsByClassName(`row row${i}`)[0];
@ -106,7 +119,7 @@ hiscores.populateSkillHSTable = () => {
row.childNodes[3].replaceWith(document.createElement("td")); row.childNodes[3].replaceWith(document.createElement("td"));
row.childNodes[3].className = "alL"; 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) { row.childNodes[3].addEventListener("click", function (e) {
e.preventDefault(); e.preventDefault();
hiscores.loadUserTable(playerData.username); hiscores.loadUserTable(playerData.username);

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 601 B