Big shoutout to dmikester1 for sharing a LeaderBoard code that leverages Javascript data to organize players by their points.
The current implementation involves using the same image for each player's profile, but I have a vision to customize the pictures for each player individually...
You can see the code in action on JSFiddle
Here is the breakdown:
Javascript:
// array to store profile objects
let profiles = [];
let profile1 = {};
profile1.name = "Jim Bob";
profile1.points = 1500;
profiles.push(profile1);
let profile2 = {};
profile2.name = "Jane Smith";
profile2.points = 1600;
profiles.push(profile2);
let profile3 = {};
profile3.name = "Mike Jones";
profile3.points = 400;
profiles.push(profile3);
let profile4 = {};
profile4.name = "Sally Peterson";
profile4.points = 1900;
profiles.push(profile4);
// sorting the array based on points
profiles.sort(function(a, b) {
return b.points-a.points;
})
let profilesDiv = document.getElementsByClassName('profiles')[0];
let count = 1;
profiles.forEach(function(entry) {
let img = document.createElement('img');
img.className = "profilePic";
img.src = "https://placeimg.com/50/50/people"; // replace with dynamic images
let profile = document.createElement('div');
profile.className = "profile";
profile.innerHTML = "<div class='name'>"+ entry.name + "</div>";
let points = document.createElement('span');
points.className = "points";
points.textContent = entry.points;
profile.appendChild(points);
profile.prepend(img);
var span = document.createElement("span");
span.textContent = count + '. ';
span.className = "count";
profile.prepend(span);
profilesDiv.appendChild(profile);
count++;
});
CSS:
.profile {
border: 2px solid #555555;
padding: 10px;
margin: 5px;
width: 30%;
height: 50px;
line-height: 50px;
}
.profile img, .profile .name {
float: left;
margin-right: 20px;
}
.profile .count {
float: left;
margin-right: 5px;
}
.profile img {
border-radius: 50%;
box-shadow: .6rem .5rem 1rem rgba(0, 0, 0, .5);
}
.points {
float: right;
}
HTML:
<div class="profiles">
</div>