a

scripts/core/components/portrait/effect.js

@@ -0,0 +1,69 @@
+import { ArgonComponent } from "../component.js";
+
+
+export class Effect extends ArgonComponent {
+    constructor(effect) {
+        super();
+        this.effect = effect;
+    }
+
+    get classes() {
+        return ["effect-icon"];
+    }
+
+    get label() {
+        return this.effect.name;
+    }
+
+    get icon() {
+        return this.effect.img;
+    }
+
+    get colorScheme() {
+        return 0;
+    }
+
+    get hasTooltip() {
+        return true;
+    }
+
+    async getTooltipData() {
+        return {
+            title: this.label,
+            description: await TextEditor.enrichHTML(this.effect.tooltip),
+        };
+    }
+
+    async getData() {
+        return {
+            label: this.label,
+            icon: this.icon,
+        };
+    }
+
+    activateListeners(html) {
+        this.element.onmouseup = this._onMouseUp.bind(this);
+        this.element.onmousedown = this._onMouseDown.bind(this);
+        this.element.onmouseenter = this._onMouseEnter.bind(this);
+        this.element.onmouseleave = this._onMouseLeave.bind(this);
+    }
+
+    async _onMouseDown(event) {}
+
+    async _onMouseUp(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.button === 0) this._onLeftClick(event);
+        if (event.button === 2) this._onRightClick(event);
+    }
+
+    async _onMouseEnter(event) {}
+
+    async _onMouseLeave(event) {}
+
+    async _onLeftClick(event) {
+        console.error("ActionButton._onLeftClick not implemented");
+    }
+
+    async _onRightClick(event) {}
+}

scripts/core/components/portrait/portraitPanel.js

@@ -1,4 +1,5 @@
 import { ArgonComponent } from "../component.js";
