You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
278 lines
8.9 KiB
278 lines
8.9 KiB
window.onload = async function(){
|
|
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
|
|
let player_points = {}; // puuid zeigt auf eine Liste von Punkten, welche die y-Koordinaten im Graphen darstellen
|
|
let player_pointprogress = {}; // 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_pointprogress[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) {
|
|
let player_start_points = -1;
|
|
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]) {
|
|
const current_points = rank_to_points(player_entries[puuid][date_string]["tier"],player_entries[puuid][date_string]["rank"],player_entries[puuid][date_string]["points"]);
|
|
player_points[puuid].push(current_points);
|
|
player_entries_byName[`${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`][date_string] = player_entries[puuid][date_string];
|
|
if (player_start_points === -1) {
|
|
player_start_points = current_points;
|
|
player_pointprogress[puuid].push(0);
|
|
} else {
|
|
player_pointprogress[puuid].push(current_points - player_start_points);
|
|
}
|
|
} else {
|
|
player_points[puuid].push(null);
|
|
player_pointprogress[puuid].push(null);
|
|
}
|
|
}
|
|
// Linie für den Spieler zu Datasets des Graphen hinzufügen
|
|
all_rank_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,
|
|
})
|
|
all_progress_yDatasets.push({
|
|
label: `${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`,
|
|
fill: false,
|
|
borderColor: getColor(color_counter),
|
|
backgroundColor: getColor(color_counter),
|
|
data: player_pointprogress[puuid],
|
|
spanGaps: true,
|
|
})
|
|
color_counter++;
|
|
}
|
|
// Graphen erstellen
|
|
new Chart(`progress-chart-combined`, {
|
|
type: "line",
|
|
data: {
|
|
labels: all_dates,
|
|
datasets: all_rank_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);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
}
|
|
});
|
|
new Chart(`progress-chart-combined-progress`, {
|
|
type: "line",
|
|
data: {
|
|
labels: all_dates,
|
|
datasets: all_progress_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,
|
|
},
|
|
},
|
|
responsive: true,
|
|
maintainAspectRatio: 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("-");
|
|
let xValues = [];
|
|
let yValues = [];
|
|
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);
|
|
}
|
|
new Chart(`progress-chart-${puuid}`, {
|
|
type: "line",
|
|
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)",
|
|
data: yValues
|
|
}]
|
|
},
|
|
options: {
|
|
plugins: {
|
|
legend: {display: false},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
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;
|
|
},
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
display: true,
|
|
stepSize: 100,
|
|
ticks: {
|
|
callback: (value) => {
|
|
return points_to_rankstring(value,false);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
}
|
|
});
|
|
}
|
|
|
|
};
|
|
|
|
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;
|
|
}
|
|
|
|
function getColor(num) {
|
|
const colors = ["#33b1ff", "#d2a106", "#007d79", "#8a3ffc", "#ff7eb6", "#ba4e00", "#fa4d56", "#fff1f1", "#6fdc8c", "#4589ff", "#d12771", "#08bdba", "#bae6ff", "#d4bbff"];
|
|
|
|
return colors[num%9];
|
|
}
|
|
|
|
function toggle_combined_chart() {
|
|
const comb_charts = this.parentNode.parentNode.querySelectorAll(`.leaderboard>.graph-wrapper`);
|
|
const chart = this.parentNode.parentNode.querySelector(`.graph-wrapper.${this.id}`);
|
|
if (chart.classList.contains("closed")) {
|
|
comb_charts.forEach(element => element.classList.add("closed"));
|
|
chart.classList.remove("closed");
|
|
} else {
|
|
chart.classList.add("closed");
|
|
}
|
|
}
|
|
function toggle_leaderboard_chart() {
|
|
if (this.classList.contains("closed")) {
|
|
this.classList.remove("closed");
|
|
} else {
|
|
this.classList.add("closed");
|
|
}
|
|
}
|
|
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)); |