From e9c9cc6702be5e297a2c6c4e2738e2b037141734 Mon Sep 17 00:00:00 2001
From: elvistony <elvistonyrency@gmail.com>
Date: Sat, 16 Sep 2023 07:16:16 +0100
Subject: [PATCH] Fixed sizing issue and ranking color issue

---
 assets/leaderboard.js |  8 ++++++--
 assets/script.js      | 41 +++++++++++++++++++++++++++++++++++++++++
 assets/stars.css      |  2 +-
 assets/style.css      |  2 +-
 index.html            | 43 ++++---------------------------------------
 5 files changed, 53 insertions(+), 43 deletions(-)
 create mode 100644 assets/script.js

diff --git a/assets/leaderboard.js b/assets/leaderboard.js
index 5830b66..ef7b59a 100644
--- a/assets/leaderboard.js
+++ b/assets/leaderboard.js
@@ -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>
diff --git a/assets/script.js b/assets/script.js
new file mode 100644
index 0000000..68c1e95
--- /dev/null
+++ b/assets/script.js
@@ -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()
+  }
\ No newline at end of file
diff --git a/assets/stars.css b/assets/stars.css
index 2476de7..0d8f42d 100644
--- a/assets/stars.css
+++ b/assets/stars.css
@@ -11,7 +11,7 @@ html, body {
     margin: 0; 
 }
 body {
-    background: steelblue;
+    background: rgb(20, 50, 74);
 }
 
 .rating {
diff --git a/assets/style.css b/assets/style.css
index 72c2b7d..9cb7bcd 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -26,7 +26,7 @@ html {
   }
   
   html, body {
-    width: 99%;
+    width: 100%;
     height: 100%;
   }
   
diff --git a/index.html b/index.html
index e600ec2..27a3b42 100644
--- a/index.html
+++ b/index.html
@@ -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>
\ No newline at end of file