Fixed Ranking and UI

assets/css/stars.css

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

assets/css/style.css

@@ -0,0 +1,338 @@
+html {
+  --black: #21252a;
+  --grey-1: #343A40;
+  --grey-2: #495057;
+  --grey-3: #868E96;
+  --grey-4: #ADB5BD;
+  --grey-5: #CED4DA;
+  --grey-6: #DEE2E6;
+  --grey-7: #E9ECEF;
+  --grey-8: #F1F3F5;
+  --grey-9: #F8F9FA;
+  --trans-black: rgba(33, 37, 42, .9);
+  --red: #e10600;
+  --gold: #ffda65;
+  --gold-dark: #a3862c;
+  --bronze: #c99355;
+  --bronze-dark: #80582c;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  font-family: "Inter UI", system-ui;
+  color: var(--black);
+  background: var(--black);
+}
+
+.list {
+  width: 100%;
+  max-width: 600px;
+  margin: 3rem auto 3rem;
+  border-radius: 0.4rem;
+  box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.1), 0px 5px 12px rgba(0, 0, 0, 0.07);
+}
+
+@media screen and (max-width: 800px) {
+  .list {
+    margin: 0 auto;
+  }
+}
+
+.list__table {
+  width: 100%;
+  border-spacing: 0;
+  color: var(--grey-3);
+  border:none;
+}
+
+body {
+  padding-bottom: 40px;
+}
+
+.list__header {
+  padding: 2rem 2rem;
+  background: white;
+  border-top-left-radius: 0.4rem;
+  border-top-right-radius: 0.4rem;
+}
+
+.list__header h1,
+.list__header h5 {
+  margin: 0;
+  padding: 0;
+}
+
+.list__header h5 {
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+  color: var(--red);
+}
+
+.list__footer {
+  padding: 1rem 1rem;
+  background: white;
+  text-align: center;
+  border-bottom-left-radius: 0.4rem;
+  border-bottom-right-radius: 0.4rem;
+}
+
+.list__value {
+  display: block;
+  font-size: 17px;
+}
+
+.wrapper {
+  padding-bottom: 30px;
+}
+
+.list__label {
+  font-size: 10px;
+  opacity: 0.6;
+}
+
+.list__row {
+  background: var(--grey-7);
+  cursor: pointer;
+  transition: all 300ms ease;
+}
+
+.list__row:hover,
+.list__row:focus {
+  transform: scale(1.05);
+  /* box-shadow: 0px 15px 28px rgba(0, 0, 0, 0.1), 0px 5px 12px rgba(0, 0, 0, 0.08); */
+  transition: all 0.1s ease;
+}
+
+.list__row:not(:last-of-type) .list__cell {
+  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.08);
+}
+
+.first-place {
+  color: var(--gold-dark);
+  background: var(--grey-9);
+}
+
+.first-place .list__cell:first-of-type {
+  background: var(--gold);
+  color: var(--gold-dark);
+}
+
+.second-place {
+  color: var(--grey-2);
+  background: var(--grey-9);
+}
+
+.second-place .list__cell:first-of-type {
+  background: var(--grey-4);
+  color: var(--grey-2);
+}
+
+.third-place {
+  color: var(--bronze-dark);
+  background: var(--grey-9);
+}
+
+.third-place .list__cell:first-of-type {
+  background: var(--bronze);
+  color: var(--bronze-dark);
+}
+
+.list__cell {
+  padding: 1rem;
+}
+
+.list__cell:first-of-type {
+  text-align: center;
+  padding: 1rem 0.2rem;
+  background: var(--grey-5);
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--trans-black);
+  display: none;
+  cursor: pointer;
+  transition: all 300ms ease;
+}
+
+.overlay.is-open {
+  display: block;
+}
+
+.sidebar {
+  position: fixed;
+  background: white;
+  width: 100%;
+  max-width: 500px;
+  top: 0;
+  bottom: 0;
+  box-shadow: none;
+  right: -500px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  /*@media screen and (max-width: 650px) {
+        flex-direction: column-reverse;
+        justify-content: space-between;
+    }*/
+  transition: all 300ms ease;
+}
+
+.sidebar.is-open {
+  right: 0;
+  transition: all 300ms ease;
+  box-shadow: 0px 0px 100px var(--black);
+}
+
+.sidebar__header {
+  display: flex;
+  justify-content: space-between;
+  background: var(--grey-9);
+  align-items: center;
+}
+
+.sidebar__header,
+.sidebar__body {
+  padding: 2rem;
+}
+
+.sidebar__title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--grey-4);
+}
+
+.button {
+  font-family: inherit;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.button:focus,
+.button:active {
+  outline: 0;
+}
+
+.button--close {
+  padding: 0;
+  margin: 0;
+  height: auto;
+  line-height: 1;
+  color: var(--grey-5);
+}
+
+.button--close:hover {
+  color: var(--grey--4);
+}
+
+.driver {
+  display: flex;
+  align-items: flex-start;
+  opacity: 0;
+  position: relative;
+  left: 100px;
+  -webkit-animation: fade 500ms ease 150ms forwards;
+  animation: fade 500ms ease 150ms forwards;
+}
+
+.driver__image {
+  width: 150px;
+  height: 100px;
+  border-radius: 50%;
+  background-size: 85px;
+  background-repeat: no-repeat;
+  background-position: center;
+  border: 3px solid white;
+  /* box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.12); */
+  margin-right: 1.5rem;
+}
+
+.driver__content {
+  width: auto;
+}
+
+.driver__title {
+  font-weight: 700;
+  font-size: 1.6rem;
+  margin: 0.5rem 0;
+}
+
+.driver__table {
+  width: 100%;
+  color: var(--grey-2);
+}
+
+.driver__table small {
+  color: var(--grey-4);
+}
+
+.driver__table td {
+  padding: 0.3rem 0.6rem 0.3rem 0;
+  height: 2rem;
+}
+
+.driver__table td img {
+  position: relative;
+  top: 5px;
+  margin-right: 6px;
+}
+
+@-webkit-keyframes fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+    left: 0;
+  }
+}
+
+@keyframes fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+    left: 0;
+  }
+}
+
+.activity-badge{
+  width: 35px;
+  background: lightgray;
+  padding: 5px;
+  border-radius: 10px;
+  filter: invert(1);
+}
+
+.caps{
+  font-variant: petite-caps;
+    font-weight: bold;
+}
+
+.a-no-link{
+  text-decoration: none;
+  color: initial;
+}

