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 = [];
+/* © 2023 Entreprise SpaceTarders */
-                                          
+import { AgentBuilder } from "./agents.js"
 // ------------------- 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;
 });
 }
 // ------------------- Get Agent -------------------
@ -39,73 +16,20 @@ function sortAgentByCredits(a1, a2) {
  return 0  
 }
-var meta = null
+function sortAgentByShips(a1, a2) {
-function listAgent(page, limit = 20, totalPg = 1){
+  if(a1.shipCount < a2.shipCount)
-  const settings = {
+    return -1
-    async: true,
+  if(a1.shipCount > a2.shipCount)
-    crossDomain: true,
+    return 1
-    url: 'https://api.spacetraders.io/v2/agents',
+  return 0  
    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 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
  })
 });