#29, gifs, Misc presets

- #29: Add Scroll setting to open() and Edit Challenge Tracker form.
- gifs: Add gifs to show Challenge Trackers in action.
- Misc presets: Add some images into the presets/misc folder.

README.md

@@ -1,7 +1,7 @@
 # Challenge Tracker
 An interactive aid to track successes and failures in challenges à la D&D 4e-inspired skill challenges and Blades in the Dark progress clocks.
 
-![Challenge Tracker](./images/challenge-tracker.png) ![Progress Clock](./images/challenge-tracker-progress-clock.png)
+![Challenge Tracker](./images/challenge-tracker.gif)
 
 # Features
 - **Versatile:** Works for D&D 4e-inspired skill challenges, Blades in the Dark progress clocks, or as a resource/countdown tracker.
@@ -38,6 +38,21 @@ An interactive aid to track successes and failures in challenges à la D&D 4e-in
 # Module Settings
 Module settings are found in Foundry VTT under Game Settings > Configure Settings > Module Settings > Challenge Tracker.
 
+### **Frame Color**
+Set the default color of the frame. Default is #0f1414.
+
+### **Outer Color**
+Set the default color of the outer ring. Default is #228b22ff.
+
+### **Outer Background**
+Set the default background color of the outer ring. Default is #1b6f1b66.
+
+### **Inner Color**
+Set the default color of the inner circle. Default is #dc0000ff.
+
+### **Inner Background Color**
+Set the default background color of the inner circle. Default is #b0000066.
+
 ### **Display Button**
 Display the Challenge Tracker button to users with the selected role and above. Default is Player.
 
@@ -53,20 +68,11 @@ Set the default size of the Challenge Tracker in pixels. Default is 400.
 ### **Frame Width**
 Set the width of the frame. Default is Medium.
 
-### **Frame Color**
-Set the default color of the frame. Default is #0f1414.
-
-### **Outer Color**
-Set the default color of the outer ring. Default is #228b22ff.
+### **Scroll**
+Enable the scroll wheel for increasing or decreasing segments. Default is true.
 
-### **Outer Background**
-Set the default background color of the outer ring. Default is #1b6f1b66.
-
-### **Inner Color**
-Set the default color of the inner circle. Default is #dc0000ff.
-
-### **Inner Background Color**
-Set the default background color of the inner circle. Default is #b0000066.
+## **Windowed**
+Set Challenge Trackers to windowed by default. Default is true.
 
 # Advanced Options
 More options can be set  using an optional array parameter: `ChallengeTracker.open(successes failures, {options})` where options is a comma-separated list of any of the following parameters in the format `option: value`:
