3.5.0

Dorako · Jun 8, 2024 · e43708e · e43708e
1 parent 2b9d2ae
commit e43708e
Show file tree

Hide file tree

Showing 42 changed files with 2,603 additions and 2,033 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,12 @@
+# 3.5.0
+
+- (New) Added support for FVTT v12 and ApplicationV2. This is a breaking change and as such only supports V12.
+- (New) Added better support for theming specific macro dialogs, such as the Spellstrike macro.
+- (Fix) Fixed an issue where the theme-coloring of heal and block buttons was not working for buttons provided by PF2e Toolbelt.
+- (Fix) Fixed an issue where PC theme color Blue was not working.
+- (Refinement) Improved styling for AttackPopout applications (when you drag a strike to the hotbar).
+- (Module) Added initial support for PF2e HUD.
+
 # 3.4.11
 
 - (Maintenance) Styling touchups for the Global Progress Clocks module.

diff --git a/esmodules/consts.js b/esmodules/consts.js
@@ -13,6 +13,7 @@ export const premiumModuleSelector = "wardensofwildwood, wardensofwildwood-wrapp
 export const coreApps = ["ImagePopout","SceneControls", "SidebarTab", "PlayerList", "HeadsUpDisplay", "Notifications", "TokenHUD","SceneNavigation", "Hotbar"]; // "Sidebar"
 export const systemApps = ["EffectsPanel", "SceneDarknessAdjuster"];
 export const moduleApps = ["MobileUI", "MobileMenu", "WindowMenu","ClockPanel","CoreHUD","HUD","TokenBar", "TokenActionHud","SmallTimeApp","SearchApp","ControlManager","HUD","ItemPileConfig","PinCushionHUD","CommonToolbar","MonksHotbarExpansion","CustomHotbar"];
+export const appV2Apps = ["PF2eHudToken","PF2eHudTooltip","PF2eHudPersistent","PF2eHudTracker"];
 export const themedApps = [...coreApps, ...systemApps, ...moduleApps];
 
 /* ----------------------------------------- */

diff --git a/esmodules/message-hooks.js b/esmodules/message-hooks.js
@@ -69,7 +69,7 @@ const headerStyleColors = {
 function getHeaderColor(html, message) {
   const headerStyle = game.settings.get("pf2e-dorako-ui", "theme.chat-message-header-style");
   if (headerStyle === "tint") {
-    return message?.user?.color ?? headerStyleColors.fallback;
+    return message?.author?.color ?? headerStyleColors.fallback;
   }
   return headerStyleColors[headerStyle] ?? headerStyleColors.fallback;
 }
@@ -83,9 +83,9 @@ function calcHeaderTextColor(headerColor) {
     return "dark";
   }
 
-  var r = parseInt(headerColor.substr(1, 2), 16);
-  var g = parseInt(headerColor.substr(3, 2), 16);
-  var b = parseInt(headerColor.substr(5, 2), 16);
+  var r = headerColor.r;
+  var g = headerColor.g;
+  var b = headerColor.b;
   var yiq = (r * 299 + g * 587 + b * 114) / 1000;
 
   if (yiq >= 180) {

diff --git a/esmodules/ui-theme.js b/esmodules/ui-theme.js
@@ -5,6 +5,7 @@ import {
   systemSheets,
   excludedApplications,
   moduleWindowApps,
+  appV2Apps,
 } from "./consts.js";
 import { isPremiumApplication } from "./premium-module-hooks.js";
 
@@ -83,6 +84,31 @@ for (const appName of [...themedApps]) {
   });
 }
 
