almost finished leaderboard

ago%!(EXTRA string=2 years) · 3db46f2d25
parent 80589ba76a
commit 3db46f2d25
6 changed files with 174 additions and 95 deletions
--- a/css/style.css
+++ b/css/style.css
@ -11,7 +11,7 @@
    margin:auto;
    justify-content: space-between;
    flex-direction: row;
-    width: 50%;
+    width: 70%;
    border: 2px solid black;
    border-bottom-color: white;
    border-bottom-width: 1px;
@ -28,9 +28,10 @@
    margin: auto;
    align-items: center;
    flex-direction: column;
-    width: 50%;
+    width: 70%;
    height: 50vh;
    overflow-y: scroll;
+    overflow-x:visible;
    border: 2px solid black;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
@ -38,6 +39,10 @@
    border-top-right-radius: 0px;
    background-color: black;
    scrollbar-width: none;  /* Firefox */
+    -ms-overflow-style: none; 
+}
+.leaderboard::-webkit-scrollbar { 
+    width: 0 !important 
 }  
 article{
    width: 99.9%;
@ -66,3 +71,32 @@ p{
 .credits{
    color: rgb(250, 204, 88);
 }
+.ships{
+    color: rgb(146, 146, 146);
+}
+.buttons button{
+    position: absolute; /* Position them relative to the browser window */
+    left: 200px; /* Position them outside of the screen */
+    transition: 0.3s; /* Add transition on hover */
+    padding: 15px; /* 15px padding */
+    width: 300px; /* Set a specific width */
+    text-decoration: none; /* Remove underline */
+    font-size: 20px; /* Increase font size */
+    color: white; /* White text color */
+    border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
+}
+  
+.buttons button:hover{
+    left: 400px; /* On mouse-over, make the elements appear as they should */
+}
+  
+  /* The about link: 20px from the top with a green background */
+.btn-test{
+    top: 80px;
+    background-color: #04AA6D;
+}
+  
+.btn-test2{
+    top: 180px;
+    background-color: #2196F3; /* Blue */
+}
--- a/favicon.png
+++ b/favicon.png
--- a/index.html
+++ b/index.html
@ -5,20 +5,24 @@
    <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>
+    <script type="module" src="js/main.js" defer></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>
+        <p class="ships">ships</p>
    </div>
    <div class="leaderboard">
-   
+        <div class="buttons">
+            <button class="btn-test">Sort by credits</button>
+            <button class="btn-test2">Sort by ships</button>
+        </div>
    </div>
 </body>
--- a/js/agents.js
+++ b/js/agents.js
@ -0,0 +1,102 @@
+'use strict';
+import { SpaceTraders } from "./config.js"
+
+export class Agent {
+  constructor(agent, token = "") {
+    this.token = token;
+    this.name = agent.symbol;
+    this.credits = agent.credits;
+    this.faction = agent.startingFaction;
+    this.hq = agent.headquarters;
+    this.shipsCpt = agent.shipCount;   
+  }
+
+  get_agent_system() {
+    let metaSystem = this.hq.split("-");
+    return metaSystem[0] + "-" + metaSystem[1]; 
+  }
+}
+
+export class AgentBuilder {
+  static async create(symbol, faction, callback, email = "") {
+      const url = `${SpaceTraders.host}register`;
+      await $.ajax({
+        url: url,
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        processData: false,
+        data: `{\n  "faction": "${faction}",\n  "symbol": "${symbol}",\n  "email": "${email}"\n}`,
+        success: (reponse) => {
+          let agent = new Agent(reponse.data.agent, reponse.data.token)
+          callback(agent);
+        },
+      });
+  }
+
+  static async get(token, callback){
+    const url = `${SpaceTraders.host}my/agent`;
+    await $.ajax({
+        url: url,
+        method: "GET",
+        headers: {
+          Accept: "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        success: (reponse) => {
+          let agent = new Agent(reponse.data, token);
+          callback(agent);
+        },
+    });
+  }
+
+  static async get_public(symbol, callback) {
+    const url = `${SpaceTraders.host}agents/${symbol}`;
+    const headers = { Accept: "application/json" };
+    await $.ajax({
+      url: url,
+      method: "GET",
+      headers: headers,
+      success: (reponse) => {
+        let agent = new Agent(reponse.data);
+        callback(agent);
+      },
+    });
+  }
+
+  static async list(limit, page, callback, agents = []) {
+    const url = `${SpaceTraders.host}agents`;
+    const headers = { Accept: "application/json" };
+    const data = { limit, page };
+    await $.ajax({
+      url: url,
+      method: "GET",
+      headers: headers,
+      data: data,
+      success: (reponse) => {
+        reponse.data.forEach(agent => {
+          agents.push(agent);
+        });
+        callback(agents, reponse.meta);
+      },
+    });
+  }
+
+  static async list_all(callback) {
+    await this.list(1,1, (agents, meta) => {
+      let maxPage = meta.total / 20;
+      this.r_listing(1, maxPage, [], callback);
+    });
+  }
+
+  static async r_listing(page, maxPage, agents, callback) {
+    if (page < maxPage) {
+      this.list(20, page++,() => {
+        setTimeout(() => {
+          this.r_listing(page++, maxPage, agents, callback); 
+        }, 1000);
+      }, agents);
+    } else {
+      callback(agents);
+    }
+  }
+}
--- a/js/config.js
+++ b/js/config.js
@ -0,0 +1,3 @@
+export const SpaceTraders = {
+        host: "https://api.spacetraders.io/v2/"
+}
--- a/js/main.js
+++ b/js/main.js
@ -1,29 +1,6 @@
-/* © 2023 Entreprise SpaceTarders */
 'use strict'
-let agents = [];
-                                          
-// ------------------- Create Agent -------------------
-
-function createAgent(faction, symbol){
-  const data = {faction: faction, symbol: symbol}
-  const settings = {
-   async: true,
-   crossDomain: true,
-   url: 'https://api.spacetraders.io/v2/register',
-   method: 'POST',
-   headers: {
-     'Content-Type': 'application/json',
-     'Accept': 'application/json'
-   },
-   processData: false,
-   data: JSON.stringify(data)
- };
-  
- $.ajax(settings).done(function (response) {
-  console.log(response.data);
-   return response.data;
- });
-}
+/* © 2023 Entreprise SpaceTarders */
+import { AgentBuilder } from "./agents.js"
  

 // ------------------- Get Agent -------------------
@ -39,73 +16,20 @@ function sortAgentByCredits(a1, a2) {
  return 0  
 }

-var meta = null
-function listAgent(page, limit = 20, totalPg = 1){
-  const settings = {
-    async: true,
-    crossDomain: true,
-    url: 'https://api.spacetraders.io/v2/agents',
-    method: 'GET',
-    headers: {
-      Accept: 'application/json'
-    },
-    data : {
-      page: page,
-      limit: limit
-    },
-    success: function(response) {
-      meta = response.meta
-      agents = agents.concat(response.data);
-      console.log(agents)
-      console.log("Actioni")
-      console.log(meta)
-      
-      if (response.meta.page == totalPg) drawAgents();
-      else {  
-      page++
-      sleep(10000, page);
-      }
-    },
-    error: function(response) {
-      drawAgents();
-    }
-  };
-  $.ajax(settings);
-}
-
-function sleep(ms, page) {
-  console.log(page, "Page Sleep :")
-  return new Promise(() => setTimeout(listAgent(page), ms));
-}
-
-async function getAllAgents() {
-  const limit = 20
-  const settings = {
-    async: true,
-    crossDomain: true,
-    url: 'https://api.spacetraders.io/v2/agents',
-    method: 'GET',
-    headers: {
-      Accept: 'application/json'
-    },
-    data : {
-      page: 1,
-      limit: limit
-    },
-    success: function(response) {
-      const totalPg = Math.ceil(response.meta.total / limit);
-      listAgent(1, limit, totalPg)
-    }
-  };
-  $.ajax(settings);
+function sortAgentByShips(a1, a2) {
+  if(a1.shipCount < a2.shipCount)
+    return -1
+  if(a1.shipCount > a2.shipCount)
+    return 1
+  return 0  
 }

-function drawAgents() {
+function drawAgents(agents, funcSort) {
  $(".leaderboard").html("");
-  agents.sort(sortAgentByCredits);
+  agents.sort(funcSort);
  agents.reverse();
  let i = 1;
-  agents.forEach(agent => {
+  agents.forEach((agent) => {
    $(".leaderboard").append(`
    <article>
      <p class="elem num">${i}.</p>
@ -113,7 +37,7 @@ function drawAgents() {
      <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>
+      <p class="elem ships">${agent.shipCount}</p>
    </article>
    `);
    i++
@ -121,7 +45,19 @@ function drawAgents() {
 }

 $(document).ready(function() {
+  let state = false;
  $(".btn-test").on("click", () => {
-    getAllAgents();
+    if (!state) AgentBuilder.list_all((agents) => {
+        drawAgents(agents, sortAgentByCredits);
+        state = false;
+    });
+    state = true
+  });
+  $(".btn-test2").on("click", () => {
+    if (!state) AgentBuilder.list_all((agents) => {
+      drawAgents(agents, sortAgentByShips);
+      state = false;
  });
+  state = true
+  })
 });