From 9d83726ee5ed4abaf5741ae742edb9724fe358dc Mon Sep 17 00:00:00 2001
From: AmorimDSJM <AmorimDSJM@rpn.s2.ch>
Date: Fri, 12 Jan 2024 12:06:41 +0100
Subject: [PATCH] started updating leaderboard to implement it in main website

---
 css/style.css                   | 68 +++++++++++++++++++--------------
 html/templates/leaderboard.html | 21 ++++++++++
 index.html                      | 34 +++++++++--------
 js/main.js                      | 52 ++++++++++++++++---------
 4 files changed, 112 insertions(+), 63 deletions(-)
 create mode 100644 html/templates/leaderboard.html

diff --git a/css/style.css b/css/style.css
index 93600b8..c856a24 100644
--- a/css/style.css
+++ b/css/style.css
@@ -6,8 +6,21 @@
     font-family: M42;
     font-size: 10px;
 }
-
+.deploy-bar{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin: auto;
+}
+.btn-deploy{
+    margin: auto;
+    color: white;
+    background-color: black;
+    border-radius: 10px 10px 0px 0px;
+    width: 70%;
+}
 .container {
+    display: block;
     margin: auto;
     width: 70%;
 }
@@ -17,20 +30,13 @@
     margin: auto;
     justify-content: space-between;
     width: 100%;
-    border: 2px solid black;
+    border: 0px solid black;
+    border-top-color : white;
     border-bottom-color: white;
     border-bottom-width: 1px;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-    background-color: black;
 
-}
+    background-color: black;
 
-.btn-cont {
-    margin: auto;
-    display: flex;
-    justify-content: space-between;
-    width: 100.3%;
 }
 
 .leaderboard {
@@ -42,7 +48,6 @@
     height: 50vh;
     overflow-y: scroll;
     overflow-x:visible;
-    border: 2px solid black;
 
     background-color: black;
     scrollbar-width: none;  /* Firefox */
@@ -52,7 +57,7 @@
     width: 0 !important 
 }  
 article{
-    width: 99.9%;
+    width: 100%;
     display: flex;
     justify-content: space-between;
     border-bottom: 1px solid rgb(255, 255, 255);
@@ -81,37 +86,42 @@ p{
 .ships{
     color: rgb(146, 146, 146);
 }
-button{
+.btn-cont {
     margin: auto;
-    border: 3px none none 3px;
-    transition: 0.3s; /* Add transition on hover */
-    padding: 15px; /* 15px padding */
-    text-decoration: none; /* Remove underline */
-    font-size: 11px; /* Increase font size */
-    color: white; /* White text color */
-}
-  
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+} 
 button:hover{
     transition: ease-in-out;
     color: black;
     transition-duration: 0.3s;
     background-color: white;
-}  
-.btn-test{
+}
+button{
+    padding: 15px;
+} 
+.btn-cred{
     background-color: black;
     color: rgb(250, 204, 88);
     width: 50%;
-    border-left: none;
+    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-test2{
+.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: none;
-    border-left: none;
+    border-right-color: white;
+    border-left-color: black;
+    border-top-color: white;
     border-radius: 0px 0px 10px 0px;
-    width: 50%;
 }
\ No newline at end of file
diff --git a/html/templates/leaderboard.html b/html/templates/leaderboard.html
new file mode 100644
index 0000000..8b13131
--- /dev/null
+++ b/html/templates/leaderboard.html
@@ -0,0 +1,21 @@
+<div class="deploy-bar">
+    <button class="btn-deploy">Leaderboard</button>
+    <div class="container">
+        <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>
\ No newline at end of file
diff --git a/index.html b/index.html
index ca8a275..55499d8 100644
--- a/index.html
+++ b/index.html
@@ -9,21 +9,25 @@
     <script type="module" src="js/main.js" defer></script>
 </head>
 <body>
-    <div class="container">
-        <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>
-        <div class="btn-cont">
-            <button class="btn-test">Sort by credits</button>
-            <button class="btn-test2">Sort by ships</button>
+    <div class="deploy-bar">
+        <button class="btn-deploy">Leaderboard</button>
+        <div class="container">
+            <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>
 </body>
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 6baeb42..b02f3f1 100644
--- a/js/main.js
+++ b/js/main.js
@@ -30,7 +30,7 @@ function drawAgents(agents, funcSort) {
   agents.reverse();
   let i = 1;
   agents.forEach((agent) => {
-    $(".leaderboard").append(`
+  $(".leaderboard").append(`
     <article>
       <p class="elem num">${i}.</p>
       <p class="elem symbol">${agent.symbol} : </p>
@@ -44,24 +44,38 @@ function drawAgents(agents, funcSort) {
   });
 }
 
-$(document).ready(function() {
-  let state = false;
-  $(".btn-test").on("click", () => {
-    if (!state) AgentBuilder.list_all((agents) => {
-        drawAgents(agents, sortAgentByCredits);
-        state = false;
+function leaderboard(temp_engine) {
+  temp_engine.after_render((temp_engine) => {
+    let state = false;
+    $(".btn-cred").on("click", () => {
+      if (!state) AgentBuilder.list_all((agents) => {
+          drawAgents(agents, sortAgentByCredits);
+          state = false;
+      });
+      state = true
+    });
+  
+    $(".btn-ship").on("click", () => {
+        if (!state) AgentBuilder.list_all((agents) => {
+          drawAgents(agents, sortAgentByShips);
+          state = false;
+      });
+      state = true
+    });
+  
+    $('.container').hide()
+    $('.btn-deploy').on('click', () => {
+      $('.container').slideToggle()
+    })
+    $('.btn-ship').on('click', () => {
+      $('.leaderboard').empty()
+    })
+    $('.btn-cred').on('click', () => {
+      $('.leaderboard').empty()
     });
-    state = true
-  });
-  $(".btn-test2").on("click", () => {
-    if (!state) AgentBuilder.list_all((agents) => {
-      drawAgents(agents, sortAgentByShips);
-      state = false;
   });
-  state = true
-  })
-});
 
-$('button').on('click', () => {
-  $('btn-test').css('width', '75%');
-})
\ No newline at end of file
+  temp_engine.render("templates/leaderboard.html");
+}
+  
+leaderboard();
\ No newline at end of file