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); } } }, }, 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 = ["#ea5545", "#f46a9b", "#ef9b20", "#edbf33", "#ede15b", "#bdcf32", "#87bc45", "#27aeef", "#b33dc6"] return colors[num%9]; } function toggle_combined_chart() { let chart = this.parentNode.parentNode.querySelector(`.graph-wrapper.${this.id}`); if (chart.classList.contains("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.querySelector("button#rank-graph").addEventListener("click", toggle_combined_chart); document.querySelectorAll("button.leaderboard-element").forEach(element => element.addEventListener("click", toggle_leaderboard_chart));