[FEATURE] #149 - New style for character sheets (#172)

* new style for character sheets

* Added nowrap on level label

---------

Co-authored-by: WBHarry <williambjrklund@gmail.com>
This commit is contained in:
Murilo Brito 2025-06-24 10:59:31 -03:00 committed by GitHub
parent f133b3b966
commit 56c4a2805f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
42 changed files with 2399 additions and 110 deletions

View file

@ -0,0 +1,36 @@
<section
class='tab {{tabs.biography.cssClass}} {{tabs.biography.id}}'
data-tab='{{tabs.biography.id}}'
data-group='{{tabs.biography.group}}'
>
<div class="items-section">
<fieldset class="flex">
<legend>{{localize 'DAGGERHEART.Sheets.PC.Story.characteristics'}}</legend>
<div class="input">
<span>{{localize 'DAGGERHEART.Sheets.PC.Pronouns'}}</span>
{{formInput systemFields.biography.fields.characteristics.fields.pronouns value=source.system.biography.characteristics.pronouns enriched=source.system.biography.characteristics.pronouns localize=true toggled=true}}
</div>
<div class="input">
<span>{{localize 'DAGGERHEART.Sheets.PC.age'}}</span>
{{formInput systemFields.biography.fields.characteristics.fields.age value=source.system.biography.characteristics.age enriched=source.system.biography.characteristics.age localize=true toggled=true}}
</div>
<div class="input">
<span>{{localize 'DAGGERHEART.Sheets.PC.faith'}}</span>
{{formInput systemFields.biography.fields.characteristics.fields.faith value=source.system.biography.characteristics.faith enriched=source.system.biography.characteristics.faith localize=true toggled=true}}
</div>
</fieldset>
<fieldset>
<legend>{{localize 'DAGGERHEART.Sheets.PC.Story.BackgroundTitle'}}</legend>
{{formInput systemFields.biography.fields.background value=source.system.biography.background enriched=source.system.biography.background localize=true toggled=true}}
</fieldset>
<fieldset>
<legend>{{localize 'DAGGERHEART.Sheets.PC.Story.ConnectionsTitle'}}</legend>
{{formInput systemFields.biography.fields.connections value=source.system.biography.connections enriched=source.system.biography.connections localize=true toggled=true}}
</fieldset>
</div>
</section>

View file

@ -0,0 +1,8 @@
<section
class='tab {{tabs.effects.cssClass}} {{tabs.effects.id}}'
data-tab='{{tabs.effects.id}}'
data-group='{{tabs.effects.group}}'
>
{{> 'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items.hbs' title=(localize 'DAGGERHEART.Sheets.Global.activeEffects') type='effect'}}
{{> 'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items.hbs' title=(localize 'DAGGERHEART.Sheets.Global.inativeEffects') type='effect'}}
</section>

View file

