1.9.13

CHANGELOG.md

@@ -1,3 +1,12 @@
+# 1.9.13
+
+- (New) Added support for chat bubbles
+- (Fix) Fixed issue where mirrored tokens had their avatars upside down
+- (Maintenance) Updated module-support for new classic styling of PF2e Target Damage
+- (Fix) Fixed one of the familiar themes not working (and associated console error)
+- (Fix) Fixed issue where nat 1/20 were not colored appropriately in dark mode messages
+- (Refinement) Extend dark mode messages theme support to crit deck buttons
+
 # 1.9.12
 
 - (Refinement) Further expanded the scope of dark theme for app sheets

languages/en.json

@@ -16,7 +16,6 @@
 
   "dorako-ui.settings.familiar-sheet-theme.name": "Familiar sheet theme",
   "dorako-ui.settings.familiar-sheet-theme.hint": "Affects familiar sheets",
-  "dorako-ui.settings.familiar-sheet-theme.choice.red": "Red",
   "dorako-ui.settings.familiar-sheet-theme.choice.dark-red-header": "Dark + Red Header",
 
   "dorako-ui.settings.chat-theme.name": "Chat theme",

module.json

@@ -12,7 +12,7 @@
       "flags": {}
     }
   ],
-  "version": "1.9.12",
+  "version": "1.9.13",
   "compatibility": {
     "minimum": "10",
     "verified": "10"
@@ -63,6 +63,6 @@
     "modules/settings.js",
     "modules/dark-theme-hooks.js"
   ],
-  "download": "https://github.com/Dorako/pf2e-dorako-ui/archive/refs/tags/v1.9.12.zip",
+  "download": "https://github.com/Dorako/pf2e-dorako-ui/archive/refs/tags/v1.9.13.zip",
   "manifest": "https://github.com/Dorako/pf2e-dorako-ui/releases/latest/download/module.json"
 }

modules/dorako-ui.js

@@ -564,7 +564,7 @@ function addScalingToCombatTrackerAvatars(app, html, data) {
     if (scale < 1 || (combatImagesActive && combatant.actor.getFlag("combat-tracker-images", "trackerImage"))) {
       scale = 1;
     }
-    tokenImageElem.setAttribute("style", "transform: scale(" + scale + ")");
+    tokenImageElem.setAttribute("style", "transform: scale(" + Math.abs(scale) + ")");
   });
 }
 
