diff --git a/src/module/sheets/equipmentSheet.mjs b/src/module/sheets/equipmentSheet.mjs index 76b352c2..6248a8c7 100644 --- a/src/module/sheets/equipmentSheet.mjs +++ b/src/module/sheets/equipmentSheet.mjs @@ -16,8 +16,11 @@ class EquipmentSheet extends HandlebarsApplicationMixin(DocumentSheetV2) { resizable: true, }, actions: { - editImage: DocumentSheetV2.DEFAULT_OPTIONS.actions.editImage - + editImage: DocumentSheetV2.DEFAULT_OPTIONS.actions.editImage, + addToMelee: EquipmentSheet.#addToMelee, + removeFromMelee: EquipmentSheet.#removeFromMelee, + addToRanged: EquipmentSheet.#addToRanged, + removeFromRanged: EquipmentSheet.#removeFromRanged } } @@ -72,6 +75,38 @@ class EquipmentSheet extends HandlebarsApplicationMixin(DocumentSheetV2) { return options } + static async #addToMelee(event, target) { + const optionId = this.element.querySelector(`[data-target-field="${target.dataset.targetField}"]`).value + const meleeSkills = this.document.system.meleeSkills + if (optionId.trim() !== '' && !meleeSkills.includes(optionId)) { + meleeSkills.push(optionId) + await this.document.update({'system.meleeSkills': meleeSkills}) + } + } + + static async #removeFromMelee(event, target) { + const {optionId} = target.dataset + let meleeSkills = this.document.system.meleeSkills + meleeSkills = meleeSkills.toSpliced(meleeSkills.indexOf(optionId), 1) + await this.document.update({'system.meleeSkills': meleeSkills}) + } + + static async #addToRanged(event, target) { + const optionId = this.element.querySelector(`[data-target-field="${target.dataset.targetField}"]`).value + const rangedSkills = this.document.system.rangedSkills + if (optionId.trim() !== '' && !rangedSkills.includes(optionId)) { + rangedSkills.push(optionId) + await this.document.update({'system.rangedSkills': rangedSkills}) + } + } + + static async #removeFromRanged(event, target) { + const {optionId} = target.dataset + let rangedSkills = this.document.system.rangedSkills + rangedSkills = rangedSkills.toSpliced(rangedSkills.indexOf(optionId), 1) + await this.document.update({'system.rangedSkills': rangedSkills}) + } + /** * Handle form submission * @this {EquipmentSheet} @@ -177,7 +212,9 @@ class EquipmentSheet extends HandlebarsApplicationMixin(DocumentSheetV2) { "Raufen": "Raufen" }, entries: equipmentData.meleeSkills, - targetField: "meleeSkills" + targetField: "meleeSkills", + removeOption: "removeFromMelee", + addOption: "addToMelee", } } @@ -193,7 +230,9 @@ class EquipmentSheet extends HandlebarsApplicationMixin(DocumentSheetV2) { "Bogen": "Bogen", }, entries: equipmentData.rangedSkills, - targetField: "rangedSkills" + targetField: "rangedSkills", + removeOption: "removeFromRanged", + addOption: "addToRanged", } } diff --git a/src/style/molecules/_array-editor.scss b/src/style/molecules/_array-editor.scss new file mode 100644 index 00000000..6b7c948e --- /dev/null +++ b/src/style/molecules/_array-editor.scss @@ -0,0 +1,36 @@ +.array-editor { + + .array-entry { + display: flex; + gap: 4px; + + .label { + flex: 1 0; + align-self: center; + } + + button.remove { + flex: 0 1; + } + + &:nth-child(odd) { + background-color: rgba(0, 0, 0, 0.1); + } + + } + + .options { + display: flex; + gap: 4px; + + select { + flex: 1 0; + } + + button { + height: 32px; + width: 32px; + } + } + +} \ No newline at end of file diff --git a/src/style/organisms/_equipment-sheet.scss b/src/style/organisms/_equipment-sheet.scss index c4e30ca0..87084d34 100644 --- a/src/style/organisms/_equipment-sheet.scss +++ b/src/style/organisms/_equipment-sheet.scss @@ -5,91 +5,223 @@ .tab.meta.active > div { - display: grid; - grid-auto-columns: 1fr 1fr; - grid-template-columns: 80px auto; + display: grid; + grid-auto-columns: 1fr 1fr; + grid-template-columns: 80px auto; grid-template-rows: 48px auto 48px; gap: 8px; - grid-template-areas: + grid-template-areas: "quantity name" "description description" "bottomline bottomline"; - .name { - grid-area: name; + .name { + grid-area: name; + } + + .name { + position: relative; + + .img { + position: absolute; + right: 0; + bottom: 6px; + width: 24px; + height: 24px; } - .name { - position: relative; + label { + position: absolute; + left: 0; + top: 0; + right: 26px; + bottom: 0; + } + } - .img { - position: absolute; - right: 0; - bottom: 6px; - width: 24px; - height: 24px; - } + .bottomline { + grid-area: bottomline; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 8px; + + .named-value { + position: relative; + height: 48px; label { position: absolute; left: 0; top: 0; - right: 26px; bottom: 0; - } - } + width: 80px; + line-height: 24px; + vertical-align: middle; - .bottomline { - grid-area: bottomline; - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 8px; - - .named-value { - position: relative; - height: 48px; - - label { + input { position: absolute; - left: 0; + left: 80px; top: 0; bottom: 0; - width: 80px; - line-height: 24px; - vertical-align: middle; - - input { - position: absolute; - left: 80px; - top: 0; - bottom: 0; - right: 0; - } + right: 0; } } - - } - .quantity { - grid-area: quantity; - } - - .description { - grid-area: description; - position: relative; - display: flex; - flex-direction: column; - - label { - flex: 0; - } - - .editor { - flex: 1; - } - } } + .quantity { + grid-area: quantity; + } + + .description { + grid-area: description; + position: relative; + display: flex; + flex-direction: column; + + label { + flex: 0; + } + + .editor { + flex: 1; + } + } + + } + + .tab.melee.active > div { + + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 48px auto 48px 48px; + gap: 8px; + grid-template-areas: + "tp tpbonus" + "applicableSkills applicableSkills" + "initiativeMod breakFactor" + "atMod paMod"; + + .tp { + grid-area: tp; + } + + .tp-bonus { + grid-area: tpbonus; + display: grid; + grid-template-rows: 16px 1fr; + gap: 4px; + grid-template-areas: "label label" "tp kk"; + label { + grid-area: label; + text-align: center; + } + } + + .applicable-skills { + grid-area: applicableSkills; + + .array-editor { + display: flex; + flex-direction: column; + height: 100%; + padding-bottom: 24px; + + ul { + flex: 1 0; + } + } + } + + .initiative-modifier { + grid-area: initiativeMod; + } + + .breakfactor { + grid-area: breakFactor; + } + + .at-mod { + grid-area: atMod; + } + + .pa-mod { + grid-area: paMod; + } + + } + + .tab.armor.active > div { + + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-rows: 48px auto 48px 48px; + gap: 8px; + grid-template-areas: + "head head chest chest" + "back back belly belly" + "leftArm leftArm rightArm rightArm" + "leftLeg leftLeg rightLeg rightLeg" + "totalArmor totalHandicap iniMod breakFactor" + "atMod atMod paMod paMod"; + + .head { + grid-area: head; + } + + .chest { + grid-area: chest; + } + + .back { + grid-area: back; + } + + .belly { + grid-area: belly; + } + + .left-arm { + grid-area: leftArm; + } + + .right-arm { + grid-area: rightArm; + } + + .left-leg { + grid-area: leftLeg; + } + + .right-leg { + grid-area: rightLeg; + } + + .total { + grid-area: totalArmor; + } + + .handicap { + grid-area: totalHandicap; + } + + .initiative-modifier { + grid-area: iniMod; + } + + .break-factor { + grid-area: breakFactor; + } + + .at-mod { + grid-area: atMod; + } + + .pa-mod { + grid-area: paMod; + } + + } } diff --git a/src/style/styles.scss b/src/style/styles.scss index ea49c6b0..fa9bdc0a 100644 --- a/src/style/styles.scss +++ b/src/style/styles.scss @@ -11,6 +11,7 @@ @use "molecules/coins"; @use "molecules/weights"; @use "molecules/fieldset"; +@use "molecules/array-editor"; @use "molecules/tabs"; @use "molecules/paperdoll"; diff --git a/src/templates/item/equipment/tab-armor.hbs b/src/templates/item/equipment/tab-armor.hbs index 69f49f1f..ba6ab9b4 100644 --- a/src/templates/item/equipment/tab-armor.hbs +++ b/src/templates/item/equipment/tab-armor.hbs @@ -3,79 +3,81 @@ data-group="{{tabs.armor.group}}">
-
- Rüstungswerte - -
-
+
+ +
-
-