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>

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 = {

module/config/flagsConfig.mjs

@@ -0,0 +1 @@
+export const displayDomainCardsAsList = 'displayDomainCardsAsList';

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
 };

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);

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;

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">
+        <button class="btn-toggle-view" data-action="toggleLoadoutView" data-value="{{this.abilities.loadout.listView}}">
-            <span class="{{#if listView}}list-active{{/if}}list-active list-icon">
+            <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>

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>

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|}}
+        {{#unless (eq cardView 'card') }}
-            {{#if (eq item.type ../type)}}
+            {{#each document.items as |item|}}
-                {{#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))))}}
+                {{#if (eq item.type ../type)}}
-                    {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=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))))}}
-                {{/unless}}
+                        {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=item 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.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}}
                 {{/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>