assets/js/leaderboard.js

@@ -31,50 +31,56 @@ tableRow.forEach(tableRow => {
     const sidebarBody = document.querySelector(".sidebar__body");
     sidebarBody.innerHTML = '';
 
-    const driverPlace = this.querySelector(".list__cell:nth-of-type(1) .list__value").innerHTML;
+    const ninjaName = this.querySelector(".list__cell:nth-of-type(2) .list__value").innerHTML;
-    const driverName = this.querySelector(".list__cell:nth-of-type(2) .list__value").innerHTML;
+    const ninjaBelt = this.querySelector(".list__cell:nth-of-type(4) .list__value").innerHTML;
-    const driverTeam = this.querySelector(".list__cell:nth-of-type(3) .list__value").innerHTML;
+    const ninjaLevel = this.querySelector(".list__cell:nth-of-type(5) .list__value").innerHTML;
-    const driverPoints = this.querySelector(".list__cell:nth-of-type(4) .list__value").innerHTML;
+    const ninjaPicture = this.dataset.image;
-    const driverImage = this.dataset.image;
     const ninjaActivity = this.dataset.activity;
-    const driverDOB = this.dataset.dob;
+    const ninjaActivityImg = this.dataset.country;
-    const driverCountry = this.dataset.country;
 
-    const newDriver = document.createElement('div');
+    const newNinja = document.createElement('div');
-    newDriver.classList = 'driver';
+    newNinja.classList = 'driver';
 
-    const driverContent = document.createElement('div');
+    const ninjaContent = document.createElement('div');
-    driverContent.classList = 'driver__content';
+    ninjaContent.classList = 'driver__content';
 
     const profile = document.createElement('div');
     profile.classList = 'driver__image';
-    profile.style.backgroundImage = `url('${driverImage}')`;
+    profile.style.backgroundImage = `url('/assets/img/belts/${ninjaBelt}.png')`;
-    newDriver.appendChild(profile);
+    newNinja.appendChild(profile);
 
-    const driverTitle = document.createElement('div');
+    const ninjaTitle = document.createElement('div');
-    driverTitle.classList = 'driver__title';
+    ninjaTitle.classList = 'driver__title';
-    driverTitle.innerHTML = driverName;
+    ninjaTitle.innerHTML = ninjaName;
-    driverContent.appendChild(driverTitle);
+    ninjaContent.appendChild(ninjaTitle);
 
-    const driverInfo = document.createElement('div');
+    activityNames = {
-    driverInfo.innerHTML = `
+      'Build 1':'build',
+      'Build 2':'build',
+      'Quest':'project',
+      'Explore':'explore',
+      'Adventure':'solve'
+    }
+
+    const ninjaInfo = document.createElement('div');
+    ninjaInfo.innerHTML = `
 		<table class="driver__table">
 			<tbody>
 				<tr>
 					<td><small>Belt</small></td>
-					<td>${driverTeam}</td>
+					<td class="caps">${ninjaBelt}</td>
 				</tr>
                 <tr>
 					<td><small>Level</small></td>
-					<td>${driverPoints}</td>
+					<td class="caps">${ninjaLevel}</td>
 				</tr>
                 <tr>
 					<td><small>Activity</small></td>
-					<td><img src="https://www.countryflags.io/${driverCountry}/shiny/24.png">${ninjaActivity}</td>
+					<td><img class="activity-badge" src="/assets/img/activity/${activityNames[ninjaActivity]}.png"><span>${ninjaActivity}</span></td>
 				</tr>
 				<tr>
 					<td><small>Score</small></td>
-					<td>${this.dataset.score} </td>
+					<td class="caps">${this.dataset.score} </td>
 				</tr>
         <tr>
 					<td><small>Latest Update</small></td>
@@ -83,10 +89,10 @@ tableRow.forEach(tableRow => {
 				
 			</tbody>
 		</table>`;
-    driverContent.appendChild(driverInfo);
+    ninjaContent.appendChild(ninjaInfo);
 
-    newDriver.appendChild(driverContent);
+    newNinja.appendChild(ninjaContent);
-    sidebarBody.appendChild(newDriver);
+    sidebarBody.appendChild(newNinja);
 
   });
 });

assets/js/script.js

@@ -0,0 +1,53 @@
+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 = 0;
+
+    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'
+    }
+
+    const places = ['first','second','third'];
+
+    var prev_score = -1;
+    ninjas.forEach(ninja => {
+      if(ninja.Score!=prev_score){
+        // Increment only if prev score changes
+        count+=1
+      }
+      tr = document.createElement('tr');
+      if(count <= 3){
+        tr.classList.add(places[count-1]+'-place');
+        console.log(count, places[count-1]);
+      }
+      tr.innerHTML = `<td class="list__cell caps"><span class="list__value">${count}</span></td>
+      <td class="list__cell caps"><span class="list__value">${ninja.Ninja}</span><small class="list__label">Ninja</small></td>
+      <td class="list__cell caps" style="text-align:center"><img style="width:50px;" src="/assets/img/belts/${ninja.Belt}.png"></td>
+      <td class="list__cell caps"><span class="list__value">${ninja.Belt}</span><small class="list__label">Belt</small></td>
+      <td class="list__cell caps"><span class="list__value">${ninja.Level}</span><small class="list__label">Level</small></td>
+      `;
+      // 
+      tr.classList.add('list__row')
+      tr.dataset.image = `/assets/img/ninja-default.png`;
+      tr.dataset.activity = ninja.Activity;
+      tr.dataset.score = ninja.Score;
+      
+      tr.dataset.remark = ninja.Remark;
+      // count+=1;
+      tab.appendChild(tr);
+      prev_score = ninja.Score;
+    });
+
+    formatTable()
+  }

assets/script.js

@@ -1,41 +0,0 @@
-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()
-  }

assets/style.css

@@ -1,280 +0,0 @@
-html {
-    --black:	#21252a;
-    --grey-1: #343A40;
-    --grey-2: #495057;
-    --grey-3: #868E96;
-    --grey-4: #ADB5BD;
-    --grey-5: #CED4DA;
-    --grey-6: #DEE2E6;
-    --grey-7: #E9ECEF;
-    --grey-8: #F1F3F5;
-    --grey-9: #F8F9FA;
-    --trans-black: rgba(33, 37, 42, .9);
-    --red: #e10600;
-    --gold: #ffda65;
-    --gold-dark: #a3862c;
-    --bronze: #c99355;
-    --bronze-dark: #80582c;
-  }
-  
-  html {
-    box-sizing: border-box;
-  }
-  
-  *, *:before, *:after {
-    box-sizing: inherit;
-  }
-  
-  html, body {
-    width: 100%;
-    height: 100%;
-  }
-  
-  body {
-    font-family: "Inter UI", system-ui;
-    color: var(--black);
-    background: var(--black);
-  }
-  
-  .list {
-    width: 100%;
-    max-width: 600px;
-    margin: 3rem auto 3rem;
-    border-radius: 0.4rem;
-    box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.1), 0px 5px 12px rgba(0, 0, 0, 0.07);
-  }
-  @media screen and (max-width: 800px) {
-    .list {
-      margin: 0 auto;
-    }
-  }
-  .list__table {
-    width: 100%;
-    border-spacing: 0;
-    color: var(--grey-3);
-  }
-
-  body{
-    padding-bottom: 40px;
-  }
-
-  .list__header {
-    padding: 2rem 2rem;
-    background: white;
-    border-top-left-radius: 0.4rem;
-    border-top-right-radius: 0.4rem;
-  }
-  .list__header h1, .list__header h5 {
-    margin: 0;
-    padding: 0;
-  }
-  .list__header h5 {
-    margin-bottom: 0.5rem;
-    text-transform: uppercase;
-    color: var(--red);
-  }
-
-  .list__footer{
-    padding: 1rem 1rem;
-    background: white;
-    text-align: center;
-    border-bottom-left-radius: 0.4rem;
-    border-bottom-right-radius: 0.4rem;
-  }
-
-  .list__value {
-    display: block;
-    font-size: 17px;
-  }
-
-  .wrapper{
-    padding-bottom: 30px;
-  }
-
-  .list__label {
-    font-size: 10px;
-    opacity: 0.6;
-  }
-  .list__row {
-    background: var(--grey-7);
-    cursor: pointer;
-    transition: all 300ms ease;
-  }
-  .list__row:hover, .list__row:focus {
-    transform: scale(1.05);
-    box-shadow: 0px 15px 28px rgba(0, 0, 0, 0.1), 0px 5px 12px rgba(0, 0, 0, 0.08);
-    transition: all 300ms ease;
-  }
-  .list__row:not(:last-of-type) .list__cell {
-    box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.08);
-  }
-  .list__row:first-of-type {
-    color: var(--gold-dark);
-    background: var(--grey-9);
-  }
-  .list__row:first-of-type .list__cell:first-of-type {
-    background: var(--gold);
-    color: var(--gold-dark);
-  }
-  .list__row:nth-of-type(2) {
-    color: var(--grey-2);
-    background: var(--grey-9);
-  }
-  .list__row:nth-of-type(2) .list__cell:first-of-type {
-    background: var(--grey-4);
-    color: var(--grey-2);
-  }
-  .list__row:nth-of-type(3) {
-    color: var(--bronze-dark);
-    background: var(--grey-9);
-  }
-  .list__row:nth-of-type(3) .list__cell:first-of-type {
-    background: var(--bronze);
-    color: var(--bronze-dark);
-  }
-  .list__cell {
-    padding: 1rem;
-  }
-  .list__cell:first-of-type {
-    text-align: center;
-    padding: 1rem 0.2rem;
-    background: var(--grey-5);
-  }
-  
-  .overlay {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: var(--trans-black);
-    display: none;
-    cursor: pointer;
-    transition: all 300ms ease;
-  }
-  .overlay.is-open {
-    display: block;
-  }
-  
-  .sidebar {
-    position: fixed;
-    background: white;
-    width: 100%;
-    max-width: 500px;
-    top: 0;
-    bottom: 0;
-    box-shadow: none;
-    right: -500px;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    /*@media screen and (max-width: 650px) {
-        flex-direction: column-reverse;
-        justify-content: space-between;
-    }*/
-    transition: all 300ms ease;
-  }
-  .sidebar.is-open {
-    right: 0;
-    transition: all 300ms ease;
-    box-shadow: 0px 0px 100px var(--black);
-  }
-  .sidebar__header {
-    display: flex;
-    justify-content: space-between;
-    background: var(--grey-9);
-    align-items: center;
-  }
-  .sidebar__header, .sidebar__body {
-    padding: 2rem;
-  }
-  .sidebar__title {
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--grey-4);
-  }
-  
-  .button {
-    font-family: inherit;
-    border: 0;
-    background: transparent;
-    cursor: pointer;
-  }
-  .button:focus, .button:active {
-    outline: 0;
-  }
-  .button--close {
-    padding: 0;
-    margin: 0;
-    height: auto;
-    line-height: 1;
-    color: var(--grey-5);
-  }
-  .button--close:hover {
-    color: var(--grey--4);
-  }
-  
-  .driver {
-    display: flex;
-    align-items: flex-start;
-    opacity: 0;
-    position: relative;
-    left: 100px;
-    -webkit-animation: fade 500ms ease 150ms forwards;
-            animation: fade 500ms ease 150ms forwards;
-  }
-  .driver__image {
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-    /* background-size: 220px; */
-    background-repeat: no-repeat;
-    background-position: center;
-    border: 3px solid white;
-    box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.12);
-    margin-right: 1.5rem;
-  }
-  .driver__content {
-    width: auto;
-  }
-  .driver__title {
-    font-weight: 700;
-    font-size: 1.6rem;
-    margin: 0.5rem 0;
-  }
-  .driver__table {
-    width: 100%;
-    color: var(--grey-2);
-  }
-  .driver__table small {
-    color: var(--grey-4);
-  }
-  .driver__table td {
-    padding: 0.3rem 0.6rem 0.3rem 0;
-    height: 2rem;
-  }
-  .driver__table td img {
-    position: relative;
-    top: 5px;
-    margin-right: 6px;
-  }
-  
-  @-webkit-keyframes fade {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-      left: 0;
-    }
-  }
-  
-  @keyframes fade {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-      left: 0;
-    }
-  }

index.html

@@ -6,18 +6,20 @@
     <!-- <meta http-equiv="refresh" content="10"> -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Code Ninjas Langley | Leaderboard</title>
+    <link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon">
     <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/css/style.css">
-    <link rel="stylesheet" href="/assets/stars.css">
+    <link rel="stylesheet" href="/assets/css/stars.css">
 </head>
 <body>
     
 <div class="wrapper">
     <div class="list">
-      <div class="list__header">
+      <div class="list__header" style="text-align: center;">
-        <h5>Code Ninjas Langley</h5>
+        <h5 style="color: brown;" class="caps"><a href="https://codeninjaslangley.co.uk" class="a-no-link" target="_blank">Code Ninjas Langley</a></h5>
-        <h1><b>IMPACT</b> <span style="font-variant-caps:small-caps">leaderboard</span></h1>
+        <img src="/assets/img/impact.png" style="width: 400;height: 90px;" alt="">
+        <h2 style="font-variant-caps:small-caps; margin: 0px;">leaderboard</h2>
       </div>
       <div class="list__body">
         <table class="list__table" id="leaderboard_table">
@@ -146,7 +148,7 @@
   <div class="overlay"></div>
   <div class="sidebar">
     <div class="sidebar__header">
-      <div class="sidebar__title">Ninja Information</div>
+      <div class="sidebar__title">Ninja Stats</div>
       <button class="button button--close">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
           <circle cx="12" cy="12" r="10"></circle>
@@ -159,8 +161,8 @@
   </div>
 
 
-  <script src="assets/papaparse.min.js"></script>
+  <script src="assets/js/papaparse.min.js"></script>
-  <script src="assets/leaderboard.js"></script>
+  <script src="assets/js/leaderboard.js"></script>
-  <script src="assets/script.js"></script>
+  <script src="assets/js/script.js"></script>
 </body>
 </html>