feat: Add sorting options for results table

html/fonts/fontawesome/css/.gitignore

@@ -0,0 +1 @@
+*

html/fonts/fontawesome/fonts/.gitignore

@@ -0,0 +1 @@
+*

html/results/index.php

@@ -3,12 +3,32 @@
 require_once __DIR__ . '/../../core.php';
 require_once __DIR__ . '/../../lib/rating.php';
 
-$mobs = getMobsWithMetaData();
+$validOrderColumns = [
+    "position",
+    "name",
+    "rating",
+    "matches",
+    "wins",
+    "losses"
+];
+
+$orderColumn = $_GET["order"];
+if (!in_array($orderColumn, $validOrderColumns)) {
+    $orderColumn = "position";
+}
+
+$orderDirection = $_GET["direction"] == "desc" ? "desc" : "asc";
+
+$mobs = getMobsWithMetaData($orderColumn, $orderDirection);
 $trends = getRatingTrends();
 
+if (isset($_GET["ajax"])) {
+    require __DIR__ . '/../../view/fragments/mobList.php';
+} else {
     $title = "MobMash - Results";
     $content = function () use ($mobs, $trends) {
         require __DIR__ . '/../../view/pages/results.php';
     };
 
     require_once __DIR__ . '/../../view/layout.php';
+}

html/styles/main.css

@@ -104,7 +104,12 @@ h1 {
     margin-left: 2.5vw;
 }
 
-.results-list img, .results-list canvas {
+.results-list img {
+    height: 100px;
+}
+
+.results-list .trend-container {
+    width: 400px;
     height: 100px;
 }
 

resources/js/package-lock.json

@@ -10,6 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "chart.js": "^4.4.3",
+        "font-awesome": "^4.7.0",
         "htmx.org": "^2.0.1"
       },
       "devDependencies": {
@@ -455,6 +456,14 @@
         "@esbuild/win32-x64": "0.23.0"
       }
     },
+    "node_modules/font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==",
+      "engines": {
+        "node": ">=0.10.3"
+      }
+    },
     "node_modules/htmx.org": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-2.0.1.tgz",

resources/js/package.json

@@ -4,13 +4,15 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "esbuild index.js --bundle --outfile=../../html/js/bundle.js",
+    "build": "esbuild index.js --bundle --outfile=../../html/js/bundle.js && npm run install-fontawesome",
+    "install-fontawesome": "cp ./node_modules/font-awesome/fonts/* ../../html/fonts/fontawesome/fonts/ && cp ./node_modules/font-awesome/css/font-awesome.css ../../html/fonts/fontawesome/css/",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "MIT",
   "dependencies": {
     "chart.js": "^4.4.3",
+    "font-awesome": "^4.7.0",
     "htmx.org": "^2.0.1"
   },
   "devDependencies": {

view/fragments/mobList.php

@@ -1,29 +1,55 @@
 <?php
 $mobs ??= [];
+
+function makeSortButton(string $field): void {
+    global $orderColumn, $orderDirection;
+
+    $icon = "fa-sort";
+    $direction = "desc";
+
+    if ($field == $orderColumn) {
+        if ($orderDirection == "desc") {
+            $direction = "asc";
+            $icon = "fa-sort-up";
+        } else {
+            $icon = "fa-sort-down";
+        }
+    }
+
+    ?>
+        <a href="?order=<?= $field ?>&direction=<?= $direction ?>" onclick="return false;"
+           data-hx-get="?ajax&order=<?= $field ?>&direction=<?= $direction ?>"
+           data-hx-target=".results-list" data-hx-swap="outerHTML"
+        >
+            <i class="fa <?= $icon ?>"></i>
+        </a>
+    <?php
+}
+
 ?>
 <table class="results-list">
     <thead>
         <tr>
             <th>
-                Position
+                Position <?php makeSortButton("position"); ?>
             </th>
             <th>
                 <!-- image -->
             </th>
             <th>
-                Name
+                Name <?php makeSortButton("name"); ?>
             </th>
             <th>
-                Rating
+                Rating <?php makeSortButton("rating"); ?>
             </th>
             <th>
-                Matches
+                Matches <?php makeSortButton("matches"); ?>
             </th>
             <th>
-                Wins
+                Wins <?php makeSortButton("wins"); ?>
             </th>
             <th>
-                Losses
+                Losses <?php makeSortButton("losses"); ?>
             </th>
             <th>
                 Trend

view/fragments/mobListItem.php

@@ -1,13 +1,16 @@
 <?php
     $mob ??= [];
     $trends ??= [];
+    // we need to have a request unique suffix for the trend canvas id
+    // - otherwise Chart.js will get confused
+    $uniqueSuffix = intval(microtime(true) * 1000) % 1000000;
 ?>
 <tr>
     <td>
         <?= $mob["position"] ?>
     </td>
     <td>
-        <img src="/images/mobs/<?= $mob["image"] ?>" />
+        <img alt="<?= $mob["name"] ?>" src="/images/mobs/<?= $mob["image"] ?>" />
     </td>
     <td>
         <?= $mob["name"] ?>
@@ -25,7 +28,9 @@
         <?= $mob["losses"] ?>
     </td>
     <td>
-        <canvas id="trend-<?= $mob["id"] ?>"></canvas>
+        <div class="trend-container">
+            <canvas id="trend-<?= $mob["id"] . $uniqueSuffix ?>"></canvas>
+        </div>
         <script>
             (function() {
                 const dates = JSON.parse('<?=
@@ -34,7 +39,7 @@
                 const ratings = JSON.parse('<?=
                     json_encode(array_map(fn($datapoint) => doubleval($datapoint["rating"]), $trends[$mob["id"]]))
                 ?>');
-                new Chart("trend-<?= $mob["id"] ?>", {
+                new Chart("trend-<?= $mob["id"] . $uniqueSuffix ?>", {
                     type: "line",
                     data: {
                         labels: dates,
@@ -51,7 +56,7 @@
                                 display: false,
                             },
                         },
-                        aspectRatio: 5,
+                        maintainAspectRatio: false,
                         animation: false,
                     }
                 });

view/layout.php

@@ -4,6 +4,7 @@
         <title><?= $title ?? ""; ?></title>
         <link rel="stylesheet" type="text/css" href="/styles/main.css" />
         <link rel="stylesheet" type="text/css" href="/styles/fonts.css" />
+        <link rel="stylesheet" type="text/css" href="/fonts/fontawesome/css/font-awesome.css" />
         <script type="application/javascript" src="/js/bundle.js"></script>
     </head>
     <body>