feat: add German localization and wrap countdown visual elements for styling improvements.

lang/de.json

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

module.json

@@ -1,7 +1,7 @@
 {
     "id": "dh-improved-countdowns",
     "title": "Improved Countdowns",
-    "version": "1.2.1",
+    "version": "1.2.2",
     "compatibility": {
         "minimum": "13",
         "verified": "13"
@@ -35,10 +35,15 @@
             "lang": "en",
             "name": "English",
             "path": "lang/en.json"
+        },
+        {
+            "lang": "de",
+            "name": "Deutsch",
+            "path": "lang/de.json"
         }
     ],
     "description": "A modern, draggable countdown tracker for the Daggerheart system.",
     "url": "https://github.com/cptn-cosmo/dh-improved-countdowns",
     "manifest": "https://github.com/cptn-cosmo/dh-improved-countdowns/releases/latest/download/module.json",
-    "download": "https://github.com/cptn-cosmo/dh-improved-countdowns/releases/download/1.2.1/dh-improved-countdowns.zip"
+    "download": "https://github.com/cptn-cosmo/dh-improved-countdowns/releases/download/1.2.2/dh-improved-countdowns.zip"
 }

scripts/countdown-app.js

@@ -43,7 +43,11 @@ export class CountdownTrackerApp extends HandlebarsApplicationMixin(ApplicationV
 
     static initialize() {
         this.instance = new CountdownTrackerApp();
-        const pos = game.settings.get("dh-improved-countdowns", "position");
+        let pos = game.settings.get("dh-improved-countdowns", "position");
+        if (!pos || (!pos.top && !pos.left) || (pos.top === 0 && pos.left === 0 && !pos.width)) {
+            // Default to top-left if no valid position is stored
+            pos = { top: 100, left: 100 };
+        }
         this.instance.render(true, { position: pos });
     }
 

styles/countdown.css

@@ -108,6 +108,27 @@
     display: flex;
     flex-direction: column;
     gap: 16px;
+    max-height: 60vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 4px;
+    /* Space for scrollbar */
+    /* Custom scrollbar for webkit */
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+}
+
+.countdowns-list::-webkit-scrollbar {
+    width: 4px;
+}
+
+.countdowns-list::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.countdowns-list::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
 }
 
 .countdown-item {
@@ -125,10 +146,22 @@
     letter-spacing: 0.5px;
     color: rgba(255, 255, 255, 0.8);
     text-align: center;
+    /* max-width removed to allow natural width, or increased if needed */
     max-width: 150px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    /* Allow wrapping */
+    line-height: 1.2;
+    transition: max-width 0.3s ease;
+}
+
+.countdown-tracker-window:not(.minimized):hover .countdown-name {
+    max-width: 250px;
+    /* Reduced from none to provide some limit, or use none */
+    overflow: visible;
+    white-space: normal;
+    /* Allow wrapping */
 }
 
 .countdown-visual {
@@ -137,6 +170,14 @@
     gap: 10px;
 }
 
+.visual-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* Ensure the number overlay is positioned relative to this wrapper */
+}
+
 .icon-container {
     position: relative;
     width: 48px;
@@ -164,10 +205,9 @@
 
 .value-overlay {
     position: absolute;
-    top: 0;
+    top: 50%;
-    left: 0;
+    left: 50%;
-    width: 100%;
+    transform: translate(-50%, -50%);
-    height: 100%;
     pointer-events: none;
     display: flex;
     align-items: center;
@@ -179,9 +219,18 @@
     font-weight: 800;
     color: #fff;
     text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.9);
+    width: max-content;
+    /* Allow numbers to extend beyond icon width if needed */
+    pointer-events: none;
+    z-index: 10;
 }
 
 .value-overlay.visual {
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    transform: none;
     background: rgba(0, 0, 0, 0.2);
 }
 

templates/countdown-tracker.hbs

@@ -35,6 +35,7 @@
                 </a>
                 {{/if}}
 
+                <div class="visual-wrapper">
                     <div class="icon-container {{countdown.cssClass}}" {{#if
                         ../isMinimized}}data-tooltip="{{countdown.name}}" {{/if}}>
                         <img src="{{countdown.img}}" class="countdown-icon" />
@@ -136,22 +137,26 @@
                                 {{else}}
                                 {{#if (eq ../borderEdge "bottom")}}
                                 <line x1="1" y1="1" x2="1" y2="47" stroke="{{../borderColor}}" stroke-width="2"
-                                stroke-linecap="round" pathLength="100" stroke-dasharray="{{countdown.percentage}} 100"
+                                    stroke-linecap="round" pathLength="100"
+                                    stroke-dasharray="{{countdown.percentage}} 100"
                                     style="transition: stroke-dasharray 0.3s ease; opacity: 1;">
                                 </line>
                                 {{else if (eq ../borderEdge "top")}}
                                 <line x1="47" y1="1" x2="47" y2="47" stroke="{{../borderColor}}" stroke-width="2"
-                                stroke-linecap="round" pathLength="100" stroke-dasharray="{{countdown.percentage}} 100"
+                                    stroke-linecap="round" pathLength="100"
+                                    stroke-dasharray="{{countdown.percentage}} 100"
                                     style="transition: stroke-dasharray 0.3s ease; opacity: 1;">
                                 </line>
                                 {{else if (eq ../borderEdge "left")}}
                                 <line x1="1" y1="1" x2="47" y2="1" stroke="{{../borderColor}}" stroke-width="2"
-                                stroke-linecap="round" pathLength="100" stroke-dasharray="{{countdown.percentage}} 100"
+                                    stroke-linecap="round" pathLength="100"
+                                    stroke-dasharray="{{countdown.percentage}} 100"
                                     style="transition: stroke-dasharray 0.3s ease; opacity: 1;">
                                 </line>
                                 {{else if (eq ../borderEdge "right")}}
                                 <line x1="1" y1="47" x2="47" y2="47" stroke="{{../borderColor}}" stroke-width="2"
-                                stroke-linecap="round" pathLength="100" stroke-dasharray="{{countdown.percentage}} 100"
+                                    stroke-linecap="round" pathLength="100"
+                                    stroke-dasharray="{{countdown.percentage}} 100"
                                     style="transition: stroke-dasharray 0.3s ease; opacity: 1;">
                                 </line>
                                 {{/if}}
@@ -176,6 +181,7 @@
                             {{/if}}
                         </div>
                         {{/if}}
+                    </div>
 
                     {{#if ../showNumbers}}
                     <div class="value-overlay number" style="color: {{../numberColor}};">