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

add culture and save space with base infos and progression infos

Browse source
This commit is contained in:
Johannes Loher 2021-01-04 21:51:58 +01:00
parent 520aab8b72
commit f8deca4cd4
8 changed files with 102 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/ds4.scss
View file

@ -20,4 +20,5 @@
@import "scss/components/character_values"; @import "scss/components/character_values";
@import "scss/components/attributes_traits"; @import "scss/components/attributes_traits";
@import "scss/components/combat_values"; @import "scss/components/combat_values";
@import "scss/components/character_progression";
} }

1
src/module/ds4.ts
View file

@ -40,6 +40,7 @@ async function registerHandlebarsPartials() {
"systems/ds4/templates/actor/partials/attributes-traits.hbs", "systems/ds4/templates/actor/partials/attributes-traits.hbs",
"systems/ds4/templates/actor/partials/combat-values.hbs", "systems/ds4/templates/actor/partials/combat-values.hbs",
"systems/ds4/templates/actor/partials/profile.hbs", "systems/ds4/templates/actor/partials/profile.hbs",
"systems/ds4/templates/actor/partials/character-progression.hbs",
]; ];
return loadTemplates(templatePaths); return loadTemplates(templatePaths);
} }

6
src/scss/components/_basic_property.scss
View file

@ -1,6 +1,9 @@
.basic-properties { .basic-properties {
flex: 0 0 100%; flex: 0 0 100%;
gap: 2px;
.basic-property { .basic-property {
padding-left: 1px;
padding-right: 1px;
.basic-property-label { .basic-property-label {
font-weight: bold; font-weight: bold;
} }
@ -9,5 +12,8 @@
display: block; display: block;
width: 100%; width: 100%;
} }
.input-divider {
text-align: center;
}
} }
} }

30
src/scss/components/_character_progression.scss Normal file
View file

@ -0,0 +1,30 @@
.progression {
.progression-entry {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
padding-right: 3px;
h2.progression-label {
font-family: $font-heading;
display: block;
height: 50px;
padding: 0px;
color: $c-light-grey;
border: none;
line-height: 50px;
margin: $header-top-margin 0;
text-align: right;
//flex: 0;
}
input.progression-value {
margin-left: 5px;
flex: 0 0 40px;
text-align: left;
border: none;
background-color: transparent;
}
}
}

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

@ -18,6 +18,9 @@
.flex1 { .flex1 {
flex: 1; flex: 1;
} }
.flex125 {
flex: 1.25;
}
.flex15 { .flex15 {
flex: 1.5; flex: 1.5;
} }
@ -51,6 +54,9 @@
.flex1 { .flex1 {
flex: 1; flex: 1;
} }
.flex125 {
flex: 1.25;
}
.flex15 { .flex15 {
flex: 1.5; flex: 1.5;
} }

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

