Merge remote-tracking branch 'origin/main'

public/elotracker/chart-integration.js

@@ -118,6 +118,9 @@ async function create_charts() {
 			let all_rank_yDatasets = []; // Datasets, also die einzelnen Linien im Graphen, beinhaltet player_rank_values
 			let all_progress_yDatasets = []; // Datasets, also die einzelnen Linien im Graphen, beinhaltet player_progress_values
 
+			let minval = -1;
+			let maxval = -1;
+
 			let color_counter = 0;
 			for (const puuid in player_entries) {
 				player_rank_values[puuid] = [];
@@ -129,17 +132,24 @@ async function create_charts() {
 					// Für alle Player Entries Punktzahl und Punktedifferenz berechnen
 					// Bei der Gelegenheit auch Entries in player_entries_byName eintragen
 					const current_points = rank_to_points(player_entries[puuid][timestamp]["tier"], player_entries[puuid][timestamp]["rank"], player_entries[puuid][timestamp]["points"]);
-					player_rank_values[puuid].push({x: parseInt(timestamp) * 1000, y: current_points});
+					const adj_timestamp = parseInt(timestamp) * 1000;
+					player_rank_values[puuid].push({x: adj_timestamp, y: current_points});
 					player_entries_byName[`${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`][timestamp] = player_entries[puuid][timestamp];
 					if (player_start_points === -1) {
 						player_start_points = current_points;
-						player_progress_values[puuid].push({x: parseInt(timestamp) * 1000, y: 0});
+						player_progress_values[puuid].push({x: adj_timestamp, y: 0});
 					} else {
 						player_progress_values[puuid].push({
-							x: parseInt(timestamp) * 1000,
+							x: adj_timestamp,
 							y: current_points - player_start_points
 						});
 					}
+					if (minval === -1 || adj_timestamp < minval) {
+						minval = adj_timestamp;
+					}
+					if (maxval === -1 || adj_timestamp > maxval) {
+						maxval = adj_timestamp;
+					}
 				}
 				// Linie für den Spieler zu Datasets des Graphen hinzufügen
 				all_rank_yDatasets.push({
@@ -173,7 +183,7 @@ async function create_charts() {
 				options: {
 					plugins: {
 						tooltip: tooltip_plugin,
-						zoom: zoom_plugin,
+						zoom: {...zoom_plugin},
 						legend: legend_plugin,
 					},
 					scales: {
@@ -200,7 +210,7 @@ async function create_charts() {
 				options: {
 					plugins: {
 						tooltip: tooltip_plugin,
-						zoom: zoom_plugin,
+						zoom: {...zoom_plugin},
 						legend: legend_plugin,
 					},
 					scales: {
@@ -213,6 +223,13 @@ async function create_charts() {
 					maintainAspectRatio: false,
 				}
 			}));
+			minval -= 7200000;
+			maxval += 7200000;
+			combined_charts.forEach(combined_chart => {
+				combined_chart.options.plugins.zoom.limits = {
+					x: {min: minval, max: maxval},
+				}
+			})
 		})
 		.catch(e => console.error(e))
 
@@ -222,11 +239,13 @@ async function create_charts() {
 		puuid.splice(0, 2);
 		puuid = puuid.join("-");
 		let values = [];
+		let minval = Object.keys(player_entries[puuid])[0] * 1000 - 7200000;
+		let maxval = Object.keys(player_entries[puuid])[Object.keys(player_entries[puuid]).length - 1] * 1000 + 7200000;
 		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});
 		}
-		player_charts.push(new Chart(`progress-chart-${puuid}`, {
+		const player_chart = new Chart(`progress-chart-${puuid}`, {
 			type: "line",
 			data: {
 				datasets: [{
@@ -243,7 +262,7 @@ async function create_charts() {
 				plugins: {
 					legend: {display: false},
 					tooltip: tooltip_plugin,
-					zoom: zoom_plugin,
+					zoom: {...zoom_plugin},
 				},
 				scales: {
 					x: x_scale,
@@ -260,7 +279,11 @@ async function create_charts() {
 				responsive: true,
 				maintainAspectRatio: false,
 			}
-		}));
+		});
+		player_chart.options.plugins.zoom.limits = {
+			x: {min: minval, max: maxval},
+		}
+		player_charts.push(player_chart);
 	}
 }
 
@@ -382,9 +405,14 @@ async function update_leaderboard_entries() {
 		update_leaderboard_elements();
 	})
 
-	function reset_button(button) {
+	async function reset_button(button) {
-		button.disabled = false;
+		await new Promise(r => setTimeout(r,400)); // warten bis ladebalken am ende angekommen ist
+		button.style.setProperty("--button-loading-bar-opacity", `0`);
+		await new Promise(r => setTimeout(r,400)); // warten bis ladebalken verblasst ist
 		button.style.setProperty("--button-loading-bar-width", `0`);
+		await new Promise(r => setTimeout(r,400)); // warten bis ladebalken wieder am anfang angekommen ist
+		button.style.setProperty("--button-loading-bar-opacity", `1`);
+		button.disabled = false;
 		button.classList.remove("button-updating");
 	}
 }

public/elotracker/styles.css

@@ -60,16 +60,18 @@ button.progress-button {
 	position: relative;
 	overflow: hidden;
 	--button-loading-bar-width: 0;
+	--button-loading-bar-opacity: 1;
 }
 button.progress-button::before {
 	content: '';
 	position: absolute;
+	opacity: var(--button-loading-bar-opacity);
 	width: var(--button-loading-bar-width);
 	height: 100%;
 	left: 0;
 	background-color: #294c87;
 	border-radius: 10px;
-	transition: width 400ms ease-out;
+	transition: width 400ms ease-out, opacity 400ms ease-out;
 	z-index: -1;
 }
 button.button-updating svg {