Compare commits

..

2 Commits

Author SHA1 Message Date
Lang, Simon d4233c07b8 removed unnecessary fetch-requests 5 months ago
Lang, Simon 031a8bb2a0 added combined elo-graph 5 months ago
  1. 110
      public/elotracker/chart-integration.js
  2. 12
      public/elotracker/get.php
  3. 1
      public/elotracker/index.php

@ -1,18 +1,99 @@
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("-");
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"]);
for (const entriesKey in player_entries[puuid]) {
let points = rank_to_points(player_entries[puuid][entriesKey]["tier"], player_entries[puuid][entriesKey]["rank"], player_entries[puuid][entriesKey]["points"]);
xValues.push(entriesKey);
yValues.push(points);
}
@ -21,6 +102,7 @@ window.onload = async function(){
data: {
labels: xValues,
datasets: [{
label: `${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`,
fill: false,
borderColor: "rgba(150,150,175)",
backgroundColor: "rgba(150,150,175)",
@ -33,8 +115,11 @@ window.onload = async function(){
tooltip: {
callbacks: {
label: function(context) {
return format_rank(entries[context.label]["tier"],entries[context.label]["rank"],entries[context.label]["points"])
}
return format_rank(player_entries[puuid][context.label]["tier"],player_entries[puuid][context.label]["rank"],player_entries[puuid][context.label]["points"])
},
beforeTitle: function (context) {
return context[0].dataset.label;
},
}
}
},
@ -51,8 +136,6 @@ window.onload = async function(){
},
}
});
})
.catch(e => console.error(e))
}
};
@ -115,3 +198,8 @@ function format_rank(tier,rank,lp) {
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];
}

@ -1,9 +1,11 @@
<?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]);
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]]);

@ -18,6 +18,7 @@ $latest_patch = json_decode(file_get_contents("https://ddragon.leagueoflegends.c
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 "<canvas id=\"progress-chart-combined\" style=\"width:100%;max-width:700px\"></canvas>";
echo "<div class='leaderboard-list'>";
$placement_counter = 1;
foreach ($tracker->getProgressions() as $puuid => $progress){

Loading…
Cancel
Save