diff --git a/html/results/index.php b/html/results/index.php index 0b8942c..cabd98a 100644 --- a/html/results/index.php +++ b/html/results/index.php @@ -4,9 +4,10 @@ require_once __DIR__ . '/../../core.php'; require_once __DIR__ . '/../../lib/rating.php'; $mobs = getMobsWithMetaData(); +$trends = getRatingTrends(); $title = "MobMash - Results"; -$content = function () use ($mobs) { +$content = function () use ($mobs, $trends) { require __DIR__ . '/../../view/pages/results.php'; }; diff --git a/html/styles/main.css b/html/styles/main.css index 7cebb07..2179f84 100644 --- a/html/styles/main.css +++ b/html/styles/main.css @@ -104,6 +104,6 @@ h1 { margin-left: 2.5vw; } -.results-list img { - max-height: 25px; -} \ No newline at end of file +.results-list img, .results-list canvas { + height: 100px; +} diff --git a/lib/rating.php b/lib/rating.php index 8d63c12..c04e7c9 100644 --- a/lib/rating.php +++ b/lib/rating.php @@ -52,4 +52,27 @@ function getMobsWithMetaData($orderBy = "rating", $direction = "DESC"): array { ); $query->execute(); return $query->fetchAll(PDO::FETCH_ASSOC); +} + +function getRatingTrends(): array { + global $pdo; + $query = $pdo->prepare(<<execute(); + $results = $query->fetchAll(PDO::FETCH_ASSOC); + + $trends = []; + foreach ($results as $result) { + $trendsForMob = []; + if (isset($trends[$result['mob']])) { + $trendsForMob = $trends[$result['mob']]; + } + $trendsForMob[] = $result; + $trends[$result['mob']] = $trendsForMob; + } + + return $trends; } \ No newline at end of file diff --git a/resources/js/index.js b/resources/js/index.js index 91641f7..c0c648d 100644 --- a/resources/js/index.js +++ b/resources/js/index.js @@ -1,4 +1,7 @@ import './htmx'; import './img-preload.ext'; -import './spinner'; \ No newline at end of file +import './spinner'; + +import {Chart} from 'chart.js/auto'; +window.Chart = Chart; \ No newline at end of file diff --git a/resources/js/package-lock.json b/resources/js/package-lock.json index 86f08bc..7bd821c 100644 --- a/resources/js/package-lock.json +++ b/resources/js/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.1", "license": "MIT", "dependencies": { + "chart.js": "^4.4.3", "htmx.org": "^2.0.1" }, "devDependencies": { @@ -399,6 +400,22 @@ "node": ">=18" } }, + "node_modules/@kurkle/color": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz", + "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==" + }, + "node_modules/chart.js": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.3.tgz", + "integrity": "sha512-qK1gkGSRYcJzqrrzdR6a+I0vQ4/R+SoODXyAjscQ/4mzuNzySaMCd+hyVxitSY1+L2fjPD1Gbn+ibNqRmwQeLw==", + "dependencies": { + "@kurkle/color": "^0.3.0" + }, + "engines": { + "pnpm": ">=8" + } + }, "node_modules/esbuild": { "version": "0.23.0", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.23.0.tgz", diff --git a/resources/js/package.json b/resources/js/package.json index ca52e5e..53bb30b 100644 --- a/resources/js/package.json +++ b/resources/js/package.json @@ -10,6 +10,7 @@ "author": "", "license": "MIT", "dependencies": { + "chart.js": "^4.4.3", "htmx.org": "^2.0.1" }, "devDependencies": { diff --git a/resources/js/spinner.js b/resources/js/spinner.js index 24acd72..dfbb5ae 100644 --- a/resources/js/spinner.js +++ b/resources/js/spinner.js @@ -24,7 +24,7 @@ window.stopSpinner = () => { window.addEventListener("load", () => { document.querySelector(".middle .spinner img") - .addEventListener("animationend", () => { + ?.addEventListener("animationend", () => { endAnimation(); if (spinnerActive) { triggerAnimation(); diff --git a/view/fragments/mobListItem.php b/view/fragments/mobListItem.php index eca711d..4c58e35 100644 --- a/view/fragments/mobListItem.php +++ b/view/fragments/mobListItem.php @@ -1,5 +1,6 @@ @@ -23,4 +24,39 @@ + + "> + + +