@ -0,0 +1,20 @@
<section
class='tab {{tabs.features.cssClass}} {{tabs.features.id}}'
data-tab='{{tabs.features.id}}'
data-group='{{tabs.features.group}}'
>
<div class="features-sections">
{{#if document.system.class.value}}
{{> 'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items.hbs' title=(concat (localize 'TYPES.Item.class') ' - ' document.system.class.value.name) type='class'}}
{{/if}}
{{#if document.system.class.subclass}}
{{> 'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items.hbs' title=(concat (localize 'TYPES.Item.subclass') ' - ' document.system.class.subclass.name) type='subclass'}}
{{/if}}
{{#if document.system.community}}
{{> 'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items.hbs' title=(concat (localize 'TYPES.Item.community') ' - ' document.system.community.name) type='community'}}
{{/if}}
{{#if document.system.ancestry}}
{{> 'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items.hbs' title=(concat (localize 'TYPES.Item.ancestry') ' - ' document.system.ancestry.name) type='ancestry'}}
{{/if}}
</div>
</section>

View file

@ -0,0 +1,111 @@
4<header class="character-header-sheet">
<line-div></line-div>
<div class="name-row">
<h1 class='actor-name'>
<input
type='text'
name='name'
value='{{document.name}}'
placeholder='Actor Name'
/>
</h1>
<div class='level-div'>
<h3 class='label'>
{{localize 'DAGGERHEART.Sheets.PC.Level'}}
{{document.system.levelData.level.current}}
</h3>
</div>
</div>
<div class="character-details">
<div>
{{#if document.system.class.value}}
<span data-action="viewObject" data-value="{{document.system.class.value.uuid}}">{{document.system.class.value.name}}</span>
{{else}}
<span>{{localize 'TYPES.Item.class'}}</span>
{{/if}}
<span class="dot">•</span>
{{#if document.system.class.subclass}}
<span data-action="viewObject" data-value="{{document.system.class.subclass.uuid}}">{{document.system.class.subclass.name}}</span>
{{else}}
<span data-action="selectSubclass">{{localize 'TYPES.Item.subclass'}}</span>
{{/if}}
<span class="dot">•</span>
{{#if document.system.community}}
<span data-action="viewObject" data-value="{{document.system.community.uuid}}">{{document.system.community.name}}</span>
{{else}}
<span data-action="selectCommunity">{{localize 'TYPES.Item.community'}}</span>
{{/if}}
<span class="dot">•</span>
{{#if document.system.ancestry}}
<span data-action="viewObject" data-value="{{document.system.ancestry.uuid}}">{{document.system.ancestry.name}}</span>
{{else}}
<span data-action="selectAncestry">{{localize 'TYPES.Item.ancestry'}}</span>
{{/if}}
</div>
{{#if document.system.multiclass.value}}
<div class="multiclass">
{{#if document.system.multiclass.value}}
<span data-action="viewObject" data-value="{{document.system.multiclass.value.uuid}}">{{document.system.multiclass.value.name}}</span>
{{else}}
<span>{{localize 'DAGGERHEART.Sheets.PC.Heritage.Multiclass'}}</span>
{{/if}}
<span class="dot">•</span>
{{#if document.system.multiclass.subclass}}
<span data-action="viewObject" data-value="{{document.system.multiclass.subclass.uuid}}">{{document.system.multiclass.subclass.name}}</span>
{{else}}
<span data-action="selectSubclass">{{localize 'TYPES.Item.subclass'}}</span>
{{/if}}
</div>
{{/if}}
</div>
<div class="character-row">
<div class="hope-section">
<h4>{{localize "DAGGERHEART.General.Hope"}}</h4>
{{#times document.system.resources.hope.max}}
<span class='hope-value' data-action='toggleHope' data-value="{{this}}">
{{#if (gte ../document.system.resources.hope.value this)}}
<i class='fa-solid fa-diamond'></i>
{{else}}
<i class='fa-regular fa-circle'></i>
{{/if}}
</span>
{{/times}}
</div>
<div class="threshold-section">
<h4 class="threshold-label">{{localize "DAGGERHEART.Sheets.PC.Health.Minor"}}</h4>
<h4 class="threshold-value">{{document.system.damageThresholds.major}}</h4>
<h4 class="threshold-label">{{localize "DAGGERHEART.Sheets.PC.Health.Major"}}</h4>
<h4 class="threshold-value">{{document.system.damageThresholds.severe}}</h4>
<h4 class="threshold-label">{{localize "DAGGERHEART.Sheets.PC.Health.Severe"}}</h4>
</div>
</div>
<div class="character-traits">
{{#each this.attributes as |attribute key|}}
<div class="trait" data-tooltip="{{#each attribute.verbs}}{{this}}<br>{{/each}}" data-action="attributeRoll" data-attribute="{{key}}" data-value="{{attribute.total}}">
<div class="trait-name">
<span>{{localize (concat 'DAGGERHEART.Abilities.' key '.short')}}</span>
{{#if attribute.tierMarked}}
<i class='fa-solid fa-circle'></i>
{{else}}
<i class='fa-regular fa-circle'></i>
{{/if}}
</div>
<div class="trait-value">
{{#if (gt attribute.total 0)}}
<span>+{{attribute.total}}</span>
{{else}}
<span>{{attribute.total}}</span>
{{/if}}
</div>
</div>
{{/each}}
</div>
{{> 'systems/daggerheart/templates/sheets/global/tabs/tab-navigation.hbs'}}
</header>

View file

@ -0,0 +1,42 @@
<section
class='tab {{tabs.inventory.cssClass}} {{tabs.inventory.id}}'
data-tab='{{tabs.inventory.id}}'
data-group='{{tabs.inventory.group}}'
>
<div class="search-section">
<div class="search-bar">
<div class="icon">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
<input type="text" name="" id="" placeholder="Search...">
</div>
<a><i class="fa-solid fa-filter"></i></a>
</div>
<div class="items-section">
{{> 'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items.hbs' title=(localize 'TYPES.Item.weapon') type='weapon' isGlassy=true}}
{{> 'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items.hbs' title=(localize 'TYPES.Item.armor') type='armor' isGlassy=true}}
{{> 'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items.hbs' title=(localize 'TYPES.Item.consumable') type='consumable' isGlassy=true}}
{{> 'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items.hbs' title=(localize 'TYPES.Item.miscellaneous') type='miscellaneous' isGlassy=true}}
</div>
<div class="currency-section">
<div class="input">
<span>{{localize "DAGGERHEART.Sheets.PC.Gold.Coins"}}</span>
{{formInput systemFields.gold.fields.coins value=source.system.gold.coins enriched=source.system.gold.coins localize=true toggled=true}}
</div>
<div class="input">
<span>{{localize "DAGGERHEART.Sheets.PC.Gold.Handfulls"}}</span>
{{formInput systemFields.gold.fields.handfulls value=source.system.gold.handfulls enriched=source.system.gold.handfulls localize=true toggled=true}}
</div>
<div class="input">
<span>{{localize "DAGGERHEART.Sheets.PC.Gold.Bags"}}</span>
{{formInput systemFields.gold.fields.bags value=source.system.gold.bags enriched=source.system.gold.bags localize=true toggled=true}}
</div>
<div class="input">
<span>{{localize "DAGGERHEART.Sheets.PC.Gold.Chests"}}</span>
{{formInput systemFields.gold.fields.chests value=source.system.gold.chests enriched=source.system.gold.chests localize=true toggled=true}}
</div>
</div>
</section>

View file

@ -0,0 +1,28 @@
<section
class='tab {{tabs.loadout.cssClass}} {{tabs.loadout.id}}'
data-tab='{{tabs.loadout.id}}'
data-group='{{tabs.loadout.group}}'
>
<div class="search-section">
<div class="search-bar">
<div class="icon">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
<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">
<i class="fa-solid fa-bars"></i>
</span>
<span class="{{#if gridView}}grid-active{{/if}} grid-icon">
<i class="fa-solid fa-grip"></i>
</span>
</button>
</div>
<div class="items-section">
{{> 'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items.hbs' title=(localize 'DAGGERHEART.Sheets.PC.Tabs.Loadout') type='domainCard' isGlassy=true cardView='list'}}
{{> 'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items.hbs' title=(localize 'DAGGERHEART.Sheets.PC.Tabs.Vault') type='domainCard' isGlassy=true cardView='list'}}
</div>
</section>

View file

@ -0,0 +1,120 @@
<aside class="character-sidebar-sheet">
<img class="portrait" src="{{document.img}}" alt="{{document.name}}" data-action='editImage' data-edit="img">
<div class="info-section">
<div class="resources-section">
<div class="status-bar">
<div class='status-value'>
<p><input class="bar-input" name="system.resources.hitPoints.value" value="{{document.system.resources.hitPoints.value}}" type="number"></p>
<p>/</p>
<p class="bar-label">{{document.system.resources.hitPoints.max}}</p>
</div>
<progress
class='progress-bar'
value='{{document.system.resources.hitPoints.value}}'
max='{{document.system.resources.hitPoints.max}}'
></progress>
<div class="status-label">
<h4>Health</h4>
</div>
</div>
<div class="status-bar">
<div class='status-value'>
<p><input class="bar-input" name="system.resources.stress.value" value="{{document.system.resources.stress.value}}" type="number"></p>
<p>/</p>
<p class="bar-label">{{document.system.resources.stress.max}}</p>
</div>
<progress
class='progress-bar stress-color'
value='{{document.system.resources.stress.value}}'
max='{{document.system.resources.stress.max}}'
></progress>
<div class="status-label">
<h4>Stress</h4>
</div>
</div>
</div>
<div class="status-section">
<div class="status-number">
<div class='status-value'>
<p>{{document.system.proficiency.total}}</p>
</div>
<div class="status-label">
<h4>Proficiency</h4>
</div>
</div>
<div class="status-number">
<div class='status-value armor-slots'>
{{#if document.system.armor.system.marks}}
<p>{{document.system.armor.system.marks.value}}/{{document.system.armor.system.marks.max}}</p>
{{else}}
<p>-</p>
{{/if}}
</div>
<div class="status-label">
<h4>Armor Slots</h4>
</div>
</div>
<div class="status-number">
<div class='status-value'>
<p>{{document.system.evasion.total}}</p>
</div>
<div class="status-label">
<h4>Evasion</h4>
</div>
</div>
</div>
</div>
<div class="equipment-section">
<div class="title">
<side-line-div class="invert"></side-line-div>
<h3>Equipment</h3>
<side-line-div></side-line-div>
</div>
<ul class="items-sidebar-list">
{{#each document.items as |item|}}
{{#if item.system.equipped}}
{{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=item type=item.type isSidebar=true}}
{{/if}}
{{/each}}
</ul>
</div>
<div class="loadout-section">
<div class="title">
<side-line-div class="invert"></side-line-div>
<h3>Loadout</h3>
<side-line-div></side-line-div>
</div>
<ul class="items-sidebar-list">
{{#each document.items as |item|}}
{{#if (eq item.type 'domainCard')}}
{{#unless item.system.inVault}}
{{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=item type=item.type isSidebar=true}}
{{/unless}}
{{/if}}
{{/each}}
</ul>
</div>
<div class="experience-section">
<div class="title">
<side-line-div class="invert"></side-line-div>
<h3>Experience</h3>
<side-line-div></side-line-div>
</div>
<div class="experience-list">
{{#each document.system.experiences as |experience id|}}
<div class="experience-row">
<div class="experience-value">
+{{experience.total}}
</div>
<input name="{{concat "system.experiences." id ".description"}}" data-experience={{id}} value="{{experience.description}}" type="text" />
<div class="controls">
<a><i class="fa-regular fa-message"></i></a>
</div>
</div>
{{/each}}
</div>
</div>
</aside>