From 43664033b2e161cad91b5436a6d0c780d4f5a61c Mon Sep 17 00:00:00 2001 From: "Lang, Simon" Date: Mon, 17 Jun 2024 18:37:39 +0200 Subject: [PATCH] update leaderboard without page-reload --- public/elotracker/chart-integration.js | 47 ++++++++++++++++----- public/elotracker/index.php | 58 +------------------------- public/elotracker/leaderboard_list.php | 57 +++++++++++++++++++++++++ 3 files changed, 94 insertions(+), 68 deletions(-) create mode 100644 public/elotracker/leaderboard_list.php diff --git a/public/elotracker/chart-integration.js b/public/elotracker/chart-integration.js index 7197351..7a7aad6 100644 --- a/public/elotracker/chart-integration.js +++ b/public/elotracker/chart-integration.js @@ -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 = ""; @@ -324,4 +333,20 @@ 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)); } \ No newline at end of file diff --git a/public/elotracker/index.php b/public/elotracker/index.php index cc364d7..5878fdf 100644 --- a/public/elotracker/index.php +++ b/public/elotracker/index.php @@ -9,12 +9,6 @@ UEM LoL Elo-Challenge"; echo "
"; echo "
"; @@ -25,57 +19,7 @@ echo "
"; echo "
"; echo "
"; -echo "
"; -$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 ""; - $placement_counter++; -} -echo "
"; +include "leaderboard_list.php"; echo "
"; ?> diff --git a/public/elotracker/leaderboard_list.php b/public/elotracker/leaderboard_list.php new file mode 100644 index 0000000..035a1bd --- /dev/null +++ b/public/elotracker/leaderboard_list.php @@ -0,0 +1,57 @@ +"; +$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 ""; + $placement_counter++; +} +echo "";