@@ -148,6 +154,11 @@ Set to `true` to persist the Challenge Tracker across sessions. Default is `fals
 
 Example: `persist: true`
 
+### *scroll**
+Set to `true` to enable the scroll wheel for increasing or decreasing segments. Default is `true`.
+
+Example: `scroll: false`
+
 ### **show**
 Set to `true` to show the Challenge Tracker to your players. Default is `false`. This option will be ignored when the user's role is not equal to or greater than the role selected in the 'Allow Show to Others' module setting.
 
@@ -272,14 +283,14 @@ Examples:
 
 # Example Challenge Trackers
 ### Progress Clock
-`ChallengeTracker.open(8, 0, {show: true, title: 'Progress Clock'})`
+`ChallengeTracker.open(4, {show: true, frameWidth: 'none', outerBackgroundColor: '#00000000', outerColor: '#00000000', backgroundImage: 'modules/challenge-tracker/presets/blades-in-the-dark/blades-in-the-dark-4-white.webp', foregroundImage: 'modules/challenge-tracker/presets/blades-in-the-dark/blades-in-the-dark-black.webp', size: 150, title: 'Progress Clock'})`  
 
-![challenge-tracker-macro](./images/challenge-tracker-progress-clock.png)
+![Progress Clock](./images/progress-clock.gif)
 
-### Health & Mana
-`ChallengeTracker.open(10, 5, {show: true, outerCurrent: 10, innerCurrent: 5, outerColor: '#DC0000', innerColor: '#0040FF', title: 'Health & Mana'})`  
+### Doomsday Clock
+`ChallengeTracker.open(12, {show: true, frameWidth: 'none', outerBackgroundColor: '#00000000', outerColor: '#00000000', backgroundImage: 'modules/challenge-tracker/presets/misc/blessed-landscape.webp', foregroundImage: 'modules/challenge-tracker/presets/misc/doomed-landscape.webp', title: 'Doomsday Clock'})`  
 
-![challenge-tracker-macro](./images/challenge-tracker-health-mana.png)
+![Doomsday Clock](./images/doomsday-clock.gif)
 
 
 

languages/en.json

@@ -28,6 +28,8 @@
       "editForm": {
         "title": "Title",
         "titleTooltip": "The title of the challenge tracker",
+        "scroll": "Scroll",
+        "scrollTooltip": "Use the scroll wheel to increase and decrease segments",
         "size": "Size",
         "sizeTooltip": "The size of the challenge tracker in pixels",
         "show": "Show to Others",
@@ -146,11 +148,11 @@
     	},
       "windowed" : {
         "name": "Windowed",
-        "hint": "Set the Challenge Tracker to windowed by default"
+        "hint": "Display the Challenge Trackers in a window by default"
     	},
       "scroll" : {
         "name": "Scroll",
-        "hint": "Enable the scroll wheel for increasing/decreasing segments"
+        "hint": "Use the scroll wheel to increase and decrease segments"
     	}
     }
   }

scripts/main.js

@@ -23,6 +23,7 @@ export class ChallengeTrackerSettings {
     'outerTotal',
     'ownerId',
     'persist',
+    'scroll',
     'show',
     'size',
     'title',
@@ -86,6 +87,7 @@ export class ChallengeTracker extends Application {
       outerCurrent: ChallengeTrackerSettings.default.outerCurrent,
       outerTotal: ChallengeTrackerSettings.default.outerTotal,
       persist: ChallengeTrackerSettings.default.persist,
+      scroll: ChallengeTrackerSettings.default.scroll,
       show: ChallengeTrackerSettings.default.show,
       size: null,
       title: ChallengeTrackerSettings.title,
@@ -116,6 +118,7 @@ export class ChallengeTracker extends Application {
     this.challengeTrackerOptions.innerBackgroundColor = challengeTrackerOptions.innerBackgroundColor ?? null
     this.challengeTrackerOptions.frameColor = challengeTrackerOptions.frameColor ?? null
     this.challengeTrackerOptions.frameWidth = challengeTrackerOptions.frameWidth ?? null
+    this.challengeTrackerOptions.scroll = challengeTrackerOptions.scroll ?? null
     this.challengeTrackerOptions.size = challengeTrackerOptions.size ?? null
     this.challengeTrackerOptions.windowed = [true, false].includes(challengeTrackerOptions.windowed)
       ? challengeTrackerOptions.windowed
@@ -137,6 +140,7 @@ export class ChallengeTracker extends Application {
     this.outerBackgroundColorShade = null
     this.outerColor = null
     this.outerColorShade = null
+    this.scroll = null
     this.size = null
     this.windowed = null
     this.backgroundImage = new Image()
@@ -170,6 +174,9 @@ export class ChallengeTracker extends Application {
   async setVariables () {
     this.frameWidth = this.challengeTrackerOptions.frameWidth ??
       Utils.getSetting('challenge-tracker', 'frameWidth', ChallengeTrackerSettings.default.frameWidth)
+    this.scroll = this.challengeTrackerOptions.scroll ??
+      Utils.getSetting('challenge-tracker', 'scroll', ChallengeTrackerSettings.default.scroll)
+    this.updateScroll(this.scroll)
     this.size = this.challengeTrackerOptions.size ??
       Utils.getSetting('challenge-tracker', 'size', ChallengeTrackerSettings.default.size)
     this.windowed = this.challengeTrackerOptions.windowed ??
@@ -237,6 +244,7 @@ export class ChallengeTracker extends Application {
   * @param {number} challengeTrackerOptions.outerTotal Number of segments for the outer ring
   * @param {string} challengeTrackerOptions.ownerId Owner of the challenge tracker
   * @param {boolean} challengeTrackerOptions.persist true = Persist, false = Do not persist
+  * @param {boolean} challengeTrackerOptions.scroll true = Enable, false = Disable
   * @param {boolean} challengeTrackerOptions.show true = Show, false = Hide
   * @param {number} challengeTrackerOptions.size Size of the challenge tracker in pixels
   * @param {string} challengeTrackerOptions.title Title of the challenge tracker
@@ -267,6 +275,7 @@ export class ChallengeTracker extends Application {
       outerTotal: ChallengeTrackerSettings.default.outerTotal,
       ownerId: null,
       persist: ChallengeTrackerSettings.default.persist,
+      scroll: ChallengeTrackerSettings.default.scroll,
       show: ChallengeTrackerSettings.default.show,
       size: ChallengeTrackerSettings.default.size,
       title: ChallengeTrackerSettings.default.title,
@@ -389,6 +398,7 @@ export class ChallengeTracker extends Application {
   * @param {number} challengeTrackerOptions.outerCurrent Number of filled segments of the outer ring
   * @param {number} challengeTrackerOptions.outerTotal Number of segments for the outer ring
   * @param {boolean} challengeTrackerOptions.persist true = Persist, false = Do not persist
+  * @param {boolean} challengeTrackerOptions.scroll true = Enable, false = Disable
   * @param {boolean} challengeTrackerOptions.show true = Show, false = Hide
   * @param {number} challengeTrackerOptions.size Size of the challenge tracker in pixels
   * @param {string} challengeTrackerOptions.title Title of the challenge tracker
@@ -565,7 +575,7 @@ export class ChallengeTracker extends Application {
       this.canvasFrame.addEventListener('contextmenu', (event) => this.challengeTrackerContextMenuEvent(event),
         { signal: this.eventListenerSignal }
       )
-      if (Utils.getSetting('challenge-tracker', 'scroll', ChallengeTrackerSettings.default.scroll)) {
+      if (this.scroll) {
         if (this.eventListenerSignalScroll == null || this.eventListenerSignalScroll.aborted) {
           this.eventListenerControllerScroll = new AbortController()
           this.eventListenerSignalScroll = this.eventListenerControllerScroll.signal
@@ -638,7 +648,6 @@ export class ChallengeTracker extends Application {
     const x = this.mousePosition.x - rect.left
     const y = this.mousePosition.y - rect.top
     if (this.challengeTrackerOptions.innerTotal > 0 && this.contextFrame.isPointInPath(this.innerArc, x, y)) {
-      console.log(event.code)
       if (event.code === 'Minus') {
         if (this.challengeTrackerOptions.innerTotal > 1) this.challengeTrackerOptions.innerTotal--
         this.challengeTrackerOptions.innerCurrent =
@@ -652,7 +661,6 @@ export class ChallengeTracker extends Application {
         this._draw()
       }
     } else if (this.contextFrame.isPointInPath(this.outerArc, x, y)) {
-      console.log(event.code)
       if (event.code === 'Minus') {
         if (this.challengeTrackerOptions.outerTotal > 1) this.challengeTrackerOptions.outerTotal--
         this._draw()
@@ -714,6 +722,7 @@ export class ChallengeTracker extends Application {
   * @param {number} challengeTrackerOptions.outerCurrent Number of filled segments of the outer ring
   * @param {number} challengeTrackerOptions.outerTotal Number of segments for the outer ring
   * @param {boolean} challengeTrackerOptions.persist true = Persist, false = Do not persist
+  * @param {boolean} challengeTrackerOptions.scroll true = Enable, false = Disable
   * @param {boolean} challengeTrackerOptions.show true = Show, false = Hide
   * @param {number} challengeTrackerOptions.size Size of the challenge tracker in pixels
   * @param {string} challengeTrackerOptions.title Title of the challenge tracker
@@ -762,6 +771,7 @@ export class ChallengeTracker extends Application {
   * @param {number} challengeTrackerOptions.outerCurrent Number of filled segments of the outer ring
   * @param {number} challengeTrackerOptions.outerTotal Number of segments for the outer ring
   * @param {boolean} challengeTrackerOptions.persist true = Persist, false = Do not persist
+  * @param {boolean} challengeTrackerOptions.scroll true = Enable, false = Disable
   * @param {boolean} challengeTrackerOptions.show true = Show, false = Hide
   * @param {number} challengeTrackerOptions.size Size of the challenge tracker in pixels
   * @param {string} challengeTrackerOptions.title Title of the challenge tracker
@@ -796,6 +806,7 @@ export class ChallengeTracker extends Application {
   * @param {number} challengeTrackerOptions.outerCurrent Number of filled segments of the outer ring
   * @param {number} challengeTrackerOptions.outerTotal Number of segments for the outer ring
   * @param {boolean} challengeTrackerOptions.persist true = Persist, false = Do not persist
+  * @param {boolean} challengeTrackerOptions.scroll true = Enable, false = Disable
   * @param {boolean} challengeTrackerOptions.show true = Show, false = Hide
   * @param {number} challengeTrackerOptions.size Size of the challenge tracker in pixels
   * @param {string} challengeTrackerOptions.title Title of the challenge tracker
@@ -1236,10 +1247,11 @@ export class ChallengeTracker extends Application {
   * Enable/disable scroll wheel event on all Challenge Trackers based on the module setting
   * @param {boolean} scroll Enable (true) or disable (false) the scroll wheel event
   **/
-  static updateScroll (scroll) {
+  updateScroll (scroll) {
     if (!game.challengeTracker) return
     for (const challengeTracker of Object.values(game.challengeTracker)) {
-      if (scroll) {
+      challengeTracker.scroll = challengeTracker.challengeTrackerOptions.scroll ?? scroll
+      if (challengeTracker.scroll) {
         if (challengeTracker.eventListenerSignalScroll == null || challengeTracker.eventListenerSignalScroll.aborted) {
           challengeTracker.eventListenerControllerScroll = new AbortController()
           challengeTracker.eventListenerSignalScroll = challengeTracker.eventListenerControllerScroll.signal
@@ -1501,6 +1513,7 @@ export class ChallengeTracker extends Application {
   * @param {number} challengeTrackerOptions.outerTotal Number of segments for the outer ring
   * @param {string} challengeTrackerOptions.ownerId Owner of the challenge tracker
   * @param {boolean} challengeTrackerOptions.persist true = Persist, false = Do not persist
+  * @param {boolean} challengeTrackerOptions.scroll true = Enable, false = Disable
   * @param {boolean} challengeTrackerOptions.show true = Show, false = Hide
   * @param {number} challengeTrackerOptions.size Size of the challenge tracker in pixels
   * @param {string} challengeTrackerOptions.title Title of the challenge tracker
@@ -1550,6 +1563,7 @@ export class ChallengeTracker extends Application {
   * @param {number} challengeTrackerOptions.outerTotal Number of segments for the outer ring
   * @param {string} challengeTrackerOptions.ownerId Owner of the challenge tracker
   * @param {boolean} challengeTrackerOptions.persist true = Persist, false = Do not persist
+  * @param {boolean} challengeTrackerOptions.scroll true = Enable, false = Disable
   * @param {boolean} challengeTrackerOptions.show true = Show, false = Hide
   * @param {number} challengeTrackerOptions.size Size of the challenge tracker in pixels
   * @param {string} challengeTrackerOptions.title Title of the challenge tracker
@@ -1749,6 +1763,7 @@ export class ChallengeTracker extends Application {
   * @param {number} challengeTrackerOptions.outerTotal Number of segments for the outer ring
   * @param {string} challengeTrackerOptions.ownerId Owner of the challenge tracker
   * @param {boolean} challengeTrackerOptions.persist true = Persist, false = Do not persist
+  * @param {boolean} challengeTrackerOptions.scroll true = Enable, false = Disable
   * @param {boolean} challengeTrackerOptions.show true = Show, false = Hide
   * @param {number} challengeTrackerOptions.size Size of the challenge tracker in pixels
   * @param {string} challengeTrackerOptions.title Title of the challenge tracker

templates/challenge-tracker-edit-form.hbs

@@ -10,6 +10,10 @@
         <label for="size">{{localize "challengeTracker.labels.editForm.size"}}:</label>
         <input type="number" id="size" name="size" data-dtype="Number" value="{{size}}">
       </div>
+      <div class="form-group" title="{{localize "challengeTracker.labels.editForm.scrollTooltip"}}">
+        <label for="scroll">{{localize "challengeTracker.labels.editForm.scroll"}}:</label>
+        <input type="checkbox" name="scroll" data-dtype="Boolean" {{checked scroll}}>
+      </div>
       <div class="form-group" title="{{localize "challengeTracker.labels.editForm.showTooltip"}}">
         <label for="show">{{localize "challengeTracker.labels.editForm.show"}}:</label>
         <input type="checkbox" name="show" data-dtype="Boolean" {{checked show}}>