Style traits, rollables, relationships, weapons

Styles the rest of the sheet for the initial style pass
StasTserk · Jul 4, 2020 · 86dc67d · 86dc67d
1 parent 1fdaaa4
commit 86dc67d
Show file tree

Hide file tree

Showing 15 changed files with 143 additions and 46 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -97,12 +97,15 @@ <h2>Die Traits
                 <i data-action="addTrait" data-id="die" class="fas fa-plus"></i>
             </h2>
             {{#each traits.die as |trait|}}
+                <input type="checkbox" id={{trait._id}}-toggle class="hidden trait-checkbox" data-item-id="{{trait._id}}" data-binding="data.collapsed" {{ checked trait.data.collapsed }}>
                 <div class="trait" data-item-id="{{trait._id}}">
-                    <h3>
-                        {{ trait.name }}
-                        <i class="fas fa-trash" data-action="delItem" data-id="{{trait._id}}"></i>
-                        <i class="fas fa-edit" data-action="editItem" data-id="{{trait._id}}"></i>
-                    </h3>
+                    <label for="{{trait._id}}-toggle">
+                        <h3>
+                            {{ trait.name }}
+                            <i class="fas fa-trash" data-action="delItem" data-id="{{trait._id}}"></i>
+                            <i class="fas fa-edit" data-action="editItem" data-id="{{trait._id}}"></i>
+                        </h3>
+                    </label>
                     <textarea disabled="disabled">{{trait.data.text}}</textarea>
                 </div>
             {{/each}}
@@ -112,12 +115,15 @@ <h2>Call-on Traits
                 <i data-action="addTrait" data-id="call-on" class="fas fa-plus"></i>
             </h2>
             {{#each traits.callon as |trait|}}
+            <input type="checkbox" id={{trait._id}}-toggle class="hidden trait-checkbox" data-item-id="{{trait._id}}" data-binding="data.collapsed" {{ checked trait.data.collapsed }}>
                 <div class="trait" data-item-id="{{trait._id}}">
-                    <h3>
-                        {{ trait.name }}
-                        <i class="fas fa-trash" data-action="delItem" data-id="{{trait._id}}"></i>
-                        <i class="fas fa-edit" data-action="editItem" data-id="{{trait._id}}"></i>
-                    </h3>
+                    <label for="{{trait._id}}-toggle">
+                        <h3>
+                            {{ trait.name }}
+                            <i class="fas fa-trash" data-action="delItem" data-id="{{trait._id}}"></i>
+                            <i class="fas fa-edit" data-action="editItem" data-id="{{trait._id}}"></i>
+                        </h3>
+                    </label>
                     <textarea disabled="disabled">{{ trait.data.text }}</textarea>
                 </div>
             {{/each}}
@@ -129,14 +135,9 @@ <h3>
         <h2 class="section-header"><i class="fas fa-chevron-down"></i>Stats</h2>
     </label>
     <div class="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"}}
-        <div class="attribute-subrow flex-row">
-            <label class="attribute-label">Tax</label>
-            <input type="number" class="circle-input" name="data.willTax" value="{{data.willTax}}">
-        </div>
-        <div></div><div></div>
         {{> "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 @@ <h2 class="section-header"><i class="fas fa-chevron-down"></i>Attributes</h2>
         {{> "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}}
-        <div class="attribute-subrow flex-row">
-            <label class="attribute-label">Tax</label>
-            <input type="number" class="circle-input" name="data.resourcesTax" value="{{data.resourcesTax}}">
-        </div>
         <div class="attributes-derived">
             <div class="attributes-item flex-row">
                 <label class="attribute-label">Reflexes</label>

diff --git a/templates/parts/learning.html b/templates/parts/learning.html
@@ -1,8 +1,8 @@
 <div class="learning flex-row">
+    <i class="fas fa-edit item-action-icon" data-action="editItem" data-id="{{skill._id}}"></i>
+    <i class="fas fa-trash item-action-icon" data-action="delItem" data-id="{{skill._id}}"></i>
     <h3>{{skill.name}}</h3>
     <button class="rollable" data-rollable-name="{{skill.name}}" data-skill-id="{{skill._id}}"><i class="fas fa-dice"></i></button>
-    <i class="fas fa-trash item-action-icon" data-action="delItem" data-id="{{skill._id}}"></i>
-    <i class="fas fa-edit item-action-icon" data-action="editItem" data-id="{{skill._id}}"></i>
     <div class="learning-xp">
         {{#multiboxes skill.data.learningProgress needed=skill.data.aptitude}}
         <input type="radio"

diff --git a/templates/parts/relationships.html b/templates/parts/relationships.html
@@ -1,6 +1,6 @@
-<div class="relationship flex-row">
+<div class="relationship flex-row {{relationship.data.cssClass}}">
     <div class="item-title">
-        {{ relationship.name }} = {{ stat }} {{ exp }}
+        {{ relationship.name }}
     </div>
     <i class="fas fa-edit" data-action="editItem" data-id="{{relationship._id}}"></i>
     <i class="fas fa-trash" data-action="delItem" data-id="{{relationship._id}}"></i>

diff --git a/templates/parts/rollable-item.html b/templates/parts/rollable-item.html
@@ -67,5 +67,11 @@ <h3 class="rollable-name">{{ statName }}</h3>
         <input type="number" class="circle-input" placeholder="F" title="Fate points spent on {{statName}}" name="{{namePrefix}}.fate" value="{{stat.fate}}">
         <input type="number" class="circle-input" placeholder="P" title="Persona points spent on {{statName}}" name="{{namePrefix}}.persona" value="{{stat.persona}}">
         <input type="number" class="circle-input" placeholder="D" title="Deeds points spent on {{statName}}" name="{{namePrefix}}.deeds" value="{{stat.deeds}}">
+        {{#if taxName}}
+        <div class="attribute-subrow">
+            <label class="attribute-label">Tax</label>
+            <input type="number" class="circle-input" name="{{taxName}}" value="{{taxValue}}">
+        </div>
+        {{/if}}
     </div>
 </div>