diff --git a/scripts/module.js b/scripts/module.js index 7a6ecb0..94d4148 100644 --- a/scripts/module.js +++ b/scripts/module.js @@ -4,11 +4,20 @@ const FLAG_KEY = "environmentUuid"; Hooks.once("init", () => { console.log(`${MODULE_ID} | Initializing Daggerheart Environment Overlay`); + // Register Menu + game.settings.registerMenu(MODULE_ID, "overlayConfig", { + name: "Overlay Configuration", + label: "Configure Overlay Style", + hint: "Customize the size, shape, and color of the environment overlay.", + icon: "fas fa-palette", + type: EnvironmentOverlayConfig, + restricted: true + }); + game.settings.register(MODULE_ID, "borderColor", { name: "Overlay Border Color", - hint: "Color of the environment token border.", scope: "world", - config: true, + config: false, type: String, default: "#f3c267", onChange: () => renderEnvironmentOverlay() @@ -16,45 +25,115 @@ Hooks.once("init", () => { game.settings.register(MODULE_ID, "iconSize", { name: "Icon Size", - hint: "Size of the environment token in pixels.", scope: "world", - config: true, + config: false, 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, + config: false, 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.", scope: "world", - config: true, + config: false, type: Boolean, default: true, onChange: () => renderEnvironmentOverlay() }); }); +/** + * Configuration Application + */ +/** + * Configuration Application + */ +const { ApplicationV2, HandlebarsApplicationMixin } = foundry.applications.api; + +class EnvironmentOverlayConfig extends HandlebarsApplicationMixin(ApplicationV2) { + static DEFAULT_OPTIONS = { + tag: "form", + id: "dh-environment-overlay-config", + window: { + title: "Environment Overlay Configuration", + icon: "fas fa-palette", + resizable: false + }, + position: { + width: 500, + height: "auto" + }, + classes: ["daggerheart", "dialog", "dh-style", "module"], + actions: { + reset: EnvironmentOverlayConfig.onReset + }, + form: { + handler: EnvironmentOverlayConfig.onSubmit, + closeOnSubmit: true + } + }; + + static PARTS = { + form: { + template: "modules/dh-environment-overlay/templates/overlay-config.hbs" + } + }; + + async _prepareContext(options) { + return { + borderColor: game.settings.get(MODULE_ID, "borderColor"), + iconSize: game.settings.get(MODULE_ID, "iconSize"), + iconShape: game.settings.get(MODULE_ID, "iconShape"), + showName: game.settings.get(MODULE_ID, "showName"), + shapes: { + "rounded": "Rounded Square", + "square": "Square", + "circle": "Circle" + } + }; + } + + _onRender(context, options) { + super._onRender(context, options); + + // Update range value display + const html = this.element; + const rangeInput = html.querySelector('input[name="iconSize"]'); + const rangeValue = html.querySelector('.range-value'); + + if (rangeInput && rangeValue) { + rangeInput.addEventListener('input', (event) => { + rangeValue.textContent = event.target.value; + }); + } + } + + static async onReset(event, target) { + await game.settings.set(MODULE_ID, "borderColor", "#f3c267"); + await game.settings.set(MODULE_ID, "iconSize", 80); + await game.settings.set(MODULE_ID, "iconShape", "rounded"); + await game.settings.set(MODULE_ID, "showName", true); + this.render(); + ui.notifications.info("Environment Overlay settings reset to defaults."); + } + + static async onSubmit(event, form, formData) { + const data = formData.object; + for (let [key, value] of Object.entries(data)) { + await game.settings.set(MODULE_ID, key, value); + } + } +} + /** * Handle Scene Configuration Render */ diff --git a/styles/module.css b/styles/module.css index e0656d0..5c47dd1 100644 --- a/styles/module.css +++ b/styles/module.css @@ -1,3 +1,89 @@ +/* Configuration Window Styles */ +#dh-environment-overlay-config { + font-family: 'Montserrat', sans-serif; + color: light-dark(var(--dark-blue), var(--golden)); + background-image: light-dark(url('/systems/daggerheart/assets/parchments/dh-parchment-light.png'), url('/systems/daggerheart/assets/parchments/dh-parchment-dark.png')); + background-repeat: no-repeat; + background-position: center; + border: none; + padding: 15px !important; +} + +#dh-environment-overlay-config .form-group { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 15px; +} + +#dh-environment-overlay-config .form-fields { + flex: 1; + display: flex; + align-items: center; + justify-content: flex-end; + gap: 10px; +} + +#dh-environment-overlay-config .range-value { + min-width: 30px; + text-align: center; + font-weight: bold; + color: light-dark(var(--dark-blue), var(--golden)); +} + +#dh-environment-overlay-config .window-header { + background: transparent; + border-bottom: none; + color: light-dark(var(--dark-blue), var(--golden)); + font-family: 'Cinzel Decorative', serif; +} + +#dh-environment-overlay-config .window-title { + font-family: 'Cinzel Decorative', serif; + color: light-dark(var(--dark-blue), var(--golden)); +} + +#dh-environment-overlay-config h1 { + font-family: 'Cinzel Decorative', serif; + color: light-dark(var(--dark-blue), var(--golden)); +} + +#dh-environment-overlay-config label { + font-family: 'Montserrat', sans-serif; + color: light-dark(var(--dark-blue), var(--golden)); +} + +#dh-environment-overlay-config .notes { + font-family: 'Montserrat', sans-serif; + color: light-dark(var(--dark-blue-50), var(--golden-90)); +} + +#dh-environment-overlay-config .sheet-footer { + display: flex; + justify-content: center; + gap: 15px; + margin-top: 10px; +} + +#dh-environment-overlay-config .sheet-footer button { + font-family: 'Cinzel', serif; + color: light-dark(var(--dark-blue), var(--golden)); + background: light-dark(transparent, var(--deep-black)); + border: 1px solid light-dark(var(--dark-blue), var(--golden)); + box-shadow: 0 0 5px var(--soft-shadow); + height: 40px; + width: 140px; + display: flex; + align-items: center; + justify-content: center; +} + +#dh-environment-overlay-config .sheet-footer button:hover { + border-color: light-dark(var(--dark-blue), var(--golden)); + color: light-dark(var(--dark-blue), var(--golden)); + background: rgba(255, 255, 255, 0.1); +} + /* Scene Config Styles */ .dh-environment-wrapper { margin-top: 10px; @@ -72,7 +158,8 @@ } #dh-environment-overlay img { - border-radius: 50%; /* Default fallback */ + 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; diff --git a/templates/overlay-config.hbs b/templates/overlay-config.hbs new file mode 100644 index 0000000..aac42f6 --- /dev/null +++ b/templates/overlay-config.hbs @@ -0,0 +1,43 @@ +
\ No newline at end of file