diff --git a/public/elotracker/chart-integration.js b/public/elotracker/chart-integration.js
index a96c8b2..5c0fca0 100644
--- a/public/elotracker/chart-integration.js
+++ b/public/elotracker/chart-integration.js
@@ -80,6 +80,8 @@ window.onload = async function(){
}
},
},
+ responsive: true,
+ maintainAspectRatio: false,
}
});
})
@@ -134,6 +136,8 @@ window.onload = async function(){
}
},
},
+ responsive: true,
+ maintainAspectRatio: false,
}
});
}
@@ -202,4 +206,22 @@ function format_rank(tier,rank,lp) {
function getColor(num) {
const colors = ["#ea5545", "#f46a9b", "#ef9b20", "#edbf33", "#ede15b", "#bdcf32", "#87bc45", "#27aeef", "#b33dc6"]
return colors[num%9];
-}
\ No newline at end of file
+}
+
+function toggle_combined_chart() {
+ let chart = this.parentNode.parentNode.querySelector(`.graph-wrapper.${this.id}`);
+ if (chart.classList.contains("closed")) {
+ chart.classList.remove("closed");
+ } else {
+ chart.classList.add("closed");
+ }
+}
+function toggle_leaderboard_chart() {
+ if (this.classList.contains("closed")) {
+ this.classList.remove("closed");
+ } else {
+ this.classList.add("closed");
+ }
+}
+document.querySelector("button#rank-graph").addEventListener("click", toggle_combined_chart);
+document.querySelectorAll("button.leaderboard-element").forEach(element => element.addEventListener("click", toggle_leaderboard_chart));
\ No newline at end of file
diff --git a/public/elotracker/index.php b/public/elotracker/index.php
index 3723f3b..ea8669e 100644
--- a/public/elotracker/index.php
+++ b/public/elotracker/index.php
@@ -18,11 +18,14 @@ $latest_patch = json_decode(file_get_contents("https://ddragon.leagueoflegends.c
echo "
UEM LoL Elo-Challenge
";
echo "";
echo "";
-echo "
";
+echo "
+
+
+
";
+echo "
";
echo "
";
$placement_counter = 1;
foreach ($tracker->getProgressions() as $puuid => $progress){
- echo "
";
$entries = $tracker->entries[$puuid];
$account = $tracker->accounts[$puuid];
$start_elo = reset($entries);
@@ -38,6 +41,11 @@ foreach ($tracker->getProgressions() as $puuid => $progress){
$start_tier_ucfirst = ucfirst($start_tier_lowercase);
$gained_lp_sign = ($progress > 0) ? " plus-lp" : (($progress < 0) ? " minus-lp" : "no-lp");
+ if ($start_elo) {
+ echo "
";
- echo "
";
+ echo "
";
}
- echo "
";
+ echo "";
$placement_counter++;
}
echo "
";
diff --git a/public/elotracker/styles.css b/public/elotracker/styles.css
index 7e3f100..5480c7c 100644
--- a/public/elotracker/styles.css
+++ b/public/elotracker/styles.css
@@ -17,6 +17,22 @@ body {
h1 {
text-align: center;
}
+button {
+ background: none;
+ color: inherit;
+ border: none;
+ padding: 0;
+ font: inherit;
+ cursor: pointer;
+ outline: inherit;
+ text-align: unset;
+}
+button[disabled] {
+ cursor: initial;
+}
+button[disabled]:hover {
+ background-color: initial;
+}
.uem-logo-header {
display: flex;
@@ -28,6 +44,16 @@ img.uem-logo {
height: 120px;
}
+button.open-general-graph {
+ border: solid 2px #68a8cc;
+ border-radius: 12px;
+ padding: 16px 24px;
+ transition: background-color 200ms ease-out;
+}
+button.open-general-graph:hover {
+ background-color: #1f2931;
+}
+
.leaderboard {
display: flex;
flex-direction: column;
@@ -39,11 +65,14 @@ img.uem-logo {
align-items: stretch;
gap: 16px;
max-width: 600px;
+ margin-top: 20px;
}
.leaderboard-element {
display: grid;
grid-template-columns: 64px 1fr auto;
- grid-template-rows: 1.5fr 0.5fr;
+ grid-template-rows: auto auto 1fr;
+ row-gap: 8px;
+ align-items: center;
border: solid 4px #6a818f;
border-radius: 20px;
padding: 16px 16px 16px 36px;
@@ -101,8 +130,9 @@ img.uem-logo {
display: grid;
grid-template-rows: 1fr 0.9fr;
grid-template-columns: 72px auto;
- align-items: center;
grid-column: 2;
+ margin: 10px 0;
+ row-gap: 10px;
}
.leaderboard-element .ranked-emblem {
grid-column: 3;
@@ -116,6 +146,7 @@ img.uem-logo {
grid-row-end: 3;
grid-column: 1;
border-radius: 8px;
+ align-self: end;
}
.player-info .playername {
grid-row: 1;
@@ -123,7 +154,7 @@ img.uem-logo {
margin: 0;
}
.player-info .lp-gained {
- align-self: flex-start;
+ align-self: start;
grid-row: 2;
grid-column: 2;
font-size: 1.5em;
@@ -159,4 +190,34 @@ img.uem-logo {
}
.elo-gained .rank-LP {
font-size: 0.8em;
+}
+
+.leaderboard-element .graph-wrapper {
+ position: relative;
+ display: grid;
+ grid-template-rows: 1fr;
+ grid-template-columns: 1fr;
+ grid-row: 3;
+ grid-column: 1 / 4;
+ overflow: hidden;
+ height: 250px;
+ width: 520px;
+ transition: height 400ms;
+}
+.leaderboard-element.closed .graph-wrapper {
+ height: 0;
+}
+
+.leaderboard>.graph-wrapper {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ height: 600px;
+ width: 90vw;
+ max-width: 800px;
+ transition: height 400ms;
+ overflow: hidden;
+}
+.leaderboard>.graph-wrapper.closed {
+ height: 0;
}
\ No newline at end of file