Add ability to toggle between list and card views (#188)

* Add ability to toggle between list and card views * set the list display as a user flag * Fixed domainCard cardlist rendering --------- Co-authored-by: WBHarry <williambjrklund@gmail.com>
2026-01-12 03:31:07 +01:00 · 2025-06-28 10:53:40 -05:00 · 2025-06-28 10:53:40 -05:00 · 1135669d0b
commit 1135669d0b
parent 1f5b5f9915
8 changed files with 122 additions and 60 deletions
--- a/module/applications/sheets/character.mjs
+++ b/module/applications/sheets/character.mjs
@ -26,6 +26,7 @@ export default class CharacterSheet extends DaggerheartSheet(ActorSheetV2) {
            toggleHope: this.toggleHope,
            toggleGold: this.toggleGold,
            toggleLoadoutView: this.toggleLoadoutView,
+            attackRoll: this.attackRoll,
            useDomainCard: this.useDomainCard,
            removeCard: this.removeDomainCard,
            selectClass: this.selectClass,
@ -391,7 +392,8 @@ export default class CharacterSheet extends DaggerheartSheet(ActorSheetV2) {
            loadout: {
                top: loadout.slice(0, Math.min(2, nrLoadoutCards)),
                bottom: nrLoadoutCards > 2 ? loadout.slice(2, Math.min(5, nrLoadoutCards)) : [],
-                nrTotal: nrLoadoutCards
+                nrTotal: nrLoadoutCards,
+                listView: game.user.getFlag(SYSTEM.id, SYSTEM.FLAGS.displayDomainCardsAsList)
            },
            vault: vault.map(x => ({
                ...x,
@ -553,6 +555,22 @@ export default class CharacterSheet extends DaggerheartSheet(ActorSheetV2) {
        this.render();
    }

+    static async toggleLoadoutView(_, button) {
+        const newAbilityView = !(button.dataset.value === 'true');
+        await game.user.setFlag(SYSTEM.id, SYSTEM.FLAGS.displayDomainCardsAsList, newAbilityView);
+        this.render();
+    }
+
+    static async attackRoll(event, button) {
+        const weapon = await fromUuid(button.dataset.weapon);
+        if (!weapon) return;
+
+        const wasUsed = await weapon.use(event);
+        if (wasUsed) {
+            Hooks.callAll(SYSTEM.HOOKS.characterAttack, {});
+        }
+    }
+
    static levelManagement() {
        if (this.document.system.needsCharacterSetup) {
            this.characterSetup();
@ -753,7 +771,9 @@ export default class CharacterSheet extends DaggerheartSheet(ActorSheetV2) {
            const cls = getDocumentClass('ChatMessage');
            const systemData = {
                name: game.i18n.localize('DAGGERHEART.General.Experience.Single'),
-                description: `${experience.description} ${experience.total < 0 ? experience.total : `+${experience.total}`}`
+                description: `${experience.description} ${
+                    experience.total < 0 ? experience.total : `+${experience.total}`
+                }`
            };
            const msg = new cls({
                type: 'abilityUse',
@ -778,7 +798,9 @@ export default class CharacterSheet extends DaggerheartSheet(ActorSheetV2) {
                ? this.document.system.multiclass.subclass
                : this.document.system.class.subclass;
        const ability = item.system[`${button.dataset.key}Feature`];
-        const title = `${item.name} - ${game.i18n.localize(`DAGGERHEART.Sheets.PC.DomainCard.${capitalize(button.dataset.key)}Title`)}`;
+        const title = `${item.name} - ${game.i18n.localize(
+            `DAGGERHEART.Sheets.PC.DomainCard.${capitalize(button.dataset.key)}Title`
+        )}`;

        const cls = getDocumentClass('ChatMessage');
        const systemData = {
--- a/module/config/flagsConfig.mjs
+++ b/module/config/flagsConfig.mjs
@ -0,0 +1 @@
+export const displayDomainCardsAsList = 'displayDomainCardsAsList';
--- a/module/config/system.mjs
+++ b/module/config/system.mjs
@ -6,6 +6,7 @@ import * as SETTINGS from './settingsConfig.mjs';
 import { hooks as HOOKS } from './hooksConfig.mjs';
 import * as EFFECTS from './effectConfig.mjs';
 import * as ACTIONS from './actionConfig.mjs';
+import * as FLAGS from './flagsConfig.mjs';

 export const SYSTEM_ID = 'daggerheart';

@ -18,5 +19,6 @@ export const SYSTEM = {
    SETTINGS,
    HOOKS,
    EFFECTS,
-    ACTIONS
+    ACTIONS,
+    FLAGS
 };
--- a/styles/daggerheart.css
+++ b/styles/daggerheart.css
@ -3619,13 +3619,35 @@ div.daggerheart.views.multiclass {
 .theme-light .application.sheet.daggerheart.actor.dh-style.character .character-sidebar-sheet {
  background: transparent;
 }
-.application.sheet.daggerheart.actor.dh-style.character .character-sidebar-sheet img {
+.application.sheet.daggerheart.actor.dh-style.character .character-sidebar-sheet .portrait {
+  position: relative;
  height: 235px;
  width: 275px;
  border-bottom: 1px solid light-dark(#18162e, #f3c267);
  cursor: pointer;
+}
+.application.sheet.daggerheart.actor.dh-style.character .character-sidebar-sheet .portrait img {
+  height: 235px;
+  width: 275px;
  object-fit: cover;
 }
+.application.sheet.daggerheart.actor.dh-style.character .character-sidebar-sheet .portrait .death-roll-btn {
+  display: none;
+}
+.application.sheet.daggerheart.actor.dh-style.character .character-sidebar-sheet .portrait.death-roll {
+  filter: grayscale(1);
+}
+.application.sheet.daggerheart.actor.dh-style.character .character-sidebar-sheet .portrait.death-roll .death-roll-btn {
+  display: flex;
+  position: absolute;
+  top: 30%;
+  right: 30%;
+  font-size: 6rem;
+  color: #efe6d8;
+}
+.application.sheet.daggerheart.actor.dh-style.character .character-sidebar-sheet .portrait.death-roll .death-roll-btn:hover {
+  text-shadow: 0 0 8px #efe6d8;
+}
 .application.sheet.daggerheart.actor.dh-style.character .character-sidebar-sheet .info-section {
  position: relative;
  display: flex;
@ -3957,7 +3979,7 @@ div.daggerheart.views.multiclass {
  z-index: 1;
  color: light-dark(#18162e50, #efe6d850);
 }
-.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toogle-view {
+.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toggle-view {
  background: light-dark(#18162e10, #18162e);
  border: 1px solid light-dark(#18162e, #f3c267);
  border-radius: 15px;
@ -3965,24 +3987,24 @@ div.daggerheart.views.multiclass {
  gap: 0;
  width: 62px;
 }
-.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toogle-view span {
+.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toggle-view span {
  margin: 1px;
  width: 26px;
  color: light-dark(#18162e, #f3c267);
 }
-.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toogle-view span.list-icon i {
+.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toggle-view span.list-icon i {
  margin-left: 3px;
 }
-.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toogle-view span.grid-icon i {
+.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toggle-view span.grid-icon i {
  margin-right: 3px;
 }
-.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toogle-view span.list-active {
+.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toggle-view span.list-active {
  border-radius: 32px 3px 3px 32px;
  background-color: light-dark(#18162e, #f3c267);
  color: light-dark(#efe6d8, #18162e);
  padding: 2px;
 }
-.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toogle-view span.grid-active {
+.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toggle-view span.grid-active {
  border-radius: 3px 32px 32px 3px;
  background-color: light-dark(#18162e, #f3c267);
  color: light-dark(#efe6d8, #18162e);
--- a/styles/less/actors/character/loadout.less
+++ b/styles/less/actors/character/loadout.less
@ -43,7 +43,7 @@
                }
            }

-            .btn-toogle-view {
+            .btn-toggle-view {
                background: light-dark(@dark-blue-10, @dark-blue);
                border: 1px solid light-dark(@dark-blue, @golden);
                border-radius: 15px;
--- a/templates/sheets/actors/character/loadout.hbs
+++ b/templates/sheets/actors/character/loadout.hbs
@ -11,18 +11,29 @@
            <input type="text" name="" id="" placeholder="Search...">
        </div>
        <a><i class="fa-solid fa-filter"></i></a>
-        <button class="btn-toogle-view">
-            <span class="{{#if listView}}list-active{{/if}}list-active list-icon">
+        <button class="btn-toggle-view" data-action="toggleLoadoutView" data-value="{{this.abilities.loadout.listView}}">
+            <span class="{{#if this.abilities.loadout.listView}}list-active{{/if}} list-icon">
                <i class="fa-solid fa-bars"></i>
            </span>
-            <span class="{{#if gridView}}grid-active{{/if}} grid-icon">
+            <span class="{{#unless this.abilities.loadout.listView}}grid-active{{/unless}} grid-icon">
                <i class="fa-solid fa-grip"></i>
            </span>
        </button>
    </div>

    <div class="items-section">
+        {{#if this.abilities.loadout.listView}}
        {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items.hbs' title=(localize 'DAGGERHEART.Sheets.PC.Tabs.Loadout') type='domainCard' isGlassy=true cardView='list'}}
+        {{else}}
+        {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items.hbs' title=(localize 'DAGGERHEART.Sheets.PC.Tabs.Loadout') type='domainCard' isGlassy=true cardView='card'}}
+        {{/if}}
+
+        {{#if this.abilities.loadout.listView}}
        {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items.hbs' title=(localize 'DAGGERHEART.Sheets.PC.Tabs.Vault') type='domainCard' isVault=true isGlassy=true cardView='list'}}
+        {{else}}
+        {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items.hbs' title=(localize 'DAGGERHEART.Sheets.PC.Tabs.Vault') type='domainCard' isVault=true isGlassy=true cardView='card'}}
+        {{/if}}
+        
+        
    </div>
 </section>
--- a/templates/sheets/global/partials/domain-card-item.hbs
+++ b/templates/sheets/global/partials/domain-card-item.hbs
@ -14,18 +14,18 @@
            {{/if}}
            {{#if (eq type 'domainCard')}}
                {{#unless item.system.inVault}}
-                    <a data-action="sendToVault" data-domain="{{card.uuid}}" id="{{item.id}}" data-tooltip="{{localize 'DAGGERHEART.Tooltip.sendToVault'}}">
+                    <a data-action="toggleVault" id="{{item.id}}" data-tooltip="{{localize 'DAGGERHEART.Tooltip.sendToVault'}}">
                        <i class="fa-solid fa-arrow-down"></i>
                    </a>
                {{else}}
-                    <a data-action="sendToLoadout" data-domain="{{card.uuid}}" id="{{item.id}}" data-tooltip="{{localize 'DAGGERHEART.Tooltip.sendToLoadout'}}">
+                    <a data-action="toggleVault" id="{{item.id}}" data-tooltip="{{localize 'DAGGERHEART.Tooltip.sendToLoadout'}}">
                        <i class="fa-solid fa-arrow-up"></i>
                    </a>
                {{/unless}}
                
            {{/if}}
            <a data-action="toChat" data-uuid="{{item.uuid}}" data-tooltip="{{localize 'DAGGERHEART.Tooltip.sendToChat'}}"><i class="fa-regular fa-message"></i></a>
-            <a class="{{concat type "-context-menu"}}" data-tooltip="{{localize 'DAGGERHEART.Tooltip.moreOptions'}}"><i class="fa-solid fa-ellipsis-vertical"></i></a>
+            <a class="{{concat type "-context-menu"}}" data-type="{{type}}" data-uuid="{{item.uuid}}" id="{{item.id}}" data-tooltip="{{localize 'DAGGERHEART.Tooltip.moreOptions'}}"><i class="fa-solid fa-ellipsis-vertical"></i></a>
        </div>
        <div class="card-name">{{item.name}}</div>
    </div>
--- a/templates/sheets/global/partials/inventory-fieldset-items.hbs
+++ b/templates/sheets/global/partials/inventory-fieldset-items.hbs
@ -1,49 +1,53 @@
 <fieldset class="{{#if isGlassy}}glassy{{/if}}">
    <legend>{{title}}</legend>
    <ul class="items-list">
-        {{#each document.items as |item|}}
-            {{#if (eq item.type ../type)}}
-                {{#unless (or (eq ../type 'ancestry') (eq item.type 'class') (eq item.type 'subclass') (and (eq ../type 'domainCard') (or (and item.system.inVault (not ../isVault)) (and (not item.system.inVault) ../isVault))))}}
-                    {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=item type=../type}}
-                {{/unless}}
-            {{/if}}
-        {{/each}}
-        {{#each document.system.ancestry.system.actions as |action|}}
-            {{#if (or (eq ../type 'ancestry'))}}
-                {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=action type=../type}}
-            {{/if}}
-        {{/each}}
-        {{#each document.system.ancestry.system.actions as |action|}}
-            {{#if (or (eq ../type 'ancestry'))}}
-                {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=action type=../type}}
-            {{/if}}
-        {{/each}}
-        {{#each document.system.class.value.system.classFeatures as |classFeature|}}
-            {{#if (or (eq ../type 'class'))}}
-                {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=classFeature type=../type}}
-            {{/if}}
-        {{/each}}
-        {{#each document.system.class.value.system.classFeatures as |classFeature|}}
-            {{#if (or (eq ../type 'class'))}}
-                {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=classFeature type=../type}}
-            {{/if}}
-        {{/each}}
-        {{#each document.appliedEffects as |effect|}}
-            {{#if (or (eq ../type 'effect'))}}
-                {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=effect type=../type}}
-            {{/if}}
-        {{/each}}
-        
-    </ul>
-    <ul class="card-list">
-        {{#each document.items as |item|}}
-            {{#if (eq item.type ../type)}}
-                {{#if (eq item.type 'domainCard')}}
-                    {{#unless (eq ../cardView 'list')}}
-                        {{> 'systems/daggerheart/templates/sheets/global/partials/domain-card-item.hbs' item=item type=../type}}
+        {{#unless (eq cardView 'card') }}
+            {{#each document.items as |item|}}
+                {{#if (eq item.type ../type)}}
+                    {{#unless (or (eq ../type 'ancestry') (eq item.type 'class') (eq item.type 'subclass') (and (eq ../type 'domainCard') (or (and item.system.inVault (not ../isVault)) (and (not item.system.inVault) ../isVault))))}}
+                        {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=item type=../type}}
                    {{/unless}}
                {{/if}}
-            {{/if}}
-        {{/each}}
+            {{/each}}
+            {{#each document.system.ancestry.system.actions as |action|}}
+                {{#if (or (eq ../type 'ancestry'))}}
+                    {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=action type=../type}}
+                {{/if}}
+            {{/each}}
+            {{#each document.system.ancestry.system.actions as |action|}}
+                {{#if (or (eq ../type 'ancestry'))}}
+                    {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=action type=../type}}
+                {{/if}}
+            {{/each}}
+            {{#each document.system.class.value.system.classFeatures as |classFeature|}}
+                {{#if (or (eq ../type 'class'))}}
+                    {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=classFeature type=../type}}
+                {{/if}}
+            {{/each}}
+            {{#each document.system.class.value.system.classFeatures as |classFeature|}}
+                {{#if (or (eq ../type 'class'))}}
+                    {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=classFeature type=../type}}
+                {{/if}}
+            {{/each}}
+            {{#each document.appliedEffects as |effect|}}
+                {{#if (or (eq ../type 'effect'))}}
+                    {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=effect type=../type}}
+                {{/if}}
+            {{/each}}
+        {{/unless}}
+        
    </ul>
+    {{#if (and (eq cardView 'card') (eq type 'domainCard'))}}
+        <ul class="card-list">
+            {{#if isVault}}
+                {{#each document.system.domainCards.vault as |card|}}
+                    {{> 'systems/daggerheart/templates/sheets/global/partials/domain-card-item.hbs' item=card type=../type}}
+                {{/each}}
+            {{else}}
+                {{#each document.system.domainCards.loadout as |card|}}
+                    {{> 'systems/daggerheart/templates/sheets/global/partials/domain-card-item.hbs' item=card type=../type}}
+                {{/each}}
+            {{/if}}
+        </ul>
+    {{/if}}
 </fieldset>
				`@ -0,0 +1 @@`
				`export const displayDomainCardsAsList = 'displayDomainCardsAsList';`