diff --git a/css/style.css b/css/style.css index 8feb55a..e4272aa 100644 --- 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,7 +39,11 @@ 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%; display: flex; @@ -65,4 +70,33 @@ 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 */ } \ No newline at end of file diff --git a/favicon.png b/favicon.png new file mode 100644 index 0000000..1adbd69 Binary files /dev/null and b/favicon.png differ diff --git a/index.html b/index.html index 3da9da9..f5389ba 100644 --- a/index.html +++ b/index.html @@ -5,20 +5,24 @@ - - + - + +

rank

name

credits

headquaters

faction

+

ships

- +
+ + +
\ No newline at end of file diff --git a/js/agents.js b/js/agents.js new file mode 100644 index 0000000..ff89ec1 --- /dev/null +++ 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); + } + } +} \ No newline at end of file diff --git a/js/config.js b/js/config.js new file mode 100644 index 0000000..7108252 --- /dev/null +++ b/js/config.js @@ -0,0 +1,3 @@ +export const SpaceTraders = { + host: "https://api.spacetraders.io/v2/" +} \ No newline at end of file diff --git a/js/main.js b/js/main.js index 5877c3d..d1c899b 100644 --- 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(`

${i}.

@@ -113,7 +37,7 @@ function drawAgents() {

${agent.credits}

${agent.headquarters}

${agent.startingFaction}

-

${agent.shipCount}

`); 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 + }) }); \ No newline at end of file