Merge branch 'simplify-core-values' into 'master'

Extract and simplify core values in actor template

See merge request dungeonslayers/ds4!21
This commit is contained in:
Johannes Loher 2021-01-04 20:32:25 +01:00
commit adfc07fa6e
11 changed files with 190 additions and 246 deletions

View file

@ -18,4 +18,6 @@
@import "scss/components/items";
@import "scss/components/description";
@import "scss/components/character_values";
@import "scss/components/attributes_traits";
@import "scss/components/combat_values";
}

View file

@ -106,10 +106,10 @@ export const DS4 = {
*/
traits: {
strength: "DS4.TraitStrength",
constitution: "DS4.TraitConstitution",
agility: "DS4.TraitAgility",
dexterity: "DS4.TraitDexterity",
intellect: "DS4.TraitIntellect",
constitution: "DS4.TraitConstitution",
dexterity: "DS4.TraitDexterity",
aura: "DS4.TraitAura",
},

View file

@ -37,6 +37,8 @@ async function registerHandlebarsPartials() {
"systems/ds4/templates/item/partials/effects.hbs",
"systems/ds4/templates/item/partials/body.hbs",
"systems/ds4/templates/actor/partials/items-overview.hbs",
"systems/ds4/templates/actor/partials/attributes-traits.hbs",
"systems/ds4/templates/actor/partials/combat-values.hbs",
];
return loadTemplates(templatePaths);
}
@ -67,7 +69,7 @@ Hooks.once("setup", function () {
];
// Exclude some from sorting where the default order matters
const noSort = [];
const noSort = ["attributes", "traits", "combatValues"];
// Localize and sort CONFIG objects
for (const o of toLocalize) {

View file

@ -0,0 +1,46 @@
.attributes-traits {
margin-top: $margin-sm;
.attribute {
.attribute-label {
font-family: $font-heading;
font-size: 2em;
text-align: center;
}
.attribute-value {
border: 2px groove $c-border-groove;
line-height: $default-input-height;
font-size: 1.5em;
text-align: center;
padding-left: 2px;
padding-right: 2px;
gap: 0;
input,
.attribute-value-total {
grid-column: span 2;
}
}
}
.trait {
.trait-label {
color: transparent;
font-family: $font-heading;
font-size: 2em;
text-align: center;
//text-shadow: -1px 1px 0 $c-black, 1px 1px 0 $c-black, 1px -1px 0 $c-black, -1px -1px 0 $c-black;
-webkit-text-stroke: 1px $c-black;
}
.trait-value {
border: 2px groove $c-border-groove;
font-size: 1.5em;
line-height: $default-input-height;
text-align: center;
padding-left: 2px;
padding-right: 2px;
gap: 0;
input,
.trait-value-total {
grid-column: span 2;
}
}
}
}

View file

@ -1,99 +1,5 @@
header.sheet-header {
.character-values {
flex: 0 0 100%;
.attributes-traits {
margin-top: $margin-sm;
.attribute {
.attribute-label {
font-family: $font-heading;
font-size: 2em;
text-align: center;
}
.attribute-value {
border: 2px groove $c-border-groove;
line-height: 26px;
font-size: 1.5em;
text-align: center;
padding-left: 2px;
padding-right: 2px;
gap: 0;
input,
.attribute-value-total {
grid-column: span 2;
}
}
}
.trait {
.trait-label {
color: transparent;
font-family: $font-heading;
font-size: 2em;
text-align: center;
//text-shadow: -1px 1px 0 $c-black, 1px 1px 0 $c-black, 1px -1px 0 $c-black, -1px -1px 0 $c-black;
-webkit-text-stroke: 1px $c-black;
}
.trait-value {
border: 2px groove $c-border-groove;
font-size: 1.5em;
line-height: 26px;
text-align: center;
padding-left: 2px;
padding-right: 2px;
gap: 0;
input,
.trait-value-total {
grid-column: span 2;
}
}
}
}
.combat-values {
margin-top: $margin-sm;
.combat-value-with-formula {
display: grid;
place-items: center;
$size: 60px;
row-gap: $margin-sm;
.combat-value {
@include centered-content;
height: $size;
width: $size;
flex: 0 0 auto;
background-size: contain;
font-size: 1.5em;
&.hitPoints {
background-image: url("#{$official-assets-path}/DS4-HP.png");
}
&.defense {
background-image: url("#{$official-assets-path}/DS4-DEF.png");
}
&.initiative {
background-image: url("#{$official-assets-path}/DS4-INI.png");
}
&.movement {
background-image: url("#{$official-assets-path}/DS4-MR.png");
}
&.meleeAttack {
background-image: url("#{$official-assets-path}/DS4-MAT.png");
}
&.rangedAttack {
background-image: url("#{$official-assets-path}/DS4-RAT.png");
}
&.spellcasting {
background-image: url("#{$official-assets-path}/DS4-SPC.png");
}
&.targetedSpellcasting {
background-image: url("#{$official-assets-path}/DS4-TSC.png");
}
}
.combat-value-formula {
width: $size;
input {
text-align: center;
}
}
}
}
}
}

View file

@ -0,0 +1,48 @@
.combat-values {
margin-top: $margin-sm;
.combat-value-with-formula {
display: grid;
place-items: center;
$size: 60px;
row-gap: $margin-sm;
.combat-value {
@include centered-content;
height: $size;
width: $size;
flex: 0 0 auto;
background-size: contain;
font-size: 1.5em;
&.hitPoints {
background-image: url("#{$official-assets-path}/DS4-HP.png");
}
&.defense {
background-image: url("#{$official-assets-path}/DS4-DEF.png");
}
&.initiative {
background-image: url("#{$official-assets-path}/DS4-INI.png");
}
&.movement {
background-image: url("#{$official-assets-path}/DS4-MR.png");
}
&.meleeAttack {
background-image: url("#{$official-assets-path}/DS4-MAT.png");
}
&.rangedAttack {
background-image: url("#{$official-assets-path}/DS4-RAT.png");
}
&.spellcasting {
background-image: url("#{$official-assets-path}/DS4-SPC.png");
}
&.targetedSpellcasting {
background-image: url("#{$official-assets-path}/DS4-TSC.png");
}
}
.combat-value-formula {
width: $size;
input {
text-align: center;
}
}
}
}

View file

@ -13,7 +13,7 @@
justify-content: left;
label {
line-height: 26px;
line-height: $default-input-height;
font-weight: bold;
}

View file

@ -5,4 +5,6 @@ $margin-sm: $padding-sm;
$margin-md: $padding-md;
$margin-lg: $padding-lg;
$default-input-height: 26px;
$official-assets-path: "assets/official";

View file

@ -81,154 +81,10 @@
</div>
</div>
</div>
<div class="attributes-traits grid grid-3col">
<div class="attribute flexrow"><label for="data.attributes.body.total"
class="attribute-label ">{{config.attributes.body}}</label>
<div class="attribute-value flex15 grid grid-8col"><input type="number"
name="data.attributes.body.base" value='{{data.attributes.body.base}}'
data-dtype="Number" /><span> +
</span><input type="number" name="data.attributes.body.mod" value='{{data.attributes.body.mod}}'
data-dtype="Number" /><span> =
</span><span class="attribute-value-total">{{data.attributes.body.total}}</span></div>
</div>
<div class="attribute flexrow"><label for="data.attributes.mobility.total"
class="attribute-label">{{config.attributes.mobility}}</label>
<div class="attribute-value flex15 grid grid-8col"><input type="number"
name="data.attributes.mobility.base" value='{{data.attributes.mobility.base}}'
data-dtype="Number" /><span> +
</span><input type="number" name="data.attributes.mobility.mod"
value='{{data.attributes.mobility.mod}}' data-dtype="Number" /><span> =
</span><span class="attribute-value-total">{{data.attributes.mobility.total}}</span></div>
</div>
<div class="attribute flexrow"><label for="data.attributes.mind.total"
class="attribute-label">{{config.attributes.mind}}</label>
<div class="attribute-value flex15 grid grid-8col"><input type="number"
name="data.attributes.mind.base" value='{{data.attributes.mind.base}}'
data-dtype="Number" /><span> +
</span><input type="number" name="data.attributes.mind.mod" value='{{data.attributes.mind.mod}}'
data-dtype="Number" /><span> =
</span><span class="attribute-value-total">{{data.attributes.mind.total}}</span></div>
</div>
<div class="trait flexrow"><label for="data.traits.strength.total"
class="trait-label">{{config.traits.strength}}</label>
<div class="trait-value flex15 grid grid-8col"><input type="number" name="data.traits.strength.base"
value='{{data.traits.strength.base}}' data-dtype="Number" /><span> +
</span><input type="number" name="data.traits.strength.mod" value='{{data.traits.strength.mod}}'
data-dtype="Number" /><span> =
</span><span class="trait-value-total">{{data.traits.strength.total}}</span></div>
</div>
<div class="trait flexrow"><label for="data.traits.agility.total"
class="trait-label">{{config.traits.agility}}</label>
<div class="trait-value flex15 grid grid-8col"><input type="number" name="data.traits.agility.base"
value='{{data.traits.agility.base}}' data-dtype="Number" /><span> +
</span><input type="number" name="data.traits.agility.mod" value='{{data.traits.agility.mod}}'
data-dtype="Number" /><span> =
</span><span class="trait-value-total">{{data.traits.agility.total}}</span></div>
</div>
<div class="trait flexrow"><label for="data.traits.intellect.total"
class="trait-label">{{config.traits.intellect}}</label>
<div class="trait-value flex15 grid grid-8col"><input type="number"
name="data.traits.intellect.base" value='{{data.traits.intellect.base}}'
data-dtype="Number" /><span> +
</span><input type="number" name="data.traits.intellect.mod"
value='{{data.traits.intellect.mod}}' data-dtype="Number" /><span> =
</span><span class="trait-value-total">{{data.traits.intellect.total}}</span></div>
</div>
<div class="trait flexrow"><label for="data.traits.constitution.total"
class="trait-label">{{config.traits.constitution}}</label>
<div class="trait-value flex15 grid grid-8col"><input type="number"
name="data.traits.constitution.base" value='{{data.traits.constitution.base}}'
data-dtype="Number" /><span> +
</span><input type="number" name="data.traits.constitution.mod"
value='{{data.traits.constitution.mod}}' data-dtype="Number" /><span> =
</span><span class="trait-value-total">{{data.traits.constitution.total}}</span></div>
</div>
<div class="trait flexrow"><label for="data.traits.dexterity.total"
class="trait-label">{{config.traits.dexterity}}</label>
<div class="trait-value flex15 grid grid-8col"><input type="number"
name="data.traits.dexterity.base" value='{{data.traits.dexterity.base}}'
data-dtype="Number" /><span> +
</span><input type="number" name="data.traits.dexterity.mod"
value='{{data.traits.dexterity.mod}}' data-dtype="Number" /><span> =
</span><span class="trait-value-total">{{data.traits.dexterity.total}}</span></div>
</div>
<div class="trait flexrow"><label for="data.traits.aura.total"
class="trait-label">{{config.traits.aura}}</label>
<div class="trait-value flex15 grid grid-8col"><input type="number" name="data.traits.aura.base"
value='{{data.traits.aura.base}}' data-dtype="Number" /><span> +
</span><input type="number" name="data.traits.aura.mod" value='{{data.traits.aura.mod}}'
data-dtype="Number" /><span> =
</span><span class="trait-value-total">{{data.traits.aura.total}}</span></div>
</div>
</div>
<div class="combat-values flexrow flex-between">
<div class="combat-value-with-formula">
<div class="combat-value hitPoints"><span
class="combat-value-value-total">{{data.combatValues.hitPoints.total}}</span></div>
<div class="combat-value-formula flexrow"><input type="number"
name="data.combatValues.hitPoints.base" value='{{data.combatValues.hitPoints.base}}'
data-dtype="Number" /><input type="number" name="data.combatValues.hitPoints.mod"
value='{{data.combatValues.hitPoints.mod}}' data-dtype="Number" /></div>
</div>
<div class="combat-value-with-formula">
<div class="combat-value defense"><span
class="combat-value-value-total">{{data.combatValues.defense.total}}</span></div>
<div class="combat-value-formula flexrow"><input type="number" name="data.combatValues.defense.base"
value='{{data.combatValues.defense.base}}' data-dtype="Number" /><input type="number"
name="data.combatValues.defense.mod" value='{{data.combatValues.defense.mod}}'
data-dtype="Number" /></div>
</div>
<div class="combat-value-with-formula">
<div class="combat-value initiative"><span
class="combat-value-value-total">{{data.combatValues.initiative.total}}</span></div>
<div class="combat-value-formula flexrow"><input type="number"
name="data.combatValues.initiative.base" value='{{data.combatValues.initiative.base}}'
data-dtype="Number" /><input type="number" name="data.combatValues.initiative.mod"
value='{{data.combatValues.initiative.mod}}' data-dtype="Number" /></div>
</div>
<div class="combat-value-with-formula">
<div class="combat-value movement"><span
class="combat-value-value-total">{{data.combatValues.movement.total}}</span></div>
<div class="combat-value-formula flexrow"><input type="number"
name="data.combatValues.movement.base" value='{{data.combatValues.movement.base}}'
data-dtype="Number" /><input type="number" name="data.combatValues.movement.mod"
value='{{data.combatValues.movement.mod}}' data-dtype="Number" /></div>
</div>
<div class="combat-value-with-formula">
<div class="combat-value meleeAttack"><span
class="combat-value-value-total">{{data.combatValues.meleeAttack.total}}</span></div>
<div class="combat-value-formula flexrow"><input type="number"
name="data.combatValues.meleeAttack.base" value='{{data.combatValues.meleeAttack.base}}'
data-dtype="Number" /><input type="number" name="data.combatValues.meleeAttack.mod"
value='{{data.combatValues.meleeAttack.mod}}' data-dtype="Number" /></div>
</div>
<div class="combat-value-with-formula">
<div class="combat-value rangedAttack"><span
class="combat-value-value-total">{{data.combatValues.rangedAttack.total}}</span></div>
<div class="combat-value-formula flexrow"><input type="number"
name="data.combatValues.rangedAttack.base" value='{{data.combatValues.rangedAttack.base}}'
data-dtype="Number" /><input type="number" name="data.combatValues.rangedAttack.mod"
value='{{data.combatValues.rangedAttack.mod}}' data-dtype="Number" /></div>
</div>
<div class="combat-value-with-formula">
<div class="combat-value spellcasting"><span
class="combat-value-value-total">{{data.combatValues.spellcasting.total}}</span></div>
<div class="combat-value-formula flexrow"><input type="number"
name="data.combatValues.spellcasting.base" value='{{data.combatValues.spellcasting.base}}'
data-dtype="Number" /><input type="number" name="data.combatValues.spellcasting.mod"
value='{{data.combatValues.spellcasting.mod}}' data-dtype="Number" /></div>
</div>
<div class="combat-value-with-formula">
<div class="combat-value targetedSpellcasting"><span
class="combat-value-value-total">{{data.combatValues.targetedSpellcasting.total}}</span>
</div>
<div class="combat-value-formula flexrow"><input type="number"
name="data.combatValues.targetedSpellcasting.base"
value='{{data.combatValues.targetedSpellcasting.base}}' data-dtype="Number" /><input
type="number" name="data.combatValues.targetedSpellcasting.mod"
value='{{data.combatValues.targetedSpellcasting.mod}}' data-dtype="Number" /></div>
</div>
</div>
{{> systems/ds4/templates/actor/partials/attributes-traits.hbs}}
{{> systems/ds4/templates/actor/partials/combat-values.hbs}}
</div>
</header>

View file

@ -0,0 +1,52 @@
{{!-- ======================================================================== --}}
{{!-- INLINE PARTIAL DEFINITIONS --}}
{{!-- ======================================================================== --}}
{{!--
!-- Render an attribute.
!--
!-- @param attribute-label: The label to display for the attribute
!-- @param attribute-key: The key of the attribute
!-- @param attribute-data: The data for the attribute
--}}
{{#*inline "attribute"}}
<div class="attribute flexrow"><label for="data.attributes.body.total"
class="attribute-label ">{{attribute-label}}</label>
<div class="attribute-value flex15 grid grid-8col"><input type="number"
name="data.attributes.{{attribute-key}}.base" value='{{attribute-data.base}}' data-dtype="Number" /><span> +
</span><input type="number" name="data.attributes.{{attribute-key}}.mod" value='{{attribute-data.mod}}'
data-dtype="Number" /><span> =
</span><span class="attribute-value-total">{{attribute-data.total}}</span></div>
</div>
{{/inline}}
{{!--
!-- Render a trait.
!--
!-- @param trait-label: The label to display for the trait
!-- @param trait-key: The key of the trait
!-- @param trait-data: The data for the trait
--}}
{{#*inline "trait"}}
<div class="trait flexrow"><label for="data.traits.strength.total" class="trait-label">{{trait-label}}</label>
<div class="trait-value flex15 grid grid-8col"><input type="number" name="data.traits.{{trait-key}}.base"
value='{{trait-data.base}}' data-dtype="Number" /><span> +
</span><input type="number" name="data.traits.{{trait-key}}.mod" value='{{trait-data.mod}}'
data-dtype="Number" /><span> =
</span><span class="trait-value-total">{{trait-data.total}}</span></div>
</div>
{{/inline}}
{{!-- ======================================================================== --}}
<div class="attributes-traits grid grid-3col">
{{#each config.attributes as |attribute-label attribute-key|}}
{{> attribute attribute-label=attribute-label attribute-key=attribute-key attribute-data=(lookup ../data.attributes
attribute-key)}}
{{/each}}
{{#each config.traits as |trait-label trait-key|}}
{{> trait trait-label=trait-label trait-key=trait-key trait-data=(lookup ../data.traits trait-key)}}
{{/each}}
</div>

View file

@ -0,0 +1,30 @@
{{!-- ======================================================================== --}}
{{!-- INLINE PARTIAL DEFINITIONS --}}
{{!-- ======================================================================== --}}
{{!--
!-- Render a combat value.
!--
!-- @param combat-value-key: The key of the combat value
!-- @param combat-value-data: The data for the attribute
--}}
{{#*inline "combat-value"}}
<div class="combat-value-with-formula">
<div class="combat-value {{combat-value-key}}"><span class="combat-value-total">{{combat-value-data.total}}</span>
</div>
<div class="combat-value-formula flexrow"><input type="number" name="data.combatValues.{{combat-value-key}}.base"
value='{{combat-value-data.base}}' data-dtype="Number" /><input type="number"
name="data.combatValues.{{combat-value-key}}.mod" value='{{combat-value-data.mod}}' data-dtype="Number" />
</div>
</div>
{{/inline}}
{{!-- ======================================================================== --}}
<div class="combat-values flexrow flex-between">
{{#each config.combatValues as |combat-value-label combat-value-key|}}
{{> combat-value combat-value-key=combat-value-key combat-value-data=(lookup ../data.combatValues
combat-value-key)}}
{{/each}}
</div>