Merge branch '001-add-combat-values' into 'master'

Add combat values to character  sheet

Closes #1

See merge request dungeonslayers/ds4!12
This commit is contained in:
Johannes Loher 2020-12-31 01:35:31 +01:00
commit 25ce41bf53
5 changed files with 129 additions and 1 deletions

View file

@ -2,7 +2,7 @@ header.sheet-header {
.character-values { .character-values {
flex: 0 0 100%; flex: 0 0 100%;
.attributes-traits { .attributes-traits {
margin-top: 5px; margin-top: $margin-sm;
.attribute { .attribute {
.attribute-label { .attribute-label {
font-family: $font-heading; 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;
}
}
}
}
} }
} }

View file

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

View file

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

View file

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

View file

@ -161,6 +161,74 @@
</span><span class="trait-value-total">{{data.traits.aura.total}}</span></div> </span><span class="trait-value-total">{{data.traits.aura.total}}</span></div>
</div> </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> </div>
</header> </header>