Merge pull request #172 from Vyomrana02/main

Adding leaderboard using api as said in issue #170
ChromeGaming · May 24, 2024 · ac4e754 · ac4e754
2 parents 2bfabca + 6a2f0c3
commit ac4e754
Show file tree

Hide file tree

Showing 2 changed files with 166 additions and 62 deletions.
diff --git a/index.html b/index.html
@@ -273,7 +273,10 @@ <h2>Top 50 Contributors Leaderboard</h2>
             <div class="ranking-table-header-data h6">GitHub</div>
             <div class="ranking-table-header-data h6">Progress</div>
           </div>
-          <div class="ranking-table-row-leader-1">
+          <div class="top3" id="top3">
+
+          </div>
+          <!-- <div class="ranking-table-row-leader-1">
             <div class="ranking-table-data-leader-1">
               <div class="medal-gold"></div>
             </div>
@@ -299,9 +302,9 @@ <h2>Top 50 Contributors Leaderboard</h2>
             <div class="ranking-table-data">
               <div class="complete"></div>
             </div>
-          </div>
-          <div class="ranking-table-body">
-            <div class="ranking-table-row">
+          </div>  -->
+          <div class="ranking-table-body" id="rankingTableBody">
+            <!-- <div class="ranking-table-row">
               <div class="ranking-table-data">4</div>
               <div class="ranking-table-data">Joseph R</div>
               <div class="ranking-table-data">
@@ -629,7 +632,7 @@ <h2>Top 50 Contributors Leaderboard</h2>
               <div class="ranking-table-data">
                 <div class="complete"></div>
               </div>
-            </div>
+            </div> -->
           </div>
         </div>
         <!--Use Date Formatter-->

