UEM
/
university-esports-mainz.de
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added styling and elo-graphs

Browse Source
main
Lang, Simon 3 months ago
parent 856b76f3d7
commit 4aeeceebc9
5 changed files with 334 additions and 5 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. 117
      public/elotracker/chart-integration.js
  2. 9
      public/elotracker/get.php
  3. 51
      public/elotracker/index.php
  4. 162
      public/elotracker/styles.css
  5. BIN
      public/img/uem-logo.png

117
public/elotracker/chart-integration.js
Unescape View File

@ -0,0 +1,117 @@
window.onload = async function(){
const charts = document.getElementsByClassName("progress-chart");
for (const chart of charts) {
let puuid = chart.id.split("-");
puuid.splice(0,2);
puuid = puuid.join("-");
fetch(`get.php?puuid=${puuid}`, {
method: "GET",
})
.then(res => res.json())
.then(entries => {
let xValues = [];
let yValues = [];
for (const entriesKey in entries) {
let points = rank_to_points(entries[entriesKey]["tier"], entries[entriesKey]["rank"], entries[entriesKey]["points"]);
xValues.push(entriesKey);
yValues.push(points);
}
new Chart(`progress-chart-${puuid}`, {
type: "line",
data: {
labels: xValues,
datasets: [{
fill: false,
borderColor: "rgba(150,150,175)",
backgroundColor: "rgba(150,150,175)",
data: yValues
}]
},
options: {
plugins: {
legend: {display: false},
tooltip: {
callbacks: {
label: function(context) {
return format_rank(entries[context.label]["tier"],entries[context.label]["rank"],entries[context.label]["points"])
}
}
}
},
scales: {
y: {
display: true,
stepSize: 100,
ticks: {
callback: (value) => {
return points_to_rankstring(value,false);
}
}
},
},
}
});
})
.catch(e => console.error(e))
}
};
function rank_to_points(tier,rank,lp) {
const apex_tiers = (tier === "MASTER" || tier === "GRANDMASTER" || tier === "CHALLENGER");
const tiers = {
"DIAMOND": 2400,
"EMERALD": 2000,
"PLATINUM": 1600,
"GOLD": 1200,
"SILVER": 800,
"BRONZE": 400,
"IRON": 0,
};
const ranks = {
"I": 300,
"II": 200,
"III": 100,
"IV": 0,
};
if (apex_tiers) {
return 2800 + lp;
} else {
return tiers[tier] + ranks[rank] + lp;
}
}
function points_to_rankstring(points, include_LP = true) {
const apex_tiers = (points >= 2800);
let lp = (apex_tiers) ? points - 2800 : points%100
let rank = (points-lp)%400;
let tier = (points-lp-rank);
const tiers = {
2400: "Diamond",
2000: "Emerald",
1600: "Platinum",
1200: "Gold",
800: "Silver",
400: "Bronze",
0: "Iron",
};
const ranks = {
300: "I",
200: "II",
100: "III",
0: "IV",
};
let rank_string = (apex_tiers) ? "Master" : tiers[tier];
if (!apex_tiers) rank_string += ` ${ranks[rank]}`;
if (include_LP || apex_tiers) rank_string += ` ${lp} LP`;
return rank_string;
}
function format_rank(tier,rank,lp) {
tier = tier.charAt(0).toUpperCase()+tier.slice(1).toLowerCase();
const apex_tiers = (tier === "Master" || tier === "Grandmaster" || tier === "Challenger");
let rank_string = tier;
if (!apex_tiers) rank_string += ` ${rank}`;
rank_string += ` ${lp} LP`;
return rank_string;
}

9
public/elotracker/get.php
Unescape View File

@ -0,0 +1,9 @@
<?php
if (!isset($_GET["puuid"]) && $_GET["puuid"]!=null) exit;
require_once "Tracker.php";
$tracker = new Tracker();
$puuid = $_GET["puuid"];
echo json_encode($tracker->entries[$puuid]);

