|
|
|
@ -3,24 +3,11 @@ let player_charts = []; |
|
|
|
|
|
|
|
|
|
const x_scale = { |
|
|
|
|
display: true, |
|
|
|
|
type: "timeseries", |
|
|
|
|
time: { |
|
|
|
|
parser: "dd.MM.yy HH:mm", |
|
|
|
|
tooltipFormat: "dd.MM.yy HH:mm", |
|
|
|
|
unit: "day", |
|
|
|
|
unitStepSize: 1, |
|
|
|
|
displayFormats: { |
|
|
|
|
"day": "dd.MM.yy", |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
type: "linear", |
|
|
|
|
stepSize: 1000 * 60 * 60 * 24, |
|
|
|
|
ticks: { |
|
|
|
|
callback: (value, index, ticks) => { |
|
|
|
|
let tickdate = new Date(value); |
|
|
|
|
if (index === 0) return `${tickdate.getDate()}.${month_names[tickdate.getMonth()]}`; |
|
|
|
|
let prev_tickdate = new Date(ticks[index-1].value); |
|
|
|
|
if (prev_tickdate.getDate() === tickdate.getDate()) { |
|
|
|
|
return null; |
|
|
|
|
} |
|
|
|
|
return `${tickdate.getDate()}.${month_names[tickdate.getMonth()]}`; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
@ -98,6 +85,20 @@ async function create_charts() { |
|
|
|
|
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
|
|
|
|
|
|
|
|
|
|
const tooltip_plugin = { |
|
|
|
|
callbacks: { |
|
|
|
|
label: function (context) { |
|
|
|
|
return format_rank(player_entries_byName[context.dataset.label][context.parsed.x / 1000]["tier"], player_entries_byName[context.dataset.label][context.parsed.x / 1000]["rank"], player_entries_byName[context.dataset.label][context.parsed.x / 1000]["points"]) |
|
|
|
|
}, |
|
|
|
|
title: items => { |
|
|
|
|
return new Date(items[0].raw.x).toLocaleDateString(); |
|
|
|
|
}, |
|
|
|
|
beforeTitle: function (context) { |
|
|
|
|
return context[0].dataset.label; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
await fetch(`get.php`, { |
|
|
|
|
method: "GET", |
|
|
|
|
}) |
|
|
|
@ -126,7 +127,10 @@ async function create_charts() { |
|
|
|
|
player_start_points = current_points; |
|
|
|
|
player_progress_values[puuid].push({x: parseInt(timestamp) * 1000, y: 0}); |
|
|
|
|
} else { |
|
|
|
|
player_progress_values[puuid].push({x: parseInt(timestamp) * 1000, y: current_points - player_start_points}); |
|
|
|
|
player_progress_values[puuid].push({ |
|
|
|
|
x: parseInt(timestamp) * 1000, |
|
|
|
|
y: current_points - player_start_points |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// Linie für den Spieler zu Datasets des Graphen hinzufügen
|
|
|
|
@ -158,16 +162,7 @@ async function create_charts() { |
|
|
|
|
}, |
|
|
|
|
options: { |
|
|
|
|
plugins: { |
|
|
|
|
tooltip: { |
|
|
|
|
callbacks: { |
|
|
|
|
label: function(context) { |
|
|
|
|
return format_rank(player_entries_byName[context.dataset.label][context.parsed.x/1000]["tier"],player_entries_byName[context.dataset.label][context.parsed.x/1000]["rank"],player_entries_byName[context.dataset.label][context.parsed.x/1000]["points"]) |
|
|
|
|
}, |
|
|
|
|
beforeTitle: function (context) { |
|
|
|
|
return context[0].dataset.label; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
tooltip: tooltip_plugin, |
|
|
|
|
zoom: zoom_plugin, |
|
|
|
|
legend: legend_plugin, |
|
|
|
|
}, |
|
|
|
@ -178,7 +173,7 @@ async function create_charts() { |
|
|
|
|
stepSize: 100, |
|
|
|
|
ticks: { |
|
|
|
|
callback: (value) => { |
|
|
|
|
return points_to_rankstring(value,false); |
|
|
|
|
return points_to_rankstring(value, false); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
@ -194,16 +189,7 @@ async function create_charts() { |
|
|
|
|
}, |
|
|
|
|
options: { |
|
|
|
|
plugins: { |
|
|
|
|
tooltip: { |
|
|
|
|
callbacks: { |
|
|
|
|
label: function(context) { |
|
|
|
|
return format_rank(player_entries_byName[context.dataset.label][context.parsed.x/1000]["tier"],player_entries_byName[context.dataset.label][context.parsed.x/1000]["rank"],player_entries_byName[context.dataset.label][context.parsed.x/1000]["points"]) |
|
|
|
|
}, |
|
|
|
|
beforeTitle: function (context) { |
|
|
|
|
return context[0].dataset.label; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
tooltip: tooltip_plugin, |
|
|
|
|
zoom: zoom_plugin, |
|
|
|
|
legend: legend_plugin, |
|
|
|
|
}, |
|
|
|
@ -223,12 +209,12 @@ async function create_charts() { |
|
|
|
|
const charts = document.getElementsByClassName("progress-chart"); |
|
|
|
|
for (const chart of charts) { |
|
|
|
|
let puuid = chart.id.split("-"); |
|
|
|
|
puuid.splice(0,2); |
|
|
|
|
puuid.splice(0, 2); |
|
|
|
|
puuid = puuid.join("-"); |
|
|
|
|
let values = []; |
|
|
|
|
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"]); |
|
|
|
|
values.push({x: parseInt(entriesKey)*1000, y: points}); |
|
|
|
|
values.push({x: parseInt(entriesKey) * 1000, y: points}); |
|
|
|
|
} |
|
|
|
|
player_charts.push(new Chart(`progress-chart-${puuid}`, { |
|
|
|
|
type: "line", |
|
|
|
@ -245,16 +231,7 @@ async function create_charts() { |
|
|
|
|
options: { |
|
|
|
|
plugins: { |
|
|
|
|
legend: {display: false}, |
|
|
|
|
tooltip: { |
|
|
|
|
callbacks: { |
|
|
|
|
label: function(context) { |
|
|
|
|
return format_rank(player_entries[puuid][context.parsed.x/1000]["tier"],player_entries[puuid][context.parsed.x/1000]["rank"],player_entries[puuid][context.parsed.x/1000]["points"]) |
|
|
|
|
}, |
|
|
|
|
beforeTitle: function (context) { |
|
|
|
|
return context[0].dataset.label; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
tooltip: tooltip_plugin, |
|
|
|
|
zoom: zoom_plugin, |
|
|
|
|
}, |
|
|
|
|
scales: { |
|
|
|
@ -264,7 +241,7 @@ async function create_charts() { |
|
|
|
|
stepSize: 100, |
|
|
|
|
ticks: { |
|
|
|
|
callback: (value) => { |
|
|
|
|
return points_to_rankstring(value,false); |
|
|
|
|
return points_to_rankstring(value, false); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
@ -276,7 +253,7 @@ async function create_charts() { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function rank_to_points(tier,rank,lp) { |
|
|
|
|
function rank_to_points(tier, rank, lp) { |
|
|
|
|
const apex_tiers = (tier === "MASTER" || tier === "GRANDMASTER" || tier === "CHALLENGER"); |
|
|
|
|
const tiers = { |
|
|
|
|
"DIAMOND": 2400, |
|
|
|
@ -299,11 +276,12 @@ function rank_to_points(tier,rank,lp) { |
|
|
|
|
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); |
|
|
|
|
let lp = (apex_tiers) ? points - 2800 : points % 100 |
|
|
|
|
let rank = (points - lp) % 400; |
|
|
|
|
let tier = (points - lp - rank); |
|
|
|
|
const tiers = { |
|
|
|
|
2400: "Diamond", |
|
|
|
|
2000: "Emerald", |
|
|
|
@ -326,8 +304,8 @@ function points_to_rankstring(points, include_LP = true) { |
|
|
|
|
return rank_string; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function format_rank(tier,rank,lp) { |
|
|
|
|
tier = tier.charAt(0).toUpperCase()+tier.slice(1).toLowerCase(); |
|
|
|
|
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}`; |
|
|
|
@ -338,7 +316,7 @@ function format_rank(tier,rank,lp) { |
|
|
|
|
function getColor(num) { |
|
|
|
|
const colors = ["#33b1ff", "#d2a106", "#007d79", "#8a3ffc", "#ff7eb6", "#ba4e00", "#fa4d56", "#fff1f1", "#6fdc8c", "#4589ff", "#d12771", "#08bdba", "#bae6ff", "#d4bbff"]; |
|
|
|
|
|
|
|
|
|
return colors[num%9]; |
|
|
|
|
return colors[num % 9]; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function toggle_combined_chart() { |
|
|
|
@ -351,6 +329,7 @@ function toggle_combined_chart() { |
|
|
|
|
chart.classList.add("closed"); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function toggle_leaderboard_chart(event) { |
|
|
|
|
if (this.classList.contains("closed")) { |
|
|
|
|
this.classList.remove("closed"); |
|
|
|
@ -359,6 +338,7 @@ function toggle_leaderboard_chart(event) { |
|
|
|
|
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("mousedown", toggle_leaderboard_chart)); |
|
|
|
|
|
|
|
|
@ -367,7 +347,7 @@ async function update_leaderboard_entries() { |
|
|
|
|
this.classList.add("button-updating") |
|
|
|
|
let eventSource = new EventSource("./update.php"); |
|
|
|
|
eventSource.addEventListener("progress", e => { |
|
|
|
|
this.style.setProperty("--button-loading-bar-width", `${e.data*100}%`); |
|
|
|
|
this.style.setProperty("--button-loading-bar-width", `${e.data * 100}%`); |
|
|
|
|
}) |
|
|
|
|
eventSource.addEventListener("forbidden", e => { |
|
|
|
|
const currenttime = new Date(); |
|
|
|
@ -388,6 +368,7 @@ async function update_leaderboard_entries() { |
|
|
|
|
eventSource.close(); |
|
|
|
|
update_leaderboard_elements(); |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
function reset_button(button) { |
|
|
|
|
button.disabled = false; |
|
|
|
|
button.style.setProperty("--button-loading-bar-width", `0`); |
|
|
|
@ -411,7 +392,8 @@ function format_time_minsec(date) { |
|
|
|
|
} |
|
|
|
|
return min + trenner + nullausgleich + date.getSeconds() + format; |
|
|
|
|
} |
|
|
|
|
const month_names = ["Jan","Feb","Mär","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez"]; |
|
|
|
|
|
|
|
|
|
const month_names = ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"]; |
|
|
|
|
|
|
|
|
|
async function update_leaderboard_elements() { |
|
|
|
|
fetch(`./leaderboard_list.php`, { |
|
|
|
|