@ -28,8 +28,8 @@
} }
.grid-6col { .grid-6col {
grid-column: span 5 / span 5; grid-column: span 6 / span 6;
grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-columns: repeat(6, minmax(0, 1fr));
} }
.grid-7col { .grid-7col {

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

@ -2,89 +2,57 @@
{{!-- Sheet Header --}} {{!-- Sheet Header --}}
<header class="sheet-header"> <header class="sheet-header">
<img class="profile-img" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" height="100" width="100" /> <img class="profile-img" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" height="100" width="100" />
<div class="header-fields"> <div class="header-fields flexrow">
<h1 class="charname"><input name="name" type="text" value="{{actor.name}}" placeholder="Name" /></h1> <h1 class="charname"><input name="name" type="text" value="{{actor.name}}" placeholder="Name" /></h1>
{{> systems/ds4/templates/actor/partials/character-progression.hbs}}
<div class="flexrow basic-properties">
<div class="basic-property">
<label class="basic-property-label" for="data.baseInfo.race">{{config.baseInfo.race}}</label>
<input type="text" name="data.baseInfo.race" value="{{data.baseInfo.race}}" data-dtype="String" />
</div> </div>
<div class="character-values"> <div class="basic-property">
{{!-- The grid classes are defined in scss/global/_grid.scss. To use, use both the "grid" and "grid-Ncol" <label class="basic-property-label" for="data.baseInfo.culture">{{config.baseInfo.culture}}</label>
class where "N" can be any number from 1 to 12 and will create that number of columns. --}} <input type="text" name="data.baseInfo.culture" value="{{data.baseInfo.culture}}"
<div class="base-infos grid grid-3col">
{{!-- "flex-group-center" is also defined in the _grid.scss file and it will add a small amount of
padding, a border, and will center all of its child elements content and text. --}}
<div class="base-info flex-group-center">
<label for="data.baseInfo.race" class="base-info-label">{{config.baseInfo.race}}</label>
<div class="base-info-content flexrow flex-center flex-between">
<input type="text" name="data.baseInfo.race" value="{{data.baseInfo.race}}"
data-dtype="String" /> data-dtype="String" />
</div> </div>
</div> <div class="basic-property flex125">
<div class="base-info flex-group-center"> <label class="basic-property-label"
<div class="grid grid-3col"> for="data.progression.progressPoints.used">{{config.progression.progressPoints}}</label>
<div class="base-info flex-group-center"> <div class="flexrow">
<label for="data.progression.level"
class="base-info-label">{{config.progression.level}}</label>
<div class="base-info-content flexrow flex-center flex-between">
<input type="text" name="data.progression.level" value="{{data.progression.level}}"
data-dtype="Number" />
</div>
</div>
<div class="base-info flex-group-center">
<label for="data.progression.progressPoints"
class="base-info-label">{{config.progression.progressPoints}}</label>
<div class="base-info-content flexrow flex-center flex-between">
<input type="text" name="data.progression.progressPoints.used" <input type="text" name="data.progression.progressPoints.used"
value="{{data.progression.progressPoints.used}}" data-dtype="Number" /><span> / value="{{data.progression.progressPoints.used}}" data-dtype="Number" /><span
class="input-divider"> /
</span><input type="text" name="data.progression.progressPoints.total" </span><input type="text" name="data.progression.progressPoints.total"
value="{{data.progression.progressPoints.total}}" data-dtype="Number" /> value="{{data.progression.progressPoints.total}}" data-dtype="Number" />
</div> </div>
</div> </div>
<div class="base-info flex-group-center"> <div class="basic-property flex125">
<label for="data.progression.talentPoints" <label class="basic-property-label"
class="base-info-label">{{config.progression.talentPoints}}</label> for="data.progression.talentPoints.used">{{config.progression.talentPoints}}</label>
<div class="base-info-content flexrow flex-center flex-between"> <div class="flexrow">
<input type="text" name="data.progression.talentPoints.used" <input type="text" name="data.progression.talentPoints.used"
value="{{data.progression.talentPoints.used}}" data-dtype="Number" /><span> / value="{{data.progression.talentPoints.used}}" data-dtype="Number" /><span
class="input-divider"> /
</span><input type="text" name="data.progression.talentPoints.total" </span><input type="text" name="data.progression.talentPoints.total"
value="{{data.progression.talentPoints.total}}" data-dtype="Number" /> value="{{data.progression.talentPoints.total}}" data-dtype="Number" />
</div> </div>
</div> </div>
<div class="basic-property">
<label class="basic-property-label" for="data.baseInfo.class">{{config.baseInfo.class}}</label>
<input type="text" name="data.baseInfo.class" value="{{data.baseInfo.class}}" data-dtype="String" />
</div> </div>
</div> <div class="basic-property">
<div class="base-info flex-group-center"> <label class="basic-property-label"
<label for="data.baseInfo.class" class="base-info-label">{{config.baseInfo.class}}</label> for="data.baseInfo.heroClass">{{config.baseInfo.heroClass}}</label>
<div class="base-info-content flexrow flex-center flex-between">
<input type="text" name="data.baseInfo.class" value="{{data.baseInfo.class}}"
data-dtype="String" />
</div>
</div>
<div class="base-info flex-group-center">
<label for="data.baseInfo.racialAbilities"
class="base-info-label">{{config.baseInfo.racialAbilities}}</label>
<div class="base-info-content flexrow flex-center flex-between">
<input type="text" name="data.baseInfo.racialAbilities"
value="{{data.baseInfo.racialAbilities}}" data-dtype="String" />
</div>
</div>
<div class="base-info flex-group-center">
<label for="data.progression.experiencePoints"
class="base-info-label">{{config.progression.experiencePoints}}</label>
<div class="base-info-content flexrow flex-center flex-between">
<input type="text" name="data.progression.experiencePoints"
value="{{data.progression.experiencePoints}}" data-dtype="Number" />
</div>
</div>
<div class="base-info flex-group-center">
<label for="data.baseInfo.heroClass" class="base-info-label">{{config.baseInfo.heroClass}}</label>
<div class="base-info-content flexrow flex-center flex-between">
<input type="text" name="data.baseInfo.heroClass" value="{{data.baseInfo.heroClass}}" <input type="text" name="data.baseInfo.heroClass" value="{{data.baseInfo.heroClass}}"
data-dtype="String" /> data-dtype="String" />
</div> </div>
</div> </div>
</div> </div>
<div class="character-values">
{{> systems/ds4/templates/actor/partials/attributes-traits.hbs}} {{> systems/ds4/templates/actor/partials/attributes-traits.hbs}}
{{> systems/ds4/templates/actor/partials/combat-values.hbs}} {{> systems/ds4/templates/actor/partials/combat-values.hbs}}
</div> </div>
</header> </header>

15
src/templates/actor/partials/character-progression.hbs Normal file
View file

@ -0,0 +1,15 @@
<div class="progression flexrow">
<div class="progression-entry">
<h2 class="progression-label"><label for="data.progression.level">{{config.progression.level}}</label>
</h2>
<input class="progression-value" type="text" name="data.progression.level" value="{{data.progression.level}}"
data-dtype="Number" />
</div>
<div class="progression-entry">
<h2 class="progression-label"><label
for="data.progression.experiencePoints">{{config.progression.experiencePoints}}</label>
</h2>
<input class="progression-value" type="text" name="data.progression.experiencePoints"
value="{{data.progression.experiencePoints}}" data-dtype="Number" />
</div>
</div>