anulax
/
skamkraft.anulax.ch
1
0
Fork 0
Code Issues Pull Requests Packages project_board Releases Wiki Activity

started updating leaderboard to implement it in main website

Browse Source
agent_bryte
AmorimDSJM ago%!(EXTRA string=1 year)
parent e88a21430e
commit 9d83726ee5
4 changed files with 112 additions and 63 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 68
      css/style.css
  2. 21
      html/templates/leaderboard.html
  3. 34
      index.html
  4. 52
      js/main.js

68
css/style.css
Unescape View File

@ -6,8 +6,21 @@
font-family: M42; font-family: M42;
font-size: 10px; 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 { .container {
display: block;
margin: auto; margin: auto;
width: 70%; width: 70%;
} }
@ -17,20 +30,13 @@
margin: auto; margin: auto;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
border: 2px solid black; border: 0px solid black;
border-top-color : white;
border-bottom-color: white; border-bottom-color: white;
border-bottom-width: 1px; 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 { .leaderboard {
@ -42,7 +48,6 @@
height: 50vh; height: 50vh;
overflow-y: scroll; overflow-y: scroll;
overflow-x:visible; overflow-x:visible;
border: 2px solid black;
background-color: black; background-color: black;
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
@ -52,7 +57,7 @@
width: 0 !important width: 0 !important
} }
article{ article{
width: 99.9%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255);
@ -81,37 +86,42 @@ p{
.ships{ .ships{
color: rgb(146, 146, 146); color: rgb(146, 146, 146);
} }
button{ .btn-cont {
margin: auto; margin: auto;
border: 3px none none 3px; display: flex;
transition: 0.3s; /* Add transition on hover */ justify-content: space-between;
padding: 15px; /* 15px padding */ width: 100%;
text-decoration: none; /* Remove underline */ }
font-size: 11px; /* Increase font size */
color: white; /* White text color */
}
button:hover{ button:hover{
transition: ease-in-out; transition: ease-in-out;
color: black; color: black;
transition-duration: 0.3s; transition-duration: 0.3s;
background-color: white; background-color: white;
} }
.btn-test{ button{
padding: 15px;
}
.btn-cred{
background-color: black; background-color: black;
color: rgb(250, 204, 88); color: rgb(250, 204, 88);
width: 50%; width: 50%;
border-left: none; font-size: 11px;
border-left-color: black;
border: 3px none none 3px;
border-bottom: none; border-bottom: none;
border-top-color: white;
border-radius: 0px 0px 0px 10px; border-radius: 0px 0px 0px 10px;
} }
.btn-test2{ .btn-ship{
background-color: black; background-color: black;
color: rgb(86, 187, 255); color: rgb(86, 187, 255);
width: 50%;
font-size: 11px;
border: 3px none none 3px;
border-bottom: none; border-bottom: none;
border-right: none; border-right-color: white;
border-left: none; border-left-color: black;
border-top-color: white;
border-radius: 0px 0px 10px 0px; border-radius: 0px 0px 10px 0px;
width: 50%;
} }

21
html/templates/leaderboard.html
Unescape View File

@ -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>

34
index.html
Unescape View File

@ -9,21 +9,25 @@
<script type="module" src="js/main.js" defer></script> <script type="module" src="js/main.js" defer></script>
</head> </head>
<body> <body>
<div class="container"> <div class="deploy-bar">
<div class="head-board"> <button class="btn-deploy">Leaderboard</button>
<p class="num">rank</p> <div class="container">
<p class="symbol">name</p> <div class="head-board">
<p class="credits">credits</p> <p class="num">rank</p>
<p class="headquarters">headquaters</p> <p class="symbol">name</p>
<p class="faction">faction</p> <p class="credits">credits</p>
<p class="ships">ships</p> <p class="headquarters">headquarters</p>
</div> <p class="faction">faction</p>
<div class="leaderboard"> <p class="ships">ships</p>
</div>
</div> <div class="leaderboard"></div>
<div class="btn-cont"> <div>
<button class="btn-test">Sort by credits</button> <!--- leaderboard content -->
<button class="btn-test2">Sort by ships</button> </div>
<div class="btn-cont">
<button class="btn-cred">Sort by credits</button>
<button class="btn-ship">Sort by ships</button>
</div>
</div> </div>
</div> </div>
</body> </body>

52
js/main.js
Unescape View File

@ -30,7 +30,7 @@ function drawAgents(agents, funcSort) {
agents.reverse(); agents.reverse();
let i = 1; let i = 1;
agents.forEach((agent) => { agents.forEach((agent) => {
$(".leaderboard").append(` $(".leaderboard").append(`
<article> <article>
<p class="elem num">${i}.</p> <p class="elem num">${i}.</p>
<p class="elem symbol">${agent.symbol} : </p> <p class="elem symbol">${agent.symbol} : </p>
@ -44,24 +44,38 @@ function drawAgents(agents, funcSort) {
}); });
} }
$(document).ready(function() { function leaderboard(temp_engine) {
let state = false; temp_engine.after_render((temp_engine) => {
$(".btn-test").on("click", () => { let state = false;
if (!state) AgentBuilder.list_all((agents) => { $(".btn-cred").on("click", () => {
drawAgents(agents, sortAgentByCredits); if (!state) AgentBuilder.list_all((agents) => {
state = false; 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', () => { temp_engine.render("templates/leaderboard.html");
$('btn-test').css('width', '75%'); }
})
leaderboard();
Write Preview
Loading…
Cancel
Save