dungeonslayers/ds4
dungeonslayers/ds4
3
0
Fork 0
Code Issues 9 Pull requests 7 Projects Releases 10 Packages Activity

Use grid for talents tab

Browse source
This commit is contained in:
Johannes Loher 2021-02-25 22:22:05 +01:00
parent 1676a7b8c4
commit 25b6f03d56
10 changed files with 107 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/ds4.scss
View file

@ -19,5 +19,5 @@
@include meta.load-css("scss/components/forms");
@include meta.load-css("scss/components/item_list");
@include meta.load-css("scss/components/tabs");
@include meta.load-css("scss/components/talents");
@include meta.load-css("scss/components/talent_rank_equation");
}

1
src/lang/de.json
View file

@ -143,6 +143,7 @@
"DS4.TalentRankMax": "Maximaler Rang",
"DS4.TalentRankMod": "Zusätzlicher Rang",
"DS4.TalentRankTotal": "Gesamter Rang",
"DS4.TalentRankOf": "von",
"DS4.CharacterLanguageLanguages": "Sprachen",
"DS4.CharacterLanguageAlphabets": "Schriftzeichen",
"DS4.SpecialCreatureAbilityExperiencePoints": "Erfahrungspunkte",

1
src/lang/en.json
View file

@ -143,6 +143,7 @@
"DS4.TalentRankMax": "Maximum Ranks",
"DS4.TalentRankMod": "Additional Ranks",
"DS4.TalentRankTotal": "Total Ranks",
"DS4.TalentRankOf": "of",
"DS4.CharacterLanguageLanguages": "Languages",
"DS4.CharacterLanguageAlphabets": "Alphabets",
"DS4.SpecialCreatureAbilityExperiencePoints": "Experience Points",

1
src/module/ds4.ts
View file

@ -63,6 +63,7 @@ async function registerHandlebarsPartials() {
"systems/ds4/templates/actor/partials/special-creature-abilities-overview.hbs",
"systems/ds4/templates/actor/partials/character-inventory.hbs",
"systems/ds4/templates/actor/partials/creature-inventory.hbs",
"systems/ds4/templates/actor/partials/talent-rank-equation.hbs",
];
return loadTemplates(templatePaths);
}

14
src/scss/components/_item_list.scss
View file

