extract and simplify combat values to own component
This commit is contained in:
parent
6a12ba3938
commit
7cb6080808
6 changed files with 82 additions and 117 deletions
|
|
@ -19,4 +19,5 @@
|
|||
@import "scss/components/description";
|
||||
@import "scss/components/character_values";
|
||||
@import "scss/components/attributes_traits";
|
||||
@import "scss/components/combat_values";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@ async function registerHandlebarsPartials() {
|
|||
"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);
|
||||
}
|
||||
|
|
@ -68,7 +69,7 @@ Hooks.once("setup", function () {
|
|||
];
|
||||
|
||||
// Exclude some from sorting where the default order matters
|
||||
const noSort = ["attributes", "traits"];
|
||||
const noSort = ["attributes", "traits", "combatValues"];
|
||||
|
||||
// Localize and sort CONFIG objects
|
||||
for (const o of toLocalize) {
|
||||
|
|
|
|||
|
|
@ -1,53 +1,5 @@
|
|||
header.sheet-header {
|
||||
.character-values {
|
||||
flex: 0 0 100%;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
48
src/scss/components/_combat_values.scss
Normal file
48
src/scss/components/_combat_values.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -83,75 +83,8 @@
|
|||
</div>
|
||||
|
||||
{{> systems/ds4/templates/actor/partials/attributes-traits.hbs}}
|
||||
{{> systems/ds4/templates/actor/partials/combat-values.hbs}}
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
|
|||
30
src/templates/actor/partials/combat-values.hbs
Normal file
30
src/templates/actor/partials/combat-values.hbs
Normal 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>
|
||||
Loading…
Reference in a new issue