feat: Add localization support, inject 'Create Countdown' button into GM sidebar, display total countdown value, and enhance tracker styling and refresh handling.

lang/en.json

@@ -0,0 +1,4 @@
+{
+    "DHIC.Countdowns": "Countdowns",
+    "DHIC.CreateNewCountdown": "Create New Countdown"
+}

module.json

@@ -31,5 +31,12 @@
     "styles": [
         "styles/countdown.css"
     ],
+    "languages": [
+        {
+            "lang": "en",
+            "name": "English",
+            "path": "lang/en.json"
+        }
+    ],
     "description": "A modern, draggable countdown tracker for the Daggerheart system."
 }

scripts/countdown-app.js

@@ -16,7 +16,7 @@ export class CountdownTrackerApp extends HandlebarsApplicationMixin(ApplicationV
 
     static DEFAULT_OPTIONS = {
         id: "dh-improved-countdowns-app",
-        tag: "aside",
+        tag: "div",
         classes: ["dh-improved-countdowns"],
         window: {
             frame: false,
@@ -53,7 +53,7 @@ export class CountdownTrackerApp extends HandlebarsApplicationMixin(ApplicationV
         const isLocked = game.settings.get("dh-improved-countdowns", "locked");
 
         // Fetch countdowns from system settings
-        const systemCountdownSetting = game.settings.get("daggerheart", "countdowns");
+        const systemCountdownSetting = game.settings.get("daggerheart", "Countdowns");
         const countdowns = {};
 
         if (systemCountdownSetting && systemCountdownSetting.countdowns) {

scripts/module.js

@@ -38,15 +38,32 @@ Hooks.once('ready', () => {
 });
 
 // Re-render when countdowns change in the system
-Hooks.on('daggerheart.refresh', (data) => {
+Hooks.on('DhRefresh', (data) => {
-    if (data.refreshType === "countdown" || data.refreshType === 4) { // 4 is RefreshType.Countdown in Daggerheart
+    if (data.refreshType === "DhCoundownRefresh") {
         CountdownTrackerApp.instance?.render();
     }
 });
 
-// Generic socket refresh if system refresh doesn't catch everything
+// Inject "Create Countdown" button into Daggerheart GM Sidebar
-Hooks.on('refresh', (data) => {
+Hooks.on('renderDaggerheartMenu', (app, html) => {
-    if (data.refreshType === "countdown") {
+    if (!game.user.isGM) return;
-        CountdownTrackerApp.instance?.render();
+
+    const fieldset = document.createElement('fieldset');
+    fieldset.classList.add('dh-improved-countdowns-sidebar');
+    fieldset.innerHTML = `
+        <legend>${game.i18n.localize("DHIC.Countdowns")}</legend>
+        <div class="menu-refresh-container">
+            <button type="button" class="create-countdown-btn">
+                <i class="fa-solid fa-clock"></i> ${game.i18n.localize("DHIC.CreateNewCountdown")}
+            </button>
+        </div>
+    `;
+
+    fieldset.querySelector('.create-countdown-btn').addEventListener('click', () => {
+        if (game.system.api.applications.ui.CountdownEdit) {
+            new game.system.api.applications.ui.CountdownEdit().render(true);
         }
     });
+
+    html.appendChild(fieldset);
+});

styles/countdown.css

@@ -5,6 +5,7 @@
 
 /* Modern Countdown Tracker Application */
 .dh-improved-countdowns {
+    position: fixed;
     pointer-events: none;
     /* Let clicks pass through to child elements */
     z-index: 100;
@@ -12,23 +13,50 @@
 
 .countdown-tracker-window {
     pointer-events: all;
-    background: rgba(20, 20, 25, 0.85);
+    background: rgba(20, 20, 25, 0.25);
     backdrop-filter: blur(8px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     padding: 8px;
     display: flex;
     flex-direction: column;
     gap: 12px;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+    box-shadow: none;
     transition: all 0.3s ease;
     min-width: 120px;
     color: #eee;
     font-family: 'Inter', 'Roboto', sans-serif;
 }
 
+.countdown-tracker-window:hover {
+    background: rgba(20, 20, 25, 0.85);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+}
+
 .countdown-tracker-window.minimized {
-    min-width: 60px;
+    min-width: fit-content;
+    padding: 8px 12px;
+}
+
+.countdown-tracker-window.minimized .value-control {
+    display: none;
+}
+
+.countdown-tracker-window.minimized .countdown-visual {
+    gap: 0;
+}
+
+.countdown-tracker-window.minimized:hover {
+    min-width: 120px;
+}
+
+.countdown-tracker-window.minimized:hover .value-control {
+    display: flex;
+}
+
+.countdown-tracker-window.minimized:hover .countdown-visual {
+    gap: 10px;
 }
 
 /* Header and Drag Handle */
@@ -181,3 +209,41 @@
     padding: 8px;
     text-align: center;
 }
+
+/* Sidebar Injection */
+.dh-improved-countdowns-sidebar {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    padding: 8px;
+    margin-top: 8px;
+}
+
+.dh-improved-countdowns-sidebar .menu-refresh-container {
+    display: flex;
+    justify-content: center;
+}
+
+.dh-improved-countdowns-sidebar .create-countdown-btn {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    color: #eee;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 13px;
+    padding: 6px 12px;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.dh-improved-countdowns-sidebar .create-countdown-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.3);
+    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
+}
+
+.dh-improved-countdowns-sidebar i {
+    font-size: 12px;
+}

templates/countdown-tracker.hbs

@@ -34,7 +34,9 @@
                 
                 <div class="icon-container" {{#if ../isMinimized}}data-tooltip="{{countdown.name}}"{{/if}}>
                     <img src="{{countdown.img}}" class="countdown-icon" />
-                    <div class="value-overlay">{{countdown.progress.current}}</div>
+                    <div class="value-overlay">
+                        {{countdown.progress.current}}{{#unless ../isMinimized}}<span class="max-value">/{{countdown.progress.start}}</span>{{/unless}}
+                    </div>
                 </div>
 
                 {{#if countdown.editable}}