v1.3.21

module.json

@@ -4,12 +4,12 @@
   "description": "Overhauls the Foundry UI and several modules.",
   "url": "https://github.com/Dorako/pf2e-dorako-ui",
   "author": "Dorako",
-  "version": "1.3.20",
+  "version": "1.3.21",
   "minimumCoreVersion": "9",
   "compatibleCoreVersion": "9",
   "system": ["pf2e"],
   "scripts": ["scripts/dorako-ui.js"],
   "templates": ["templates/*"],
-  "download": "https://github.com/Dorako/pf2e-dorako-ui/archive/refs/tags/v1.3.20.zip",
+  "download": "https://github.com/Dorako/pf2e-dorako-ui/archive/refs/tags/v1.3.21.zip",
   "manifest": "https://github.com/Dorako/pf2e-dorako-ui/raw/main/module.json"
 }

scripts/dorako-ui.js

@@ -153,107 +153,104 @@ Hooks.once("init", async function () {
     "modules/pf2e-dorako-ui/templates/base-chat-message.html";
 
   Handlebars.registerHelper("getSpeakerImage", function (message) {
-    const blind = message.whisper && message.blind;
-    if (blind) return "icons/svg/mystery-man.svg";
+    // const blind = message.whisper && message.blind;
+    // if (blind) return "icons/svg/mystery-man.svg";
+    let combatantImg;
+    let actorImg;
+    let tokenImg;
+
     const speaker = message.speaker;
     if (speaker) {
       if (speaker.token) {
         const token = game.scenes.get(speaker.scene).tokens?.get(speaker.token);
-        if (token) {
-          // return Actors.instance.get(speaker.actor).data.img;
-          return token.data.img;
-        }
+        tokenImg = token?.data.img;
       }
-
       if (speaker.actor) {
         const actor = Actors.instance.get(speaker.actor);
-        if (actor) {
-          return actor.data.img;
-        }
+        combatantImg = actor.getFlag("combat-tracker-images", "trackerImage");
+        actorImg = actor?.data.img;
       }
     }
 
-    return "icons/svg/mystery-man.svg";
-  });
-
-  Handlebars.registerHelper("showSpeakerImage", function (message) {
-    const insertSpeakerImage = game.settings.get(
-      "pf2e-dorako-ui",
-      "insertSpeakerImage"
-    );
-    if (!insertSpeakerImage) {
-      return false;
+    const main = game.settings.get("pf2e-dorako-ui", "insertSpeakerImage");
+    if (main === "token") {
+      return (
+        combatantImg || tokenImg || actorImg || "icons/svg/mystery-man.svg"
+      );
     }
-
-    const speaker = message.speaker;
-    if (!speaker) {
-      return false;
+    if (main === "actor") {
+      return (
+        combatantImg || actorImg || tokenImg || "icons/svg/mystery-man.svg"
+      );
     }
+  });
 
-    let bHasImage = false;
-    if (speaker.token) {
-      const token = game.scenes.get(speaker.scene)?.tokens?.get(speaker.token);
-      if (token) {
-        if (bHasImage || token.data.img != null) {
-          return true;
-        }
-      }
-    }
+  Handlebars.registerHelper("determineImageKind", function (message) {
+    let combatantImg;
+    let actorImg;
+    let tokenImg;
 
-    if (speaker.actor) {
-      const actor = Actors.instance.get(speaker.actor);
-      //const actor = game.scenes.get(speaker.scene)?.tokens?.get(speaker.token);
-      // const tokens = actor.getActiveTokens(true, false);
-      // const token = tokens.first();
-      const token = actor.data.token.img;
-      if (actor) {
-        bHasImage = bHasImage || actor.data.img != null;
+    const speaker = message.speaker;
+    if (speaker) {
+      if (speaker.token) {
+        const token = game.scenes.get(speaker.scene).tokens?.get(speaker.token);
+        tokenImg = token?.data.img;
       }
-      if (token) {
-        if (bHasImage) {
-          return true;
-        }
+      if (speaker.actor) {
+        const actor = Actors.instance.get(speaker.actor);
+        combatantImg = actor.getFlag("combat-tracker-images", "trackerImage");
+        actorImg = actor?.data.img;
       }
     }
 
-    if (!bHasImage) {
-      return false;
+    const main = game.settings.get("pf2e-dorako-ui", "insertSpeakerImage");
+    if (main === "token") {
+      return (
+        (combatantImg ? "combatant" : "") ||
+        (tokenImg ? "token" : "") ||
+        (actorImg ? "actor" : "")
+      );
     }
-
-    return true;
+    if (main === "actor") {
+      return (
+        (combatantImg ? "combatant" : "") ||
+        (actorImg ? "actor" : "") ||
+        (tokenImg ? "token" : "")
+      );
+    }
+    return "no-img";
   });
 
-  Handlebars.registerHelper("useVideoForSpeakerImage", function (message) {
+  Handlebars.registerHelper("showSpeakerImage", function (message) {
+    const chatPortraitSetting = game.settings.get(
+      "pf2e-dorako-ui",
+      "insertSpeakerImage"
+    );
+
+    if (chatPortraitSetting === "none") return false;
+
+    let combatantImg;
+    let actorImg;
+    let tokenImg;
+
     const speaker = message.speaker;
-    if (!speaker) {
-      return false;
-    } else {
-      let imageName = "";
+    if (speaker) {
       if (speaker.token) {
-        const token = game.scenes
-          .get(speaker.scene)
-          ?.tokens?.get(speaker.token);
-        if (token) {
-          imageName = token.data.img;
-        }
+        const token = game.scenes.get(speaker.scene).tokens?.get(speaker.token);
+        tokenImg = token?.data.img;
       }
-
-      if (!imageName && speaker.actor) {
+      if (speaker.actor) {
         const actor = Actors.instance.get(speaker.actor);
-        if (actor) {
-          imageName = actor.data.img;
-        }
+        combatantImg = actor.getFlag("combat-tracker-images", "trackerImage");
+        actorImg = actor?.data.img;
       }
-
-      return (
-        imageName?.endsWith("webm") ||
-        imageName?.endsWith("mp4") ||
-        imageName?.endsWith("ogg") ||
-        false
-      );
     }
 
-    return false;
+    console.log(combatantImg);
+    console.log(actorImg);
+    console.log(tokenImg);
+
+    return combatantImg || actorImg || tokenImg;
   });
 
   Handlebars.registerHelper("getHeaderStyle", function (message) {
@@ -367,12 +364,17 @@ Hooks.once("init", async function () {
   });
 
   game.settings.register("pf2e-dorako-ui", "insertSpeakerImage", {
-    name: "Add chat portrait?",
+    name: "Chat portrait style",
     hint: "Adds the image of the speaker to the chat card.",
     scope: "client",
     config: true,
-    default: true,
-    type: Boolean,
+    default: "token",
+    type: String,
+    choices: {
+      token: "Prefer token image",
+      actor: "Prefer actor image",
+      none: "Disable",
+    },
     onChange: () => {
       debouncedReload();
     },

styles/chat-dark.css

@@ -46,4 +46,8 @@
     border: none;
     color: white;
     background-color: var(--pf2e-color-mono-dark);
+}
+
+.chat-message.dark-theme a[href] {
+    color: wheat;
 }

styles/chat.css

@@ -427,7 +427,9 @@ button {
     /* border-radius: 5px 0px 0px 0px; */
 }
 
+
 .message .message-header .message-metadata {
+    flex: 1;
     align-items: center;
     justify-content: flex-end;
     display: flex;
@@ -667,14 +669,21 @@ message-content .chat-damage-buttons button {
     flex: none;
     justify-content: center;
     align-items: center;
-    border-radius: 50%;
 }
 
 .portrait {
-    border-radius: 50%;
     height: var(--chat-portrait-size);
 }
 
+.portrait.actor {
+    border-radius: 3px;
+}
+
+.portrait.token,
+.portrait.combatant {
+    border-radius: 50%;
+}
+
 
 /* Adds border around flavor text */
 /* .flavor-text {
@@ -1027,14 +1036,22 @@ button.half-damage .fa-heart-broken::after {
 .message .message-header.light-header-text .message-sender[data-visibility=gm]:is(div, em, h4, p, span, strong) {
     background: hsla(0, 0%, 50%, 0.25);
     color: white;
+    outline-color: white;
     /* mix-blend-mode: color-dodge; */
 }
 
+[data-visibility]:is(div, em, h4, p, section, span, strong):not([data-visibility=all]) {
+    /* outline: none; */
+    outline: 1px dashed rgba(75, 74, 68, 0.5);
+}
+
 .flavor-text [data-visibility=gm] {
     margin-top: 0px;
 }
 
-
+.chat-message>.message-content .chat-damage-buttons button>i.fas {
+    left: 0px;
+}
 
 .flavor-text br {
     display: block;
@@ -1364,6 +1381,10 @@ div#scrollToBottom:hover {
     align-self: center;
 }
 
+.sender-wrapper.no-img {
+    flex-direction: row;
+}
+
 .sender-wrapper .message-sender,
 .sender-wrapper .player-name {
     align-self: flex-start;

templates/base-chat-message.html

@@ -7,14 +7,10 @@
         {{#if (showSpeakerImage message)}}
         <div class="portrait-and-name" style="display: flex; gap:5px">
             <div class="portrait-wrapper">
-            {{#if (useVideoForSpeakerImage message)}}
-                <video class="portrait" src="{{getSpeakerImage message}}" autoplay muted loop />
-            {{else}}
-            <img class="portrait" src="{{getSpeakerImage message}}" />
-            {{/if}}
+            <img class="portrait {{determineImageKind message}}" src="{{getSpeakerImage message}}" />
         </div>
         {{/if}}
-        <div class="sender-wrapper">
+        <div class="sender-wrapper {{determineImageKind message}}">
             <h4 class="message-sender">{{alias}}</h4>
         </div>
         </div>