diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..8feb55a
--- /dev/null
+++ 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);
+}
\ No newline at end of file
diff --git a/fonts/m42.TTF b/fonts/m42.TTF
new file mode 100644
index 0000000..3609477
Binary files /dev/null and b/fonts/m42.TTF differ
diff --git a/index.html b/index.html
index a94f17a..3da9da9 100644
--- a/index.html
+++ b/index.html
@@ -4,12 +4,21 @@
+
+
+
+
+
rank
+
name
+
credits
+
headquaters
+
faction
+
-
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 4fec37c..5877c3d 100644
--- 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(`
- ${agent.credits}
- ${agent.symbol}
- ${agent.headquarters}
- ${agent.startingFaction}
- ${agent.shipCount}
+
+ ${i}.
+ ${agent.symbol} :
+ ${agent.credits}
+ ${agent.headquarters}
+ ${agent.startingFaction}
+