@@ -682,7 +682,7 @@ Hooks.on("renderChatMessage", (message, b) => {
   if (avatar.type == "token") {
     const smallScale = game.settings.get("pf2e-dorako-ui", "small-creature-token-avatar-size");
     let smallCorrection = avatar.isSmall ? 1.25 * smallScale : 1;
-    avatarElem?.setAttribute("style", "transform: scale(" + avatar.scale * smallCorrection + ")");
+    avatarElem?.setAttribute("style", "transform: scale(" + Math.abs(avatar.scale) * smallCorrection + ")");
   }
 
   const portraitDegreeSetting = game.settings.get("pf2e-dorako-ui", "avatar-reacts-to-degree-of-success");

modules/settings.js

@@ -16,10 +16,10 @@ Hooks.once("init", async () => {
       hint: util.i18n("dorako-ui.settings.pc-sheet-theme.hint"),
       scope: "client",
       config: true,
-      default: "red",
+      default: "default",
       type: String,
       choices: {
-        red: util.i18n("dorako-ui.settings.pc-sheet-theme.choice.red"),
+        default: util.i18n("dorako-ui.text.default"),
         dark: util.i18n("dorako-ui.text.dark"),
       },
       requiresReload: true
@@ -90,10 +90,10 @@ Hooks.once("init", async () => {
       hint: util.i18n("dorako-ui.settings.familiar-sheet-theme.hint"),
       scope: "client",
       config: true,
-      default: "red",
+      default: "default",
       type: String,
       choices: {
-        red: util.i18n("dorako-ui.settings.familiar-sheet-theme.choice.red"),
+        default: util.i18n("dorako-ui.text.default"),
         dark: util.i18n("dorako-ui.text.dark"),
         darkRedHeader: util.i18n("dorako-ui.settings.familiar-sheet-theme.choice.dark-red-header"),
       },
@@ -367,6 +367,7 @@ Hooks.once("init", async () => {
     injectCSS("messages");
     injectCSS("npc-sheet");
     injectCSS("loot-sheet");
+    injectCSS("chat-bubbles");
 
     const root = document.querySelector(":root").style;
     if (game.settings.get("pf2e-dorako-ui", "center-hotbar")) {
@@ -388,6 +389,6 @@ Hooks.once("init", async () => {
     const pcSheetSetting = game.settings.get("pf2e-dorako-ui", "pc-sheet-theme");
     if (pcSheetSetting == "dark") injectCSS("pc-sheet-dark");
     const familiarSheetSetting = game.settings.get("pf2e-dorako-ui", "familiar-sheet-theme");
-    if (familiarSheetSetting == "dark" || setting == "darkRedHeader") injectCSS("familiar-sheet-dark");
+    if (familiarSheetSetting == "dark" || familiarSheetSetting == "darkRedHeader") injectCSS("familiar-sheet-dark");
     if (familiarSheetSetting == "darkRedHeader") injectCSS("familiar-sheet-dark-red-header");
   });

sass/chat-bubbles.scss

@@ -0,0 +1,26 @@
+@import "mixins";
+
+.chat-bubble {
+    @include sheet;
+}
+.chat-bubble .bubble-content {
+    position: relative;
+    top: 0;
+}
+.chat-bubble.left {
+    border-radius: 5px;
+}
+.chat-bubble.right {
+    border-radius: 5px;
+}
+.chat-bubble.emote {
+    @include sheet;
+    background-image: var(--sheet-dark);
+    color: var(--color-text-light-heading);
+    font-style: italic;
+}
+.chat-bubble.chatter {
+    @include glass;
+    border-radius: 5px;
+    color: var(--color-text-light-heading);
+}

sass/dark-theme-messages.scss

@@ -11,6 +11,28 @@
         @include glass;
     }
 
+    .dice-roll .dice-total {
+        &.success {
+            color: #00c000;
+        }
+        &.failure {
+            color: #ff4040;
+        }
+    }
+
+    .dice-total .dice-total-fullDamage-btn {
+        @include glass;
+        @include quick-transition;
+        background-color: var(--glass-bg-light);
+        color: var(--color-text-light-heading);
+        text-shadow: 0px 0px 3px black;
+
+        &:hover {
+            background-color: var(--primary);
+            color: var(--color-text-light-highlight);
+        }
+    }
+
     .dice-roll .dice-result {
         .statuseffect-rules {
             background: var(--sheet-dark);

sass/dark-theme.scss

@@ -24,6 +24,11 @@
 
 }
 
+.dark-theme {
+    --color-underline-active: var(--tertiary-dark);
+    --color-underline-header: var(--tertiary-dark);
+}
+
 .dark-theme.window-app {
     // ::placeholder {
     //     color: var(--color-text-light-heading);

sass/messages.scss

@@ -23,7 +23,7 @@
     }
 
     &.light-header-text {
-        background-blend-mode: darken;
+        background-blend-mode: multiply;
         color: white;
         text-shadow: 0px 1px 1px black;
 
@@ -104,6 +104,8 @@
             gap: 2px;
 
             button {
+                @include quick-transition;
+
                 &.half-damage  {
                     .transparent-half {
                         display: none;
@@ -120,7 +122,7 @@
                             position: absolute;
                             top: 0px;
                             left: 2px;
-                            clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
+                            clip-path: polygon(45% 0%, 50% 100%, 100% 100%, 100% 4%);
                             color: gray;
                         }
                     }
@@ -136,7 +138,7 @@
                     }
 
                     &.half-damage .fa-heart-broken::after {
-                        clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
+                        clip-path: polygon(45% 0%, 50% 100%, 100% 100%, 100% 4%);
                         color: gray;
                     }
                 }

sass/module-support.scss

@@ -231,8 +231,13 @@ div.speaking-as--currentSpeaker+#chat-controls {
     font-size: var(--font-size-8);
 }
 
-.dark-theme.chat-message #target-damage-target-name {
-    color: var(--color-text-light-heading);
+wrapper.pf2e-td.name-top .pf2e-td.name {
+    // System styling
+    background: rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--color-border-light-2);
+    border-radius: 3px;
+    box-shadow: 0 0 2px #fff inset;
+    width: 100%;
 }
 
 .dark-theme.chat-message {
@@ -257,16 +262,41 @@ div.speaking-as--currentSpeaker+#chat-controls {
         }
     }
 
-    .pf2e-td.damage-application {
+    wrapper.pf2e-td {
         gap: 3px;
 
+        .pf2e-td.damage-application {
+            // gap: 5px;
+            gap: 3px;
+            margin-top: 0px;
+        }
+
+        &.name-left .pf2e-td.damage-application {
+            gap: 3px;
+        }
+
         .pf2e-td.name {
             color: var(--color-text-light-heading);
 
             &:hover {
                 color: var(--color-text-light-highlight);
             }
         }
+
+        &.name-top {
+            .pf2e-td.name {
+                @include glass;
+                @include quick-transition;
+                width: 100%;
+                line-height: 24px;
+                text-shadow: 0px 0px 3px black;
+
+                &:hover {
+                    color: var(--color-text-light-highlight);
+                    background-color: var(--primary);
+                }
+            }
+        }
     }
 
     .message-content .pf2e-td.damage-application button .label {