51
public/elotracker/index.php
Unescape View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link href="styles.css" rel="stylesheet"> <link href="styles.css" rel="stylesheet">
<title>UEM Elo Tracker</title> <title>UEM Elo Tracker</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head> </head>
<body> <body>
<?php <?php
@ -12,18 +13,58 @@ require_once "Tracker.php";
$tracker = new Tracker(); $tracker = new Tracker();
$latest_patch = json_decode(file_get_contents("https://ddragon.leagueoflegends.com/api/versions.json"))[0];
echo "<h1>UEM LoL Elo-Challenge</h1>";
echo "<div class='uem-logo-header'><img class='uem-logo' src='./../img/uem-logo.png' alt=''></div>";
echo "<div class='leaderboard'>";
echo "<div class='leaderboard-list'>";
$placement_counter = 1;
foreach ($tracker->getProgressions() as $puuid => $progress){ foreach ($tracker->getProgressions() as $puuid => $progress){
echo "<div class='leaderboard-element place-$placement_counter'>";
$entries = $tracker->entries[$puuid]; $entries = $tracker->entries[$puuid];
$account = $tracker->accounts[$puuid]; $account = $tracker->accounts[$puuid];
$start_elo = reset($entries);
if ($start_elo->tier == "MASTER" || $start_elo->tier == "GRANDMASTER" || $start_elo->tier == "CHALLENGER") $start_elo->rank = "";
$current_elo = end($entries);
if ($current_elo->tier == "MASTER" || $current_elo->tier == "GRANDMASTER" || $current_elo->tier == "CHALLENGER") $current_elo->rank = "";
$progress = ($progress>=0) ? "+$progress" : $progress;
$tier_lowercase = strtolower($current_elo->tier);
$start_tier_lowercase = strtolower($start_elo->tier);
$tier_ucfirst = ucfirst($tier_lowercase);
$start_tier_ucfirst = ucfirst($start_tier_lowercase);
$gained_lp_sign = ($progress > 0) ? " plus-lp" : (($progress < 0) ? " minus-lp" : "no-lp");
echo "<span class='placement'>$placement_counter.</span>";
echo "<div class='player-info'>
<img src='https://ddragon.leagueoflegends.com/cdn/$latest_patch/img/profileicon/$account->profileIconId.png' alt='' style='height: 64px; aspect-ratio: 1 / 1;'>
<h2 class='playername'>$account->gameName<span class='riot-tag'>#$account->tagLine</span></h2>
<h3 class='lp-gained $gained_lp_sign'>$progress LP</h3>
</div>";
echo "<div class='ranked-emblem'><img class='current-rank' src='https://raw.communitydragon.org/latest/plugins/rcp-fe-lol-shared-components/global/default/$tier_lowercase.png' alt=''></div>";
echo "<h3>$account->gameName#$account->tagLine: $progress</h3>"; echo "<div class='elo-gained'>
foreach ($entries as $date => $elo){ <div class='rank rank-start'>
$eloValue = $elo->value(); <img class='ranked-mini-crest' src='https://raw.communitydragon.org/latest/plugins/rcp-fe-lol-static-assets/global/default/ranked-mini-crests/$start_tier_lowercase.svg' alt=''>
echo "$date &rarr; $eloValue<br>"; <span class='rank-desc'><span class='rank-tier'>{$start_tier_ucfirst} {$start_elo->rank}</span> <br> <span class='rank-LP'>{$start_elo->points} LP</span></span>
} </div>
&rarr;
<div class='rank rank-start'>
<img class='ranked-mini-crest' src='https://raw.communitydragon.org/latest/plugins/rcp-fe-lol-static-assets/global/default/ranked-mini-crests/$tier_lowercase.svg' alt=''>
<span class='rank-desc'><span class='rank-tier'>{$tier_ucfirst} {$current_elo->rank}</span> <br> <span class='rank-LP'>{$current_elo->points} LP</span></span>
</div>
</div>";
echo "</div>";
echo "<canvas id=\"progress-chart-$puuid\" class='progress-chart' style=\"width:100%;max-width:700px\"></canvas>";
$placement_counter++;
} }
echo "</div>";
echo "</div>";
?> ?>
<script src="chart-integration.js"></script>
</body> </body>
</html> </html>