@ -24,17 +24,25 @@
grid-template-columns: $row-height $row-height 3ch 3fr 1fr 1fr 3ch 5fr 4ch;
}
&--shield {
grid-template-columns: $row-height $row-height 3ch 3fr 3ch 5fr 4ch;
grid-template-columns: $row-height $row-height 3ch 1fr 3ch 3fr 4ch;
}
&--equipment {
grid-template-columns: $row-height $row-height 3ch 3fr 10ch 5fr 4ch;
grid-template-columns: $row-height $row-height 3ch 1fr 10ch 3fr 4ch;
}
&--loot {
grid-template-columns: $row-height 3ch 3fr 10ch 5fr 4ch;
grid-template-columns: $row-height 3ch 1fr 10ch 3fr 4ch;
}
&--spell {
grid-template-columns: $row-height $row-height 2fr $row-height 1fr 1fr 1fr 1fr 4ch;
}
&--talent {
grid-template-columns: $row-height 1fr 1fr 3fr 4ch;
}
&--racial-ability,
&--language,
&--alphabet {
grid-template-columns: $row-height 1fr 3fr 4ch;
}
&__row {
grid-column: 1/-1;

1
src/scss/components/_tabs.scss
View file

@ -6,6 +6,7 @@ nav.tabs {
border-bottom: variables.$border-groove;
.item {
font-weight: bold;
white-space: nowrap;
}
.item.active {

11
src/scss/components/_talent_rank_equation.scss Normal file
View file

@ -0,0 +1,11 @@
.ds4-talent-rank-equation {
display: flex;
gap: 0.5em;
&__value {
height: auto;
border: 0;
padding: 0;
background-color: transparent;
text-align: center;
}
}

3
src/scss/components/_talents.scss
View file

@ -1,3 +0,0 @@
.talent-ranks-equation {
text-align: center;
}

33
src/templates/actor/partials/talent-rank-equation.hbs Normal file
View file

@ -0,0 +1,33 @@
{{!--
!-- Render an input element for a rank value property of an item.
!-- @param talentRank: The talentRank
!-- @param property: The key of the property in item.data (if 'base', the max value is set automatically)
!-- @param disabled: If given, is placed plainly into the input as HTML property; meant to be set to "disabled" to
disable the input element
!-- @param localizeString: The string to use as key for the localized tooltip
--}}
{{#*inline "talentRankValue"}}
<input class="ds4-talent-rank-equation__value item-change" data-dtype="Number" type="number" min="0" step="1" {{#if (eq
property 'base' ) }}max="{{talentRank.max}}" {{/if}} {{disabled}} data-property="data.rank.{{property}}"
value="{{lookup talentRank property}}" title="{{localize localizeString}}" />
{{/inline}}
{{!--
!-- Render an input element for a rank value property of an item.
!-- @param talentRank: The talent rank
--}}
<div class="ds4-talent-rank-equation">
{{!-- acquired rank --}}
{{> talentRankValue talentRank=talentRank property='base' localizeString='DS4.TalentRankBase'}}
<div> ( {{localize "DS4.TalentRankOf"}} </div>
{{!-- maximum acquirable rank --}}
{{> talentRankValue talentRank=talentRank property='max' localizeString='DS4.TalentRankMax'}}
<div>) + </div>
{{!-- additional ranks --}}
{{> talentRankValue talentRank=talentRank property='mod' localizeString='DS4.TalentRankMod'}}
<div> = </div>
{{!-- derived total rank --}}
{{> talentRankValue talentRank=talentRank property='total' localizeString='DS4.TalentRankTotal'
disabled='disabled'}}
</div>

120
src/templates/actor/partials/talents-abilities-overview.hbs
View file

@ -20,21 +20,6 @@
{{/inline}}
{{!--
!-- Render an input element for a rank value property of an item.
!--
!-- @param item: the item
!-- @param property: the key of the property in item.data (if 'base', the max value is set automatically)
!-- @param disabled: if given, is placed plainly into the input as HTML property;
!-- meant to be set to "disabled" to disable the input element
--}}
{{#*inline "talentRankValue"}}
<input class="item-num-val item-change" data-dtype="Number" type="number" min="0" step="1" {{#if (eq property 'base' )
}}max="{{item.data.rank.max}}" {{/if}} {{disabled}} data-property="data.rank.{{property}}"
value="{{lookup item.data.rank property}}" title="{{localize localizeString}}" />
{{/inline}}
{{!--
!-- Render a talent list row from a given item.
!-- It is a flexbox with a child for each item value of interest.
@ -43,35 +28,41 @@
!-- @param item: hand over the item to the partial as hash parameter
--}}
{{#*inline "talentListEntry"}}
<li class="item flexrow" data-item-id="{{item._id}}">
<li class="ds4-item-list__row item" data-item-id="{{item._id}}">
{{!-- image --}}
<div class="flex05 item-image">
<img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
</div>
<div class="ds4-item-list__image" style="background-image: url('{{item.img}}')" title="{{item.name}}"></div>
{{!-- name --}}
<input class="flex2 item-name item-change" type="text" value="{{item.name}}" data-dtype="String"
<input class="ds4-item-list__editable item-change" type="text" value="{{item.name}}" data-dtype="String"
data-property="name" title="{{htmlToPlainText item.data.description}}">
<div class="flex3 flexrow talent-ranks-equation">
{{!-- acquired rank --}}
{{> talentRankValue item=item property='base' localizeString='DS4.TalentRankBase'}}
<span> ( of </span>
{{!-- maximum acquirable rank --}}
{{> talentRankValue item=item property='max' localizeString='DS4.TalentRankMax'}}
<span>) + </span>
{{!-- additional ranks --}}
{{> talentRankValue item=item property='mod' localizeString='DS4.TalentRankMod'}}
<span> = </span>
{{!-- derived total rank --}}
{{> talentRankValue item=item property='total' localizeString='DS4.TalentRankTotal' disabled='disabled'}}
</div>
{{!-- talent tank equation --}}
{{> systems/ds4/templates/actor/partials/talent-rank-equation.hbs talentRank=item.data.rank}}
{{!-- description --}}
<div class="flex4 item-description" title="{{htmlToPlainText item.data.description}}">
<div class="ds4-item-list__description" title="{{htmlToPlainText item.data.description}}">
{{{item.data.description}}}</div>
{{!-- control buttons --}}
{{> systems/ds4/templates/actor/partials/overview-control-buttons.hbs }}
</li>
{{/inline}}
{{!--
!-- Render a list header for a base item list entry from a given item.
!-- The partial assumes a variable dataType to be given in the context.
--}}
{{#*inline "talentListHeader"}}
<li class="ds4-item-list__row ds4-item-list__row--header">
{{!-- image --}}
<div></div>
{{!-- name --}}
<div>{{localize 'DS4.ItemName'}}</div>
{{!-- rank info --}}
<div>{{localize 'DS4.TalentRank'}}</div>
{{!-- description --}}
<div>{{localize 'DS4.Description'}}</div>
{{!-- control buttons placeholder --}}
<div></div>
</li>
{{/inline}}
{{!--
!-- Render a list row for a base item from a given item.
@ -82,17 +73,15 @@
!-- @param item: hand over the item to the partial as hash parameter
--}}
{{#*inline "baseItemListEntry"}}
<li class="item flexrow" data-item-id="{{item._id}}">
<li class="ds4-item-list__row item" data-item-id="{{item._id}}">
{{!-- image --}}
<div class="flex05 item-image">
<img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
</div>
<div class="ds4-item-list__image" style="background-image: url('{{item.img}}')" title="{{item.name}}"></div>
{{!-- name --}}
<input class="flex1 item-name item-change" type="text" value="{{item.name}}" data-dtype="String"
data-property="name" title="{{htmlToPlainText item.data.description}}"">
<input class="ds4-item-list__editable item-change" type="text" value="{{item.name}}" data-dtype="String"
data-property="name" title="{{htmlToPlainText item.data.description}}">
{{!-- description --}}
<div class=" flex3 item-description" title="{{htmlToPlainText item.data.description}}">
{{{item.data.description}}}</div>
<div class="ds4-item-list__description" title="{{htmlToPlainText item.data.description}}">
{{{item.data.description}}}</div>
{{!-- control buttons --}}
{{> systems/ds4/templates/actor/partials/overview-control-buttons.hbs }}
</li>
@ -101,72 +90,57 @@
{{!--
!-- Render a list header for a base item list entry from a given item.
!-- The partial assumes a variable dataType to be given in the context.
!--
!-- @param dataType: the string item type for the list
--}}
{{#*inline "baseItemListHeader"}}
<li class="item flexrow item-header">
<li class="ds4-item-list__row ds4-item-list__row--header">
{{!-- image --}}
<div class="flex05 item-image"></div>
<div></div>
{{!-- name --}}
<div class="flex1 item-name">{{localize 'DS4.ItemName'}}</div>
<div>{{localize 'DS4.ItemName'}}</div>
{{!-- description --}}
<div class="flex3">{{localize 'DS4.Description'}}</div>
<div>{{localize 'DS4.Description'}}</div>
{{!-- control buttons placeholder --}}
<div></div>
</li>
{{/inline}}
{{!-- ======================================================================== --}}
<div class="tab talents-abilities" data-group="primary" data-tab="talents-abilities">
<h4 class="items-list-title">{{localize 'DS4.ItemTypeTalentPlural'}}</h4>
<h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeTalentPlural'}}</h4>
{{#> ifHasItemOfType itemsArray=itemsByType.talent dataType='talent' }}
<ol class="items-list">
<li class="item flexrow item-header">
{{!-- image --}}
<div class="flex05 item-image"></div>
{{!-- name --}}
<div class="flex2 item-name">{{localize 'DS4.ItemName'}}</div>
{{!-- rank info --}}
<div class="flex3">{{localize 'DS4.TalentRank'}}</div>
{{!-- description --}}
<div class="flex4">{{localize 'DS4.Description'}}</div>
{{!-- control buttons placeholder --}}
<div></div>
</li>
<ol class="ds4-item-list ds4-item-list--talent item-list">
{{> talentListHeader}}
{{#each itemsByType.talent as |item id|}}
{{> talentListEntry item=item}}
{{/each}}
</ol>
{{/ifHasItemOfType}}
<h4 class="items-list-title">{{localize 'DS4.ItemTypeRacialAbilityPlural'}}</h4>
<h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeRacialAbilityPlural'}}</h4>
{{#> ifHasItemOfType itemsArray=itemsByType.racialAbility dataType='racialAbility' }}
<ol class="items-list">
{{> baseItemListHeader dataType='racialAbility' }}
<ol class="ds4-item-list ds4-item-list--racial-ability item-list">
{{> baseItemListHeader}}
{{#each itemsByType.racialAbility as |item id|}}
{{> baseItemListEntry item=item}}
{{/each}}
</ol>
{{/ifHasItemOfType}}
<h4 class="items-list-title">{{localize 'DS4.ItemTypeLanguagePlural'}}</h4>
<h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeLanguagePlural'}}</h4>
{{#> ifHasItemOfType itemsArray=itemsByType.language dataType='language' }}
<ol class="items-list">
{{> baseItemListHeader dataType='language' }}
<ol class="ds4-item-list ds4-item-list--language item-list">
{{> baseItemListHeader}}
{{#each itemsByType.language as |item id|}}
{{> baseItemListEntry item=item}}
{{/each}}
</ol>
{{/ifHasItemOfType}}
<h4 class="items-list-title">{{localize 'DS4.ItemTypeAlphabetPlural'}}</h4>
<h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeAlphabetPlural'}}</h4>
{{#> ifHasItemOfType itemsArray=itemsByType.alphabet dataType='alphabet' }}
<ol class="items-list">
{{> baseItemListHeader dataType='alphabet' }}
<ol class="ds4-item-list ds4-item-list--alphabet item-list">
{{> baseItemListHeader}}
{{#each itemsByType.alphabet as |item id|}}
{{> baseItemListEntry item=item}}
{{/each}}