UEM
/
university-esports-mainz.de
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main'

Browse Source
main
Benjamin Kraft 3 months ago
parent 0eec2f5232 7a0c26ce5d
commit ab4814830f
4 changed files with 92 additions and 14 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 76
      public/elotracker/chart-integration.js
  2. 4
      public/elotracker/index.php
  3. 25
      public/elotracker/styles.css
  4. 1
      public/img/material-symbols/keyboard_arrow_down_24dp_FILL1_wght300_GRAD0_opsz24.svg

76
public/elotracker/chart-integration.js
Unescape View File

@ -21,6 +21,25 @@ const zoom_plugin = {
enabled: true,
},
mode: "x",
onZoomComplete: function({chart}) {
const show_point_cutoff = 1000 * 60 * 60 * 24 * 3
const diff = parseInt(chart.scales.x.max) - parseInt(chart.scales.x.min);
const show_points = diff < show_point_cutoff;
const hide_points = diff >= show_point_cutoff;
let update_chart = false;
chart.data.datasets.forEach(dataset => {
const points_shown = dataset.pointRadius > 0
if (show_points && !points_shown) {
dataset.pointRadius = 3;
update_chart = true;
}
if (hide_points && points_shown) {
dataset.pointRadius = 0;
update_chart = true;
}
})
if (update_chart) chart.update();
}
},
pan: {
enabled: true,
@ -35,7 +54,7 @@ const trigger_legend_hover = function (e, legendItem, legend) {
dataset.backgroundColor = (legendItem.datasetIndex === i || dataset.backgroundColor.length === 9) ? dataset.backgroundColor : dataset.backgroundColor + '3D';
dataset.borderColor = (legendItem.datasetIndex === i || dataset.borderColor.length === 9) ? dataset.borderColor : dataset.borderColor + '3D';
dataset.borderWidth = legendItem.datasetIndex === i ? 4 : 3;
dataset.pointRadius = 2;
dataset.pointRadius = dataset.pointRadius===0 ? 0 : 2;
});
legend.chart.update();
}
@ -118,6 +137,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 +151,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({
@ -151,6 +180,7 @@ async function create_charts() {
data: player_rank_values[puuid],
spanGaps: true,
pointHitRadius: 16,
pointRadius: 0,
})
all_progress_yDatasets.push({
label: `${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`,
@ -161,6 +191,7 @@ async function create_charts() {
data: player_progress_values[puuid],
spanGaps: true,
pointHitRadius: 16,
pointRadius: 0,
})
color_counter++;
}
@ -173,7 +204,7 @@ async function create_charts() {
options: {
plugins: {
tooltip: tooltip_plugin,
zoom: zoom_plugin,
zoom: {...zoom_plugin},
legend: legend_plugin,
},
scales: {
@ -200,7 +231,7 @@ async function create_charts() {
options: {
plugins: {
tooltip: tooltip_plugin,
zoom: zoom_plugin,
zoom: {...zoom_plugin},
legend: legend_plugin,
},
scales: {
@ -213,6 +244,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 +260,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: [{
@ -237,13 +277,14 @@ async function create_charts() {
borderJoinStyle: "round",
data: values,
pointHitRadius: 16,
pointRadius: 0,
}]
},
options: {
plugins: {
legend: {display: false},
tooltip: tooltip_plugin,
zoom: zoom_plugin,
zoom: {...zoom_plugin},
},
scales: {
x: x_scale,
@ -260,7 +301,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);
}
}
@ -333,11 +378,15 @@ function getColor(num) {
function toggle_combined_chart() {
const comb_charts = this.parentNode.parentNode.querySelectorAll(`.leaderboard>.graph-wrapper`);
const chart = this.parentNode.parentNode.querySelector(`.graph-wrapper.${this.id}`);
const buttons = document.querySelectorAll("button.open-general-graph");
if (chart.classList.contains("closed")) {
comb_charts.forEach(element => element.classList.add("closed"));
buttons.forEach(element => element.classList.remove("dropdown-open"));
chart.classList.remove("closed");
this.classList.add("dropdown-open");
} else {
chart.classList.add("closed");
this.classList.remove("dropdown-open");
}
}
@ -382,9 +431,14 @@ async function update_leaderboard_entries() {
update_leaderboard_elements();
})
function reset_button(button) {
button.disabled = false;
async function reset_button(button) {
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");
}
}

4
public/elotracker/index.php
Unescape View File

@ -14,8 +14,8 @@
<div class='leaderboard'>
<button type='button' class='update-leaderboard progress-button'>Ränge aktualisieren <?php echo file_get_contents(__DIR__."/../img/material-symbols/sync_24dp_FILL1_wght300_GRAD0_opsz24.svg")?></button>
<div class='combined-charts-buttons'>
<button type='button' id='rank-graph' class='open-general-graph'>Rang-Vergleich</button>
<button type='button' id='progress-graph' class='open-general-graph'>Fortschritt-Vergleich</button>
<button type='button' id='rank-graph' class='open-general-graph'>Rang-Vergleich <?php echo file_get_contents(__DIR__."/../img/material-symbols/keyboard_arrow_down_24dp_FILL1_wght300_GRAD0_opsz24.svg")?></button>
<button type='button' id='progress-graph' class='open-general-graph'>Fortschritt-Vergleich <?php echo file_get_contents(__DIR__."/../img/material-symbols/keyboard_arrow_down_24dp_FILL1_wght300_GRAD0_opsz24.svg")?></button>
</div>
<div class='graph-wrapper rank-graph closed'><canvas id="progress-chart-combined" style="width:100%;max-width:700px"></canvas></div>
<div class='graph-wrapper progress-graph closed'><canvas id="progress-chart-combined-progress" style="width:100%;max-width:700px"></canvas></div>

25
public/elotracker/styles.css
Unescape View File

@ -38,6 +38,9 @@ button[disabled] {
button[disabled]:hover {
background-color: initial;
}
button svg {
transition: transform 400ms;
}
.uem-logo-header {
display: flex;
@ -56,20 +59,34 @@ button.update-leaderboard {
align-items: center;
margin-bottom: 8px;
}
button.open-general-graph {
display: flex;
flex-direction: row;
gap: 4px;
align-items: center;
}
button.dropdown-open {
background-color: #1f2931;
}
button.dropdown-open svg {
transform: rotateX(180deg);
}
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 {
@ -79,6 +96,12 @@ button.button-updating svg {
to { transform: rotate(-360deg)}
}
.combined-charts-buttons {
display: flex;
flex-direction: row;
gap: 4px;
}
.leaderboard {
display: flex;
flex-direction: column;

1
public/img/material-symbols/keyboard_arrow_down_24dp_FILL1_wght300_GRAD0_opsz24.svg
Unescape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-357.85 253.85-584 296-626.15l184 184 184-184L706.15-584 480-357.85Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 197 B

Write Preview
Loading…
Cancel
Save