diff --git a/module/apps/PlayerSheet.mjs b/module/apps/PlayerSheet.mjs index c3ffbcd..2de0305 100644 --- a/module/apps/PlayerSheet.mjs +++ b/module/apps/PlayerSheet.mjs @@ -98,6 +98,7 @@ export class PlayerSheet extends * they occur. */ #expandedItems = new Set(); + #collapsedAttributeGroups = new Set(); /** * This method is used in order to ensure that when we hide specific @@ -309,6 +310,23 @@ export class PlayerSheet extends async _prepareAttributesTab(ctx) { ctx.tabActive = this.tabGroups.primary === `attributes`; + + const groups = new Map(); + const attrs = this.actor.itemTypes.attribute ?? []; + for (const attr of attrs) { + const groupName = attr.system.group ?? "Attributes"; + if (!groups.has(groupName)) { + groups.set(groupName, { + name: groupName.titleCase(), + attrs: [], + collapsed: false, + }); + }; + const group = groups.get(groupName); + + group.attrs.push(attr); + }; + ctx.attrGroups = [...groups.values()]; }; async _prepareTabList(ctx) { diff --git a/styles/Apps/PlayerSheet.css b/styles/Apps/PlayerSheet.css index 627932e..cac9bb0 100644 --- a/styles/Apps/PlayerSheet.css +++ b/styles/Apps/PlayerSheet.css @@ -37,7 +37,8 @@ } } - .items-tab.active { + .items-tab.active, + .attributes-tab.active { display: flex; flex-direction: column; gap: 8px; @@ -67,7 +68,7 @@ } } - .item-list-header { + .embedded-list-header { display: flex; flex-direction: row; align-items: center; @@ -75,8 +76,8 @@ border-radius: 6px 6px 0 0; padding: 6px 6px 4px; margin-bottom: 2px; - background: var(--item-list-header-background); - color: var(--item-list-header-colour); + background: var(--embedded-list-header-background); + color: var(--embedded-list-header-colour); button { padding: 2px; @@ -84,12 +85,12 @@ aspect-ratio: 1; height: unset; min-height: unset; - background: var(--item-list-header-input-background); - color: var(--item-list-header-input-colour); + background: var(--embedded-list-header-input-background); + color: var(--embedded-list-header-input-colour); } } - .item-list { + .embedded-list { display: flex; flex-direction: column; gap: 2px; @@ -172,6 +173,38 @@ } } + .attribute { + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; + background: var(--attribute-background); + color: var(--attribute-colour); + padding: 4px; + + .name { + font-size: 1.1rem; + } + + input { + width: 50px; + } + + input, button { + background: var(--item-card-header-input-background); + color: var(--item-card-header-input-colour); + text-align: center; + + &:disabled { + color: var(--item-card-header-disabled-input-colour); + } + } + + &:last-child { + border-radius: 0 0 6px 6px; + } + } + .content { flex-grow: 1; overflow: hidden; diff --git a/styles/themes/dark.css b/styles/themes/dark.css index fa87c25..cba92a8 100644 --- a/styles/themes/dark.css +++ b/styles/themes/dark.css @@ -19,10 +19,16 @@ --inventory-input-colour: var(--steel-100); --inventory-input-disabled-colour: var(--steel-350); - --item-list-header-background: var(--steel-800); - --item-list-header-colour: var(--steel-100); - --item-list-header-input-background: var(--steel-650); - --item-list-header-input-colour: var(--steel-100); + --embedded-list-header-background: var(--steel-800); + --embedded-list-header-colour: var(--steel-100); + --embedded-list-header-input-background: var(--steel-650); + --embedded-list-header-input-colour: var(--steel-100); + + --attribute-background: var(--steel-700); + --attribute-colour: var(--steel-100); + --attribute-input-background: var(--steel-650); + --attribute-input-colour: var(--steel-100); + --attribute-disabled-input-colour: var(--steel-350); --item-card-background: #1d262f; --item-card-colour: var(--steel-100); diff --git a/templates/PlayerSheet/tabs/attributes/attribute.hbs b/templates/PlayerSheet/tabs/attributes/attribute.hbs index a7a7b36..c168c3e 100644 --- a/templates/PlayerSheet/tabs/attributes/attribute.hbs +++ b/templates/PlayerSheet/tabs/attributes/attribute.hbs @@ -1,10 +1,16 @@