Toggle pills

module/applications/ui/countdownEdit.mjs

@@ -35,7 +35,7 @@ export default class CountdownEdit extends HandlebarsApplicationMixin(Applicatio
 
     static PARTS = {
         countdowns: {
-            template: 'systems/daggerheart/templates/ui/countdown-edit.hbs',
+            template: 'systems/daggerheart/templates/ui/countdowns/countdown-edit.hbs',
             scrollable: ['.expanded-view', '.edit-content']
         }
     };
@@ -45,7 +45,7 @@ export default class CountdownEdit extends HandlebarsApplicationMixin(Applicatio
         context.isGM = game.user.isGM;
         context.ownershipDefaultOptions = CONFIG.DH.GENERAL.basicOwnershiplevels;
         context.defaultOwnership = this.data.defaultOwnership;
-        context.countdownBaseTypes = CONFIG.DH.GENERAL.countdownBaseTypes;
+        context.countdownTypes = CONFIG.DH.GENERAL.countdownType;
         context.countdownProgressionTypes = CONFIG.DH.GENERAL.countdownProgressionTypes;
         context.countdownLoopingTypes = CONFIG.DH.GENERAL.countdownLoopingTypes;
         context.hideNewCountdowns = this.hideNewCountdowns;
@@ -62,7 +62,7 @@ export default class CountdownEdit extends HandlebarsApplicationMixin(Applicatio
             const randomizeValid = !new Roll(countdown.progress.startFormula ?? '').isDeterministic;
             acc[key] = {
                 ...countdown,
-                typeName: game.i18n.localize(CONFIG.DH.GENERAL.countdownBaseTypes[countdown.type].label),
+                typeName: game.i18n.localize(CONFIG.DH.GENERAL.countdownType[countdown.type].label),
                 progress: {
                     ...countdown.progress,
                     typeName: game.i18n.localize(

module/applications/ui/countdowns.mjs

@@ -11,9 +11,14 @@ const { HandlebarsApplicationMixin, ApplicationV2 } = foundry.applications.api;
  */
 
 export default class DhCountdowns extends HandlebarsApplicationMixin(ApplicationV2) {
+    previusCountdownData = null;
+    countdownChangeAnimationTimeout = null;
+
     constructor(options = {}) {
         super(options);
 
+        this.previusCountdownData = 
+            game.settings.get(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.Countdowns).countdowns;
         this.setupHooks();
     }
 
@@ -32,6 +37,7 @@ export default class DhCountdowns extends HandlebarsApplicationMixin(Application
         },
         actions: {
             toggleViewMode: DhCountdowns.#onToggleViewMode,
+            onToggleCountdownTypes: DhCountdowns.#onToggleCountdownTypes,
             editCountdowns: DhCountdowns.#onEditCountdowns,
             loopCountdown: DhCountdowns.#onLoopCountdown,
             decreaseCountdown: (_, target) => this.editCountdown(false, target),
@@ -48,7 +54,7 @@ export default class DhCountdowns extends HandlebarsApplicationMixin(Application
     static PARTS = {
         resources: {
             root: true,
-            template: 'systems/daggerheart/templates/ui/countdowns.hbs'
+            template: 'systems/daggerheart/templates/ui/countdowns/countdowns-view.hbs'
         }
     };
 
@@ -76,16 +82,14 @@ export default class DhCountdowns extends HandlebarsApplicationMixin(Application
         return values.filter(v => v.ownership !== CONST.DOCUMENT_OWNERSHIP_LEVELS.NONE);
     }
 
-    /** @override */
+    _getCountdownData() {
-    async _prepareContext(options) {
-        const context = await super._prepareContext(options);
-        context.isGM = game.user.isGM;
-
-        context.iconOnly =
-            game.user.getFlag(CONFIG.DH.id, CONFIG.DH.FLAGS.userFlags.countdownMode) ===
-            CONFIG.DH.GENERAL.countdownAppMode.iconOnly;
         const setting = game.settings.get(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.Countdowns);
-        context.countdowns = this.#getCountdowns().reduce((acc, { key, countdown, ownership }) => {
+        const typeModes = game.user.getFlag(CONFIG.DH.id, CONFIG.DH.FLAGS.userFlags.countdownTypeModes) ?? [];
+
+        return this.#getCountdowns().reduce((acc, { key, countdown, ownership }) => {
+            if (!typeModes.includes(countdown.type)) 
+                return acc;
+
             const playersWithAccess = game.users.reduce((acc, user) => {
                 const ownership = DhCountdowns.#getPlayerOwnership(user, setting, countdown);
                 if (!user.isGM && ownership && ownership !== CONST.DOCUMENT_OWNERSHIP_LEVELS.NONE) {
@@ -118,6 +122,27 @@ export default class DhCountdowns extends HandlebarsApplicationMixin(Application
             };
             return acc;
         }, {});
+    }
+
+    /** @override */
+    async _prepareContext(options) {
+        const context = await super._prepareContext(options);
+        context.isGM = game.user.isGM;
+        this.previusCountdownData = 
+            game.settings.get(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.Countdowns).countdowns;
+
+        context.iconOnly =
+            game.user.getFlag(CONFIG.DH.id, CONFIG.DH.FLAGS.userFlags.countdownMode) ===
+            CONFIG.DH.GENERAL.countdownAppMode.iconOnly;
+
+        const userCountdownTypes = game.user.getFlag(CONFIG.DH.id, CONFIG.DH.FLAGS.userFlags.countdownTypeModes) ?? [];
+        context.typeToggles = Object.values(CONFIG.DH.GENERAL.countdownType).map(type => ({
+            type: type.id,
+            label: game.i18n.localize(type.label),
+            active: userCountdownTypes.includes(type.id)
+        }));
+
+        context.countdowns = this._getCountdownData();
 
         return context;
     }
@@ -158,6 +183,36 @@ export default class DhCountdowns extends HandlebarsApplicationMixin(Application
         this.render();
     }
 
+    static async #onToggleCountdownTypes(event, target) {
+        const currentTypes = game.user.getFlag(CONFIG.DH.id, CONFIG.DH.FLAGS.userFlags.countdownTypeModes) ?? [];
+        const { type } = target.dataset;
+        const newTypes = event.shiftKey ? 
+            [type] : 
+            currentTypes.includes(type) ? currentTypes.filter(x => x !== type) : [...currentTypes, type];
+        await game.user.setFlag(CONFIG.DH.id, CONFIG.DH.FLAGS.userFlags.countdownTypeModes, newTypes);
+
+        for (const type of Object.keys(CONFIG.DH.GENERAL.countdownType)) {
+            const toggleElement = this.element.querySelector(`.header-type-toggles .header-type[data-type="${type}"]`);
+            if (newTypes.includes(type))
+                toggleElement.classList.remove('inactive');
+               
+            else 
+                toggleElement.classList.add('inactive');
+        }
+  
+        const updatedCountdownsElement = await foundry.applications.handlebars.renderTemplate(
+            'systems/daggerheart/templates/ui/countdowns/parts/countdowns.hbs',
+            {
+                countdowns: this._getCountdownData(),
+                iconOnly: game.user.getFlag(CONFIG.DH.id, CONFIG.DH.FLAGS.userFlags.countdownMode) ===
+                    CONFIG.DH.GENERAL.countdownAppMode.iconOnly,
+                isGM: game.user.isGM
+            }
+        );
+
+        this.element.querySelector('#countdowns .countdowns-container').innerHTML = updatedCountdownsElement;
+    }
+
     static async #onEditCountdowns() {
         new game.system.api.applications.ui.CountdownEdit().render(true);
     }
@@ -212,6 +267,10 @@ export default class DhCountdowns extends HandlebarsApplicationMixin(Application
     }
 
     static async gmSetSetting(data) {
+        // if(Object.keys(data).some(x => x.includes('countdowns'))) {
+        //     this.previusCountdownData = game.settings.get(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.Countdowns).countdowns;
+        // }
+
         await game.settings.set(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.Countdowns, data);
         game.socket.emit(`system.${CONFIG.DH.id}`, {
             action: socketEvent.Refresh,
@@ -270,6 +329,20 @@ export default class DhCountdowns extends HandlebarsApplicationMixin(Application
         });
     }
 
+    /**
+     * 
+     * @param {*} context 
+     * @param {*} options 
+     */
+    async performChangeAnimations(changedCountdowns) {
+        if (this.countdownChangeAnimationTimeout)
+            clearTimeout(this.countdownChangeAnimationTimeout);
+
+        this.countdownChangeAnimationTimeout = setTimeout(() => {
+
+        }, 3000);
+    }
+
     async _onRender(context, options) {
         await super._onRender(context, options);
         this.element.hidden = !game.user.isGM && this.#getCountdowns().length === 0;

module/config/flagsConfig.mjs

@@ -24,7 +24,8 @@ export const itemAttachmentSource = 'attachmentSource';
 
 export const userFlags = {
     welcomeMessage: 'welcome-message',
-    countdownMode: 'countdown-mode'
+    countdownMode: 'countdown-mode',
+    countdownTypeModes: 'countdown-type-modes'
 };
 
 export const combatToggle = 'combat-toggle-origin';

module/config/generalConfig.mjs

@@ -935,17 +935,6 @@ export const simpleOwnershiplevels = {
     ...basicOwnershiplevels
 };
 
-export const countdownBaseTypes = {
-    narrative: {
-        id: 'narrative',
-        label: 'DAGGERHEART.APPLICATIONS.Countdown.types.narrative'
-    },
-    encounter: {
-        id: 'encounter',
-        label: 'DAGGERHEART.APPLICATIONS.Countdown.types.encounter'
-    }
-};
-
 export const countdownLoopingTypes = {
     noLooping: {
         id: 'noLooping',
@@ -970,6 +959,17 @@ export const countdownAppMode = {
     iconOnly: 'icon-only'
 };
 
+export const countdownType = {
+    shortterm: {
+        id: 'shortterm', 
+        label: 'Short'
+    },
+    longterm: {
+        id: 'longterm',
+        label: 'Long'  
+    }
+};
+
 export const sceneRangeMeasurementSetting = {
     disable: {
         id: 'disable',

module/data/countdowns.mjs

@@ -13,6 +13,33 @@ export default class DhCountdowns extends foundry.abstract.DataModel {
             })
         };
     }
+
+    handleChange() {
+        const previousCountdowns = foundry.ui.countdowns.previusCountdownData;
+        const changedCountdowns = Object.values(this.countdowns).reduce((acc, [key, countdown]) => {
+            const previousCountdown = previousCountdowns[key];
+            if (!previousCountdown || (previousCountdown.current !== countdown.current)) {
+                acc.push(key);
+            }
+
+            return acc;
+        }, []);
+
+        foundry.ui.performChangeAnimations(changedCountdowns);
+    }
+
+    migrateData(source) {
+        for (const countdown of source.countdowns) {
+            switch (countdown.type) {
+                case 'narrative':
+                    countdown.type = CONFIG.DH.GENERAL.countdownType.longterm.id;
+                    break;
+                case 'encounter':
+                    countdown.type = CONFIG.DH.GENERAL.countdownType.shortterm.id;
+                    break;
+            }
+        }
+    }
 }
 
 export class DhCountdown extends foundry.abstract.DataModel {
@@ -21,7 +48,8 @@ export class DhCountdown extends foundry.abstract.DataModel {
         return {
             type: new fields.StringField({
                 required: true,
-                choices: CONFIG.DH.GENERAL.countdownBaseTypes,
+                choices: CONFIG.DH.GENERAL.countdownType,
+                initial: CONFIG.DH.GENERAL.countdownType.shortterm.id,
                 label: 'DAGGERHEART.GENERAL.type'
             }),
             name: new fields.StringField({
@@ -85,7 +113,7 @@ export class DhCountdown extends foundry.abstract.DataModel {
             : undefined;
 
         return {
-            type: type ?? CONFIG.DH.GENERAL.countdownBaseTypes.narrative.id,
+            type: type ?? CONFIG.DH.GENERAL.countdownType.shortterm.id,
             name: game.i18n.localize('DAGGERHEART.APPLICATIONS.Countdown.newCountdown'),
             img: 'icons/magic/time/hourglass-yellow-green.webp',
             ownership: ownership,

module/data/fields/action/countdownField.mjs

@@ -8,8 +8,8 @@ export default class CountdownField extends fields.ArrayField {
             ...game.system.api.data.countdowns.DhCountdown.defineSchema(),
             type: new fields.StringField({
                 required: true,
-                choices: CONFIG.DH.GENERAL.countdownBaseTypes,
+                choices: CONFIG.DH.GENERAL.countdownType,
-                initial: CONFIG.DH.GENERAL.countdownBaseTypes.encounter.id,
+                initial: CONFIG.DH.GENERAL.countdownType.shortterm.id,
                 label: 'DAGGERHEART.GENERAL.type'
             }),
             name: new fields.StringField({

module/systemRegistration/handlebars.mjs

@@ -50,6 +50,7 @@ export const preloadHandlebarsTemplates = async function () {
         'systems/daggerheart/templates/ui/chat/parts/target-part.hbs',
         'systems/daggerheart/templates/ui/chat/parts/button-part.hbs',
         'systems/daggerheart/templates/ui/itemBrowser/itemContainer.hbs',
+        'systems/daggerheart/templates/ui/countdowns/parts/countdowns.hbs',
         'systems/daggerheart/templates/scene/dh-config.hbs',
         'systems/daggerheart/templates/settings/appearance-settings/diceSoNiceTab.hbs',
         'systems/daggerheart/templates/sheets/activeEffect/typeChanges/armorChange.hbs'

module/systemRegistration/migrations.mjs

@@ -178,8 +178,8 @@ export async function runMigrations() {
 
         await countdownSettings.updateSource({
             countdowns: {
-                ...getCountdowns(countdownSettings.narrative, CONFIG.DH.GENERAL.countdownBaseTypes.narrative.id),
+                ...getCountdowns(countdownSettings.narrative, 'narrative'),
-                ...getCountdowns(countdownSettings.encounter, CONFIG.DH.GENERAL.countdownBaseTypes.encounter.id)
+                ...getCountdowns(countdownSettings.encounter, 'encounter')
             }
         });
         await game.settings.set(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.Countdowns, countdownSettings);

module/systemRegistration/settings.mjs

@@ -199,7 +199,10 @@ const registerNonConfigSettings = () => {
     game.settings.register(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.Countdowns, {
         scope: 'world',
         config: false,
-        type: DhCountdowns
+        type: DhCountdowns,
+        onChange: value => {
+            value.handleChange();
+        }
     });
 
     game.settings.register(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.CompendiumBrowserSettings, {

styles/less/ui/countdown/countdown.less

@@ -65,12 +65,31 @@
         padding: 0 0.5rem;
         overflow: hidden;
         font-size: var(--font-size-13);
+        
         .window-title {
             font-family: @font-body;
-            flex: 1;
         }
-        .header-control + .header-control {
+
-            margin-left: 8px;
+
+        .header-type-toggles {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+
+            .header-type {
+                flex: 1;
+                border: 1px solid @beige;
+                border-radius: 12px;
+                padding: 2px 4px;
+                text-align: center;
+                background-color: @dark-blue;
+                color: @beige;
+
+                &.inactive {
+                    opacity: 0.4;
+                }
+            }
         }
     }
 

templates/ui/countdowns.hbs

@@ -1,56 +0,0 @@
-<div>
-    <header class="countdowns-header">
-        <i class="fa-solid fa-clock-rotate-left" inert></i>
-        <span class="window-title">{{localize "DAGGERHEART.UI.Countdowns.title"}}</span>
-        {{#if isGM}}
-            <a class="header-control" data-tooltip aria-label="DAGGERHEART.APPLICATIONS.CountdownEdit.editTitle" data-action="editCountdowns">
-                <i class="fa-solid fa-wrench" inert></i>
-            </a>
-        {{/if}}
-        <a class="header-control" data-tooltip aria-label="DAGGERHEART.UI.Countdowns.toggleIconMode" data-action="toggleViewMode">
-            <i class="fa-solid fa-down-left-and-up-right-to-center" inert></i>
-        </a>
-    </header>
-    <div class="countdowns-container">
-        {{#each countdowns as | countdown id |}}
-            <div class="countdown-container {{#if ../iconOnly}}icon-only{{/if}}" data-countdown="{{id}}">
-                <div class="countdown-main-container">
-                    <img src="{{countdown.img}}" {{#if ../iconOnly}}data-tooltip="{{countdown.name}}"{{/if}}/>
-                    <div class="countdown-content">
-                        {{#unless ../iconOnly}}
-                            <header>{{countdown.name}}</header>
-                        {{/unless}}
-                        <div class="countdown-tools">
-                            <div class="countdown-tool-controls">
-                                {{#if countdown.editable}}<a data-action="decreaseCountdown"><i class="fa-solid fa-minus"></i></a>{{/if}}
-                                <div class="progress-tag">
-                                    {{countdown.progress.current}}/{{countdown.progress.start}}
-                                </div>
-                                {{#if countdown.editable}}<a data-action="increaseCountdown"><i class="fa-solid fa-plus"></i></a>{{/if}}
-                            </div>
-                            <div class="countdown-tool-icons">
-                                {{#if (not ../iconOnly)}}
-                                    {{#if (and countdown.noPlayerAccess @root.isGM)}}
-                                        <i class="fa-solid fa-eye-slash" data-tooltip="{{localize "DAGGERHEART.UI.Countdowns.noPlayerAccess"}}"></i>
-                                    {{/if}}
-                                    {{#unless (eq countdown.progress.looping "noLooping")}}
-                                        <span data-tooltip="{{countdown.loopTooltip}}">
-                                            <a class="looping-container {{#if countdown.shouldLoop}}should-loop{{/if}}" {{#if countdown.loopDisabled}}disabled{{/if}} data-action="loopCountdown">
-                                                <i class="loop-marker fa-solid fa-repeat"></i>
-                                                {{#if (eq countdown.progress.looping "increasing")}}
-                                                    <i class="direction-marker fa-solid fa-angles-up" data-tooltip="{{localize "DAGGERHEART.UI.Countdowns.increasingLoop"}}"></i>
-                                                {{else if (eq countdown.progress.looping "decreasing")}}
-                                                    <i class="direction-marker fa-solid fa-angles-down" data-tooltip="{{localize "DAGGERHEART.UI.Countdowns.decreasingLoop"}}"></i>
-                                                {{/if}}
-                                            </a>
-                                        </span>
-                                    {{/unless}}
-                                {{/if}}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        {{/each}}
-    </div>
-</div>

templates/ui/countdowns/countdown-edit.hbs

@@ -80,7 +80,7 @@
                             <div class="countdown-edit-input tiny type-input">
                                 <label>{{localize "DAGGERHEART.APPLICATIONS.CountdownEdit.category"}}</label>
                                 <select name="{{concat "countdowns." id ".type"}}">
-                                    {{selectOptions ../countdownBaseTypes selected=countdown.type localize=true}}
+                                    {{selectOptions ../countdownTypes selected=countdown.type localize=true}}
                                 </select>
                             </div>
                             <div class="countdown-edit-input">

templates/ui/countdowns/countdowns-view.hbs

@@ -0,0 +1,22 @@
+<div>
+    <header class="countdowns-header">
+        <i class="fa-solid fa-clock-rotate-left" inert></i>
+        <span class="window-title">{{localize "DAGGERHEART.UI.Countdowns.title"}}</span>
+        <div class="header-type-toggles">
+            {{#each typeToggles as |type|}}
+                <a class="header-type {{#unless type.active}}inactive{{/unless}}" data-action="onToggleCountdownTypes" data-type="{{type.type}}">{{type.label}}</a>
+            {{/each}}
+        </div>
+        {{#if isGM}}
+            <a class="header-control" data-tooltip aria-label="DAGGERHEART.APPLICATIONS.CountdownEdit.editTitle" data-action="editCountdowns">
+                <i class="fa-solid fa-wrench" inert></i>
+            </a>
+        {{/if}}
+        <a class="header-control" data-tooltip aria-label="DAGGERHEART.UI.Countdowns.toggleIconMode" data-action="toggleViewMode">
+            <i class="fa-solid fa-down-left-and-up-right-to-center" inert></i>
+        </a>
+    </header>
+    <div class="countdowns-container">
+        {{> "systems/daggerheart/templates/ui/countdowns/parts/countdowns.hbs" }}
+    </div>
+</div>

templates/ui/countdowns/parts/countdowns.hbs

@@ -0,0 +1,40 @@
+{{#each countdowns as | countdown id |}}
+    <div class="countdown-container {{#if ../iconOnly}}icon-only{{/if}}" data-countdown="{{id}}">
+        <div class="countdown-main-container">
+            <img src="{{countdown.img}}" {{#if ../iconOnly}}data-tooltip="{{countdown.name}}"{{/if}}/>
+            <div class="countdown-content">
+                {{#unless ../iconOnly}}
+                    <header>{{countdown.name}}</header>
+                {{/unless}}
+                <div class="countdown-tools">
+                    <div class="countdown-tool-controls">
+                        {{#if countdown.editable}}<a data-action="decreaseCountdown"><i class="fa-solid fa-minus"></i></a>{{/if}}
+                        <div class="progress-tag">
+                            {{countdown.progress.current}}/{{countdown.progress.start}}
+                        </div>
+                        {{#if countdown.editable}}<a data-action="increaseCountdown"><i class="fa-solid fa-plus"></i></a>{{/if}}
+                    </div>
+                    <div class="countdown-tool-icons">
+                        {{#if (not ../iconOnly)}}
+                            {{#if (and countdown.noPlayerAccess @root.isGM)}}
+                                <i class="fa-solid fa-eye-slash" data-tooltip="{{localize "DAGGERHEART.UI.Countdowns.noPlayerAccess"}}"></i>
+                            {{/if}}
+                            {{#unless (eq countdown.progress.looping "noLooping")}}
+                                <span data-tooltip="{{countdown.loopTooltip}}">
+                                    <a class="looping-container {{#if countdown.shouldLoop}}should-loop{{/if}}" {{#if countdown.loopDisabled}}disabled{{/if}} data-action="loopCountdown">
+                                        <i class="loop-marker fa-solid fa-repeat"></i>
+                                        {{#if (eq countdown.progress.looping "increasing")}}
+                                            <i class="direction-marker fa-solid fa-angles-up" data-tooltip="{{localize "DAGGERHEART.UI.Countdowns.increasingLoop"}}"></i>
+                                        {{else if (eq countdown.progress.looping "decreasing")}}
+                                            <i class="direction-marker fa-solid fa-angles-down" data-tooltip="{{localize "DAGGERHEART.UI.Countdowns.decreasingLoop"}}"></i>
+                                        {{/if}}
+                                    </a>
+                                </span>
+                            {{/unless}}
+                        {{/if}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+{{/each}}