Fixing Listing requests : not fixed, Rendering Leaderboard : done

ago%!(EXTRA string=1 year) · 80589ba76a
parent 8962158b46
commit 80589ba76a
4 changed files with 105 additions and 14 deletions
--- a/css/style.css
+++ b/css/style.css
@ -0,0 +1,68 @@
+@font-face {
+    font-family: M42;
+    src: url(/fonts/m42.TTF);
+}
+*{
+    font-family: M42;
+    font-size: 10px;
+}
+.head-board {
+    display: flex;
+    margin:auto;
+    justify-content: space-between;
+    flex-direction: row;
+    width: 50%;
+    border: 2px solid black;
+    border-bottom-color: white;
+    border-bottom-width: 1px;
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    background-color: black;
+
+}
+
+.leaderboard {
+    display: flex;
+    margin: auto;
+    align-items: center;
+    flex-direction: column;
+    width: 50%;
+    height: 50vh;
+    overflow-y: scroll;
+    border: 2px solid black;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+    background-color: black;
+    scrollbar-width: none;  /* Firefox */
+}
+article{
+    width: 99.9%;
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid rgb(255, 255, 255);
+}
+p{
+    padding: 5px;
+    text-align: start;
+}
+.num{
+    font-size: larger;
+    color: rgb(255, 255, 255);
+}
+.faction{
+    color:rgb(0, 255, 115);
+}
+.headquarters{
+    color:rgb(86, 187, 255);
+}
+.symbol{
+    color:red;
+    text-decoration: underline;
+}
+.credits{
+    color: rgb(250, 204, 88);
+}
--- a/fonts/m42.TTF
+++ b/fonts/m42.TTF
--- a/index.html
+++ b/index.html
@ -4,12 +4,21 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="/css/style.css">
+    <link rel="preconnect" href="fonts\m42.TTF"> 
    <script src="js/main.js" defer></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
 </header>
 <body>
+    <button class="btn-test">Get Leaderboard</button>
+    <div class="head-board">
+        <p class="num">rank</p>
+        <p class="symbol">name</p>
+        <p class="credits">credits</p>
+        <p class="headquarters">headquaters</p>
+        <p class="faction">faction</p>
+    </div>
    <div class="leaderboard">
   
-    <button class="btn-test"></button>
    </div>
 </body>
--- a/js/main.js
+++ b/js/main.js
@ -40,7 +40,7 @@ function sortAgentByCredits(a1, a2) {
 }

 var meta = null
-function listAgent(page, limit = 20){
+function listAgent(page, limit = 20, totalPg = 1){
  const settings = {
    async: true,
    crossDomain: true,
@ -56,16 +56,26 @@ function listAgent(page, limit = 20){
    success: function(response) {
      meta = response.meta
      agents = agents.concat(response.data);
+      console.log(agents)
      console.log("Actioni")
-      if (response.meta.page == page) drawAgents();
-      else setTimeout(10000, listAgent(page, limit));
+      console.log(meta)
+      
+      if (response.meta.page == totalPg) drawAgents();
+      else {  
+      page++
+      sleep(10000, page);
+      }
+    },
+    error: function(response) {
+      drawAgents();
    }
  };
  $.ajax(settings);
 }

-function sleep(ms) {
-  return new Promise(resolve => setTimeout(resolve, ms));
+function sleep(ms, page) {
+  console.log(page, "Page Sleep :")
+  return new Promise(() => setTimeout(listAgent(page), ms));
 }

 async function getAllAgents() {
@ -83,9 +93,8 @@ async function getAllAgents() {
      limit: limit
    },
    success: function(response) {
-      meta = response.meta
-      const total = Math.ceil(meta.total / limit);
-      listAgent(1, limit)
+      const totalPg = Math.ceil(response.meta.total / limit);
+      listAgent(1, limit, totalPg)
    }
  };
  $.ajax(settings);
@ -95,14 +104,19 @@ function drawAgents() {
  $(".leaderboard").html("");
  agents.sort(sortAgentByCredits);
  agents.reverse();
+  let i = 1;
  agents.forEach(agent => {
    $(".leaderboard").append(`
-    <p>${agent.credits}</p>
-    <p>${agent.symbol}</p>
-    <p>${agent.headquarters}</p>
-    <p>${agent.startingFaction}</p>
-    <p>${agent.shipCount}</p>
+    <article>
+      <p class="elem num">${i}.</p>
+      <p class="elem symbol">${agent.symbol} : </p>
+      <p class="elem credits">${agent.credits}</p>
+      <p class="elem headquarters">${agent.headquarters}</p>
+      <p class="elem faction">${agent.startingFaction}</p>
+      <p class="elem ships>${agent.shipCount}</p>
+    </article>
    `);
+    i++
  });
 }