codeninjasuk/leaderboard
1
0
Fork 0
mirror of https://github.com/codeninjasuk/leaderboard.git synced 2024-11-22 15:27:54 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixed sizing issue and ranking color issue

Browse source
This commit is contained in:
elvistony 2023-09-16 07:16:16 +01:00
parent f4c603fd38
commit e9c9cc6702
5 changed files with 53 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
assets/leaderboard.js
View file

@ -73,8 +73,12 @@ tableRow.forEach(tableRow => {
<td><img src="https://www.countryflags.io/${driverCountry}/shiny/24.png">${ninjaActivity}</td>
</tr>
<tr>
<td><small>Place</small></td>
<td>${driverPlace} </td>
<td><small>Score</small></td>
<td>${this.dataset.score} </td>
</tr>
<tr>
<td><small>Latest Update</small></td>
<td>${this.dataset.remark} </td>
</tr>
</tbody>

41
assets/script.js Normal file
View file

@ -0,0 +1,41 @@
getText("https://docs.google.com/spreadsheets/d/e/2PACX-1vSscQfV-TdME-3KWkPSr_o3FphomzJ7o-TcTmCzCtY-grKUIzpI6GV0piJBy_hU_VH6OOWrbjhmfI9j/pub?gid=892912605&single=true&output=csv");
var tab = document.getElementById('leaderboard_table')
async function getText(file) {
let myObject = await fetch(file);
let myText = await myObject.text();
let ninjas = Papa.parse(myText, {header:true}).data;
console.log(ninjas);
var count = 1;
var n = ninjas.sort(function(a, b) {
return b.Score - a.Score;
})
Gen={
'M':'m-ninja.png',
'F':'f-ninja.png',
'O':'o-ninja.png'
}
ninjas.forEach(ninja => {
tr = document.createElement('tr');
tr.innerHTML = `<td class="list__cell"><span class="list__value">${count}</span></td>
<td class="list__cell"><span class="list__value">${ninja.Ninja}</span><small class="list__label">Ninja</small></td>
<td class="list__cell"><span class="list__value">${ninja.Belt}</span><small class="list__label">Belt</small></td>
<td class="list__cell"><span class="list__value">${ninja.Level}</span><small class="list__label">Level</small></td>`
tr.classList.add('list__row')
tr.dataset.image = `/assets/${Gen[ninja.Gen]}`;
tr.dataset.activity = ninja.Activity;
tr.dataset.score = ninja.Score;
tr.dataset.remark = ninja.Remark;
// row = `<tr class="list__row" data-image="/assets/${Gen[ninja.Gen]}" data-activity="${ninja.Activity}" data-nationality="Swedish" data-dob="1990-09-02" data-country="se" data-remark="${ninja.Remarks}" data-score="${ninja.Score}">
// </tr>`;
count+=1;
tab.appendChild(tr);
});
formatTable()
}

2
assets/stars.css
View file

@ -11,7 +11,7 @@ html, body {
margin: 0;
}
body {
background: steelblue;
background: rgb(20, 50, 74);
}
.rating {

2
assets/style.css
View file

@ -26,7 +26,7 @@ html {
}
html, body {
width: 99%;
width: 100%;
height: 100%;
}

43
index.html
View file

@ -5,7 +5,9 @@
<meta charset="UTF-8">
<!-- <meta http-equiv="refresh" content="10"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>Code Ninjas Langley | Leaderboard</title>
<meta name="description" content="Check out the leaderboard to see where you rank amongst our leading ninjas!">
<meta name="keywords" content="Leaderboard , Code Ninjas, Langley, Showcase, Games, Coding, Slough, Langley, Code Ninjas Langley">
<link rel="stylesheet" href="/assets/style.css">
<link rel="stylesheet" href="/assets/stars.css">
</head>
@ -159,43 +161,6 @@
<script src="assets/papaparse.min.js"></script>
<script src="assets/leaderboard.js"></script>
<script>
getText("https://docs.google.com/spreadsheets/d/e/2PACX-1vSscQfV-TdME-3KWkPSr_o3FphomzJ7o-TcTmCzCtY-grKUIzpI6GV0piJBy_hU_VH6OOWrbjhmfI9j/pub?gid=892912605&single=true&output=csv");
var tab = document.getElementById('leaderboard_table')
async function getText(file) {
let myObject = await fetch(file);
let myText = await myObject.text();
let ninjas = Papa.parse(myText, {header:true}).data;
console.log(ninjas);
var count = 1;
var n = ninjas.sort(function(a, b) {
return b.Score - a.Score;
})
Gen={
'M':'m-ninja.png',
'F':'f-ninja.png',
'O':'o-ninja.png'
}
ninjas.forEach(ninja => {
row = `<tr class="list__row" data-image="/assets/${Gen[ninja.Gen]}" data-activity="${ninja.Activity}" data-nationality="Swedish" data-dob="1990-09-02" data-country="se" data-remark="${ninja.Activity}" data-score="${ninja.Score}">
<td class="list__cell"><span class="list__value">${count}</span></td>
<td class="list__cell"><span class="list__value">${ninja.Ninja}</span><small class="list__label">Ninja</small></td>
<td class="list__cell"><span class="list__value">${ninja.Belt}</span><small class="list__label">Belt</small></td>
<td class="list__cell"><span class="list__value">${ninja.Level}</span><small class="list__label">Level</small></td>
</tr>`;
count+=1;
tab.innerHTML+=row;
});
formatTable()
}
</script>
<script src="assets/script.js"></script>
</body>
</html>