feat: Add customizable icon size and shape settings, and update module metadata.
This commit is contained in:
parent
63a8c957cd
commit
773a95641b
3 changed files with 58 additions and 22 deletions
13
module.json
13
module.json
|
|
@ -2,14 +2,17 @@
|
|||
"id": "dh-environment-overlay",
|
||||
"title": "Daggerheart Environment Overlay",
|
||||
"description": "Links Environment actors to scenes, displaying them as interactive, movable overlays on the canvas.",
|
||||
"version": "1.0.0",
|
||||
"version": "1.1.0",
|
||||
"compatibility": {
|
||||
"minimum": "13",
|
||||
"verified": "13"
|
||||
},
|
||||
"authors": [
|
||||
{
|
||||
"name": "Antigravity"
|
||||
"name": "CPTN Cosmo",
|
||||
"email": "cptncosmo@gmail.com",
|
||||
"url": "https://github.com/cptn-cosmo",
|
||||
"discord": "cptn_cosmo",
|
||||
}
|
||||
],
|
||||
"relationships": {
|
||||
|
|
@ -29,7 +32,7 @@
|
|||
"styles": [
|
||||
"styles/module.css"
|
||||
],
|
||||
"url": "",
|
||||
"manifest": "",
|
||||
"download": ""
|
||||
"url": "https://github.com/cptn-cosmo/dh-environment-overlay",
|
||||
"manifest": "https://github.com/cptn-cosmo/dh-environment-overlay/releases/latest/download/module.json",
|
||||
"download": "https://github.com/cptn-cosmo/dh-environment-overlay/releases/download/1.1.0/dh-environment-overlay.zip"
|
||||
}
|
||||
|
|
@ -14,6 +14,36 @@ Hooks.once("init", () => {
|
|||
onChange: () => renderEnvironmentOverlay()
|
||||
});
|
||||
|
||||
game.settings.register(MODULE_ID, "iconSize", {
|
||||
name: "Icon Size",
|
||||
hint: "Size of the environment token in pixels.",
|
||||
scope: "world",
|
||||
config: true,
|
||||
type: Number,
|
||||
range: {
|
||||
min: 30,
|
||||
max: 200,
|
||||
step: 5
|
||||
},
|
||||
default: 80,
|
||||
onChange: () => renderEnvironmentOverlay()
|
||||
});
|
||||
|
||||
game.settings.register(MODULE_ID, "iconShape", {
|
||||
name: "Icon Shape",
|
||||
hint: "Shape of the environment token overlay.",
|
||||
scope: "world",
|
||||
config: true,
|
||||
type: String,
|
||||
choices: {
|
||||
"rounded": "Rounded Square",
|
||||
"square": "Square",
|
||||
"circle": "Circle"
|
||||
},
|
||||
default: "rounded",
|
||||
onChange: () => renderEnvironmentOverlay()
|
||||
});
|
||||
|
||||
game.settings.register(MODULE_ID, "showName", {
|
||||
name: "Show Actor Name",
|
||||
hint: "Display the environment actor's name below the token.",
|
||||
|
|
@ -175,15 +205,6 @@ async function renderEnvironmentOverlay() {
|
|||
if (!actor) return; // Maybe deleted?
|
||||
|
||||
// PERMISSION CHECK
|
||||
// testUserPermission second arg "OBSERVER" means user needs at least OBSERVER level.
|
||||
// If users need only LIMITED, use "LIMITED".
|
||||
// For opening the sheet (which we do on click), usually OBSERVER/OWNER is needed to see much,
|
||||
// but even LIMITED users can open sheet (partial view).
|
||||
// Let's assume OBSERVER is good to see the overlay (since they can see the token).
|
||||
// Actually, if it's an "Environment" actor, players might need at least Limited to interactions.
|
||||
// Let's stick to OBSERVER as safe default, or LIMITED if desired.
|
||||
// User said "players who have permissions to access the actor".
|
||||
// This implies at least LIMITED.
|
||||
if (!actor.testUserPermission(game.user, "LIMITED")) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -192,6 +213,14 @@ async function renderEnvironmentOverlay() {
|
|||
const borderColor = game.settings.get(MODULE_ID, "borderColor");
|
||||
const showName = game.settings.get(MODULE_ID, "showName");
|
||||
|
||||
// New Settings
|
||||
const iconSize = game.settings.get(MODULE_ID, "iconSize");
|
||||
const iconShape = game.settings.get(MODULE_ID, "iconShape");
|
||||
|
||||
let borderRadius = "20%"; // Default rounded
|
||||
if (iconShape === "circle") borderRadius = "50%";
|
||||
if (iconShape === "square") borderRadius = "0";
|
||||
|
||||
let styleStr = "";
|
||||
if (position.left !== undefined) styleStr += `left: ${position.left}px;`;
|
||||
else if (position.right !== undefined) styleStr += `right: ${position.right}px;`;
|
||||
|
|
@ -199,9 +228,16 @@ async function renderEnvironmentOverlay() {
|
|||
if (position.top !== undefined) styleStr += `top: ${position.top}px;`;
|
||||
else if (position.bottom !== undefined) styleStr += `bottom: ${position.bottom}px;`;
|
||||
|
||||
// Set width on container to ensure centering logic still works if relied on width
|
||||
styleStr += `width: ${iconSize}px; --dh-overlay-color: ${borderColor};`;
|
||||
|
||||
const overlay = $(`
|
||||
<div id="dh-environment-overlay" title="${actor.name}" style="${styleStr}">
|
||||
<img src="${actor.img}" style="border-color: ${borderColor}">
|
||||
<img src="${actor.img}" style="
|
||||
width: ${iconSize}px;
|
||||
height: ${iconSize}px;
|
||||
border-radius: ${borderRadius};
|
||||
">
|
||||
${showName ? `<div class="dh-environment-overlay-name">${actor.name}</div>` : ""}
|
||||
</div>
|
||||
`);
|
||||
|
|
|
|||
|
|
@ -72,19 +72,16 @@
|
|||
}
|
||||
|
||||
#dh-environment-overlay img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
/* Border color handled via inline style now */
|
||||
border: 3px solid #ffcc00;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 50%; /* Default fallback */
|
||||
border: 3px solid var(--dh-overlay-color, #ffcc00);
|
||||
box-shadow: 0 0 10px var(--dh-overlay-color, rgba(0, 0, 0, 0.5));
|
||||
background-color: #000;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
#dh-environment-overlay:hover img {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 15px rgba(255, 204, 0, 0.6);
|
||||
box-shadow: 0 0 15px var(--dh-overlay-color, rgba(255, 204, 0, 0.6));
|
||||
}
|
||||
|
||||
.dh-environment-overlay-name {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue