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

update leaderboard without page-reload

Browse Source
main
Lang, Simon 3 months ago
parent 4f27056891
commit 43664033b2
3 changed files with 94 additions and 68 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 47
      public/elotracker/chart-integration.js
  2. 58
      public/elotracker/index.php
  3. 57
      public/elotracker/leaderboard_list.php

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

@ -1,4 +1,13 @@
window.onload = async function(){
let combined_charts = [];
let player_charts = [];
window.onload = create_charts;
async function create_charts() {
combined_charts.forEach(chart => chart.destroy());
combined_charts = [];
player_charts.forEach(chart => chart.destroy());
player_charts = [];
let all_dates = []; // Alle Daten für die für min. einen Spieler ein Rang gespeichert ist
let all_rank_yDatasets = []; // Datasets, also die einzelnen Linien im Graphen, beinhaltet player_points
let all_progress_yDatasets = []; // Datasets, also die einzelnen Linien im Graphen, beinhaltet die Differenz der aktuellen player_points und der start player_points
@ -70,7 +79,7 @@ window.onload = async function(){
color_counter++;
}
// Graphen erstellen
new Chart(`progress-chart-combined`, {
combined_charts.push(new Chart(`progress-chart-combined`, {
type: "line",
data: {
labels: all_dates,
@ -103,8 +112,8 @@ window.onload = async function(){
responsive: true,
maintainAspectRatio: false,
}
});
new Chart(`progress-chart-combined-progress`, {
}));
combined_charts.push(new Chart(`progress-chart-combined-progress`, {
type: "line",
data: {
labels: all_dates,
@ -131,7 +140,7 @@ window.onload = async function(){
responsive: true,
maintainAspectRatio: false,
}
});
}));
})
.catch(e => console.error(e))
@ -147,7 +156,7 @@ window.onload = async function(){
xValues.push(entriesKey);
yValues.push(points);
}
new Chart(`progress-chart-${puuid}`, {
player_charts.push(new Chart(`progress-chart-${puuid}`, {
type: "line",
data: {
labels: xValues,
@ -187,10 +196,9 @@ window.onload = async function(){
responsive: true,
maintainAspectRatio: false,
}
});
}));
}
}
};
function rank_to_points(tier,rank,lp) {
const apex_tiers = (tier === "MASTER" || tier === "GRANDMASTER" || tier === "CHALLENGER");
@ -277,7 +285,7 @@ function toggle_leaderboard_chart() {
document.querySelectorAll("button.open-general-graph").forEach(element => element.addEventListener("click", toggle_combined_chart));
document.querySelectorAll("button.leaderboard-element").forEach(element => element.addEventListener("click", toggle_leaderboard_chart));
async function update_leaderboard() {
async function update_leaderboard_entries() {
this.disabled = true;
this.classList.add("button-updating")
let eventSource = new EventSource("./update.php");
@ -301,6 +309,7 @@ async function update_leaderboard() {
eventSource.addEventListener("done", e => {
reset_button(this);
eventSource.close();
update_leaderboard_elements();
})
function reset_button(button) {
button.disabled = false;
@ -309,7 +318,7 @@ async function update_leaderboard() {
}
}
document.querySelector("button.update-leaderboard").addEventListener("click", update_leaderboard);
document.querySelector("button.update-leaderboard").addEventListener("click", update_leaderboard_entries);
function format_time_minsec(date) {
let format, trenner = "", min = "", nullausgleich = "";
@ -325,3 +334,19 @@ function format_time_minsec(date) {
}
return min + trenner + nullausgleich + date.getSeconds() + format;
}
async function update_leaderboard_elements() {
fetch(`./leaderboard_list.php`, {
method: "GET",
})
.then(res => res.text())
.then(leaderboard_list => {
// replace updated Leaderboard
document.querySelector(".leaderboard-list").outerHTML = leaderboard_list;
// reapply EventListeners
document.querySelectorAll("button.leaderboard-element").forEach(element => element.addEventListener("click", toggle_leaderboard_chart));
// recreate charts
create_charts();
})
.catch(e => console.error(e));
}

58
public/elotracker/index.php
Unescape View File

@ -9,12 +9,6 @@
<body>
<?php
require_once __DIR__."/Tracker.php";
$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'>";
@ -25,57 +19,7 @@ echo "<div class='combined-charts-buttons'>
</div>";
echo "<div class='graph-wrapper rank-graph closed'><canvas id=\"progress-chart-combined\" style=\"width:100%;max-width:700px\"></canvas></div>";
echo "<div class='graph-wrapper progress-graph closed'><canvas id=\"progress-chart-combined-progress\" style=\"width:100%;max-width:700px\"></canvas></div>";
echo "<div class='leaderboard-list'>";
$placement_counter = 1;
foreach ($tracker->getProgressions() as $puuid => $progress){
$entries = $tracker->entries[$puuid];
$account = $tracker->accounts[$puuid];
$start_elo = reset($entries);
$start_tier = ($start_elo) ? $start_elo->tier : "UNRANKED";
if ($start_tier == "MASTER" || $start_tier == "GRANDMASTER" || $start_tier == "CHALLENGER") $start_elo->rank = "";
$current_elo = end($entries);
$current_tier = ($current_elo) ? $current_elo->tier : "UNRANKED";
if ($current_tier == "MASTER" || $current_tier == "GRANDMASTER" || $current_tier == "CHALLENGER") $current_elo->rank = "";
$progress = ($progress>=0) ? "+$progress" : $progress;
$tier_lowercase = strtolower($current_tier);
$start_tier_lowercase = strtolower($start_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");
if ($start_elo) {
echo "<button type='button' class='leaderboard-element place-$placement_counter closed'>";
} else {
echo "<button type='button' class='leaderboard-element place-$placement_counter closed' disabled>";
}
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>";
if ($start_elo) {
echo "<div class='elo-gained'>
<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/$start_tier_lowercase.svg' alt=''>
<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 class='graph-wrapper'><canvas id=\"progress-chart-$puuid\" class='progress-chart' style=\"width:100%;max-width:700px\"></canvas></div>";
}
echo "</button>";
$placement_counter++;
}
echo "</div>";
include "leaderboard_list.php";
echo "</div>";
?>

57
public/elotracker/leaderboard_list.php
Unescape View File

@ -0,0 +1,57 @@
<?php
require_once __DIR__ . "/Tracker.php";
$tracker = new Tracker();
$latest_patch = json_decode(file_get_contents("https://ddragon.leagueoflegends.com/api/versions.json"))[0];
echo "<div class='leaderboard-list'>";
$placement_counter = 1;
foreach ($tracker->getProgressions() as $puuid => $progress) {
$entries = $tracker->entries[$puuid];
$account = $tracker->accounts[$puuid];
$start_elo = reset($entries);
$start_tier = ($start_elo) ? $start_elo->tier : "UNRANKED";
if ($start_tier == "MASTER" || $start_tier == "GRANDMASTER" || $start_tier == "CHALLENGER") $start_elo->rank = "";
$current_elo = end($entries);
$current_tier = ($current_elo) ? $current_elo->tier : "UNRANKED";
if ($current_tier == "MASTER" || $current_tier == "GRANDMASTER" || $current_tier == "CHALLENGER") $current_elo->rank = "";
$progress = ($progress >= 0) ? "+$progress" : $progress;
$tier_lowercase = strtolower($current_tier);
$start_tier_lowercase = strtolower($start_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");
if ($start_elo) {
echo "<button type='button' class='leaderboard-element place-$placement_counter closed'>";
} else {
echo "<button type='button' class='leaderboard-element place-$placement_counter closed' disabled>";
}
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>";
if ($start_elo) {
echo "<div class='elo-gained'>
<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/$start_tier_lowercase.svg' alt=''>
<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 class='graph-wrapper'><canvas id=\"progress-chart-$puuid\" class='progress-chart' style=\"width:100%;max-width:700px\"></canvas></div>";
}
echo "</button>";
$placement_counter++;
}
echo "</div>";
Write Preview
Loading…
Cancel
Save