sacha t aime trop la bite

css/contracts.css

@@ -39,28 +39,7 @@
 .card-button{
   margin-top: 10px;
 }
-/* .btn-infos{
+
-  background-color: transparent;
-  border-color: rgb(0,255,0);
-  font-size: 15pt;
-  color:rgb(0,255,0);
-}
-.btn-accept{
-  background-color: transparent;
-  border-color: rgb(0,255,0);
-  font-size: 15pt;
-  color: rgb(0,255,0);
-}
-.btn-accept:hover{
-  transition: 0.2s;
-  color: rgb(208, 255, 0);
-  border-color: rgb(208, 255, 0);
-}
-.btn-infos:hover{
-  transition: 0.2s;
-  color: rgb(208, 255, 0);
-  border-color: rgb(208, 255, 0);
-} */
 .img
 {
   position: absolute;

css/global.css

@@ -89,6 +89,18 @@ select {
     position: absolute;
     font-size: 50px;
     margin-left: 50px;
+    background-color: rgba(0, 0, 0, 0.363);
+    border-radius: 5px;
+    width: fit-content;
+    padding: 10px;
+}
+
+.cont-center {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .title{

css/leaderboard.css

@@ -0,0 +1,53 @@
+.container-ldb {
+    width: 100%;
+}
+
+.head-board {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    margin: auto;
+    width: 60%;
+    padding: 20px;
+    font-size:x-large;
+    border: 0px solid black;
+    border-top-color: white;
+    border-bottom-color: white;
+    border-bottom-width: 1px;
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.leaderboard {
+    display: flex;
+    margin: auto;
+    align-items: center;
+    flex-direction: column;
+    width: 60%;
+    height: 50vh;
+    overflow-y: scroll;
+    overflow-x: visible;
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 20px;
+    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 5px;
+    scrollbar-width: none;
+}
+
+.leaderboard::-webkit-scrollbar {
+    width: 0 !important
+}
+
+.player {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    border-bottom: 1px solid rgb(255, 255, 255);
+}
+
+.player p {
+    padding: 5px;
+    color: white;
+    font-size: large;
+    text-align: start;
+}

css/modal-ships.css

@@ -7,7 +7,7 @@
     position: relative;
     margin: auto;
     padding: 40px;
-    color: yellow;
+    color: rgb(255, 255, 255);
 }
 
 .infos-ships {
@@ -15,6 +15,13 @@
     margin-bottom: 20px; /* Space below the info box */
 }
 
+.ship-info {
+    background-color: rgba(0, 0, 0, 0.363);
+    border-radius: 5px;
+    width: fit-content;
+    padding: 5px;
+}
+
 .btn-close-ships {
     position: absolute;
     font-size:x-large;
@@ -22,7 +29,7 @@
     left: 20px;
     background-color: rgba(255, 255, 255, 0.8); 
     border: none;
-    color: yellow;
+    color: rgb(252, 252, 252);
     padding: 10px 20px;
     cursor: pointer;
     border-radius: 5px;

css/ships.css

@@ -7,7 +7,6 @@
     font-size:large;
     text-align: center;
     margin: auto;
-    margin-top: 100px;
 }
 
 .ships-modal{
@@ -43,6 +42,11 @@
 }
 .ships-list h5 {
   font-size:xx-large;
+  background-color: rgba(0, 0, 0, 0.363);
+  border-radius: 5px;
+  width: fit-content;
+  padding: 10px;
+  margin:auto;
 }
 /* Position the "next button" to the right */
 .next {

html/templates/home.html

@@ -1,3 +1,3 @@
 <div>
-    <p class="Title">Home</p>
+    <p class="Title">HOME</p>
 </div>

html/templates/leaderboard/leaderboard.html

@@ -0,0 +1,18 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+<p class="Title">LEADERBOARD</p>
+<div class="cont-center">
+    <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>
+</div>

html/templates/ships/ships.html

@@ -1,5 +1,7 @@
-
+<p class="Title">SHIPS</p>
-<div class="block-ships">
+<div class="cont-center">
-  <a class="prev">❮</a>
+  <div class="block-ships">
-  <a class="next">❯</a>
+    <a class="prev">❮</a>
+    <a class="next">❯</a>
+  </div>
 </div>

index.html

@@ -14,6 +14,8 @@
     <link rel="stylesheet" href="css/contracts.css">
     <link rel="stylesheet" href="css/ships.css">
     <link rel="stylesheet" href="css/modal-ships.css">
+    <link rel="stylesheet" href="css/leaderboard.css">
+
   </head>
   <body>
 

js/controllers/leaderboard.js

@@ -0,0 +1,51 @@
+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) => {
+        $("body").css("background-image", "url('/assets/img/background.png')")
+        menu_mod(temp_engine);
+        let bagents = new AgentBuilder();
+        bagents.list_all((agents) => {
+            drawAgents(agents, sortAgentByCredits);
+        });
+    });
+
+    temp_engine.render("templates/leaderboard/leaderboard.html");
+}
+
+function drawAgents(agents, funcSort) {
+    $(".leaderboard").html("");
+    agents.sort(funcSort);
+    agents.reverse();
+    let i = 1;
+    agents.forEach((agent) => {
+        $(".leaderboard").append(`
+      <article class="player">
+        <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

@@ -2,6 +2,7 @@ import { My } from "../skama_code/commun/my.js";
 import profile from "./profile.js";
 import contracts from "./contracts.js";
 import ships from "./ships.js";
+import leaderboard from "./leaderboard.js";
 
 function loged_links(temp_engine) {
   $("#links").html(`
@@ -20,6 +21,9 @@ function loged_links(temp_engine) {
   temp_engine.add_event("#ships-link", "click", () => {
     ships(temp_engine);
   })
+  temp_engine.add_event("#leaderboard-link", "click", () => {
+    leaderboard(temp_engine);
+  })
 }
 
 export default (temp_engine) => {

js/controllers/ships.js

@@ -43,9 +43,9 @@ export default (temp_engine) => {
           if(ship.symbol==id_ship)
           {
             $(".infos-ships").html("");
-            $(".infos-ships").append(`<p>Name : ${ship.registration.name}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Name : ${ship.registration.name}</p>`);
-            $(".infos-ships").append(`<p>Faction : ${ship.registration.factionSymbol}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Faction : ${ship.registration.factionSymbol}</p>`);
-            $(".infos-ships").append(`<p>Role : ${ship.registration.role}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Role : ${ship.registration.role}</p>`);
           }
         })
         modal.show();
@@ -56,10 +56,10 @@ export default (temp_engine) => {
           if(ship.symbol==id_ship)
           {
             $(".infos-ships").html("");
-            $(".infos-ships").append(`<p>Current system : ${ship.nav.systemSymbol}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Current system : ${ship.nav.systemSymbol}</p>`);
-            $(".infos-ships").append(`<p>Current waypoint : ${ship.nav.waypointSymbol}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Current waypoint : ${ship.nav.waypointSymbol}</p>`);
-            $(".infos-ships").append(`<p>Current status : ${ship.nav.status}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Current status : ${ship.nav.status}</p>`);
-            $(".infos-ships").append(`<p>Flight mode : ${ship.nav.flightMode}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Flight mode : ${ship.nav.flightMode}</p>`);
           }
         })
         modal.show();
@@ -70,10 +70,10 @@ export default (temp_engine) => {
           if(ship.symbol==id_ship)
           {
             $(".infos-ships").html("");
-            $(".infos-ships").append(`<p>Current member : ${ship.crew.current}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Current member : ${ship.crew.current}</p>`);
-            $(".infos-ships").append(`<p>Capacity : ${ship.crew.capacity}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Capacity : ${ship.crew.capacity}</p>`);
-            $(".infos-ships").append(`<p>required member : ${ship.crew.required}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">required member : ${ship.crew.required}</p>`);
-            $(".infos-ships").append(`<p>Moral : ${ship.crew.morale}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Moral : ${ship.crew.morale}</p>`);
           }
         })
         modal.show();
@@ -84,12 +84,12 @@ export default (temp_engine) => {
           if(ship.symbol==id_ship)
           {
             $(".infos-ships").html("");
-            $(".infos-ships").append(`<p>Name : ${ship.frame.name}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Name : ${ship.frame.name}</p>`);
-            $(".infos-ships").append(`<p>Description : ${ship.frame.description}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Description : ${ship.frame.description}</p>`);
-            $(".infos-ships").append(`<p>Fuel capacity : ${ship.frame.fuelCapacity}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Fuel capacity : ${ship.frame.fuelCapacity}</p>`);
-            $(".infos-ships").append(`<p>Condition : ${ship.frame.condition}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Condition : ${ship.frame.condition}</p>`);
-            $(".infos-ships").append(`<p>Power : ${ship.frame.requirements.power}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Power : ${ship.frame.requirements.power}</p>`);
-            $(".infos-ships").append(`<p>Crew : ${ship.frame.requirements.crew}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Crew : ${ship.frame.requirements.crew}</p>`);
 
           }
         })
@@ -101,27 +101,11 @@ export default (temp_engine) => {
           if(ship.symbol==id_ship)
           {
             $(".infos-ships").html("");
-            $(".infos-ships").append(`<p>Name : ${ship.reactor.name}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Name : ${ship.reactor.name}</p>`);
-            $(".infos-ships").append(`<p>Description : ${ship.reactor.description}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Description : ${ship.reactor.description}</p>`);
-            $(".infos-ships").append(`<p>Condition : ${ship.reactor.condition}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Condition : ${ship.reactor.condition}</p>`);
-            $(".infos-ships").append(`<p>Power : ${ship.reactor.powerOutput}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Power : ${ship.reactor.powerOutput}</p>`);
-            $(".infos-ships").append(`<p>Crew : ${ship.reactor.requirements.crew}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Crew : ${ship.reactor.requirements.crew}</p>`);
-          }
-        })
-        modal.show();
-      });
-      temp_engine.add_event(".engine", "click", (e) => {
-        const id_ship = $(e.target).attr("data-symbol");
-        ships.forEach(ship =>{
-          if(ship.symbol==id_ship)
-          {
-            $(".infos-ships").html("");
-            $(".infos-ships").append(`<p>Name : ${ship.engine.name}</p>`);
-            $(".infos-ships").append(`<p>Description : ${ship.engine.description}</p>`);
-            $(".infos-ships").append(`<p>Condition : ${ship.engine.condition}</p>`);
-            $(".infos-ships").append(`<p>Speed : ${ship.engine.speed}</p>`);
-            $(".infos-ships").append(`<p>Crew : ${ship.engine.requirements.crew}</p>`);
-            $(".infos-ships").append(`<p>Power : ${ship.engine.requirements.power}</p>`);
           }
         })
         modal.show();
@@ -132,10 +116,10 @@ export default (temp_engine) => {
           if(ship.symbol==id_ship)
           {
             $(".infos-ships").html("");
-            $(".infos-ships").append(`<p>current fuel : ${ship.fuel.current}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">current fuel : ${ship.fuel.current}</p>`);
-            $(".infos-ships").append(`<p>Description : ${ship.fuel.capacity}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Description : ${ship.fuel.capacity}</p>`);
-            $(".infos-ships").append(`<p>Condition : ${ship.fuel.consumed.amount}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Condition : ${ship.fuel.consumed.amount}</p>`);
-            $(".infos-ships").append(`<p>Speed : ${ship.fuel.consumed.timestamp}</p>`);
+            $(".infos-ships").append(`<p class="ship-info">Speed : ${ship.fuel.consumed.timestamp}</p>`);
           }
         })
         modal.show();

js/skama_code

@@ -1 +1 @@
-Subproject commit 69a0cb7793bc81dbe53fdaf1a078d7a8d696bb7e
+Subproject commit ba1e1d88709df819706bd463de60a58105ac3830