Merge pull request #293 from DC23/292-apply-cosmetic-settings-without…

…-a-foundry-reload Client-only cosmetic settings are now applied without a Foundry reload.
DC23 · Dec 13, 2024 · ee1a24e · ee1a24e
2 parents d0b06dc + ca271bd
commit ee1a24e
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 10 deletions.
diff --git a/src/settings.mjs b/src/settings.mjs
@@ -81,7 +81,7 @@ export function registerSettings () {
         default: 0.6,
         requiresReload: false,
         onChange: () => {
-            game.modules.get(MODULE_ID).uiPanel?.updateOpacity()
+            game.modules.get(MODULE_ID).uiPanel?.cosmeticSettingsChanged()
         },
     })
 
@@ -102,7 +102,10 @@ export function registerSettings () {
         config: true,
         type: Boolean,
         default: false,
-        requiresReload: true,
+        requiresReload: false,
+        onChange: () => {
+            game.modules.get(MODULE_ID).uiPanel?.cosmeticSettingsChanged()
+        },
     })
 
     game.settings.register(MODULE_ID, SETTINGS.DISPLAY_24_HOUR_TIME, {
@@ -111,7 +114,10 @@ export function registerSettings () {
         config: true,
         type: Boolean,
         default: false,
-        requiresReload: true,
+        requiresReload: false,
+        onChange: () => {
+            game.modules.get(MODULE_ID).uiPanel?.cosmeticSettingsChanged()
+        },
     })
 
     game.settings.register(MODULE_ID, SETTINGS.SHOW_DRAGONBANE_TIME, {
@@ -122,6 +128,7 @@ export function registerSettings () {
         type: Boolean,
         default: false,
         requiresReload: true,
+        // Not using cosmeticSettingsChanged because it's a world setting, so needs a reload to update all clients
     })
 
     game.settings.register(MODULE_ID, SETTINGS.SHOW_RADIAL_CLOCK, {
@@ -208,7 +215,10 @@ export function registerSettings () {
         config: true,
         type: new foundry.data.fields.ColorField(),
         default: '#ffffff',
-        requiresReload: true,
+        requiresReload: false,
+        onChange: () => {
+            game.modules.get(MODULE_ID).uiPanel?.cosmeticSettingsChanged()
+        },
     })
 
     game.settings.register(MODULE_ID, SETTINGS.RADIAL_CLOCK_FG_COLOR, {
@@ -218,7 +228,10 @@ export function registerSettings () {
         config: true,
         type: new foundry.data.fields.ColorField(),
         default: '#138b37',
-        requiresReload: true,
+        requiresReload: false,
+        onChange: () => {
+            game.modules.get(MODULE_ID).uiPanel?.cosmeticSettingsChanged()
+        },
     })
 
     game.settings.register(MODULE_ID, SETTINGS.RADIAL_CLOCK_BG_COLOR, {
@@ -228,7 +241,10 @@ export function registerSettings () {
         config: true,
         type: new foundry.data.fields.ColorField(),
         default: '#062811',
-        requiresReload: true,
+        requiresReload: false,
+        onChange: () => {
+            game.modules.get(MODULE_ID).uiPanel?.cosmeticSettingsChanged()
+        },
     })
 
     game.settings.register(MODULE_ID, SETTINGS.RADIAL_CLOCK_SPOKE_COLOR, {
@@ -238,7 +254,10 @@ export function registerSettings () {
         config: true,
         type: new foundry.data.fields.ColorField(),
         default: '#000000',
-        requiresReload: true,
+        requiresReload: false,
+        onChange: () => {
+            game.modules.get(MODULE_ID).uiPanel?.cosmeticSettingsChanged()
+        },
     })
 
     game.settings.register(MODULE_ID, SETTINGS.UI_BUTTON_COLOR, {
@@ -248,7 +267,10 @@ export function registerSettings () {
         config: true,
         type: new foundry.data.fields.ColorField(),
         default: '#ffffff',
-        requiresReload: true,
+        requiresReload: false,
+        onChange: () => {
+            game.modules.get(MODULE_ID).uiPanel?.cosmeticSettingsChanged()
+        },
     })
 
     game.settings.register(MODULE_ID, SETTINGS.UI_BUTTON_HOVERED_COLOR, {
@@ -258,7 +280,10 @@ export function registerSettings () {
         config: true,
         type: new foundry.data.fields.ColorField(),
         default: '#138b37',
-        requiresReload: true,
+        requiresReload: false,
+        onChange: () => {
+            game.modules.get(MODULE_ID).uiPanel?.cosmeticSettingsChanged()
+        },
     })
 
     game.settings.register(MODULE_ID, SETTINGS.UI_BUTTON_CLICKED_COLOR, {
@@ -268,7 +293,10 @@ export function registerSettings () {
         config: true,
         type: new foundry.data.fields.ColorField(),
         default: '#25e45e',
-        requiresReload: true,
+        requiresReload: false,
+        onChange: () => {
+            game.modules.get(MODULE_ID).uiPanel?.cosmeticSettingsChanged()
+        },
     })
 
     game.settings.register(MODULE_ID, SETTINGS.TOTAL_ELAPSED_MINUTES, {

diff --git a/src/uipanel.mjs b/src/uipanel.mjs
@@ -240,6 +240,15 @@ export class UIPanel extends HandlebarsApplicationMixin(ApplicationV2) {
         super.setPosition(pos)
         game.settings.set(MODULE_ID, SETTINGS.FLOATING_UI_PANEL_POSITION, this.position)
     }
+
+    /**
+     * Called when cosmetic settings have been changed
+     */
+    cosmeticSettingsChanged() {
+        // this?.element.style.setProperty("--background-color", this.#uiBackgroundColor);
+        this.updateOpacity()
+        this.render()
+    }
 
     updateOpacity () {
         /**

diff --git a/styles/easy-timekeeping.css b/styles/easy-timekeeping.css
@@ -140,9 +140,12 @@
   /* A bit of space between us and the player panel */
   margin-bottom: 6px;
   border: 1px solid black;
+  padding: 0.1em;
+  /* box-sizing: border-box; */
 
   display: flex;
   justify-content: center;
+  flex-shrink: 3;
 }
 
 /* Fix window & scheme color */