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

Merge remote-tracking branch 'origin/master' into 007-rollsLib

Browse source
This commit is contained in:
Oliver Rümpelein 2020-12-31 01:36:00 +01:00
commit bf39f35504
5 changed files with 129 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/scss/components/_character_values.scss
View file

@ -2,7 +2,7 @@ header.sheet-header {
.character-values {
flex: 0 0 100%;
.attributes-traits {
margin-top: 5px;
margin-top: $margin-sm;
.attribute {
.attribute-label {
font-family: $font-heading;
@ -47,5 +47,53 @@ header.sheet-header {
}
}
}
.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("assets/DS4-HP.png");
}
&.defense {
background-image: url("assets/DS4-DEF.png");
}
&.initiative {
background-image: url("assets/DS4-INI.png");
}
&.movement {
background-image: url("assets/DS4-MR.png");
}
&.meleeAttack {
background-image: url("assets/DS4-MAT.png");
}
&.rangedAttack {
background-image: url("assets/DS4-RAT.png");
}
&.spellcasting {
background-image: url("assets/DS4-SPC.png");
}
&.targetedSpellcasting {
background-image: url("assets/DS4-TSC.png");
}
}
.combat-value-formula {
width: $size;
input {
text-align: center;
}
}
}
}
}
}

4
src/scss/global/_flex.scss
View file

@ -70,3 +70,7 @@
.flex-between {
justify-content: space-between;
}
.flex-around {
justify-content: space-around;
}

5
src/scss/utils/_mixins.scss
View file

@ -14,3 +14,8 @@
@mixin hide {
display: none;
}
@mixin centered-content {
display: grid;
place-items: center;
}

3
src/scss/utils/_variables.scss
View file

@ -1,3 +1,6 @@
$padding-sm: 5px;
$padding-md: 10px;
$padding-lg: 20px;
$margin-sm: $padding-sm;
$margin-md: $padding-md;
$margin-lg: $padding-lg;

68
src/templates/actor/actor-sheet.hbs
View file

@ -161,6 +161,74 @@
</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>
</div>
</header>