162
public/elotracker/styles.css
Unescape View File

@ -0,0 +1,162 @@
:root {
--def-grey: hsl(110 00% 82% / 1);
--plus-green: hsl(110 80% 82% / 1);
--minus-red: hsl(0 80% 82% / 1);
--gold-1: #d29b35;
--silver-2: #b7b7b7;
--bronze-3: #b76833;
}
html {
color-scheme: dark;
}
body {
background: #161c21;
color: #d2d2d2;
font-family: Verdana, sans-serif;
}
h1 {
text-align: center;
}
.uem-logo-header {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
img.uem-logo {
height: 120px;
}
.leaderboard {
display: flex;
flex-direction: column;
align-items: center;
}
.leaderboard-list {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 16px;
max-width: 600px;
}
.leaderboard-element {
display: grid;
grid-template-columns: 64px 1fr auto;
grid-template-rows: 1.5fr 0.5fr;
border: solid 4px #6a818f;
border-radius: 20px;
padding: 16px 16px 16px 36px;
transition: background-color 200ms ease-out;
}
.leaderboard-element:hover {
background-color: #1f2931;
}
.leaderboard-element.place-1 {
border: solid 4px var(--gold-1);
}
.leaderboard-element.place-1 .placement {
color: var(--gold-1);
}
.leaderboard-element.place-2 {
border: solid 4px #b7b7b7;
}
.leaderboard-element.place-2 .placement {
color: var(--silver-2);
}
.leaderboard-element.place-3 {
border: solid 4px #b76833;
}
.leaderboard-element.place-3 .placement {
color: var(--bronze-3);
}
.leaderboard-element .ranked-emblem {
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px;
}
.leaderboard-element .ranked-emblem img {
width: 72px;
aspect-ratio: 1/1;
}
.leaderboard-element img.ranked-mini-crest {
width: 24px;
aspect-ratio: 1/1
}
.leaderboard-element .placement {
display: flex;
align-items: center;
justify-content: center;
grid-row-start: 1;
grid-row-end: 3;
font-size: 2.5em;
font-weight: 700;
margin-right: 24px;
}
.leaderboard-element .player-info {
display: grid;
grid-template-rows: 1fr 0.9fr;
grid-template-columns: 72px auto;
align-items: center;
grid-column: 2;
}
.leaderboard-element .ranked-emblem {
grid-column: 3;
}
.playername .riot-tag {
color: #707070;
}
.player-info>img {
grid-row-start: 1;
grid-row-end: 3;
grid-column: 1;
border-radius: 8px;
}
.player-info .playername {
grid-row: 1;
grid-column: 2;
margin: 0;
}
.player-info .lp-gained {
align-self: flex-start;
grid-row: 2;
grid-column: 2;
font-size: 1.5em;
margin: 0;
padding-left: 12px;
}
.player-info .lp-gained.plus-lp {
color: var(--plus-green);
}
.player-info .lp-gained.minus-lp {
color: var(--minus-red);
}
.player-info .lp-gained.no-lp {
color: var(--def-grey);
}
.leaderboard-element .elo-gained {
grid-column-start: 2;
grid-column-end: 4;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 4px;
}
.rank {
display: flex;
flex-direction: column;
align-items: center;
}
.rank .rank-desc {
text-align: center;
}
.elo-gained .rank-LP {
font-size: 0.8em;
}

BIN
public/img/uem-logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

Write Preview
Loading…
Cancel
Save