2020-12-09 14:35:42 +01:00
|
|
|
let page = 0;
|
2020-12-09 16:10:01 +01:00
|
|
|
let currentSkillId = "";
|
2020-12-09 14:29:40 +01:00
|
|
|
|
2020-12-09 15:20:58 +01:00
|
|
|
const apiURL = "http://localhost:3000";
|
2020-12-09 16:10:01 +01:00
|
|
|
const sName = [
|
|
|
|
"Attack",
|
|
|
|
"Defence",
|
|
|
|
"Strength",
|
|
|
|
"Constitution",
|
|
|
|
"Ranged",
|
|
|
|
"Prayer",
|
|
|
|
"Magic",
|
|
|
|
"Cooking",
|
|
|
|
"Woodcutting",
|
|
|
|
"Fletching",
|
|
|
|
"Fishing",
|
|
|
|
"Firemaking",
|
|
|
|
"Crafting",
|
|
|
|
"Smithing",
|
|
|
|
"Mining",
|
|
|
|
"Herblore",
|
|
|
|
"Agility",
|
|
|
|
"Thieving",
|
|
|
|
"Slayer",
|
|
|
|
"Farming",
|
|
|
|
"Runecrafting",
|
|
|
|
"Hunter",
|
|
|
|
"Construction",
|
|
|
|
"Summoning"
|
|
|
|
]
|
2020-12-09 15:20:58 +01:00
|
|
|
|
|
|
|
let tableData = [];
|
|
|
|
|
2020-12-09 15:50:18 +01:00
|
|
|
function loadDefaultHSTable() {
|
|
|
|
fetch(`${apiURL}/highscores/getPlayersByTotal`)
|
|
|
|
.then(response => response.json())
|
|
|
|
.then(result => {
|
|
|
|
console.log(result[0]);
|
|
|
|
tableData = result;
|
|
|
|
populateDefaultHSTable();
|
|
|
|
})
|
|
|
|
.catch(error => console.log('error', error));
|
|
|
|
}
|
2020-12-09 15:20:58 +01:00
|
|
|
|
|
|
|
function populateDefaultHSTable() {
|
2020-12-09 15:50:18 +01:00
|
|
|
for (let i = 1; i <= 24; i++) {
|
2020-12-09 14:35:42 +01:00
|
|
|
row = document.getElementsByClassName(`row row${i}`)[0];
|
2020-12-09 15:50:18 +01:00
|
|
|
const playerData = tableData[i + 24 * page - 1];
|
2020-12-09 15:20:58 +01:00
|
|
|
|
|
|
|
row.childNodes[1].replaceWith(document.createElement("td"));
|
|
|
|
row.childNodes[1].className = "rankCol";
|
2020-12-09 15:50:18 +01:00
|
|
|
row.childNodes[1].innerHTML = i + 24 * page;
|
2020-12-09 15:20:58 +01:00
|
|
|
|
|
|
|
row.childNodes[3].replaceWith(document.createElement("td"));
|
|
|
|
row.childNodes[3].className = "alL";
|
|
|
|
row.childNodes[3].innerHTML = `<a href="./hiscores.html">${playerData ? playerData.username : ""}</a>`;
|
|
|
|
row.childNodes[3].addEventListener("click", function (e) {
|
|
|
|
e.preventDefault();
|
|
|
|
loadUserTable(playerData.username);
|
|
|
|
});
|
|
|
|
|
|
|
|
row.childNodes[5].replaceWith(document.createElement("td"));
|
|
|
|
row.childNodes[5].className = "alL";
|
|
|
|
row.childNodes[5].innerHTML = playerData ? playerData.level : "";
|
|
|
|
|
|
|
|
row.childNodes[7].replaceWith(document.createElement("td"));
|
|
|
|
row.childNodes[7].className = "alL";
|
|
|
|
row.childNodes[7].innerHTML = playerData ? Math.floor(playerData.xp).toLocaleString() : "";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function loadUserTable(username) {
|
2020-12-09 15:50:18 +01:00
|
|
|
fetch(`${apiURL}/highscores/playerSkills/${username.toLowerCase()}`)
|
2020-12-09 15:20:58 +01:00
|
|
|
.then(response => response.json())
|
|
|
|
.then(result => {
|
2020-12-09 15:50:18 +01:00
|
|
|
document.getElementById('search_name').style.color = 'black';
|
2020-12-09 15:20:58 +01:00
|
|
|
console.log(result[0]);
|
|
|
|
tableData = result;
|
|
|
|
populatePlayerHSTable();
|
|
|
|
})
|
2020-12-09 15:50:18 +01:00
|
|
|
.catch(error => {
|
|
|
|
document.getElementById('search_name').style.color = 'red';
|
|
|
|
console.log('error', error)
|
|
|
|
});
|
2020-12-09 15:20:58 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
function populatePlayerHSTable() {
|
2020-12-09 15:50:18 +01:00
|
|
|
for (let i = 1; i <= 24; i++) {
|
2020-12-09 15:20:58 +01:00
|
|
|
row = document.getElementsByClassName(`row row${i}`)[0];
|
|
|
|
|
|
|
|
row.childNodes[1].replaceWith(document.createElement("td"));
|
|
|
|
row.childNodes[1].className = "rankCol";
|
2020-12-09 15:50:18 +01:00
|
|
|
row.childNodes[1].innerHTML = "0";
|
2020-12-09 14:29:40 +01:00
|
|
|
|
2020-12-09 14:35:42 +01:00
|
|
|
row.childNodes[3].replaceWith(document.createElement("td"));
|
|
|
|
row.childNodes[3].className = "alL";
|
2020-12-09 16:15:30 +01:00
|
|
|
row.childNodes[3].innerHTML = `<a href="./hiscores.html">${sName[i - 1]}</a>`;
|
|
|
|
row.childNodes[3].addEventListener("click", e => {
|
|
|
|
e.preventDefault();
|
|
|
|
loadSkillTable(i - 1);
|
|
|
|
})
|
2020-12-09 14:29:40 +01:00
|
|
|
|
2020-12-09 14:35:42 +01:00
|
|
|
row.childNodes[5].replaceWith(document.createElement("td"));
|
|
|
|
row.childNodes[5].className = "alL";
|
2020-12-09 15:50:18 +01:00
|
|
|
row.childNodes[5].innerHTML = tableData[i - 1].static;
|
2020-12-09 14:35:42 +01:00
|
|
|
|
|
|
|
row.childNodes[7].replaceWith(document.createElement("td"));
|
|
|
|
row.childNodes[7].className = "alL";
|
2020-12-09 15:50:18 +01:00
|
|
|
row.childNodes[7].innerHTML = Math.floor(tableData[i - 1].experience).toLocaleString();
|
2020-12-09 14:35:42 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-12-09 16:10:01 +01:00
|
|
|
function loadSkillTable(skillId) {
|
|
|
|
fetch(`${apiURL}/highscores/playersBySkill/${skillId}`)
|
|
|
|
.then(response => response.json())
|
|
|
|
.then(result => {
|
|
|
|
console.log(result[0]);
|
|
|
|
tableData = result;
|
|
|
|
currentSkillId = skillId;
|
|
|
|
populateSkillHSTable();
|
|
|
|
})
|
|
|
|
.catch(error => console.log('error', error));
|
|
|
|
}
|
|
|
|
|
|
|
|
function populateSkillHSTable() {
|
|
|
|
document.getElementById("scores_head_skill").innerText = sName[currentSkillId];
|
|
|
|
document.getElementById("scores_head_icon").src = `../../site/img/hiscores/skill_icon_${sName[currentSkillId].toLowerCase()}1eccb.gif`;
|
2020-12-09 16:15:30 +01:00
|
|
|
|
2020-12-09 16:10:01 +01:00
|
|
|
for (let i = 1; i <= 24; i++) {
|
|
|
|
row = document.getElementsByClassName(`row row${i}`)[0];
|
|
|
|
const playerData = tableData[i + 24 * page - 1];
|
|
|
|
|
|
|
|
row.childNodes[1].replaceWith(document.createElement("td"));
|
|
|
|
row.childNodes[1].className = "rankCol";
|
|
|
|
row.childNodes[1].innerHTML = i + 24 * page;
|
|
|
|
|
|
|
|
row.childNodes[3].replaceWith(document.createElement("td"));
|
|
|
|
row.childNodes[3].className = "alL";
|
|
|
|
row.childNodes[3].innerHTML = `<a href="./hiscores.html">${playerData ? playerData.username : ""}</a>`;
|
|
|
|
row.childNodes[3].addEventListener("click", function (e) {
|
|
|
|
e.preventDefault();
|
|
|
|
loadUserTable(playerData.username);
|
|
|
|
});
|
|
|
|
|
|
|
|
row.childNodes[5].replaceWith(document.createElement("td"));
|
|
|
|
row.childNodes[5].className = "alL";
|
|
|
|
row.childNodes[5].innerHTML = playerData ? playerData.level : "";
|
|
|
|
|
|
|
|
row.childNodes[7].replaceWith(document.createElement("td"));
|
|
|
|
row.childNodes[7].className = "alL";
|
|
|
|
row.childNodes[7].innerHTML = playerData ? Math.floor(playerData.xp).toLocaleString() : "";
|
|
|
|
}
|
|
|
|
}
|
2020-12-09 14:35:42 +01:00
|
|
|
|
|
|
|
// Handle page arrows
|
|
|
|
document.getElementById("button-up").addEventListener("click", function (e) {
|
|
|
|
e.preventDefault();
|
|
|
|
if (page > 0) {
|
|
|
|
page--;
|
|
|
|
}
|
2020-12-09 15:20:58 +01:00
|
|
|
populateDefaultHSTable();
|
2020-12-09 14:35:42 +01:00
|
|
|
});
|
|
|
|
document.getElementById("button-down").addEventListener("click", function (e) {
|
|
|
|
e.preventDefault();
|
|
|
|
page++;
|
2020-12-09 15:20:58 +01:00
|
|
|
populateDefaultHSTable();
|
2020-12-09 14:35:42 +01:00
|
|
|
});
|
|
|
|
|
2020-12-09 15:50:18 +01:00
|
|
|
// Handle text field buttons
|
|
|
|
document.getElementById("search_button").addEventListener("click", function (e) {
|
|
|
|
e.preventDefault();
|
|
|
|
if (document.getElementById('search_name').value) {
|
|
|
|
loadUserTable(document.getElementById('search_name').value)
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
loadDefaultHSTable();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2020-12-09 16:10:01 +01:00
|
|
|
// Handle Skill Names
|
|
|
|
sName.forEach((skill, index) => {
|
|
|
|
row = document.getElementsByClassName(` ${skill} ico`)[0].addEventListener("click", function (e) {
|
|
|
|
e.preventDefault();
|
|
|
|
console.log(skill, index);
|
|
|
|
loadSkillTable(index);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
2020-12-09 15:50:18 +01:00
|
|
|
loadDefaultHSTable();
|