AmorimDSJM
ago%!(EXTRA string=1 year)
parent
fd1cea7ef3
commit
161b47f0b8
12 changed files with 259 additions and 28 deletions
@ -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. |
||||
|
||||
@ -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; |
||||
} |
||||
@ -1,5 +1,5 @@ |
||||
<!-- Copyright © 2023 Entreprise SkamKraft --> |
||||
<div class="container smooth"> |
||||
<p class="con-title">Bienvenue sur SkamCraft</p> |
||||
<p class="con-content">Application client pour l'API Space Tarders.</p> |
||||
<div class="container smooth"> |
||||
<p class="con-title">Welcome to SkamKraft</p> |
||||
<p class="con-content">Web App for SpaceTraders API</p> |
||||
</div> |
||||
@ -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> |
||||
@ -1,15 +1,19 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<title></title> |
||||
<link rel="stylesheet" href="css/style.css"> |
||||
<link rel="stylesheet" href="css/ui.css"> |
||||
<link rel="stylesheet" href="css/animation.css"> |
||||
<script src="js/lib/fabric.js"></script> |
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> |
||||
<script type="module" src="js/index.js" defer></script> |
||||
</head> |
||||
<body> |
||||
|
||||
</body> |
||||
</html> |
||||
|
||||
<head> |
||||
<title></title> |
||||
<link rel="stylesheet" href="css/style.css"> |
||||
<link rel="stylesheet" href="css/ui.css"> |
||||
<link rel="stylesheet" href="css/animation.css"> |
||||
<link rel="stylesheet" href="css/leaderboard.css"> |
||||
<script src="js/lib/fabric.js"></script> |
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> |
||||
<script type="module" src="js/index.js" defer></script> |
||||
</head> |
||||
|
||||
<body> |
||||
|
||||
</body> |
||||
|
||||
</html> |
||||
@ -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 |
||||
} |
||||
@ -1 +1 @@ |
||||
Subproject commit 77c805654739b07aeecccb90ee53c9126ff158a0 |
||||
Subproject commit c8740bb9368f1f8ca43c36be64810cae54436eea |
||||
Loading…
Reference in New Issue