Added coloured pips to UI cooldowns to signify player visibility if not every player has it

module/applications/ui/countdowns.mjs

@@ -81,6 +81,7 @@ export default class DhCountdowns extends HandlebarsApplicationMixin(Application
     /** @override */
     async _prepareContext(options) {
         const context = await super._prepareContext(options);
+        context.isGM = game.user.isGM;
         context.sidebarCollapsed = this.sidebarCollapsed;
         context.iconOnly =
             game.user.getFlag(CONFIG.DH.id, CONFIG.DH.FLAGS.userFlags.countdownMode) ===
@@ -89,16 +90,21 @@ export default class DhCountdowns extends HandlebarsApplicationMixin(Application
         const setting = game.settings.get(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.Countdowns);
         context.countdowns = Object.keys(setting.countdowns).reduce((acc, key) => {
             const countdown = setting.countdowns[key];
-            const playerOwnership = countdown.ownership[game.user.id];
+            const ownership = DhCountdowns.#getPlayerOwnership(game.user, setting, countdown);
-            const ownership =
-                playerOwnership === CONST.DOCUMENT_OWNERSHIP_LEVELS.INHERIT
-                    ? setting.defaultOwnership
-                    : playerOwnership;
             if (ownership === CONST.DOCUMENT_OWNERSHIP_LEVELS.NONE) 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) {
+                    acc.push(user);
+                }
+                return acc;
+            }, []);
             acc[key] = {
                 ...countdown,
-                editable: game.user.isGM || ownership === CONST.DOCUMENT_OWNERSHIP_LEVELS.OWNER
+                editable: game.user.isGM || ownership === CONST.DOCUMENT_OWNERSHIP_LEVELS.OWNER,
+                playerAccess:
+                    playersWithAccess.length !== game.users.filter(x => !x.isGM).length ? playersWithAccess : []
             };
             return acc;
         }, {});
@@ -106,6 +112,11 @@ export default class DhCountdowns extends HandlebarsApplicationMixin(Application
         return context;
     }
 
+    static #getPlayerOwnership(user, setting, countdown) {
+        const playerOwnership = countdown.ownership[user.id];
+        return playerOwnership === CONST.DOCUMENT_OWNERSHIP_LEVELS.INHERIT ? setting.defaultOwnership : playerOwnership;
+    }
+
     toggleCollapsedPosition = async (_, collapsed) => {
         this.sidebarCollapsed = collapsed;
         if (!collapsed) this.element.classList.add('expanded');

styles/less/ui/countdown/countdown.less

@@ -53,43 +53,67 @@
 
             .countdown-container {
                 display: flex;
-                gap: 16px;
+                justify-content: space-between;
 
                 &.icon-only {
                     gap: 8px;
 
-                    .countdown-content {
+                    .countdown-main-container {
-                        justify-content: center;
+                        .countdown-content {
+                            justify-content: center;
 
-                        .countdown-tools {
+                            .countdown-tools {
-                            gap: 8px;
+                                gap: 8px;
+                            }
                         }
                     }
                 }
 
-                img {
+                .countdown-main-container {
-                    width: 44px;
+                    display: flex;
-                    height: 44px;
+                    align-items: center;
-                    border-radius: 6px;
+                    gap: 16px;
+
+                    img {
+                        width: 44px;
+                        height: 44px;
+                        border-radius: 6px;
+                    }
+
+                    .countdown-content {
+                        height: 44px;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-between;
+
+                        .countdown-tools {
+                            display: flex;
+                            align-items: center;
+                            gap: 16px;
+
+                            .progress-tag {
+                                border: 1px solid;
+                                border-radius: 4px;
+                                padding: 2px 4px;
+                                background-color: light-dark(@beige, @dark-blue);
+                            }
+                        }
+                    }
                 }
 
-                .countdown-content {
+                .countdown-access-container {
-                    height: 44px;
+                    display: grid;
-                    display: flex;
+                    grid-template-columns: 1fr 1fr 1fr;
-                    flex-direction: column;
+                    grid-auto-rows: min-content;
-                    justify-content: space-between;
+                    width: 38px;
+                    gap: 4px;
 
-                    .countdown-tools {
+                    .countdown-access {
-                        display: flex;
+                        height: 10px;
-                        align-items: center;
+                        width: 10px;
-                        gap: 16px;
+                        border-radius: 50%;
-
+                        border: 1px solid light-dark(@dark-blue, @beige-80);
-                        .progress-tag {
+                        content: '';
-                            border: 1px solid;
-                            border-radius: 4px;
-                            padding: 2px 4px;
-                            background-color: light-dark(@beige, @dark-blue);
-                        }
                     }
                 }
             }

templates/ui/countdowns.hbs

@@ -2,17 +2,26 @@
     <div class="countdowns-container">
         {{#each countdowns as | countdown id |}}
             <div class="countdown-container {{#if ../iconOnly}}icon-only{{/if}}">
-                <img src="{{countdown.img}}" {{#if ../iconOnly}}data-tooltip="{{countdown.name}}"{{/if}}/>
+                <div class="countdown-main-container">
-                <div class="countdown-content">
+                    <img src="{{countdown.img}}" {{#if ../iconOnly}}data-tooltip="{{countdown.name}}"{{/if}}/>
-                    {{#unless ../iconOnly}}<label>{{countdown.name}}</label>{{/unless}}
+                    <div class="countdown-content">
-                    <div class="countdown-tools">
+                        {{#unless ../iconOnly}}<label>{{countdown.name}}</label>{{/unless}}
-                        {{#if countdown.editable}}<a data-action="decreaseCountdown" id="{{id}}"><i class="fa-solid fa-minus"></i></a>{{/if}}
+                        <div class="countdown-tools">
-                        <div class="progress-tag">
+                            {{#if countdown.editable}}<a data-action="decreaseCountdown" id="{{id}}"><i class="fa-solid fa-minus"></i></a>{{/if}}
-                            {{countdown.progress.current}}/{{countdown.progress.max}}
+                            <div class="progress-tag">
+                                {{countdown.progress.current}}/{{countdown.progress.max}}
+                            </div>
+                            {{#if countdown.editable}}<a data-action="increaseCountdown" id="{{id}}"><i class="fa-solid fa-plus"></i></a>{{/if}}
                         </div>
-                        {{#if countdown.editable}}<a data-action="increaseCountdown" id="{{id}}"><i class="fa-solid fa-plus"></i></a>{{/if}}
                     </div>
                 </div>
+                {{#if (and @root.isGM (and (not ../iconOnly) (gt countdown.playerAccess.length 0)))}}
+                    <div class="countdown-access-container">
+                        {{#each countdown.playerAccess as |player|}}
+                            <div class="countdown-access" style="{{concat "background: " player.color.css ";"}}" data-tooltip="{{player.name}}"></div>
+                        {{/each}}
+                    </div>
+                {{/if}}
             </div>
         {{/each}}
     </div>