diff --git a/script.js b/script.js
@@ -1,55 +1,156 @@
-const data = [
-  { place: 1, name: "Steven A" },
-  { place: 2, name: "Raghav M" },
-  { place: 3, name: "Ryan Z" },
-  { place: 4, name: "Joseph R" },
-  { place: 5, name: "Muwaffaq I" },
-  { place: 6, name: "Joshua L" },
-  { place: 7, name: "Nick M" },
-  { place: 8, name: "Ravindra R" },
-  { place: 9, name: "Ricardo M" },
-  { place: 10, name: "Shubham R" },
-  { place: 11, name: "Flavio S" },
-  { place: 12, name: "Igor S" },
-  { place: 13, name: "Mycah H" },
-  { place: 14, name: "hemant d" },
-  { place: 15, name: "Santhosh S" },
-  { place: 16, name: "Joseph D" },
-  { place: 17, name: "Kevin C" },
-  { place: 18, name: "yasser m" },
-  { place: 19, name: "Miguel Ángel M" },
-  { place: 20, name: "Peter K" },
-  { place: 21, name: "Atikur R" },
-  { place: 22, name: "Matthew Y" },
-  { place: 23, name: "Anwar S" },
-  { place: 24, name: "Jake Y" },
-  { place: 25, name: "Lokesh R" },
-  { place: 26, name: "Christopher P" },
-  { place: 27, name: "Mingxin O" },
-  { place: 28, name: "August E" },
-  { place: 29, name: "Samsruti D" },
-  { place: 30, name: "Harsh V" },
-  { place: 31, name: "Keenan P" },
-  { place: 32, name: "Rouz A" },
-  { place: 33, name: "Ron R" },
-  { place: 34, name: "Sean O" },
-  { place: 35, name: "Michael D" },
-  { place: 36, name: "Devishree R" },
-  { place: 37, name: "Ali R" },
-  { place: 38, name: "Alvin A" },
-  { place: 39, name: "Arthur N" },
-  { place: 40, name: "Choulhyouc L" },
-  { place: 41, name: "Zeeshan H" },
-  { place: 42, name: "Goran Đ" },
-  { place: 43, name: "sovannarong k" },
-  { place: 44, name: "Luke M" },
-  { place: 45, name: "Chenzhe X" },
-  { place: 46, name: "Jae Hee L" },
-  { place: 47, name: "Jason P" },
-  { place: 48, name: "Sebastiano D" },
-  { place: 49, name: "Julia S" },
-  { place: 50, name: "Sana" },
-];
+// const data = [
+//   { place: 1, name: "Steven A" },
+//   { place: 2, name: "Raghav M" },
+//   { place: 3, name: "Ryan Z" },
+//   { place: 4, name: "Joseph R" },
+//   { place: 5, name: "Muwaffaq I" },
+//   { place: 6, name: "Joshua L" },
+//   { place: 7, name: "Nick M" },
+//   { place: 8, name: "Ravindra R" },
+//   { place: 9, name: "Ricardo M" },
+//   { place: 10, name: "Shubham R" },
+//   { place: 11, name: "Flavio S" },
+//   { place: 12, name: "Igor S" },
+//   { place: 13, name: "Mycah H" },
+//   { place: 14, name: "hemant d" },
+//   { place: 15, name: "Santhosh S" },
+//   { place: 16, name: "Joseph D" },
+//   { place: 17, name: "Kevin C" },
+//   { place: 18, name: "yasser m" },
+//   { place: 19, name: "Miguel Ángel M" },
+//   { place: 20, name: "Peter K" },
+//   { place: 21, name: "Atikur R" },
+//   { place: 22, name: "Matthew Y" },
+//   { place: 23, name: "Anwar S" },
+//   { place: 24, name: "Jake Y" },
+//   { place: 25, name: "Lokesh R" },
+//   { place: 26, name: "Christopher P" },
+//   { place: 27, name: "Mingxin O" },
+//   { place: 28, name: "August E" },
+//   { place: 29, name: "Samsruti D" },
+//   { place: 30, name: "Harsh V" },
+//   { place: 31, name: "Keenan P" },
+//   { place: 32, name: "Rouz A" },
+//   { place: 33, name: "Ron R" },
+//   { place: 34, name: "Sean O" },
+//   { place: 35, name: "Michael D" },
+//   { place: 36, name: "Devishree R" },
+//   { place: 37, name: "Ali R" },
+//   { place: 38, name: "Alvin A" },
+//   { place: 39, name: "Arthur N" },
+//   { place: 40, name: "Choulhyouc L" },
+//   { place: 41, name: "Zeeshan H" },
+//   { place: 42, name: "Goran Đ" },
+//   { place: 43, name: "sovannarong k" },
+//   { place: 44, name: "Luke M" },
+//   { place: 45, name: "Chenzhe X" },
+//   { place: 46, name: "Jae Hee L" },
+//   { place: 47, name: "Jason P" },
+//   { place: 48, name: "Sebastiano D" },
+//   { place: 49, name: "Julia S" },
+//   { place: 50, name: "Sana" },
+// ];
+
+function compare(a, b) {
+  if (a.contributions < b.contributions) {
+    return 1;
+  }
+  if (a.contributions > b.contributions) {
+    return -1;
+  }
+  return 0;
+}
+async function getContributors(repoName, page = 1) {
+  let request = await fetch(`https://api.github.com/repos/GameSphere-MultiPlayer/Community-Page/contributors?page=1&anon=true`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    }
+  });
+
+
+
+  // print data from the fetch on screen
+  let contributorsList = await request.json();
+  contributorsList.sort(compare);
+  var data = []
+  var size = contributorsList.length
+  for (var i = 0; i < size; i++) {
+    data.push({ place: i + 1, name: (contributorsList[i].login==undefined)? contributorsList[i].name : contributorsList[i].login});
+  }
+  console.log(data)
+
+  return data;
+};
+
+var medals = ['medal-gold', 'medal-silver', 'medal-bronze']
+window.onload = async function () {
+  const data = await getContributors("Community-Page")
+
+  console.log(data.length)
+  var i = 0;
+  data.forEach(item => {
+    if (i > 2) {
+      const rankingTable = document.getElementById('rankingTableBody');
+      const row = document.createElement('div');
+      row.className = 'ranking-table-row';
+
+      const placeCell = document.createElement('div');
+      placeCell.className = 'ranking-table-data';
+      placeCell.textContent = item.place;
+
+      const nameCell = document.createElement('div');
+      nameCell.className = 'ranking-table-data';
+      nameCell.textContent = item.name;
+
+      const completeCell = document.createElement('div');
+      completeCell.className = 'ranking-table-data';
+
+      const completeIndicator = document.createElement('div');
+      completeIndicator.className = 'complete';
+      completeCell.appendChild(completeIndicator);
+
+      row.appendChild(placeCell);
+      row.appendChild(nameCell);
+      row.appendChild(completeCell);
+
+      rankingTable.appendChild(row);
+    } else {
+      const rankingTable = document.getElementById("top3")
+      const row = document.createElement('div');
+      row.className = 'ranking-table-row-leader-' + (i + 1);
+
+      const placeCell = document.createElement('div');
+      placeCell.className = 'ranking-table-data-leader-' + (i + 1);
+
+      const medalcell = document.createElement('div')
+      console.log(medals[i])
+      medalcell.className = medals[i];
+
+      placeCell.appendChild(medalcell);
+
+      const nameCell = document.createElement('div');
+      nameCell.className = 'ranking-table-data';
+      nameCell.textContent = item.name;
+
+      const completeCell = document.createElement('div');
+      completeCell.className = 'ranking-table-data';
+
+      const completeIndicator = document.createElement('div');
+      completeIndicator.className = 'complete';
+      completeCell.appendChild(completeIndicator);
+
+      row.appendChild(placeCell);
+      row.appendChild(nameCell);
+      row.appendChild(completeCell);
+
+      rankingTable.appendChild(row);
+    }
+    i++;
+  });
+  console.log("RUNNED")
+}
+
 const nav = document.querySelector(".nav"),
   searchIcon = document.querySelector("#searchIcon"),
   navOpenBtn = document.querySelector(".navOpenBtn"),
@@ -68,7 +169,7 @@ searchResult.addEventListener("input", () => {
     );
     console.log(result)
     resultContainer.innerHTML = "";
-    if (result.length !== 0){
+    if (result.length !== 0) {
       result.forEach((item, index) => {
         const div = document.createElement("div");
         const p = document.createElement("p");
@@ -80,7 +181,7 @@ searchResult.addEventListener("input", () => {
         resultContainer.appendChild(div);
       });
     }
-    else{
+    else {
       resultContainer.style.display = "none";
     }
   }
@@ -114,12 +215,12 @@ toggleButton.addEventListener("click", () => {
     toggleButton.classList.remove("bi-toggle-off");
     toggleButton.classList.add("bi-toggle-on");
     document.getElementById("menuBarsColor").style.color = "black";
-    document.querySelectorAll("a").forEach((link)=>link.style.color = "black");
-    } else {
+    document.querySelectorAll("a").forEach((link) => link.style.color = "black");
+  } else {
     toggleButton.classList.remove("bi-toggle-on");
     toggleButton.classList.add("bi-toggle-off");
     document.getElementById("menuBarsColor").style.color = "white";
-    document.querySelectorAll("a").forEach((link)=>link.style.color = "white");
+    document.querySelectorAll("a").forEach((link) => link.style.color = "white");
   }
 });