cosmo/dh-improved-countdowns
1
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
CPTN Cosmo 2025-12-22 15:17:54 +01:00
parent d39c5e3568
commit f4f549e018
5 changed files with 201 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

4
lang/de.json Normal file
View file

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

9
module.json
View file

@ -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"
}

6
scripts/countdown-app.js
View file

@ -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 });
}

57
styles/countdown.css
View file

@ -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;
left: 0;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
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);
}

258
templates/countdown-tracker.hbs
View file

@ -35,147 +35,153 @@
</a>
{{/if}}
<div class="icon-container {{countdown.cssClass}}" {{#if
../isMinimized}}data-tooltip="{{countdown.name}}" {{/if}}>
<img src="{{countdown.img}}" class="countdown-icon" />
<div class="visual-wrapper">
<div class="icon-container {{countdown.cssClass}}" {{#if
../isMinimized}}data-tooltip="{{countdown.name}}" {{/if}}>
<img src="{{countdown.img}}" class="countdown-icon" />
{{#if ../showVisuals}}
<div class="value-overlay visual">
{{#if ../enableVisualOverlay}}
{{#if (eq ../fillType "grayscale")}}
{{!-- Grayscale Filter Mode --}}
{{#if (eq ../iconShape "circle")}}
{{#if ../invertProgress}}
<div class="clock-visual grayscale-filter"
style="-webkit-mask-image: conic-gradient(transparent {{countdown.percentage}}%, black {{countdown.percentage}}%); mask-image: conic-gradient(transparent {{countdown.percentage}}%, black {{countdown.percentage}}%);">
</div>
{{else}}
<div class="clock-visual grayscale-filter"
style="-webkit-mask-image: conic-gradient(black {{countdown.percentage}}%, transparent {{countdown.percentage}}%); mask-image: conic-gradient(black {{countdown.percentage}}%, transparent {{countdown.percentage}}%);">
</div>
{{/if}}
{{else}}
{{#if ../invertProgress}}
<div class="bar-visual {{../barOrientation}} grayscale-filter"
style="{{#if (eq ../barOrientation 'horizontal')}}width: {{countdown.pctRemaining}}%; left: {{countdown.percentage}}%;{{else}}height: {{countdown.pctRemaining}}%; top: 0;{{/if}}">
</div>
{{else}}
<div class="bar-visual {{../barOrientation}} grayscale-filter"
style="{{#if (eq ../barOrientation 'horizontal')}}width: {{countdown.percentage}}%;{{else}}height: {{countdown.percentage}}%;{{/if}}">
</div>
{{/if}}
{{/if}}
{{else}}
{{!-- Color Overlay Mode --}}
{{#if (eq ../iconShape "circle")}}
{{#if ../invertProgress}}
<div class="clock-visual"
style="background: conic-gradient(transparent {{countdown.percentage}}%, {{../fillColor}} {{countdown.percentage}}%); opacity: 0.4;">
</div>
{{else}}
<div class="clock-visual"
style="background: conic-gradient({{../fillColor}} {{countdown.percentage}}%, transparent {{countdown.percentage}}%); opacity: 0.4;">
</div>
{{/if}}
{{else}}
{{#if ../invertProgress}}
<div class="bar-visual {{../barOrientation}}"
style="background-color: {{../fillColor}}; opacity: 0.4; {{#if (eq ../barOrientation 'horizontal')}}width: {{countdown.pctRemaining}}%; left: {{countdown.percentage}}%;{{else}}height: {{countdown.pctRemaining}}%; top: 0;{{/if}}">
</div>
{{else}}
<div class="bar-visual {{../barOrientation}}"
style="background-color: {{../fillColor}}; opacity: 0.4; {{#if (eq ../barOrientation 'horizontal')}}width: {{countdown.percentage}}%;{{else}}height: {{countdown.percentage}}%;{{/if}}">
</div>
{{/if}}
{{/if}}
{{/if}}
{{/if}}
{{#if ../enableVisualBorder}}
<svg class="progress-border-svg" viewBox="0 0 48 48" style="transform: rotate(-90deg);">
{{#if ../showVisuals}}
<div class="value-overlay visual">
{{#if ../enableVisualOverlay}}
{{#if (eq ../fillType "grayscale")}}
{{!-- Grayscale Filter Mode --}}
{{#if (eq ../iconShape "circle")}}
{{#if ../invertBorder}}
<circle cx="24" cy="24" r="23" fill="none" stroke="{{../borderColor}}" stroke-width="2"
pathLength="100" stroke-dasharray="{{countdown.pctRemaining}} 100"
stroke-dashoffset="-{{countdown.percentage}}"
style="transition: stroke-dasharray 0.3s ease, stroke-dashoffset 0.3s ease; opacity: 1;">
</circle>
{{#if ../invertProgress}}
<div class="clock-visual grayscale-filter"
style="-webkit-mask-image: conic-gradient(transparent {{countdown.percentage}}%, black {{countdown.percentage}}%); mask-image: conic-gradient(transparent {{countdown.percentage}}%, black {{countdown.percentage}}%);">
</div>
{{else}}
<circle cx="24" cy="24" r="23" fill="none" stroke="{{../borderColor}}" stroke-width="2"
pathLength="100" stroke-dasharray="{{countdown.percentage}} 100"
style="transition: stroke-dasharray 0.3s ease; opacity: 1;"></circle>
<div class="clock-visual grayscale-filter"
style="-webkit-mask-image: conic-gradient(black {{countdown.percentage}}%, transparent {{countdown.percentage}}%); mask-image: conic-gradient(black {{countdown.percentage}}%, transparent {{countdown.percentage}}%);">
</div>
{{/if}}
{{else}}
{{#if (eq ../borderStyle "edge")}}
{{#if ../invertBorder}}
{{#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="0 {{countdown.percentage}} {{countdown.pctRemaining}} 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="0 {{countdown.percentage}} {{countdown.pctRemaining}} 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="0 {{countdown.percentage}} {{countdown.pctRemaining}} 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="0 {{countdown.percentage}} {{countdown.pctRemaining}} 100"
style="transition: stroke-dasharray 0.3s ease; opacity: 1;">
</line>
{{/if}}
{{#if ../invertProgress}}
<div class="bar-visual {{../barOrientation}} grayscale-filter"
style="{{#if (eq ../barOrientation 'horizontal')}}width: {{countdown.pctRemaining}}%; left: {{countdown.percentage}}%;{{else}}height: {{countdown.pctRemaining}}%; top: 0;{{/if}}">
</div>
{{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"
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"
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"
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"
style="transition: stroke-dasharray 0.3s ease; opacity: 1;">
</line>
<div class="bar-visual {{../barOrientation}} grayscale-filter"
style="{{#if (eq ../barOrientation 'horizontal')}}width: {{countdown.percentage}}%;{{else}}height: {{countdown.percentage}}%;{{/if}}">
</div>
{{/if}}
{{/if}}
{{else}}
{{#if ../invertBorder}}
<rect x="1" y="1" width="46" height="46" rx="8" ry="8" fill="none"
stroke="{{../borderColor}}" stroke-width="2" pathLength="100"
stroke-dasharray="{{countdown.pctRemaining}} 100"
stroke-dashoffset="-{{countdown.percentage}}"
style="transition: stroke-dasharray 0.3s ease, stroke-dashoffset 0.3s ease; opacity: 1;">
</rect>
{{!-- Color Overlay Mode --}}
{{#if (eq ../iconShape "circle")}}
{{#if ../invertProgress}}
<div class="clock-visual"
style="background: conic-gradient(transparent {{countdown.percentage}}%, {{../fillColor}} {{countdown.percentage}}%); opacity: 0.4;">
</div>
{{else}}
<rect x="1" y="1" width="46" height="46" rx="8" ry="8" fill="none"
stroke="{{../borderColor}}" stroke-width="2" pathLength="100"
stroke-dasharray="{{countdown.percentage}} 100"
style="transition: stroke-dasharray 0.3s ease; opacity: 1;"></rect>
<div class="clock-visual"
style="background: conic-gradient({{../fillColor}} {{countdown.percentage}}%, transparent {{countdown.percentage}}%); opacity: 0.4;">
</div>
{{/if}}
{{else}}
{{#if ../invertProgress}}
<div class="bar-visual {{../barOrientation}}"
style="background-color: {{../fillColor}}; opacity: 0.4; {{#if (eq ../barOrientation 'horizontal')}}width: {{countdown.pctRemaining}}%; left: {{countdown.percentage}}%;{{else}}height: {{countdown.pctRemaining}}%; top: 0;{{/if}}">
</div>
{{else}}
<div class="bar-visual {{../barOrientation}}"
style="background-color: {{../fillColor}}; opacity: 0.4; {{#if (eq ../barOrientation 'horizontal')}}width: {{countdown.percentage}}%;{{else}}height: {{countdown.percentage}}%;{{/if}}">
</div>
{{/if}}
{{/if}}
{{/if}}
</svg>
{{/if}}
{{#if ../enableVisualBorder}}
<svg class="progress-border-svg" viewBox="0 0 48 48" style="transform: rotate(-90deg);">
{{#if (eq ../iconShape "circle")}}
{{#if ../invertBorder}}
<circle cx="24" cy="24" r="23" fill="none" stroke="{{../borderColor}}" stroke-width="2"
pathLength="100" stroke-dasharray="{{countdown.pctRemaining}} 100"
stroke-dashoffset="-{{countdown.percentage}}"
style="transition: stroke-dasharray 0.3s ease, stroke-dashoffset 0.3s ease; opacity: 1;">
</circle>
{{else}}
<circle cx="24" cy="24" r="23" fill="none" stroke="{{../borderColor}}" stroke-width="2"
pathLength="100" stroke-dasharray="{{countdown.percentage}} 100"
style="transition: stroke-dasharray 0.3s ease; opacity: 1;"></circle>
{{/if}}
{{else}}
{{#if (eq ../borderStyle "edge")}}
{{#if ../invertBorder}}
{{#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="0 {{countdown.percentage}} {{countdown.pctRemaining}} 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="0 {{countdown.percentage}} {{countdown.pctRemaining}} 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="0 {{countdown.percentage}} {{countdown.pctRemaining}} 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="0 {{countdown.percentage}} {{countdown.pctRemaining}} 100"
style="transition: stroke-dasharray 0.3s ease; opacity: 1;">
</line>
{{/if}}
{{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"
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"
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"
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"
style="transition: stroke-dasharray 0.3s ease; opacity: 1;">
</line>
{{/if}}
{{/if}}
{{else}}
{{#if ../invertBorder}}
<rect x="1" y="1" width="46" height="46" rx="8" ry="8" fill="none"
stroke="{{../borderColor}}" stroke-width="2" pathLength="100"
stroke-dasharray="{{countdown.pctRemaining}} 100"
stroke-dashoffset="-{{countdown.percentage}}"
style="transition: stroke-dasharray 0.3s ease, stroke-dashoffset 0.3s ease; opacity: 1;">
</rect>
{{else}}
<rect x="1" y="1" width="46" height="46" rx="8" ry="8" fill="none"
stroke="{{../borderColor}}" stroke-width="2" pathLength="100"
stroke-dasharray="{{countdown.percentage}} 100"
style="transition: stroke-dasharray 0.3s ease; opacity: 1;"></rect>
{{/if}}
{{/if}}
{{/if}}
</svg>
{{/if}}
</div>
{{/if}}
</div>
{{/if}}
{{#if ../showNumbers}}
<div class="value-overlay number" style="color: {{../numberColor}};">