Move core values and combat values to values tab and BEMify core values

This commit is contained in:
Johannes Loher 2021-03-24 20:10:14 +01:00
parent 30aed22c03
commit cf80b18ba6
16 changed files with 129 additions and 203 deletions

View file

@ -9,6 +9,7 @@
"DS4.RollableImageRollableTitle": "Für {name} würfeln",
"DS4.DiceOverlayImageAltText": "Bild eines W20",
"DS4.NotOwned": "Nicht besessen",
"DS4.HeadingValues": "Werte",
"DS4.HeadingBiography": "Biografie",
"DS4.HeadingDetails": "Details",
"DS4.HeadingEffects": "Effekte",

View file

@ -9,6 +9,7 @@
"DS4.RollableImageRollableTitle": "Roll for {name}",
"DS4.DiceOverlayImageAltText": "Image of a d20",
"DS4.NotOwned": "No owner",
"DS4.HeadingValues": "Values",
"DS4.HeadingBiography": "Biography",
"DS4.HeadingDetails": "Details",
"DS4.HeadingEffects": "Effects",

View file

@ -14,10 +14,11 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Data<DS4Actor>> {
static get defaultOptions(): BaseEntitySheet.Options {
const superDefaultOptions = super.defaultOptions;
return mergeObject(superDefaultOptions, {
...superDefaultOptions,
classes: ["ds4", "sheet", "actor"],
width: 650,
height: 600,
scrollY: [
".values",
".inventory",
".spells",
".talents-abilities",
@ -25,23 +26,8 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Data<DS4Actor>> {
".biography",
".special-creature-abilities",
],
template: superDefaultOptions.template,
viewPermission: superDefaultOptions.viewPermission,
closeOnSubmit: superDefaultOptions.closeOnSubmit,
submitOnChange: superDefaultOptions.submitOnChange,
submitOnClose: superDefaultOptions.submitOnClose,
editable: superDefaultOptions.editable,
baseApplication: superDefaultOptions.baseApplication,
top: superDefaultOptions.top,
left: superDefaultOptions.left,
popOut: superDefaultOptions.popOut,
minimizable: superDefaultOptions.minimizable,
resizable: superDefaultOptions.resizable,
id: superDefaultOptions.id,
dragDrop: superDefaultOptions.dragDrop,
filters: superDefaultOptions.filters,
title: superDefaultOptions.title,
tabs: superDefaultOptions.tabs,
tabs: [{ navSelector: ".sheet-tabs", contentSelector: ".sheet-body", initial: "values" }],
width: 650,
});
}

View file

@ -8,27 +8,8 @@ export class DS4CharacterActorSheet extends DS4ActorSheet {
static get defaultOptions(): BaseEntitySheet.Options {
const superDefaultOptions = super.defaultOptions;
return mergeObject(superDefaultOptions, {
...superDefaultOptions,
classes: ["ds4", "sheet", "actor", "character"],
tabs: [{ navSelector: ".sheet-tabs", contentSelector: ".sheet-body", initial: "inventory" }],
template: superDefaultOptions.template,
viewPermission: superDefaultOptions.viewPermission,
closeOnSubmit: superDefaultOptions.closeOnSubmit,
submitOnChange: superDefaultOptions.submitOnChange,
submitOnClose: superDefaultOptions.submitOnClose,
editable: superDefaultOptions.editable,
baseApplication: superDefaultOptions.baseApplication,
top: superDefaultOptions.top,
left: superDefaultOptions.left,
popOut: superDefaultOptions.popOut,
minimizable: superDefaultOptions.minimizable,
resizable: superDefaultOptions.resizable,
id: superDefaultOptions.id,
dragDrop: superDefaultOptions.dragDrop,
filters: superDefaultOptions.filters,
title: superDefaultOptions.title,
width: superDefaultOptions.width,
height: superDefaultOptions.height,
scrollY: superDefaultOptions.scrollY,
});
}
}

View file

@ -8,27 +8,8 @@ export class DS4CreatureActorSheet extends DS4ActorSheet {
static get defaultOptions(): BaseEntitySheet.Options {
const superDefaultOptions = super.defaultOptions;
return mergeObject(superDefaultOptions, {
...superDefaultOptions,
classes: ["ds4", "sheet", "actor", "creature"],
tabs: [{ navSelector: ".sheet-tabs", contentSelector: ".sheet-body", initial: "inventory" }],
template: superDefaultOptions.template,
viewPermission: superDefaultOptions.viewPermission,
closeOnSubmit: superDefaultOptions.closeOnSubmit,
submitOnChange: superDefaultOptions.submitOnChange,
submitOnClose: superDefaultOptions.submitOnClose,
editable: superDefaultOptions.editable,
baseApplication: superDefaultOptions.baseApplication,
top: superDefaultOptions.top,
left: superDefaultOptions.left,
popOut: superDefaultOptions.popOut,
minimizable: superDefaultOptions.minimizable,
resizable: superDefaultOptions.resizable,
id: superDefaultOptions.id,
dragDrop: superDefaultOptions.dragDrop,
filters: superDefaultOptions.filters,
title: superDefaultOptions.title,
width: superDefaultOptions.width,
height: superDefaultOptions.height,
scrollY: superDefaultOptions.scrollY,
});
}
}

View file

@ -10,9 +10,10 @@ export default async function registerHandlebarsPartials(): Promise<void> {
"systems/ds4/templates/actor/partials/spells-overview.hbs",
"systems/ds4/templates/actor/partials/overview-add-button.hbs",
"systems/ds4/templates/actor/partials/overview-control-buttons.hbs",
"systems/ds4/templates/actor/partials/attributes-traits.hbs",
"systems/ds4/templates/actor/partials/core-values.hbs",
"systems/ds4/templates/actor/partials/combat-values.hbs",
"systems/ds4/templates/actor/partials/profile.hbs",
"systems/ds4/templates/actor/partials/values-tab.hbs",
"systems/ds4/templates/actor/partials/character-progression.hbs",
"systems/ds4/templates/actor/partials/special-creature-abilities-overview.hbs",
"systems/ds4/templates/actor/partials/character-inventory.hbs",
@ -22,6 +23,7 @@ export default async function registerHandlebarsPartials(): Promise<void> {
"systems/ds4/templates/actor/partials/item-list-entry.hbs",
"systems/ds4/templates/actor/partials/currency.hbs",
"systems/ds4/templates/common/partials/rollable-image.hbs",
"systems/ds4/templates/actor/partials/core-value.hbs",
];
await loadTemplates(templatePaths);
}

View file

@ -1,56 +0,0 @@
@use "../utils/colors";
@use "../utils/typography";
@use "../utils/variables";
.attributes-traits {
margin-top: variables.$margin-sm;
.attribute {
.attribute-label {
@include typography.font-heading-upper;
font-size: 2em;
text-align: center;
}
.attribute-value {
border: variables.$border-groove;
font-size: 1.5em;
text-align: center;
padding-left: 2px;
padding-right: 2px;
gap: 0;
input,
.attribute-value-total {
grid-column: span 2;
line-height: variables.$default-input-height;
}
.attribute-value-arrow {
padding: 0 5px;
}
}
}
.trait {
.trait-label {
color: transparent;
@include typography.font-heading-upper;
font-size: 2em;
text-align: center;
//text-shadow: -1px 1px 0 $c-black, 1px 1px 0 $c-black, 1px -1px 0 $c-black, -1px -1px 0 $c-black;
-webkit-text-stroke: 1px colors.$c-black;
}
.trait-value {
border: variables.$border-groove;
font-size: 1.5em;
text-align: center;
padding-left: 2px;
padding-right: 2px;
gap: 0;
input,
.trait-value-total {
grid-column: span 2;
line-height: variables.$default-input-height;
}
.trait-value-arrow {
padding: 0 5px;
}
}
}
}

View file

@ -0,0 +1,36 @@
@use "../utils/colors";
@use "../utils/typography";
@use "../utils/variables";
.ds4-core-value {
align-items: center;
display: flex;
&__label {
@include typography.font-heading-upper;
flex: 1;
font-size: 2em;
text-align: center;
}
&__value {
align-items: center;
display: flex;
flex: 1.1;
font-size: 1.2em;
gap: 0.15em;
text-align: center;
}
&__value-input,
&__value-total {
flex: 1 1 4em;
}
&--trait {
.ds4-core-value__label {
-webkit-text-stroke: 1px colors.$c-black;
color: transparent;
}
}
}

View file

@ -0,0 +1,10 @@
@use "../utils/colors";
@use "../utils/typography";
@use "../utils/variables";
.ds4-core-values {
column-gap: 0.5em;
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 0.5em;
}

View file

@ -11,7 +11,8 @@
/* Styles limited to ds4 sheets */
.ds4 {
@include meta.load-css("components/attributes_traits");
@include meta.load-css("components/core_values");
@include meta.load-css("components/core_value");
@include meta.load-css("components/apps");
@include meta.load-css("components/basic_property");
@include meta.load-css("components/character_progression");

View file

@ -2,7 +2,7 @@
{{!-- Sheet Header --}}
<header class="sheet-header">
<img class="profile-img" src="{{actor.img}}" data-edit="img" alt="Actor Icon" title="{{actor.name}}"
height="100" width="100" />
height="100" width="100" />
<div class="header-fields flexrow">
<h1 class="charname">
<label for="actor.name" class="hidden">Name</label>
@ -15,68 +15,62 @@
<label class="basic-property-label"
for="data.baseInfo.race">{{config.i18n.characterBaseInfo.race}}</label>
<input type="text" name="data.baseInfo.race" id="data.baseInfo.race" value="{{data.baseInfo.race}}"
data-dtype="String" />
data-dtype="String" />
</div>
<div class="basic-property">
<label class="basic-property-label"
for="data.baseInfo.culture">{{config.i18n.characterBaseInfo.culture}}</label>
<input id="data.baseInfo.culture" type="text" name="data.baseInfo.culture"
value="{{data.baseInfo.culture}}"
data-dtype="String" />
value="{{data.baseInfo.culture}}" data-dtype="String" />
</div>
<div class="basic-property flex125">
<label class="basic-property-label"
for="data.progression.progressPoints.used">{{config.i18n.characterProgression.progressPoints}}</label>
for="data.progression.progressPoints.used">{{config.i18n.characterProgression.progressPoints}}</label>
<div class="flexrow">
<input id="data.progression.progressPoints.used" type="number"
name="data.progression.progressPoints.used"
value="{{data.progression.progressPoints.used}}" data-dtype="Number" />
name="data.progression.progressPoints.used" value="{{data.progression.progressPoints.used}}"
data-dtype="Number" />
<span class="input-divider"> / </span>
<label class="hidden" for="data.progression.progressPoints.total">Total
Progression Points</label>
<input type="number"
id="data.progression.progressPoints.total"
name="data.progression.progressPoints.total"
value="{{data.progression.progressPoints.total}}"
data-dtype="Number" />
<input type="number" id="data.progression.progressPoints.total"
name="data.progression.progressPoints.total"
value="{{data.progression.progressPoints.total}}" data-dtype="Number" />
</div>
</div>
<div class="basic-property flex125">
<label class="basic-property-label"
for="data.progression.talentPoints.used">{{config.i18n.characterProgression.talentPoints}}</label>
for="data.progression.talentPoints.used">{{config.i18n.characterProgression.talentPoints}}</label>
<div class="flexrow">
<input type="number" name="data.progression.talentPoints.used"
id="data.progression.talentPoints.used"
value="{{data.progression.talentPoints.used}}" data-dtype="Number" />
id="data.progression.talentPoints.used" value="{{data.progression.talentPoints.used}}"
data-dtype="Number" />
<span class="input-divider"> / </span>
<label for="data.progression.talentPoints.total" class="hidden">Total Talent Points</label>
<input type="number" name="data.progression.talentPoints.total" id="data.progression.talentPoints.total"
value="{{data.progression.talentPoints.total}}" data-dtype="Number" />
<input type="number" name="data.progression.talentPoints.total"
id="data.progression.talentPoints.total" value="{{data.progression.talentPoints.total}}"
data-dtype="Number" />
</div>
</div>
<div class="basic-property">
<label class="basic-property-label"
for="data.baseInfo.class">{{config.i18n.characterBaseInfo.class}}</label>
<input type="text" id="data.baseInfo.class" name="data.baseInfo.class"
value="{{data.baseInfo.class}}" data-dtype="String" />
value="{{data.baseInfo.class}}" data-dtype="String" />
</div>
<div class="basic-property">
<label class="basic-property-label"
for="data.baseInfo.heroClass">{{config.i18n.characterBaseInfo.heroClass}}</label>
for="data.baseInfo.heroClass">{{config.i18n.characterBaseInfo.heroClass}}</label>
<input type="text" id="data.baseInfo.heroClass" name="data.baseInfo.heroClass"
value="{{data.baseInfo.heroClass}}"
data-dtype="String" />
value="{{data.baseInfo.heroClass}}" data-dtype="String" />
</div>
</div>
</div>
<div class="character-values">
{{> systems/ds4/templates/actor/partials/attributes-traits.hbs}}
{{> systems/ds4/templates/actor/partials/combat-values.hbs}}
</div>
</header>
{{!-- Sheet Tab Navigation --}}
<nav class="sheet-tabs tabs" data-group="primary">
<a class="item" data-tab="values">{{localize 'DS4.HeadingValues'}}</a>
<a class="item" data-tab="inventory">{{localize 'DS4.HeadingInventory'}}</a>
<a class="item" data-tab="spells">{{localize 'DS4.HeadingSpells'}}</a>
<a class="item" data-tab="talents-abilities">{{localize 'DS4.HeadingTalentsAbilities'}}</a>
@ -88,7 +82,10 @@
<!-- prettier-ignore-start -->
{{!-- Sheet Body (remove indentation to avoid annoying Handlebars auto-indent) --}}
<section class="sheet-body">
{{!-- Items Tab --}}
{{!-- Values Tab --}}
{{> systems/ds4/templates/actor/partials/values-tab.hbs}}
{{!-- Inventory Tab --}}
{{> systems/ds4/templates/actor/partials/character-inventory.hbs}}
{{!-- Spells Tab --}}

View file

@ -49,14 +49,11 @@
</div>
</div>
</div>
<div class="character-values">
{{> systems/ds4/templates/actor/partials/attributes-traits.hbs}}
{{> systems/ds4/templates/actor/partials/combat-values.hbs}}
</div>
</header>
{{!-- Sheet Tab Navigation --}}
<nav class="sheet-tabs tabs" data-group="primary">
<a class="item" data-tab="values">{{localize 'DS4.HeadingValues'}}</a>
<a class="item" data-tab="inventory">{{localize 'DS4.HeadingInventory'}}</a>
<a class="item" data-tab="special-creature-abilities">{{localize 'DS4.HeadingSpecialCreatureAbilities'}}</a>
<a class="item" data-tab="spells">{{localize 'DS4.HeadingSpells'}}</a>
@ -65,7 +62,10 @@
{{!-- Sheet Body --}}
<section class="sheet-body">
{{!-- Items Tab --}}
{{!-- Values Tab --}}
{{> systems/ds4/templates/actor/partials/values-tab.hbs}}
{{!-- Inventory Tab --}}
{{> systems/ds4/templates/actor/partials/creature-inventory.hbs}}
{{!-- Special Creature Abilities Tab --}}

View file

@ -1,56 +0,0 @@
{{!-- ======================================================================== --}}
{{!-- INLINE PARTIAL DEFINITIONS --}}
{{!-- ======================================================================== --}}
{{!--
!-- Render an attribute.
!--
!-- @param attribute-label: The label to display for the attribute
!-- @param attribute-key: The key of the attribute
!-- @param attribute-data: The data for the attribute
--}}
{{#*inline "attribute"}}
<div class="attribute flexrow"><label for="data.attributes.body.total"
class="attribute-label ">{{attribute-label}}</label>
<div class="attribute-value flex15 grid grid-8col"><input type="number"
name="data.attributes.{{attribute-key}}.base" value='{{attribute-data.base}}' data-dtype="Number"
title="{{attribute-label}} {{localize 'DS4.TooltipBaseValue'}}" /><span> +
</span><input type="number" name="data.attributes.{{attribute-key}}.mod" value='{{attribute-data.mod}}'
data-dtype="Number" title="{{attribute-label}} {{localize 'DS4.TooltipModifier'}}" /><span
class="attribute-value-arrow">➞</span><span class="attribute-value-total"
title="{{attribute-label}}: {{attribute-data.tooltip}}">{{attribute-data.total}}</span>
</div>
</div>
{{/inline}}
{{!--
!-- Render a trait.
!--
!-- @param trait-label: The label to display for the trait
!-- @param trait-key: The key of the trait
!-- @param trait-data: The data for the trait
--}}
{{#*inline "trait"}}
<div class="trait flexrow"><label for="data.traits.strength.total" class="trait-label">{{trait-label}}</label>
<div class="trait-value flex15 grid grid-8col"><input type="number" name="data.traits.{{trait-key}}.base"
value='{{trait-data.base}}' data-dtype="Number"
title="{{trait-label}} {{localize 'DS4.TooltipBaseValue'}}" /><span> +
</span><input type="number" name="data.traits.{{trait-key}}.mod" value='{{trait-data.mod}}' data-dtype="Number"
title="{{trait-label}} {{localize 'DS4.TooltipModifier'}}" /><span class=" trait-value-arrow">➞</span><span
class="trait-value-total" title="{{trait-label}}: {{trait-data.tooltip}}">{{trait-data.total}}</span></div>
</div>
{{/inline}}
{{!-- ======================================================================== --}}
<div class="attributes-traits grid grid-3col">
{{#each config.i18n.attributes as |attribute-label attribute-key|}}
{{> attribute attribute-label=attribute-label attribute-key=attribute-key attribute-data=(lookup ../data.attributes
attribute-key)}}
{{/each}}
{{#each config.i18n.traits as |trait-label trait-key|}}
{{> trait trait-label=trait-label trait-key=trait-key trait-data=(lookup ../data.traits trait-key)}}
{{/each}}
</div>

View file

@ -0,0 +1,27 @@
{{!--
!-- Render a core value.
!--
!-- @param core-value-label: The label to display for the core value
!-- @param core-value-key: The key of the core value
!-- @param core-value-data: The data for the core value
!-- @param core-value-variant: The variant of the core value, i.e. attribute or trait
--}}
<div class="ds4-core-value ds4-core-value--{{core-value-variant}}">
<label for="data.{{core-value-variant}}s.{{core-value-key}}.base"
class="ds4-core-value__label">{{core-value-label}}</label>
<div class="ds4-core-value__value">
<input class="ds4-core-value__value-input" type="number"
name="data.{{core-value-variant}}s.{{core-value-key}}.base"
id="data.{{core-value-variant}}s.{{core-value-key}}.base" value='{{core-value-data.base}}'
data-dtype="Number" title="{{core-value-label}} {{localize 'DS4.TooltipBaseValue'}}" />
<span>+</span>
<input class="ds4-core-value__value-input" type="number"
name="data.{{core-value-variant}}s.{{core-value-key}}.mod"
id="data.{{core-value-variant}}s.{{core-value-key}}.mod" value='{{core-value-data.mod}}' data-dtype="Number"
title="{{core-value-label}} {{localize 'DS4.TooltipModifier'}}" />
<span class="ds4-core-value__value-arrow">➞</span>
<span class="ds4-core-value__value-total"
title="{{core-value-label}}: {{core-value-data.tooltip}}">{{core-value-data.total}}</span>
</div>
</div>

View file

@ -0,0 +1,11 @@
<div class="ds4-core-values">
{{#each config.i18n.attributes as |attribute-label attribute-key|}}
{{> systems/ds4/templates/actor/partials/core-value.hbs core-value-label=attribute-label
core-value-key=attribute-key core-value-data=(lookup ../data.attributes
attribute-key) core-value-variant="attribute"}}
{{/each}}
{{#each config.i18n.traits as |trait-label trait-key|}}
{{> systems/ds4/templates/actor/partials/core-value.hbs core-value-label=trait-label core-value-key=trait-key
core-value-data=(lookup ../data.traits trait-key) core-value-variant="trait"}}
{{/each}}
</div>

View file

@ -0,0 +1,4 @@
<div class="tab values" data-group="primary" data-tab="values">
{{> systems/ds4/templates/actor/partials/core-values.hbs}}
{{> systems/ds4/templates/actor/partials/combat-values.hbs}}
</div>