From 031a8bb2a0ea08014eb3143cd4c354c12dbb02d7 Mon Sep 17 00:00:00 2001 From: "Lang, Simon" Date: Tue, 11 Jun 2024 23:22:40 +0200 Subject: [PATCH] added combined elo-graph --- public/elotracker/chart-integration.js | 101 ++++++++++++++++++++++++- public/elotracker/get.php | 12 +-- public/elotracker/index.php | 1 + 3 files changed, 107 insertions(+), 7 deletions(-) diff --git a/public/elotracker/chart-integration.js b/public/elotracker/chart-integration.js index 188a986..d45567e 100644 --- a/public/elotracker/chart-integration.js +++ b/public/elotracker/chart-integration.js @@ -1,4 +1,90 @@ window.onload = async function(){ + let all_dates = []; // Alle Daten für die für min. einen Spieler ein Rang gespeichert ist + let all_yDatasets = []; // Datasets, also die einzelnen Linien im Graphen, beinhaltet player_points + let player_points = {}; // puuid zeigt auf eine Liste von Punkten, welche die y-Koordinaten im Graphen darstellen + let player_entries = {}; // puuid zeigt auf player entries + let player_entries_byName = {}; // playername zeigt auf entries (damit im kombinierten Graphen die Tooltips korrekt gerendert werden können) + let player_accounts = {}; // puuid zeigt auf player account + + await fetch(`get.php`, { + method: "GET", + }) + .then(res => res.json()) + .then(result => { + player_entries = result["entries"]; + player_accounts = result["accounts"]; + for (const puuid in player_entries) { + // Alle Daten für die Spieler Einträge haben sollen in all_dates + for (const entry_date in player_entries[puuid]) { + all_dates.push(entry_date) + } + // Hier schonmal puuids/namen auf leere Arrays setzen, damit später einfach .push verwendet werden kann + player_points[puuid] = []; + player_entries_byName[`${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`] = []; + } + // Daten sortieren und Duplicates entfernen + all_dates.sort(); + all_dates = [...new Set(all_dates)]; + + let color_counter = 0; + for (const puuid in player_entries) { + for (const date_string of all_dates) { + // Für alle Player Entries Punktzahl berechnen und in player_points eintragen + // Bei der Gelegenheit auch Entries in player_entries_byName eintragen + if (date_string in player_entries[puuid]) { + player_points[puuid].push(rank_to_points(player_entries[puuid][date_string]["tier"],player_entries[puuid][date_string]["rank"],player_entries[puuid][date_string]["points"])); + player_entries_byName[`${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`][date_string] = player_entries[puuid][date_string]; + } else { + player_points[puuid].push(null); + } + } + // Linie für den Spieler zu Datasets des Graphen hinzufügen + all_yDatasets.push({ + label: `${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`, + fill: false, + borderColor: getColor(color_counter), + backgroundColor: getColor(color_counter), + data: player_points[puuid], + spanGaps: true, + }) + color_counter++; + } + // Graphen erstellen + new Chart(`progress-chart-combined`, { + type: "line", + data: { + labels: all_dates, + datasets: all_yDatasets, + }, + options: { + plugins: { + tooltip: { + callbacks: { + label: function(context) { + return format_rank(player_entries_byName[context.dataset.label][context.label]["tier"],player_entries_byName[context.dataset.label][context.label]["rank"],player_entries_byName[context.dataset.label][context.label]["points"]) + }, + beforeTitle: function (context) { + return context[0].dataset.label; + }, + } + } + }, + scales: { + y: { + display: true, + stepSize: 100, + ticks: { + callback: (value) => { + return points_to_rankstring(value,false); + } + } + }, + }, + } + }); + }) + .catch(e => console.error(e)) + const charts = document.getElementsByClassName("progress-chart"); for (const chart of charts) { let puuid = chart.id.split("-"); @@ -8,7 +94,9 @@ window.onload = async function(){ method: "GET", }) .then(res => res.json()) - .then(entries => { + .then(result => { + let entries = result["entries"]; + let account = result["accounts"]; let xValues = []; let yValues = []; for (const entriesKey in entries) { @@ -21,6 +109,7 @@ window.onload = async function(){ data: { labels: xValues, datasets: [{ + label: `${account["gameName"]}#${account["tagLine"]}`, fill: false, borderColor: "rgba(150,150,175)", backgroundColor: "rgba(150,150,175)", @@ -34,7 +123,10 @@ window.onload = async function(){ callbacks: { label: function(context) { return format_rank(entries[context.label]["tier"],entries[context.label]["rank"],entries[context.label]["points"]) - } + }, + beforeTitle: function (context) { + return context[0].dataset.label; + }, } } }, @@ -114,4 +206,9 @@ function format_rank(tier,rank,lp) { if (!apex_tiers) rank_string += ` ${rank}`; rank_string += ` ${lp} LP`; return rank_string; +} + +function getColor(num) { + const colors = ["#ea5545", "#f46a9b", "#ef9b20", "#edbf33", "#ede15b", "#bdcf32", "#87bc45", "#27aeef", "#b33dc6"] + return colors[num%9]; } \ No newline at end of file diff --git a/public/elotracker/get.php b/public/elotracker/get.php index 9dac816..b8adeae 100644 --- a/public/elotracker/get.php +++ b/public/elotracker/get.php @@ -1,9 +1,11 @@ entries[$puuid]); \ No newline at end of file +if (!isset($_GET["puuid"]) || $_GET["puuid"]==null) { + echo json_encode(["accounts"=>$tracker->accounts,"entries"=>$tracker->entries]); + exit; +} + +$puuid = $_GET["puuid"]; +echo json_encode(["accounts"=>$tracker->accounts[$puuid],"entries"=>$tracker->entries[$puuid]]); \ No newline at end of file diff --git a/public/elotracker/index.php b/public/elotracker/index.php index c556440..5058e1b 100644 --- a/public/elotracker/index.php +++ b/public/elotracker/index.php @@ -18,6 +18,7 @@ $latest_patch = json_decode(file_get_contents("https://ddragon.leagueoflegends.c echo "

UEM LoL Elo-Challenge

"; echo "
"; echo "
"; +echo ""; echo "
"; $placement_counter = 1; foreach ($tracker->getProgressions() as $puuid => $progress){