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

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));