Compare commits

..

No commits in common. '731f6a5a05a8cd2423ad14e16e3273bebdafaa77' and '3af92a2d0e645b1c52651ad97e030c0b466304c7' have entirely different histories.

  1. 34
      public/elotracker/chart-integration.js
  2. 32
      public/elotracker/index.php
  3. 4
      public/elotracker/styles.css
  4. 1
      public/util/mysql_connect.php

@ -16,30 +16,15 @@ const x_scale = {
ticks: {
callback: (value, index, ticks) => {
let tickdate = new Date(value);
if (index === 0) return `${tickdate.getDate()}.${month_names[tickdate.getMonth()]}`;
if (index === 0) return `${tickdate.getDate()}.${tickdate.getMonth() + 1}.`;
let prev_tickdate = new Date(ticks[index-1].value);
if (prev_tickdate.getDate() === tickdate.getDate()) {
return null;
}
return `${tickdate.getDate()}.${month_names[tickdate.getMonth()]}`;
return `${tickdate.getDate()}.${tickdate.getMonth() + 1}.`;
}
}
}
const zoom_plugin = {
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true,
},
mode: "x",
},
pan: {
enabled: true,
mode: "x",
},
}
window.onload = create_charts;
@ -123,8 +108,7 @@ async function create_charts() {
return context[0].dataset.label;
},
}
},
zoom: zoom_plugin,
}
},
scales: {
x: x_scale,
@ -158,8 +142,7 @@ async function create_charts() {
return context[0].dataset.label;
},
}
},
zoom: zoom_plugin,
}
},
scales: {
x: x_scale,
@ -207,8 +190,7 @@ async function create_charts() {
return context[0].dataset.label;
},
}
},
zoom: zoom_plugin,
}
},
scales: {
x: x_scale,
@ -304,16 +286,15 @@ function toggle_combined_chart() {
chart.classList.add("closed");
}
}
function toggle_leaderboard_chart(event) {
function toggle_leaderboard_chart() {
if (this.classList.contains("closed")) {
this.classList.remove("closed");
} else {
if (event.target.nodeName === "CANVAS") return;
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));
document.querySelectorAll("button.leaderboard-element").forEach(element => element.addEventListener("click", toggle_leaderboard_chart));
async function update_leaderboard_entries() {
this.disabled = true;
@ -364,7 +345,6 @@ 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"];
async function update_leaderboard_elements() {
fetch(`./leaderboard_list.php`, {

@ -4,25 +4,27 @@
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet">
<title>UEM Elo Tracker</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0/hammer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0/dist/chartjs-plugin-zoom.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
</head>
<body>
<h1>UEM LoL Elo-Challenge</h1>
<div class='uem-logo-header'><img class='uem-logo' src='./../img/uem-logo.png' alt=''></div>
<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'>
<?php
echo "<h1>UEM LoL Elo-Challenge</h1>";
echo "<div class='uem-logo-header'><img class='uem-logo' src='./../img/uem-logo.png' alt=''></div>";
echo "<div class='leaderboard'>";
echo "<button type='button' class='update-leaderboard progress-button'>Ränge aktualisieren ".file_get_contents(__DIR__."/../img/material-symbols/sync_24dp_FILL1_wght300_GRAD0_opsz24.svg")."</button>";
echo "<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>
</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>
<?php include "leaderboard_list.php"; ?>
</div>
<script src="chart-integration.js"></script>
</div>";
echo "<div class='graph-wrapper rank-graph closed'><canvas id=\"progress-chart-combined\" style=\"width:100%;max-width:700px\"></canvas></div>";
echo "<div class='graph-wrapper progress-graph closed'><canvas id=\"progress-chart-combined-progress\" style=\"width:100%;max-width:700px\"></canvas></div>";
include "leaderboard_list.php";
echo "</div>";
?>
<script src="chart-integration.js"></script>
</body>
</html>

@ -106,10 +106,6 @@ button.button-updating svg {
.leaderboard-element:hover {
background-color: #1f2931;
}
.leaderboard-element:has(canvas:hover) {
background-color: transparent;
cursor: initial;
}
.leaderboard-element.place-1 {
border: solid 4px var(--gold-1);
}

@ -22,7 +22,6 @@ class MySQLConnection {
private function createConn(): void {
$this->mysqli = new mysqli($this->host . ":" . $this->port, $this->user, $this->pass, $this->dbName);
$this->mysqli->set_charset("utf8");
}
public function query($sql): mysqli_result|bool {

Loading…
Cancel
Save