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

Use BEM for combat values

Browse source
This commit is contained in:
Johannes Loher 2021-04-13 22:48:37 +02:00
parent 49b450daee
commit 04174398bb
6 changed files with 91 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/module/handlebars/handlebars-partials.ts
View file

@ -1,6 +1,7 @@
export default async function registerHandlebarsPartials(): Promise<void> {
const templatePaths = [
"systems/ds4/templates/sheets/actor/components/character-progression.hbs",
"systems/ds4/templates/sheets/actor/components/combat-value.hbs",
"systems/ds4/templates/sheets/actor/components/combat-values.hbs",
"systems/ds4/templates/sheets/actor/components/core-value.hbs",
"systems/ds4/templates/sheets/actor/components/core-values.hbs",

61
src/scss/components/_combat_value.scss Normal file
View file

@ -0,0 +1,61 @@
@use "../utils/mixins";
@use "../utils/variables";
.ds4-combat-value {
$size: 3.75rem;
display: grid;
place-items: center;
row-gap: 0.5em;
&__value {
$combat-values-icons-path: "#{variables.$official-icons-path}/combat-values";
@include mixins.centered-content;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
font-size: 1.5em;
height: $size;
width: $size;
&--hitPoints {
background-image: url("#{$combat-values-icons-path}/hit-points.png");
}
&--defense {
background-image: url("#{$combat-values-icons-path}/defense.png");
}
&--initiative {
background-image: url("#{$combat-values-icons-path}/initiative.png");
}
&--movement {
background-image: url("#{$combat-values-icons-path}/movement-rate.png");
}
&--meleeAttack {
background-image: url("#{$combat-values-icons-path}/melee-attack.png");
}
&--rangedAttack {
background-image: url("#{$combat-values-icons-path}/ranged-attack.png");
}
&--spellcasting {
background-image: url("#{$combat-values-icons-path}/spellcasting.png");
}
&--targetedSpellcasting {
background-image: url("#{$combat-values-icons-path}/targeted-spellcasting.png");
}
}
&__formula {
align-items: center;
justify-content: space-between;
display: flex;
gap: 0.15em;
text-align: center;
width: $size;
}
&__formula-base,
&__formula-modifier {
flex: 1 1 4em;
}
}

52
src/scss/components/_combat_values.scss
View file

@ -1,53 +1,7 @@
@use "../utils/mixins";
@use "../utils/variables";
.combat-values {
.ds4-combat-values {
display: flex;
margin-top: variables.$margin-sm;
.combat-value-with-formula {
$size: 60px;
display: grid;
place-items: center;
row-gap: variables.$margin-sm;
.combat-value {
$combat-values-icons-path: "#{variables.$official-icons-path}/combat-values";
@include mixins.centered-content;
height: $size;
width: $size;
flex: 0 0 auto;
background-size: contain;
font-size: 1.5em;
&.hitPoints {
background-image: url("#{$combat-values-icons-path}/hit-points.png");
}
&.defense {
background-image: url("#{$combat-values-icons-path}/defense.png");
}
&.initiative {
background-image: url("#{$combat-values-icons-path}/initiative.png");
}
&.movement {
background-image: url("#{$combat-values-icons-path}/movement-rate.png");
}
&.meleeAttack {
background-image: url("#{$combat-values-icons-path}/melee-attack.png");
}
&.rangedAttack {
background-image: url("#{$combat-values-icons-path}/ranged-attack.png");
}
&.spellcasting {
background-image: url("#{$combat-values-icons-path}/spellcasting.png");
}
&.targetedSpellcasting {
background-image: url("#{$combat-values-icons-path}/targeted-spellcasting.png");
}
}
.combat-value-formula {
width: $size;
text-align: center;
span {
line-height: variables.$default-input-height;
}
}
}
justify-content: space-between;
}

1
src/scss/ds4.scss
View file

@ -18,6 +18,7 @@
@include meta.load-css("components/character_progression");
@include meta.load-css("components/character_values");
@include meta.load-css("components/combat_values");
@include meta.load-css("components/combat_value");
@include meta.load-css("components/description");
@include meta.load-css("components/forms");
@include meta.load-css("components/item_list");

22
src/templates/sheets/actor/components/combat-value.hbs Normal file
View file

@ -0,0 +1,22 @@
{{!--
!-- Render a combat value.
!--
!-- @param combat-value-key: The key of the combat value
!-- @param combat-value-data: The data for the attribute
!-- @param combat-value-label: The label for the attribute
--}}
<div class="ds4-combat-value">
<div class="ds4-combat-value__value ds4-combat-value__value--{{combat-value-key}}"
title="{{combat-value-label}}: {{combat-value-data.tooltip}}">
{{combat-value-data.total}}
</div>
<div class="ds4-combat-value__formula">
<span class="ds4-combat-value__formula-base"
title="{{combat-value-label}} {{localize 'DS4.TooltipBaseValue'}}">{{combat-value-data.base}}</span>
<span>+</span>
<input class="ds4-combat-value__formula-modifier" type="number" name="data.combatValues.{{combat-value-key}}.mod"
value='{{combat-value-data.mod}}' data-dtype="Number"
title="{{combat-value-label}} {{localize 'DS4.TooltipModifier'}}" />
</div>
</div>

33
src/templates/sheets/actor/components/combat-values.hbs
View file

@ -1,33 +1,6 @@
{{!-- ======================================================================== --}}
{{!-- 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
!-- @param combat-value-label: The label for the attribute
--}}
{{#*inline "combat-value"}}
<div class="combat-value-with-formula">
<div class="combat-value {{combat-value-key}}" title="{{combat-value-label}}: {{combat-value-data.tooltip}}"><span
class="combat-value-total">{{combat-value-data.total}}</span>
</div>
<div class="combat-value-formula flexrow"><span class="combat-value-base"
title="{{combat-value-label}} {{localize 'DS4.TooltipBaseValue'}}">{{combat-value-data.base}}</span><span>+</span><input
type="number" name="data.combatValues.{{combat-value-key}}.mod" value='{{combat-value-data.mod}}'
data-dtype="Number" title="{{combat-value-label}} {{localize 'DS4.TooltipModifier'}}" />
</div>
</div>
{{/inline}}
{{!-- ======================================================================== --}}
<div class="combat-values flexrow flex-between">
<div class="ds4-combat-values">
{{#each config.i18n.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) combat-value-label=combat-value-label}}
{{> systems/ds4/templates/sheets/actor/components/combat-value.hbs combat-value-key=combat-value-key
combat-value-data=(lookup ../data.combatValues combat-value-key) combat-value-label=combat-value-label}}
{{/each}}
</div>