+for (const appName of [...appV2Apps]) {
+  Hooks.on("render" + appName, (app, html, data) => {
+    const theme = game.settings.get("pf2e-dorako-ui", "theme.app-theme");
+    if (theme === "no-theme") return;
+    const uiTheme = lookupThemeAndSchemeForKey(theme);
+    if (uiTheme === null) return;
+    const { dorakoUiTheme, colorScheme } = uiTheme;
+    const excludeString = game.settings.get("pf2e-dorako-ui", "customization.excluded-applications");
+    const excludeList = excludeString.split(/[\s,]+/);
+    if (excludeList.includes(app.constructor.name) || excludedApplications.includes(app.constructor.name)) {
+      console.debug(
+        `${MODULE_NAME} | render${app.constructor.name} | is included in excluded applications string ${excludeString} => do not set dorako-ui-theme to ${dorakoUiTheme}`
+      );
+      return;
+    }
+
+    app.element.dataset.theme = dorakoUiTheme;
+    console.debug(`${MODULE_NAME} | render${app.constructor.name} | [data-theme='${dorakoUiTheme}']`);
+    const subElements = [app.leftElement, app.mainElement, app.menuElement, app.portraitElement];
+    for (const subElement of [...subElements]) {
+      subElement.dataset.theme = dorakoUiTheme;
+    }
+  });
+}
+
 for (const appName of [...systemSheets, ...moduleWindowApps]) {
   Hooks.on("render" + appName, (app, html, data) => {
     const theme = game.settings.get("pf2e-dorako-ui", "theme.window-app-theme");
@@ -152,6 +178,53 @@ Hooks.on("renderApplication", (app, html, data) => {
   app.element[0].dataset.theme = dorakoUiTheme;
   app.element[0].dataset.colorScheme = colorScheme;
   app.element[0].dataset.dorakoUiScope = "unlimited";
+
+  const duiScope = app.data.duiScope;
+  if (duiScope) {
+    app.element[0].dataset.dorakoUiScope = duiScope;
+  }
+  for (const duiClass of app.data.duiClasses) {
+    html.addClass(duiClass);
+  }
+});
+
+Hooks.on("renderApplicationV2", (app, html, data) => {
+  if (html.classList.contains("editable")) return;
+  if (!html.classList.contains("application")) return;
+  // if (isPremiumApplication(app, html, data, app.constructor.name)) return;
+  const theme = game.settings.get("pf2e-dorako-ui", "theme.window-app-theme");
+  if (theme === "no-theme") return;
+  const uiTheme = lookupThemeAndSchemeForKey(theme);
+  if (uiTheme === null) return;
+  const { dorakoUiTheme, colorScheme } = uiTheme;
+  const excludeString =
+    game.settings.get("pf2e-dorako-ui", "customization.excluded-applications") +
+    ", EnhancedJournal" +
+    ", SceneActorsLayer" +
+    ", SmallTimeApp" +
+    ", SceneDarknessAdjuster" +
+    ", AutorecMenuApp" +
+    ", ImagePopout";
+  const excludeList = excludeString.split(/[\s,]+/);
+  if (excludeList.includes(app.constructor.name) || excludedApplications.includes(app.constructor.name)) {
+    console.debug(
+      `${MODULE_NAME} | render${app.constructor.name} | is included in excluded applications string ${excludeString} => do not set dorako-ui-theme to ${dorakoUiTheme}`
+    );
+    return;
+  }
+
+  const fakeDialogPatterns = ["popup", "dialog"];
+  for (const fakeDialogPattern of [...fakeDialogPatterns]) {
+    if (app.constructor.name.toLowerCase().includes(fakeDialogPattern)) {
+      console.debug(
+        `${MODULE_NAME} | render${app.constructor.name} | constructor includes '${fakeDialogPattern}' => add .dialog`
+      );
+      // html.addClass("dialog");
+    }
+  }
+  app.element.dataset.theme = dorakoUiTheme;
+  app.element.dataset.colorScheme = colorScheme;
+  app.element.dataset.dorakoUiScope = "unlimited";
 });
 
 for (const appName of [...limitedScopeApplications]) {

diff --git a/module.json b/module.json
@@ -13,17 +13,17 @@
   ],
   "version": "1.11.3",
   "compatibility": {
-    "minimum": "11",
-    "verified": "11"
+    "minimum": "12",
+    "verified": "12"
   },
   "relationships": {
     "systems": [
       {
         "id": "pf2e",
         "type": "system",
         "compatibility": {
-          "minimum": "5.6.0",
-          "verified": "5.14.1"
+          "minimum": "6.0.0",
+          "verified": "6.0.0"
         }
       },
       {
@@ -52,10 +52,7 @@
   ],
   "flags": {
     "hotReload": {
-      "extensions": [
-        ".css",
-        ".json"
-      ]
+      "extensions": [".css", ".json"]
     }
   },
   "languages": [
@@ -125,9 +122,7 @@
       "path": "languages/ko.json"
     }
   ],
-  "styles": [
-    "styles/dorako-ui.css"
-  ],
+  "styles": ["styles/dorako-ui.css"],
   "esmodules": [
     "esmodules/misc-hooks.js",
     "esmodules/settings/settings.js",
@@ -142,4 +137,4 @@
   "manifest": "https://github.com/Dorako/pf2e-dorako-ui/releases/latest/download/module.json",
   "readme": "https://github.com/Dorako/pf2e-dorako-ui",
   "bugs": "https://github.com/Dorako/pf2e-dorako-ui/issues"
-}
+}
diff --git a/sass/_mixins.scss b/sass/_mixins.scss
@@ -49,17 +49,17 @@
 
 @mixin dui-button {
   @include dui-app;
-  background: var(--button-background);
-  border: var(--app-border-width) solid var(--button-border-color);
-  color: var(--button-text-color);
+  background: var(--dui-button-background);
+  border: var(--app-border-width) solid var(--dui-button-border-color);
+  color: var(--dui-button-text-color);
   box-shadow: var(--box-shadow);
   text-decoration: none;
   cursor: pointer;
   text-shadow: var(--app-text-shadow);
 
   &:not(.disabled, :disabled):hover {
     background: var(--button-hover-background);
-    color: var(--button-hover-text-color);
+    color: var(--dui-button-hover-text-color);
     border: var(--app-border-width) solid var(--button-hover-border-color);
     box-shadow: var(--box-shadow);
   }
@@ -68,62 +68,62 @@
   &.selected,
   &.active {
     background: var(--button-hover-background);
-    outline: 1px solid var(--button-focus-outline-color);
+    outline: 1px solid var(--dui-button-focus-outline-color);
     border-color: var(--button-hover-border-color);
-    color: var(--button-hover-text-color);
+    color: var(--dui-button-hover-text-color);
     text-decoration: none !important;
     font-weight: unset !important;
   }
 
   &.empty,
   &.disabled,
   &:disabled {
-    --button-background: var(--button-disabled-background);
+    --dui-button-background: var(--button-disabled-background);
     --button-hover-background: var(--button-disabled-background);
-    --button-border-color: var(--button-disabled-border-color);
-    --button-text-color: var(--text-color-5);
+    --dui-button-border-color: var(--button-disabled-border-color);
+    --dui-button-text-color: var(--text-color-5);
   }
 }
 
 @mixin dui-button-bright {
   @include dui-button;
   transition: background 0.1s ease-in-out;
-  --button-background: var(--accent-color);
-  --button-border-color: var(--accent-color-dark);
-  --button-text-color: var(--accent-text-color);
+  --dui-button-background: var(--accent-color);
+  --dui-button-border-color: var(--accent-color-dark);
+  --dui-button-text-color: var(--accent-text-color);
   --app-text-shadow: none;
   --button-hover-background: var(--accent-color-light);
   --button-hover-border-color: var(--accent-color);
-  --button-hover-text-color: var(--accent-text-color);
+  --dui-button-hover-text-color: var(--accent-text-color);
 
   &:disabled {
-    --button-background: color-mix(in srgb, var(--button-background) 50%, transparent 50%);
-    --button-border-color: color-mix(in srgb, var(--button-border-color) 50%, transparent 50%);
+    --dui-button-background: color-mix(in srgb, var(--dui-button-background) 50%, transparent 50%);
+    --dui-button-border-color: color-mix(in srgb, var(--dui-button-border-color) 50%, transparent 50%);
     --button-hover-background: color-mix(in srgb, var(--button-hover-background) 50%, transparent 50%);
   }
 }
 
 @mixin dui-button-toggle {
   @include dui-button;
   transition: background 0.1s ease-in-out;
-  --button-background: var(--button-toggle-background);
-  --button-border-color: var(--button-toggle-border-color);
-  --button-focus-outline-color: var(--button-toggle-focus-outline-color);
+  --dui-button-background: var(--button-toggle-background);
+  --dui-button-border-color: var(--button-toggle-border-color);
+  --dui-button-focus-outline-color: var(--button-toggle-focus-outline-color);
   --button-hover-background: var(--button-toggle-hover-background);
   --button-hover-border-color: var(--button-toggle-hover-border-color);
 
   &:disabled {
-    --button-background: color-mix(in srgb, var(--button-background) 50%, transparent 50%);
-    --button-border-color: color-mix(in srgb, var(--button-border-color) 50%, transparent 50%);
+    --dui-button-background: color-mix(in srgb, var(--dui-button-background) 50%, transparent 50%);
+    --dui-button-border-color: color-mix(in srgb, var(--dui-button-border-color) 50%, transparent 50%);
     --button-hover-background: color-mix(in srgb, var(--button-hover-background) 50%, transparent 50%);
   }
 }
 
 @mixin dui-input {
-  background: var(--input-background);
+  background: var(--dui-input-background);
   border: var(--app-border-width) solid;
-  border-color: var(--input-border-color) !important;
-  color: var(--input-text-color);
+  border-color: var(--dui-input-border-color) !important;
+  color: var(--dui-input-text-color);
   box-shadow: var(--input-box-shadow) !important;
   align-items: center;
   // height: var(--input-height);
@@ -137,29 +137,29 @@
 
   &:not(:disabled, .disabled, [type="checkbox"]):hover,
   &:focus {
-    outline: 1px solid var(--input-focus-outline-color);
+    outline: 1px solid var(--dui-input-focus-outline-color);
     border: var(--app-border-width) solid;
-    border-color: var(--input-border-color);
+    border-color: var(--dui-input-border-color);
     color: var(--input-focus-text-color);
     box-shadow: var(--box-shadow);
   }
 
   &.disabled,
   &:disabled {
-    --input-text-color: var(--text-color-disabled);
-    --input-background: var(--input-disabled-background);
-    --input-border-color: var(--input-disabled-border-color);
+    --dui-input-text-color: var(--text-color-disabled);
+    --dui-input-background: var(--input-disabled-background);
+    --dui-input-border-color: var(--input-disabled-border-color);
     &::placeholder {
-      color: color-mix(in srgb, var(--input-placeholder-color) 50%, transparent);
+      color: color-mix(in srgb, var(--dui-input-placeholder-color) 50%, transparent);
     }
   }
 
   &::placeholder {
-    color: var(--input-placeholder-color);
+    color: var(--dui-input-placeholder-color);
   }
 
   &::selection {
-    // color: var(--input-text-color);
+    // color: var(--dui-input-text-color);
     // background: rgba(122, 122, 122, 0.5);
   }
 

diff --git a/sass/module-support/_argon-hud.scss b/sass/module-support/_argon-hud.scss
@@ -33,9 +33,9 @@
   --ech-endTurn-hover-color: #b4d2dcff;
   --ech-endTurn-hover-border: #757f89ff;
   --ech-abilityMenu-background: var(--glass-bg);
-  --ech-abilityMenu-color: var(--button-text-color);
+  --ech-abilityMenu-color: var(--dui-button-text-color);
   --ech-abilityMenu-border: #757f89ff;
-  --ech-abilityMenu-base-color: var(--button-text-color);
+  --ech-abilityMenu-base-color: var(--dui-button-text-color);
   --ech-abilityMenu-base-boxShadow: #757f89cc;
   --ech-abilityMenu-hover-color: var(--tertiary);
   --ech-abilityMenu-hover-boxShadow: #757f89cc;

diff --git a/sass/module-support/_custom-hotbar.scss b/sass/module-support/_custom-hotbar.scss
@@ -1,23 +1,23 @@
 /* ----------------------------------------- */
 /* Custom Hotbar                             */
 /* ----------------------------------------- */
-:root {
-  --custom-hotbar-chb-macro-size: calc(var(--macro-size) + 2px);
-}
+// :root {
+//   --custom-hotbar-chb-macro-size: calc(var(--macro-size) + 2px);
+// }
 
-// Custom hotbar introduces a 'hotbars' div, and restyles the core hotbar div
-#ui-bottom #hotbars {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
+// // Custom hotbar introduces a 'hotbars' div, and restyles the core hotbar div
+// #ui-bottom #hotbars {
+//   display: flex;
+//   flex-direction: column;
+//   gap: 5px;
 
-  #hotbar {
-    position: unset;
-  }
-}
+//   #hotbar {
+//     position: unset;
+//   }
+// }
 
-@media (max-width: 1120px) {
-  #custom-hotbar {
-    width: 354px;
-  }
-}
+// @media (max-width: 1120px) {
+//   #custom-hotbar {
+//     width: 354px;
+//   }
+// }