Improve combat tracker buttons

Only show buttons for available activations and make the deactivation button a different icon. Also improve the brightness of the deactivate button. Add an icon display next to the controls for max activations
Eranziel · Aug 5, 2024 · 8e92d26 · 8e92d26
1 parent 977d11f
commit 8e92d26
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 8 deletions.
diff --git a/public/lang/en.json b/public/lang/en.json
@@ -28,6 +28,11 @@
     }
   },
   "lancer": {
+    "Actor": {
+      "FIELDS": {
+        "activations": { "label": "Activations" }
+      }
+    },
     "placeholder": {
       "name": "Name"
     },
@@ -380,6 +385,8 @@
     "IconSettingsMenu": "Icon Settings",
     "Icon": "Action Icon",
     "IconDesc": "CSS classes to define the activation icon.",
+    "DeactivateIcon": "Deactivation Icon",
+    "DeactivateIconDesc": "CSS classes to define the deactivation icon.",
     "IconSize": "Icon Size",
     "IconPreview": "Icon Preview",
     "PCColor": "Player Color",
@@ -391,7 +398,7 @@
     "EnemyColor": "Enemy Color",
     "EnemyColorDesc": "Default: #d98f30",
     "DoneColor": "Inactive Color",
-    "DoneColorDesc": "Default: #444444",
+    "DoneColorDesc": "Default: #aaaaaa",
     "ActivatedLast": "Activated Units Last",
     "ActivatedLastDesc": "Moves units that have taken their turn to the end of the tracker.",
     "SortTracker": "Sort the Tracker",

diff --git a/public/templates/combat/combat-tracker.hbs b/public/templates/combat/combat-tracker.hbs
@@ -86,6 +86,10 @@
                         <i class="fa-solid fa-bullseye-arrow"></i>
                     </a>
                     {{/if}}
+                    <span class="activations" data-tooltip="lancer.Actor.FIELDS.activations.label">
+                    <i class="cci cci-activate"></i>
+                    <span>{{this.activations}}</span>
+                    </span>
                     <div class="token-effects">
                         {{#each this.effects}}
                         <img class="token-effect" src="{{this}}"/>
@@ -105,7 +109,7 @@
                 <a class="{{../../icon_class}} lancer-combat-control" data-control="activateCombatant"></a>
                 {{/lancerinitiative-repeat}}
                 {{#lancerinitiative-repeat this.finished}}
-                <i class="{{../../icon_class}} done lancer-combat-control" data-control="deactivateCombatant"></i>
+                <a class="{{../../deactivate_icon_class}} done lancer-combat-control" data-control="deactivateCombatant"></a>
                 {{/lancerinitiative-repeat}}
             </div>
         </li>

diff --git a/public/templates/combat/lancer-initiative-settings.hbs b/public/templates/combat/lancer-initiative-settings.hbs
@@ -5,6 +5,11 @@
     <input type="text" name="icon" value="{{ icon }}" data-dtype="String"/>
     <p class="notes">{{ localize "LANCERINITIATIVE.IconDesc" }}</p>
   </div>
+  <div class="form-group">
+    <label>{{ localize "LANCERINITIATIVE.DeactivateIcon" }}</label>
+    <input type="text" name="deactivate" value="{{ deactivate }}" data-dtype="String"/>
+    <p class="notes">{{ localize "LANCERINITIATIVE.DeactivateIconDesc" }}</p>
+  </div>
   <div class="form-group">
     <label>{{ localize "LANCERINITIATIVE.IconSize" }}</label>
     <input type="range" name="icon_size" min="1" max="4" step="0.1" value="{{ icon_size }}" data-dtype="Number"/>

diff --git a/src/global.d.ts b/src/global.d.ts
@@ -19,6 +19,7 @@ interface LancerInitiativeConfig<T extends string = string> {
    */
   def_appearance?: {
     icon: string;
+    deactivate: string;
     icon_size: number;
     player_color: string;
     friendly_color: string;

diff --git a/src/lancer.scss b/src/lancer.scss
@@ -2748,15 +2748,32 @@ Here, this means we want to allow for drag stuff etc to show contextually if:
         flex: 0 0 auto;
       }
 
+      .combatant-controls {
+        span.activations {
+          flex: 0 0 20px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 20px;
+          i {
+            color: var(--color-text-dark-5);
+            font-size: 20px;
+            position: absolute;
+          }
+          span {
+            flex: 0;
+            font-size: 14px;
+            position: relative;
+            opacity: 0.8;
+          }
+        }
+      }
+
       .token-initiative {
         i,
         a {
           font-size: var(--lancer-initiative-icon-size);
         }
-
-        i.done {
-          color: var(--lancer-initiative-done-color);
-        }
       }
     }
 
@@ -2765,27 +2782,39 @@ Here, this means we want to allow for drag stuff etc to show contextually if:
 
       .token-initiative a {
         color: var(--lancer-initiative-player-color);
+        &.done {
+          color: var(--lancer-initiative-done-color);
+        }
       }
     }
     .combatant.friendly {
       border-color: var(--lancer-initiative-friendly-color) !important;
 
       .token-initiative a {
         color: var(--lancer-initiative-friendly-color);
+        &.done {
+          color: var(--lancer-initiative-done-color);
+        }
       }
     }
     .combatant.neutral {
       border-color: var(--lancer-initiative-neutral-color) !important;
 
       .token-initiative a {
         color: var(--lancer-initiative-neutral-color);
+        &.done {
+          color: var(--lancer-initiative-done-color);
+        }
       }
     }
     .combatant.enemy {
       border-color: var(--lancer-initiative-enemy-color) !important;
 
       .token-initiative a {
         color: var(--lancer-initiative-enemy-color);
+        &.done {
+          color: var(--lancer-initiative-done-color);
+        }
       }
     }
   }

diff --git a/src/module/combat/lancer-combat-tracker.ts b/src/module/combat/lancer-combat-tracker.ts
@@ -50,8 +50,9 @@ export class LancerCombatTracker extends CombatTracker {
       return {
         ...t,
         css: t.css + " " + disp[combatant?.disposition ?? -2],
+        activations: combatant?.activations.max,
         pending: combatant?.activations.value ?? 0,
-        finished: (combatant?.activations.max ?? 1) - (combatant?.activations.value ?? 0),
+        finished: +(this.viewed!.combatant === combatant),
       };
     });
     if (sort) {
@@ -65,6 +66,7 @@ export class LancerCombatTracker extends CombatTracker {
       });
     }
     data.icon_class = appearance.icon;
+    data.deactivate_icon_class = appearance.deactivate;
     data.enable_initiative = CONFIG.LancerInitiative.enable_initiative ?? false;
     return <CombatTracker.Data>data;
   }

diff --git a/src/module/settings.ts b/src/module/settings.ts
@@ -163,12 +163,13 @@ export const registerSettings = function () {
     templatePath: `systems/${game.system.id}/templates/combat/combat-tracker.hbs`,
     def_appearance: {
       icon: "cci cci-activate",
+      deactivate: "cci cci-deactivate",
       icon_size: 2,
       player_color: "#44abe0",
       friendly_color: "#44abe0",
       neutral_color: "#146464",
       enemy_color: "#d98f30",
-      done_color: "#444444",
+      done_color: "#aaaaaa",
     },
     activations: "system.activations",
   };