From 86dc67dea7dc3a7df37c0d8b1deea92b936afa69 Mon Sep 17 00:00:00 2001 From: Stas Tserkovny Date: Fri, 3 Jul 2020 17:57:32 -0600 Subject: [PATCH] Style traits, rollables, relationships, weapons Styles the rest of the sheet for the initial style pass --- module/items/relationship.ts | 12 ++++++++- styles/burningwheel.scss | 4 +++ styles/character/bits.scss | 13 ++++++++++ styles/character/character.scss | 32 ++++++++++++++++++----- styles/character/equipment.scss | 2 -- styles/character/learning.scss | 17 +++++++++---- styles/character/relationships.scss | 20 ++++++++++++--- styles/character/weapons.scss | 29 ++++++++++++++++++--- styles/mixins.scss | 2 ++ template.yml | 1 + templates/character-sheet.html | 39 +++++++++++++---------------- templates/parts/learning.html | 4 +-- templates/parts/relationships.html | 4 +-- templates/parts/rollable-item.html | 6 +++++ templates/parts/weapons.html | 4 +++ 15 files changed, 143 insertions(+), 46 deletions(-) diff --git a/module/items/relationship.ts b/module/items/relationship.ts index 64751af3..4765ca0d 100644 --- a/module/items/relationship.ts +++ b/module/items/relationship.ts @@ -1,9 +1,18 @@ import { BWActor } from "../actor.js"; +import { DisplayClass } from "./item.js"; export class Relationship extends Item { prepareData() { this.data.data.safeId = this._id; this.data.data.aptitude = parseInt(this.actor.data.data.circles.exp, 10) || 0; + + if (this.data.data.hateful || this.data.data.enmity) { + this.data.data.cssClass = "relationship-hostile"; + } else if (this.data.data.romantic || this.data.data.immediateFamily) { + this.data.data.cssClass = "relationship-friendly"; + } else { + this.data.data.cssClass = "relationship-neutral"; + } } get actor(): BWActor { @@ -17,13 +26,14 @@ interface RelationshipDataRoot extends BaseEntityData { data: RelationshipData; } -export interface RelationshipData { +export interface RelationshipData extends DisplayClass { description: string; forbidden: boolean; immediateFamily: boolean; otherFamily: boolean; romantic: boolean; hateful: boolean; + enmity: boolean; influence: string; building: string; buildingProgress: number; diff --git a/styles/burningwheel.scss b/styles/burningwheel.scss index 182ad14f..816df772 100644 --- a/styles/burningwheel.scss +++ b/styles/burningwheel.scss @@ -29,6 +29,10 @@ input.exponent { max-height: 28px; } +input.hidden { + display: none; +} + .flex-row { display: flex; flex-direction: row; diff --git a/styles/character/bits.scss b/styles/character/bits.scss index 97e7f6ca..cc957c54 100644 --- a/styles/character/bits.scss +++ b/styles/character/bits.scss @@ -1,3 +1,5 @@ +@import "../mixins.scss"; + .beliefs, .instincts { .bits-item { & > div { @@ -30,6 +32,13 @@ width: calc(33% - 10px); margin: 5px; + .trait { + @include colored-item(black); + textarea { + background-color: transparent; + } + } + i { float: right; font-size: 12px; @@ -42,4 +51,8 @@ color: #FF0000; } } + + .trait-checkbox:checked + div > textarea { + display: none; + } } diff --git a/styles/character/character.scss b/styles/character/character.scss index 1d3aeb6c..8cbc54af 100644 --- a/styles/character/character.scss +++ b/styles/character/character.scss @@ -1,6 +1,11 @@ @import "../mixins.scss"; + +.sheet { + min-width: 800px; +} .character { + min-width: 800px; textarea { font-family: unset; } @@ -60,13 +65,26 @@ column-gap: 5px; row-gap: 5px; - .rollable:hover { - background-color: $hover-color; + .rollable { + @include colored-item(black); + height: min-content; + + select.shade, input.exponent, button { + width: 3em; + height: 2em; + } } - .rollable-name { - width: 33%; + input.rollable-name { + border: 0; + border-bottom: 1px solid black; + border-radius: 0; + padding: 1px 0px; + } + .rollable-name { + width: calc(100% - 10.5em); margin-right: 1em; + font-size: 1.125em; } .collapse-checkbox { @@ -108,11 +126,13 @@ } .attribute-subrow { + display: inline-block; + label { font-size: 1.125em; - display: block; - width: 50%; + display: inline-block; text-align: center; + margin-left: 20px; } } } diff --git a/styles/character/equipment.scss b/styles/character/equipment.scss index 072b49d1..6e4c4fb9 100644 --- a/styles/character/equipment.scss +++ b/styles/character/equipment.scss @@ -5,8 +5,6 @@ column-gap: 1px; row-gap: 1px; & > div { - padding: 1px 3px; - & i { margin-bottom: 3px; } diff --git a/styles/character/learning.scss b/styles/character/learning.scss index a878cf34..aa0bb889 100644 --- a/styles/character/learning.scss +++ b/styles/character/learning.scss @@ -15,17 +15,24 @@ .learning { width: calc(50% - 10px); - margin: 5px; - &:hover { - background-color: $hover-color; + height: min-content; + margin: 1px; + @include colored-item(black); + + button { + width: 3em; + height: 2em; } h3 { - width: calc(100% - 80px); - margin-left: 10px; + width: calc(100% - 5em); + margin-top: 3px; font-weight: bold; + text-align: center; } .learning-xp { + margin-left: 1.5em; + margin-bottom: 3px; @include progress-ticks; } } diff --git a/styles/character/relationships.scss b/styles/character/relationships.scss index 6e54317c..3e5f6e42 100644 --- a/styles/character/relationships.scss +++ b/styles/character/relationships.scss @@ -8,13 +8,25 @@ width: calc(95% - 36px); } - .relationship > i { - width: 18px; + .relationship { + & > i { + width: 18px; - &:hover { - color: red; + &:hover { + color: red; + } } } + + .relationship-hostile { + @include colored-item(red); + } + .relationship-friendly { + @include colored-item(green); + } + .relationship-neutral { + @include colored-item(black); + } } .reputations, .affiliations { width: 30%; diff --git a/styles/character/weapons.scss b/styles/character/weapons.scss index 365e7a8e..b8e3aba9 100644 --- a/styles/character/weapons.scss +++ b/styles/character/weapons.scss @@ -8,11 +8,28 @@ } .weapon-grid { - grid-template-columns: 5fr repeat(7, 1fr) 2fr; + column-gap: 0px; + row-gap: 0px; + grid-template-columns: 5fr repeat(7, 1fr) 2fr 0; + .weapon-header { + background-color: rgba(black, .15); + } + + .weapon-row:nth-child(2n) { + background-color: rgba(black, .05); + } } .ranged-grid { - grid-template-columns: 5fr repeat(5, 1fr) 2fr; + column-gap: 0px; + row-gap: 0px; + grid-template-columns: 5fr repeat(5, 1fr) 2fr 0; + .weapon-header { + background-color: rgba(black, .15); + } + .weapon-row:nth-child(2n) { + background-color: rgba(black, .05); + } .weapon-ims { margin-bottom: -10px; } @@ -37,12 +54,18 @@ } .armor-grid { - grid-template-columns: 1fr 1fr 75px 4fr; + grid-template-columns: 2.75em 2.75em 6em 1fr; + row-gap: 0; + column-gap: 0; + .armor-header { + background-color: rgba(black, .15); + } .armor-row { font-size: 16px; text-align: center; border-bottom: 1px solid black; + margin: 0 2px; } } } diff --git a/styles/mixins.scss b/styles/mixins.scss index 3d3daf58..744373f0 100644 --- a/styles/mixins.scss +++ b/styles/mixins.scss @@ -69,6 +69,8 @@ $hover-color: rgba(0,0,0,0.1); } @mixin colored-item($color) { + margin: 1px; + padding: 1px 3px; border-radius: 4px; border: 2px solid rgba($color, .15); diff --git a/template.yml b/template.yml index e30fee66..85414f76 100644 --- a/template.yml +++ b/template.yml @@ -125,6 +125,7 @@ Item: name: '' traittype: '' text: '' + collapsed: true skill: name: '' shade: B diff --git a/templates/character-sheet.html b/templates/character-sheet.html index 7469dc8c..fd2c1c52 100644 --- a/templates/character-sheet.html +++ b/templates/character-sheet.html @@ -97,12 +97,15 @@

Die Traits

{{#each traits.die as |trait|}} +
-

- {{ trait.name }} - - -

+
{{/each}} @@ -112,12 +115,15 @@

Call-on Traits

{{#each traits.callon as |trait|}} +
-

- {{ trait.name }} - - -

+
{{/each}} @@ -129,14 +135,9 @@

Stats

- {{> "systems/burningwheel/templates/parts/rollable-item.html" statName="Will" stat=data.will namePrefix="data.will"}} + {{> "systems/burningwheel/templates/parts/rollable-item.html" statName="Will" stat=data.will namePrefix="data.will" taxName="data.willTax" taxValue=data.willTax }} {{> "systems/burningwheel/templates/parts/rollable-item.html" statName="Power" stat=data.power namePrefix="data.power"}} {{> "systems/burningwheel/templates/parts/rollable-item.html" statName="Agility" stat=data.agility namePrefix="data.agility"}} -
- - -
-
{{> "systems/burningwheel/templates/parts/rollable-item.html" statName="Perception" stat=data.perception namePrefix="data.perception"}} {{> "systems/burningwheel/templates/parts/rollable-item.html" statName="Forte" stat=data.forte namePrefix="data.forte"}} {{> "systems/burningwheel/templates/parts/rollable-item.html" statName="Speed" stat=data.speed namePrefix="data.speed"}} @@ -150,13 +151,9 @@

Attributes

{{> "systems/burningwheel/templates/parts/rollable-item.html" statName="Health" stat=data.health namePrefix="data.health" routine=true}} {{> "systems/burningwheel/templates/parts/rollable-item.html" statName="Steel" stat=data.steel namePrefix="data.steel" routine=true}} {{> "systems/burningwheel/templates/parts/rollable-item.html" statName="Circles" stat=data.circles namePrefix="data.circles" routine=true}} - {{> "systems/burningwheel/templates/parts/rollable-item.html" statName="Resources" stat=data.resources namePrefix="data.resources" routine=true}} + {{> "systems/burningwheel/templates/parts/rollable-item.html" statName="Resources" stat=data.resources namePrefix="data.resources" routine=true taxName="data.resourcesTax" taxValue=data.resourcesTax }} {{> "systems/burningwheel/templates/parts/rollable-item.html" statName=data.custom1.name stat=data.custom1 namePrefix="data.custom1" routine=true customName=true}} {{> "systems/burningwheel/templates/parts/rollable-item.html" statName=data.custom2.name stat=data.custom2 namePrefix="data.custom2" routine=true customName=true}} -
- - -
diff --git a/templates/parts/learning.html b/templates/parts/learning.html index e740adca..ae869203 100644 --- a/templates/parts/learning.html +++ b/templates/parts/learning.html @@ -1,8 +1,8 @@
+ +

{{skill.name}}

- -
{{#multiboxes skill.data.learningProgress needed=skill.data.aptitude}} +
- {{ relationship.name }} = {{ stat }} {{ exp }} + {{ relationship.name }}
diff --git a/templates/parts/rollable-item.html b/templates/parts/rollable-item.html index 69030991..6d59a70a 100644 --- a/templates/parts/rollable-item.html +++ b/templates/parts/rollable-item.html @@ -67,5 +67,11 @@

{{ statName }}

+ {{#if taxName}} +
+ + +
+ {{/if}}
\ No newline at end of file diff --git a/templates/parts/weapons.html b/templates/parts/weapons.html index 36e52286..b85492e1 100644 --- a/templates/parts/weapons.html +++ b/templates/parts/weapons.html @@ -8,6 +8,7 @@
Va
Ws
Length
+
{{#each melee as |m|}}
{{m.name}}
{{m.data.incidental}}
@@ -18,6 +19,7 @@
{{m.data.vsArmor}}
{{m.data.weaponSpeed}}
{{titlecase m.data.weaponLength}}
+
{{/each}}
@@ -29,6 +31,7 @@
Opt
Extr
Max
+
{{#each ranged as |r|}}
{{r.name}}
{{r.data.incidental}}
@@ -37,5 +40,6 @@
{{r.data.optimalRange}}D
{{r.data.extremeRange}}D
{{titlecase r.data.maxRange}}
+
{{/each}}