From 626474178d84ba5db94cbcb90dcdae1475093ce8 Mon Sep 17 00:00:00 2001 From: macniel Date: Wed, 15 Oct 2025 21:02:56 +0200 Subject: [PATCH] migrates active effect to DocumentV2 --- src/module/sheets/ActiveEffectSheet.mjs | 93 +++--- src/module/sheets/equipmentSheet.mjs | 34 +- src/style/_active-effect-sheet.scss | 5 + src/style/_liturgy-banner.scss | 294 +++++++++--------- src/style/_player-action.scss | 32 +- src/style/_richtext-editor.scss | 10 +- src/style/_skill-sheet.scss | 2 +- src/style/_tabs.scss | 91 +++--- .../item/activeeffect/main-sheet.hbs | 24 ++ .../item/item-activeeffect-sheet.hbs | 20 -- 10 files changed, 323 insertions(+), 282 deletions(-) create mode 100644 src/templates/item/activeeffect/main-sheet.hbs delete mode 100644 src/templates/item/item-activeeffect-sheet.hbs diff --git a/src/module/sheets/ActiveEffectSheet.mjs b/src/module/sheets/ActiveEffectSheet.mjs index ef2c1d03..9e422c6e 100644 --- a/src/module/sheets/ActiveEffectSheet.mjs +++ b/src/module/sheets/ActiveEffectSheet.mjs @@ -1,44 +1,65 @@ -export class ActiveEffectSheet extends foundry.appv1.sheets.ItemSheet { - /**@override */ - static get defaultOptions() { - return foundry.utils.mergeObject(super.defaultOptions, { - classes: ['dsa41', 'sheet', 'activeeffect'], - width: 520, - height: 480 - }); +const {DocumentSheetV2, HandlebarsApplicationMixin} = foundry.applications.api + +export class ActiveEffectSheet extends HandlebarsApplicationMixin(DocumentSheetV2) { + + /** @inheritDoc */ + static DEFAULT_OPTIONS = { + position: {width: 520, height: 480}, + classes: ['dsa41', 'sheet', 'item', 'activeeffect'], + tag: 'form', + form: { + submitOnChange: true, + closeOnSubmit: false, + handler: ActiveEffectSheet.#onSubmitForm + }, + actions: { + openEffect: ActiveEffectSheet.#openEffect, + editImage: DocumentSheetV2.DEFAULT_OPTIONS.actions.editImage, + } + } + + /** @inheritDoc */ + static PARTS = { + form: { + template: `systems/DSA_4-1/templates/item/activeeffect/main-sheet.hbs` + }, + } + + static async #openEffect(evt) { + evt.preventDefault() + const {id} = evt.srcElement.dataset + const effect = await this.document.effects.get(id) + effect.sheet.render(true) + } + + /** + * Handle form submission + * @this {AdvantageSheet} + * @param {SubmitEvent} event + * @param {HTMLFormElement} form + * @param {FormDataExtended} formData + */ + static async #onSubmitForm(event, form, formData) { + event.preventDefault() + + await this.document.update(formData.object) // Note: formData.object } /** @override */ - get template() { - return `systems/DSA_4-1/templates/item/item-activeeffect-sheet.hbs`; - } + async _prepareContext(options) { - /** @override */ - getData() { - // Retrieve the data structure from the base sheet. You can inspect or log - // the context variable to see the structure, but some key properties for - // sheets are the actor object, the data object, whether or not it's - // editable, the items array, and the effects array. - const context = super.getData(); - const effects = context.document.getEmbeddedCollection("ActiveEffect").contents; + const context = await super._prepareContext(options) + context.system = context.document.system + + const effects = context.document.getEmbeddedCollection("ActiveEffect").contents if (effects.length > 0) { - context.effectId = effects[0]._id; + context.effectId = effects[0]._id } - return context; + context.name = context.document.name + context.img = context.document.img + context.notes = context.document.system.notes + + return context } - - activateListeners(html) { - super.activateListeners(html); - - // Everything below here is only needed if the sheet is editable - if (!this.isEditable) return; - - html.on('click', '.editEffects', (evt) => { - const {id} = evt.currentTarget.dataset; - const effect = this.object.effects.get(id); - effect.sheet.render(true); - }) - } - -} +} \ No newline at end of file diff --git a/src/module/sheets/equipmentSheet.mjs b/src/module/sheets/equipmentSheet.mjs index 2e12f378..a5c3f878 100644 --- a/src/module/sheets/equipmentSheet.mjs +++ b/src/module/sheets/equipmentSheet.mjs @@ -110,12 +110,12 @@ export class EquipmentSheet extends HandlebarsApplicationMixin(DocumentSheetV2) } #prepareMetaContext(context) { - const equipmentData = context.document.system; - context.system = equipmentData; - context.quantity = equipmentData.quantity; - context.description = equipmentData.description; - context.name = context.document.name; - context.img = context.document.img; + const equipmentData = context.document.system + context.system = equipmentData + context.quantity = equipmentData.quantity + context.description = equipmentData.description + context.name = context.document.name + context.img = context.document.img context.categoryAndOptions = { options: { @@ -131,8 +131,8 @@ export class EquipmentSheet extends HandlebarsApplicationMixin(DocumentSheetV2) } #prepareMeleeContext(context) { - const equipmentData = context.document.system; - context.system = equipmentData; + const equipmentData = context.document.system + context.system = equipmentData context.meleeSkillsAndOptions = { options: { "": "", @@ -156,7 +156,7 @@ export class EquipmentSheet extends HandlebarsApplicationMixin(DocumentSheetV2) } #prepareRangedContext(context) { - const equipmentData = context.document.system; + const equipmentData = context.document.system context.rangedSkillsAndOptions = { options: { "": "", @@ -187,14 +187,14 @@ export class EquipmentSheet extends HandlebarsApplicationMixin(DocumentSheetV2) */ _prepareTabs(tabGroup) { - const currentTabs = super._prepareTabs(tabGroup); + const currentTabs = super._prepareTabs(tabGroup) const category = this.document.system.category /** * * @type {[{ApplicationTab}]} */ - let tabs = currentTabs; + let tabs = currentTabs if (category.includes("Nahkampfwaffe")) { tabs.melee = { @@ -223,7 +223,7 @@ export class EquipmentSheet extends HandlebarsApplicationMixin(DocumentSheetV2) /** @override */ async _prepareContext(options) { - const context = await super._prepareContext(options); + const context = await super._prepareContext(options) context.price = context.document.system.price context.weight = context.document.system.weight @@ -239,12 +239,12 @@ export class EquipmentSheet extends HandlebarsApplicationMixin(DocumentSheetV2) */ _onRender(context, options) { this.element.querySelector('.array-editor select').addEventListener('change', (evt) => { - const addingValue = evt.currentTarget.value; - const fieldToTarget = evt.currentTarget.dataset.targetField; - const newSkills = [...this.document.system[fieldToTarget], addingValue]; + const addingValue = evt.currentTarget.value + const fieldToTarget = evt.currentTarget.dataset.targetField + const newSkills = [...this.document.system[fieldToTarget], addingValue] - this.document.update({system: {[fieldToTarget]: newSkills}}); - evt.currentTarget.value = ""; + this.document.update({system: {[fieldToTarget]: newSkills}}) + evt.currentTarget.value = "" }) } diff --git a/src/style/_active-effect-sheet.scss b/src/style/_active-effect-sheet.scss index dd1dddb0..18c57971 100644 --- a/src/style/_active-effect-sheet.scss +++ b/src/style/_active-effect-sheet.scss @@ -14,6 +14,11 @@ height: 48px; line-height: 48px; } + + button { + height: 48px; + width: 48px; + } } .meta { diff --git a/src/style/_liturgy-banner.scss b/src/style/_liturgy-banner.scss index a6d30efb..c1b3366c 100644 --- a/src/style/_liturgy-banner.scss +++ b/src/style/_liturgy-banner.scss @@ -72,176 +72,180 @@ $deity_colours_tint: ( } } -.tab.liturgies { - table { +.dsa41.sheet { - @include coloring('Praios'); - @include coloring('Rondra'); - @include coloring('Efferd'); - @include coloring('Travia'); - @include coloring('Boron'); - @include coloring('Hesinde'); - @include coloring('Firun'); - @include coloring('Tsa'); - @include coloring('Phex'); - @include coloring('Peraine'); - @include coloring('Ingerimm'); - @include coloring('Rahja'); + .tab.liturgies { + table { - tr { - th.background { + @include coloring('Praios'); + @include coloring('Rondra'); + @include coloring('Efferd'); + @include coloring('Travia'); + @include coloring('Boron'); + @include coloring('Hesinde'); + @include coloring('Firun'); + @include coloring('Tsa'); + @include coloring('Phex'); + @include coloring('Peraine'); + @include coloring('Ingerimm'); + @include coloring('Rahja'); + + tr { + th.background { + + &::before { + position: absolute; + content: ''; + background-image: url("../assets/velvet_strip.png"); + background-repeat: repeat-y; + background-size: cover; + width: 86px; + height: 100%; + + top: 45px; + left: 12px; + } + + &::after { /* for tinting the texture */ + content: ""; + position: absolute; + width: 86px; + height: 100%; + + top: 45px; + left: 12px; + } + } + } + + .banner-top { + position: relative; + + width: 90px; + + img { + position: absolute; + top: 2px; + left: 1px; + width: 90px; + height: 90px; + border: 0; + z-index: 1; + } + + &::after { + z-index: 0; + border-width: 0 4px 0 4px; + //background-color: #64b; + border-style: solid; + position: absolute; + content: ""; + left: -2px; + top: 45px; + bottom: 0; + width: 94px; + } &::before { position: absolute; + border-radius: 45px; + height: 94px; + width: 94px; content: ''; - background-image: url("../assets/velvet_strip.png"); - background-repeat: repeat-y; - background-size: cover; - width: 86px; - height: 100%; - - top: 45px; - left: 12px; - } - - &::after { /* for tinting the texture */ - content: ""; - position: absolute; - width: 86px; - height: 100%; - - top: 45px; - left: 12px; + left: -2px; + right: -2px; + top: 0; + border-width: 4px; + border-style: solid; + z-index: 2; } } - } - .banner-top { - position: relative; - - width: 90px; - - img { - position: absolute; - top: 2px; - left: 1px; - width: 90px; - height: 90px; - border: 0; - z-index: 1; - } - - &::after { - z-index: 0; + .banner-mid { + position: relative; border-width: 0 4px 0 4px; //background-color: #64b; border-style: solid; - position: absolute; - content: ""; - left: -2px; - top: 45px; - bottom: 0; - width: 94px; + width: 90px; + + div { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + + div.rank-label { + position: absolute; + left: 2px; + right: 2px; + top: 0; + bottom: 0; + border-bottom: 2px solid black; + color: gold; + text-shadow: 2px 2px 1px black; + } + } } - &::before { - position: absolute; - border-radius: 45px; - height: 94px; - width: 94px; - content: ''; - left: -2px; - right: -2px; - top: 0; + .banner-bot { + position: relative; border-width: 4px; border-style: solid; - z-index: 2; + width: 90px; + height: 12px; } } - .banner-mid { - position: relative; - border-width: 0 4px 0 4px; - //background-color: #64b; - border-style: solid; - width: 90px; + .liturgy.rollable { + width: 24px; - div { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - display: flex; - justify-content: center; - align-items: center; + svg { + $color: #e4de61; + width: 24px; + height: 24px; + top: 1px; + z-index: 1; + position: relative; - div.rank-label { - position: absolute; - left: 2px; - right: 2px; - top: 0; - bottom: 0; - border-bottom: 2px solid black; - color: gold; - text-shadow: 2px 2px 1px black; + .border { + fill: #0000; + } + + .center { + fill: $color; + stroke: colour.$rollable-die-border-color; + } + + .topleft { + fill: color.adjust($color, $lightness: numbers.$lighter_factor); + stroke: colour.$rollable-die-border-color; + } + + .bottomleft { + fill: color.adjust($color, $lightness: numbers.$lightest_factor); + stroke: colour.$rollable-die-border-color; + } + + .topright { + fill: color.adjust($color, $lightness: numbers.$darken_factor); + stroke: colour.$rollable-die-border-color; + } + + .bottomright, .bottom { + fill: color.adjust($color, $lightness: numbers.$darkest_factor); + stroke: colour.$rollable-die-border-color; } } } - .banner-bot { - position: relative; - border-width: 4px; - border-style: solid; - width: 90px; - height: 12px; + .clickable:hover { + text-shadow: 0 0 10px rgb(255 0 0); } + } - .liturgy.rollable { - width: 24px; - - svg { - $color: #e4de61; - width: 24px; - height: 24px; - top: 1px; - z-index: 1; - position: relative; - - .border { - fill: #0000; - } - - .center { - fill: $color; - stroke: colour.$rollable-die-border-color; - } - - .topleft { - fill: color.adjust($color, $lightness: numbers.$lighter_factor); - stroke: colour.$rollable-die-border-color; - } - - .bottomleft { - fill: color.adjust($color, $lightness: numbers.$lightest_factor); - stroke: colour.$rollable-die-border-color; - } - - .topright { - fill: color.adjust($color, $lightness: numbers.$darken_factor); - stroke: colour.$rollable-die-border-color; - } - - .bottomright, .bottom { - fill: color.adjust($color, $lightness: numbers.$darkest_factor); - stroke: colour.$rollable-die-border-color; - } - } - } - - .clickable:hover { - text-shadow: 0 0 10px rgb(255 0 0); - } - -} +} \ No newline at end of file diff --git a/src/style/_player-action.scss b/src/style/_player-action.scss index a56b7b59..181080bb 100644 --- a/src/style/_player-action.scss +++ b/src/style/_player-action.scss @@ -2,25 +2,27 @@ @use "./_numbers"; @use "sass:color"; -.player-action { +.dsa41.sheet { + .player-action { - display: inline-block; - width: 120px; - height: 80px; - float: left; - margin: 0 8px 8px 0; + display: inline-block; + width: 120px; + height: 80px; + float: left; + margin: 0 8px 8px 0; - border: 1px solid #333; - background-color: color.scale(colours.$default-action, $alpha: 20%); - color: colours.$default-action-color; - border-radius: 4px; - box-shadow: numbers.$pill-box-inset numbers.$pill-box-inset numbers.$pill-box-blur-radius colours.$pill-box-shadow; + border: 1px solid #333; + background-color: color.scale(colours.$default-action, $alpha: 20%); + color: colours.$default-action-color; + border-radius: 4px; + box-shadow: numbers.$pill-box-inset numbers.$pill-box-inset numbers.$pill-box-blur-radius colours.$pill-box-shadow; - &.special-ability { - background-color: color.scale(colours.$special-action, $alpha: 20%); - color: colours.$special-action-color; + &.special-ability { + background-color: color.scale(colours.$special-action, $alpha: 20%); + color: colours.$special-action-color; + + } } - } diff --git a/src/style/_richtext-editor.scss b/src/style/_richtext-editor.scss index 4a2f4c21..1f1e331d 100644 --- a/src/style/_richtext-editor.scss +++ b/src/style/_richtext-editor.scss @@ -1,3 +1,7 @@ -.editor.prosemirror.active, .editor.prosemirror.inactive { - flex: 1; -} +.dsa41.sheet { + + .editor.prosemirror.active, .editor.prosemirror.inactive { + flex: 1; + } + +} \ No newline at end of file diff --git a/src/style/_skill-sheet.scss b/src/style/_skill-sheet.scss index f1e621e5..805d6b62 100644 --- a/src/style/_skill-sheet.scss +++ b/src/style/_skill-sheet.scss @@ -1,4 +1,4 @@ -.sheet.item.skill { +.dsa41.sheet.item.skill { .meta-details { diff --git a/src/style/_tabs.scss b/src/style/_tabs.scss index a0a5676a..5b6a99d5 100644 --- a/src/style/_tabs.scss +++ b/src/style/_tabs.scss @@ -44,61 +44,62 @@ } -} -// Tabs v2 + // Tabs v2 -.sheet-tabs { + .sheet-tabs { - position: relative; - display: flow; - border-top: unset; - border-bottom: unset; - margin-bottom: 0; + position: relative; + display: flow; + border-top: unset; + border-bottom: unset; + margin-bottom: 0; - a[data-action="tab"] { + a[data-action="tab"] { - background-color: colours.$tab-inactive-background-color; - display: inline-block; - height: 32px; - line-height: 32px; - vertical-align: middle; - padding: 0 16px; - - span { - - } - - &.active { - - border-left: numbers.$tab-border-width solid colours.$tab-border-color; - border-top: numbers.$tab-border-width solid colours.$tab-border-color; - border-right: numbers.$tab-border-width solid colours.$tab-border-color; - border-bottom: 0; - top: numbers.$tab-border-width*2; - background: assets.$tab-background; - position: relative; - z-index: 2; + background-color: colours.$tab-inactive-background-color; + display: inline-block; + height: 32px; + line-height: 32px; + vertical-align: middle; + padding: 0 16px; span { } + &.active { + + border-left: numbers.$tab-border-width solid colours.$tab-border-color; + border-top: numbers.$tab-border-width solid colours.$tab-border-color; + border-right: numbers.$tab-border-width solid colours.$tab-border-color; + border-bottom: 0; + top: numbers.$tab-border-width*2; + background: assets.$tab-background; + position: relative; + z-index: 2; + + span { + + } + + } + } - } + + section.tab { + border: numbers.$tab-border-width solid colours.$tab-border-color; + background: assets.$tab-pane-background; + flex: 1; + + & > div { + display: flex; + flex-direction: column; + height: 100%; + gap: 8px; + padding: 8px; + } + } + } - -section.tab { - border: numbers.$tab-border-width solid colours.$tab-border-color; - background: assets.$tab-pane-background; - flex: 1; - - & > div { - display: flex; - flex-direction: column; - height: 100%; - gap: 8px; - padding: 8px; - } -} \ No newline at end of file diff --git a/src/templates/item/activeeffect/main-sheet.hbs b/src/templates/item/activeeffect/main-sheet.hbs new file mode 100644 index 00000000..ce7a83a5 --- /dev/null +++ b/src/templates/item/activeeffect/main-sheet.hbs @@ -0,0 +1,24 @@ +
+ +
+ {{name}} + + + +
+ +
+ + + {{{notes}}} + +
+ +
diff --git a/src/templates/item/item-activeeffect-sheet.hbs b/src/templates/item/item-activeeffect-sheet.hbs deleted file mode 100644 index e7c02a70..00000000 --- a/src/templates/item/item-activeeffect-sheet.hbs +++ /dev/null @@ -1,20 +0,0 @@ -
-
- -
- - - - -
- -
- - {{editor item.system.notes target="system.notes" button=true owner=owner editable=editable}} -
- - -
-