Add sorting functionality

module.json

@@ -1,34 +1,36 @@
 {
-    "id": "global-progress-clocks",
-    "title": "Global Progress Clocks",
-    "description": "Blades in the Dark style progress clocks that show on the sidebar",
-    "version": "0.0.3",
-    "authors": [
-      {
-        "name": "Supe"
-      }
-    ],
-    "compatibility": {
-      "minimum": "10",
-      "verified": "10.291"
-    },
-    "scripts": [
-      "greensock/dist/gsap.min.js"
-    ],
-    "esmodules": [
-      "module/index.js"
-    ],
-    "languages": [
-      {
-        "lang": "en",
-        "name": "English",
-        "path": "lang/en.json"
-      }
-    ],
-    "styles": [
-      "styles/style.css"
-    ],
-    "url": "https://github.com/CarlosFdez/global-progress-clocks",
-    "manifest": "https://github.com/CarlosFdez/global-progress-clocks/releases/latest/download/module.json",
-    "download": "https://github.com/CarlosFdez/global-progress-clocks/releases/download/v0.0.3/module.zip"
-  }
+  "id": "global-progress-clocks",
+  "title": "Global Progress Clocks",
+  "description": "Blades in the Dark style progress clocks that show on the sidebar",
+  "version": "0.1.0",
+  "authors": [
+    {
+      "name": "Supe",
+      "flags": {}
+    }
+  ],
+  "compatibility": {
+    "minimum": "10",
+    "verified": "10.291"
+  },
+  "scripts": [
+    "greensock/dist/gsap.min.js"
+  ],
+  "esmodules": [
+    "module/index.js"
+  ],
+  "languages": [
+    {
+      "lang": "en",
+      "name": "English",
+      "path": "lang/en.json",
+      "flags": {}
+    }
+  ],
+  "styles": [
+    "styles/style.css"
+  ],
+  "url": "https://github.com/CarlosFdez/global-progress-clocks",
+  "manifest": "https://github.com/CarlosFdez/global-progress-clocks/releases/latest/download/module.json",
+  "download": "https://github.com/CarlosFdez/global-progress-clocks/releases/download/v0.1.0/module.zip"
+}

module/clock-panel.js

@@ -1,3 +1,5 @@
+import SortableJS from "./sortable.complete.esm.js";
+
 const CLOCK_SIZES = [2, 3, 4, 5, 6, 8, 10, 12];
 
 export class ClockPanel extends Application {
@@ -41,7 +43,6 @@ export class ClockPanel extends Application {
     activateListeners($html) {
         // Fade in all new rendered clocks
         const rendered = [...$html.get(0).querySelectorAll("[data-id]")].map((el) => el.dataset.id);
-        console.log(rendered);
         const newlyRendered = rendered.filter((r) => !this.lastRendered.includes(r));
         for (const newId of newlyRendered) {
             gsap.fromTo($html.find(`[data-id=${newId}]`), { opacity: 0 }, { opacity: 1, duration: 0.25 });
@@ -123,5 +124,17 @@ export class ClockPanel extends Application {
                 this.db.delete(clockId);
             }
         });
+
+        // Drag/drop reordering
+        new SortableJS($html.find(".clock-list").get(0), {
+            draggable: ".clock-entry",
+            animation: 200,
+            direction: "vertical",
+            onEnd: (event) => {
+                const id = event.item.dataset.id;
+                const newIndex = event.newDraggableIndex;
+                this.db.move(id, newIndex);
+            }
+        });
     }
 }

module/database.js

@@ -28,6 +28,18 @@ export class ClockDatabase extends Collection {
         game.settings.set("global-progress-clocks", "activeClocks", clocks);
     }
 
+    move(id, idx) {
+        const clocks = Object.values(this.#getClockData());
+        const item = clocks.find((c) => c.id === id);
+        if (!item) return;
+
+        clocks.splice(clocks.indexOf(item), 1);
+        clocks.splice(idx, 0, item);
+
+        const newData = Object.fromEntries(clocks.map((c) => [c.id, c]));
+        game.settings.set("global-progress-clocks", "activeClocks", newData);
+    }
+
     #getClockData() {
         return game.settings.get("global-progress-clocks", "activeClocks");
     }