+import {Effect} from "./effect.js";
 
 export class PortraitPanel extends ArgonComponent {
     constructor(...args) {
@@ -46,6 +47,18 @@ export class PortraitPanel extends ArgonComponent {
         return null;
     }
 
+    get effectClass() {
+        return Effect;
+    }
+
+    async getEffects() {
+        const effects = [];
+        for(const effect of this.actor.temporaryEffects) {
+            effects.push({img: effect.img, name: effect.name, tooltip: await TextEditor.enrichHTML(effect.description)});
+        }
+        return effects;
+    }
+
     async getData() {
         const data = {
             name: this.name,
@@ -148,6 +161,14 @@ export class PortraitPanel extends ArgonComponent {
                 deathBtn.style.pointerEvents = "none";
             }
         }
+        const effectsContainer = this.element.querySelector(".effects-container");
+        const effects = await this.getEffects();
+        const effectElements = effects.map((effect) => new this.effectClass(effect));
+        effectsContainer.innerHTML = "";
+        for (const effect of effectElements) {
+            effectsContainer.appendChild(effect.element);
+        }
+        await Promise.all(effectElements.map((effect) => effect.render()));
     }
 
     async _onConfigure(event) {

scripts/core/hud.js

@@ -19,6 +19,7 @@ import { Tooltip } from "./tooltip.js";
 import { showTargetPickerGuide } from "./targetPicker.js";
 
 import { PassTurnPanel } from "./prefab/passTurnPanel.js";
+import {Effect} from "./components/portrait/effect.js";
 
 export const MODULE_ID = "enhancedcombathud";
 export const TEMPLATE_PATH = `modules/${MODULE_ID}/templates/`;
@@ -578,6 +579,7 @@ export class CoreHUD extends Application {
             },
             PORTRAIT: {
                 PortraitPanel,
+                Effect,
             },
             DRAWER: {
                 DrawerButton,

scripts/core/tooltip.js

@@ -4,7 +4,7 @@ export class Tooltip {
     constructor(tooltipData, triggerElement, orientation, locked = false) {
         this.element = document.createElement("div");
         this.element.classList.add(...this.classes);
-        if(tooltipData.classes) this.element.classList.add(...tooltipData.classes);
+        if (tooltipData.classes) this.element.classList.add(...tooltipData.classes);
         this._tooltipData = tooltipData;
         this._triggerElement = triggerElement;
         this._orientation = orientation;
@@ -39,14 +39,14 @@ export class Tooltip {
         }
         const details = this.element.querySelector(".ech-tooltip-details");
         let closestMultiplier = 3;
-        [2, 3].forEach(multiplier => {
-          if (details.children.length % multiplier === 0) closestMultiplier = multiplier;
+        [2, 3].forEach((multiplier) => {
+            if (details.children.length % multiplier === 0) closestMultiplier = multiplier;
         });
 
         details.style.gridTemplateColumns = `repeat(${Math.min(details.children.length, closestMultiplier)}, 1fr)`;
-      this.setPosition(this._orientation);
-      this._scrollableElement = this.element.querySelector(".ech-tooltip-description");
-      ui.ARGON._tooltip = this;
+        this.setPosition(this._orientation);
+        this._scrollableElement = this.element.querySelector(".ech-tooltip-description");
+        ui.ARGON._tooltip = this;
         return this.element;
     }
 
@@ -57,15 +57,15 @@ export class Tooltip {
         const tempElement = document.createElement("div");
         tempElement.innerHTML = rendered;
         this.element.innerHTML = tempElement.firstElementChild.innerHTML;
-        if(!data.subtitle) this.element.classList.add("hide-subtitle");
+        if (!data.subtitle) this.element.classList.add("hide-subtitle");
     }
 
     setPosition(orientation, scale, margin = 10) {
         const tooltipElement = this.element;
         const triggeringElement = this._triggerElement;
         orientation ??= TooltipManager.TOOLTIP_DIRECTIONS.UP;
-      scale ??= 1;
-      scale *= game.settings.get("enhancedcombathud", "tooltipScale");
+        scale ??= 1;
+        scale *= game.settings.get("enhancedcombathud", "tooltipScale");
         if (!tooltipElement || !triggeringElement) return;
         const tooltipRect = tooltipElement.getBoundingClientRect();
         const triggeringRect = triggeringElement.getBoundingClientRect();
@@ -98,39 +98,48 @@ export class Tooltip {
         const marginLeft = margin || 0;
         const marginTop = margin || 0;
 
+        let left = 0;
+        let top = 0;
+
         switch (orientation) {
             case TooltipManager.TOOLTIP_DIRECTIONS.UP:
-                tooltipElement.style.left = triggerCenterX - tooltipRect.width / 2 + "px";
-                tooltipElement.style.top = triggeringRect.top - tooltipRect.height - marginTop + "px";
+                left = triggerCenterX - tooltipRect.width / 2;
+                top = triggeringRect.top - tooltipRect.height - marginTop;
                 break;
             case TooltipManager.TOOLTIP_DIRECTIONS.DOWN:
-                tooltipElement.style.left = triggerCenterX - tooltipRect.width / 2 + "px";
-                tooltipElement.style.top = triggeringRect.bottom + marginTop + "px";
+                top = triggeringRect.bottom + marginTop;
+                left = triggerCenterX - tooltipRect.width / 2;
                 break;
             case TooltipManager.TOOLTIP_DIRECTIONS.LEFT:
-                tooltipElement.style.left = triggeringRect.left - tooltipRect.width - marginLeft + "px";
-                tooltipElement.style.top = triggerCenterY - tooltipRect.height / 2 + "px";
+                left = triggeringRect.left - tooltipRect.width - marginLeft;
+                top = triggerCenterY - tooltipRect.height / 2;
                 break;
             case TooltipManager.TOOLTIP_DIRECTIONS.RIGHT:
-                tooltipElement.style.left = triggeringRect.right + marginLeft + "px";
-                tooltipElement.style.top = triggerCenterY - tooltipRect.height / 2 + "px";
+                left = triggeringRect.right + marginLeft;
+                top = triggerCenterY - tooltipRect.height / 2;
                 break;
             case TooltipManager.TOOLTIP_DIRECTIONS.CENTER:
-                tooltipElement.style.left = triggerCenterX - tooltipRect.width / 2 + "px";
-                tooltipElement.style.top = triggerCenterY - tooltipRect.height / 2 + "px";
+                left = triggerCenterX - tooltipRect.width / 2;
+                top = triggerCenterY - tooltipRect.height / 2;
                 break;
             default:
                 console.error("Invalid orientation:", orientation);
         }
-  }
-
-  setScrollDelta(delta) {
-    if(!this._scrollableElement) return;
-    this._scrollableElement.scrollTop += delta;
-  }
+
+        left = Math.max(0, left);
+        top = Math.max(0, top);
+
+        tooltipElement.style.left = left + "px";
+        tooltipElement.style.top = top + "px";
+    }
+
+    setScrollDelta(delta) {
+        if (!this._scrollableElement) return;
+        this._scrollableElement.scrollTop += delta;
+    }
 
     _destroy(force = false) {
-        if(ui.ARGON._tooltip === this) ui.ARGON._tooltip = null;
+        if (ui.ARGON._tooltip === this) ui.ARGON._tooltip = null;
         if (force) {
             this.element.remove();
             return;

scss/_portrait.scss

@@ -111,6 +111,17 @@
         text-shadow: 0 0 black;
         top: 0px;
         width: 100%;
+
+        .effects-container{
+            display: flex;
+            gap: 0.3rem;
+            flex-wrap: wrap;
+            flex-direction: row;
+            .effect-icon{
+                width: 2rem;
+                height: 2rem;
+            }
+        }
     }
 
     .portrait-stat-block.player-details.player-details-bottom {

templates/partials/Effect.hbs

@@ -0,0 +1,3 @@
+<div>
+    <img src="{{icon}}" alt="{{label}}" />
+</div>

templates/partials/PortraitPanel.hbs

@@ -20,6 +20,8 @@
 				<span class="player-detail">
 					{{description}}
 				</span>
+				<div class="effects-container">
+				</div>
 		</div>
 		<div class="player-buttons">