Implemented new code (SkamaCode) and almost finished fixing differences

LICENSE

@@ -1,2 +1,2 @@
 DO NOT USE THIS CODE OR LOOK AT IT IF YOU ARE NOT ALLOWED TO
-IF YOU DO YOU CAN USE OR TEACH THE KNOWLEAGE YOU ACQUEIRED.
+IF YOU DO YOU CAN USE OR TEACH THE KNOWLEDGE YOU ACQUIRED.

README.md

@@ -1,7 +1,7 @@
 # Skamcraft
 
 ## Start 
-* Start with live server in VsCode to get full functionnality.
+* Start with Live Server in VSCode to get full functionnality.
 * Start with php : 
 ``` bash
     cd /.../Skamcraft
@@ -10,6 +10,6 @@
 
 ## Norm
 * ``` ; ``` at the end of each line.
-* snack_case for functions and variables.
+* snake_case for functions and variables.
 * UpperCamelCase for Classes.
-* all in english.
+* Whole project in English.

css/leaderboard.css

@@ -0,0 +1,140 @@
+* {
+    font-family: M42;
+    font-size: 10px;
+}
+
+.deploy-bar {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin: auto;
+    margin-top: 40px;
+}
+
+.btn-deploy {
+    margin: auto;
+    color: white;
+    background-color: black;
+    border-radius: 10px 10px 0px 0px;
+    width: 70%;
+}
+
+.container-ldb {
+    margin: auto;
+    width: 100%;
+}
+
+.head-board {
+    display: flex;
+    margin: auto;
+    justify-content: space-between;
+    width: 70%;
+    border: 0px solid black;
+    border-top-color: white;
+    border-bottom-color: white;
+    border-bottom-width: 1px;
+
+    background-color: black;
+
+}
+
+.leaderboard {
+    display: flex;
+    margin: auto;
+    align-items: center;
+    flex-direction: column;
+    width: 70%;
+    height: 50vh;
+    overflow-y: scroll;
+    overflow-x: visible;
+
+    background-color: black;
+    scrollbar-width: none;
+    /* Firefox */
+    -ms-overflow-style: none;
+}
+
+.leaderboard::-webkit-scrollbar {
+    width: 0 !important
+}
+
+article {
+    width: 100%;
+    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);
+}
+
+.ships {
+    color: rgb(146, 146, 146);
+}
+
+.btn-cont {
+    margin: auto;
+    display: flex;
+    justify-content: space-between;
+    width: 70%;
+}
+
+button:hover {
+    transition: ease-in-out;
+    color: black;
+    transition-duration: 0.3s;
+    background-color: white;
+}
+
+button {
+    padding: 15px;
+}
+
+.btn-cred {
+    background-color: black;
+    color: rgb(250, 204, 88);
+    width: 50%;
+    font-size: 11px;
+    border-left-color: black;
+    border: 3px none none 3px;
+    border-bottom: none;
+    border-top-color: white;
+    border-radius: 0px 0px 0px 10px;
+}
+
+.btn-ship {
+    background-color: black;
+    color: rgb(86, 187, 255);
+    width: 50%;
+    font-size: 11px;
+    border: 3px none none 3px;
+    border-bottom: none;
+    border-right-color: white;
+    border-left-color: black;
+    border-top-color: white;
+    border-radius: 0px 0px 10px 0px;
+}

html/template.html

@@ -5,6 +5,7 @@
   </div>
   <div class="stats"></div>
   <ul class="nav-links">
+    <li class="nav-link smooth" id="ldb-link">Leaderboard</li>
     <li class="nav-link smooth" id="systems-link">Systems</li>
     <li class="nav-link smooth" id="login-link">Log in</li>
     <li class="nav-link smooth" id="reg-link">New Agent</li>
@@ -12,5 +13,5 @@
 </nav>
 <main id="block-content"></main>
 <footer>
-  <p>Skamcraft Sarl</p>
+  <p>SkamKraft Sarl</p>
-</footer>
+</footer>

html/templates/auth/login_modal.html

@@ -4,6 +4,6 @@
     <p class="modal-title">Login success</p>
     <div>
         <button id="ok" class="btn btn-val">Continue</button>
-        <button id="forget_login" class="btn btn-cancel">Forget agent</button>
+        <button id="forget_login" class="btn btn-cancel">Forget Agent</button>
     </div>
-</div>
+</div>

html/templates/auth/reg_modal.html

@@ -5,6 +5,6 @@
     <p class="show-token"></p>
     <div>
         <button id="ok" class="btn btn-val">Continue</button>
-        <button id="forget_reg" class="btn btn-cancel">Forget agent</button>
+        <button id="forget_reg" class="btn btn-cancel">Forget Agent</button>
     </div>
-</div>
+</div>

html/templates/home.html

@@ -1,5 +1,5 @@
 <!-- Copyright © 2023 Entreprise SkamKraft -->
-<div class="container smooth"> 
+<div class="container smooth">
-    <p class="con-title">Bienvenue sur SkamCraft</p>
+    <p class="con-title">Welcome to SkamKraft</p>
-    <p class="con-content">Application client pour l'API Space Tarders.</p>
+    <p class="con-content">Web App for SpaceTraders API</p>
 </div>

html/templates/leaderboard.html

@@ -0,0 +1,22 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+<div class="deploy-bar">
+    <button class="btn-deploy">Click to deploy Leaderboard</button>
+    <div class="container-ldb">
+        <div class="head-board">
+            <p class="num">rank</p>
+            <p class="symbol">name</p>
+            <p class="credits">credits</p>
+            <p class="headquarters">headquarters</p>
+            <p class="faction">faction</p>
+            <p class="ships">ships</p>
+        </div>
+        <div class="leaderboard"></div>
+        <div>
+            <!--- leaderboard content -->
+        </div>
+        <div class="btn-cont">
+            <button class="btn-cred">Sort by credits</button>
+            <button class="btn-ship">Sort by ships</button>
+        </div>
+    </div>
+</div>

index.html

@@ -1,15 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
-    <title></title>
+<head>
-    <link rel="stylesheet" href="css/style.css">
+  <title></title>
-    <link rel="stylesheet" href="css/ui.css">
+  <link rel="stylesheet" href="css/style.css">
-    <link rel="stylesheet" href="css/animation.css">
+  <link rel="stylesheet" href="css/ui.css">
-    <script src="js/lib/fabric.js"></script>
+  <link rel="stylesheet" href="css/animation.css">
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>    
+  <link rel="stylesheet" href="css/leaderboard.css">
-    <script type="module" src="js/index.js" defer></script>
+  <script src="js/lib/fabric.js"></script>
-  </head>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
-  <body>
+  <script type="module" src="js/index.js" defer></script>
-
+</head>
-  </body>
+
-</html>
+<body>
+
+</body>
+
+</html>

js/controllers/leaderboard.js

@@ -0,0 +1,60 @@
+import menu_mod from "./menu_mod.js";
+import { AgentBuilder } from "../skama_code/api/agent.js";
+
+export default function ldb(temp_engine) {
+    temp_engine.after_render((temp_engine) => {
+        menu_mod(temp_engine);
+
+        AgentBuilder.list_all((agents) => {
+            $(".btn-cred").on("click", () => {
+                drawAgents(agents, sortAgentByCredits);
+            });
+
+            $(".btn-ship").on("click", () => {
+                drawAgents(agents, sortAgentByShips);
+            });
+        });
+        $('.container-ldb').hide()
+        $('.btn-deploy').on('click', () => {
+            $('.container-ldb').slideToggle()
+        })
+    });
+
+    temp_engine.render("templates/leaderboard.html");
+}
+
+function drawAgents(agents, funcSort) {
+    $(".leaderboard").html("");
+    agents.sort(funcSort);
+    agents.reverse();
+    let i = 1;
+    agents.forEach((agent) => {
+        $(".leaderboard").append(`
+      <article>
+        <p class="elem num">${i}.</p>
+        <p class="elem symbol">${agent.name} : </p>
+        <p class="elem credits">${agent.credits}</p>
+        <p class="elem headquarters">${agent.hq}</p>
+        <p class="elem faction">${agent.faction}</p>
+        <p class="elem ships">${agent.ships_cpt}</p>
+      </article>
+      `);
+        i++
+    });
+}
+
+function sortAgentByCredits(a1, a2) {
+    if (a1.credits < a2.credits)
+        return -1
+    if (a1.credits > a2.credits)
+        return 1
+    return 0
+}
+
+function sortAgentByShips(a1, a2) {
+    if (a1.shipCount < a2.shipCount)
+        return -1
+    if (a1.shipCount > a2.shipCount)
+        return 1
+    return 0
+}

js/controllers/menu_mod.js

@@ -1,10 +1,14 @@
 import { My } from "../skama_code/api/agent.js";
 import login from "./login.js";
+import ldb from "./leaderboard.js";
 import reg from "./reg.js";
 import home from "./home.js";
 import { systems } from "./systems.js";
 
 function init_menu(temp_engine) {
+    temp_engine.add_event("#ldb-link", "click", () => {
+        ldb(temp_engine);
+    });
     temp_engine.add_event("#reg-link", "click", () => {
         reg(temp_engine);
     });
@@ -38,7 +42,7 @@ function show_stats() {
 
 export default function menu_mod(temp_engine) {
     init_menu(temp_engine);
-    if(My.agent) {
+    if (My.agent) {
         show_stats();
         loged_links();
     }

js/skama_code

@@ -1 +1 @@
-Subproject commit 77c805654739b07aeecccb90ee53c9126ff158a0
+Subproject commit c8740bb9368f1f8ca43c36be64810cae54436eea