Added Resources, improved layout
This commit is contained in:
@@ -92,7 +92,7 @@ var skillOperations = [
|
||||
];
|
||||
|
||||
Template.effectEdit.created = function(){
|
||||
var statGroup = statsDict[this.data.stat].group;
|
||||
var statGroup = statsDict[this.data.stat] && statsDict[this.data.stat].group;
|
||||
this.selectedStatGroup = new ReactiveVar(statGroup);
|
||||
};
|
||||
|
||||
|
||||
@@ -16,5 +16,4 @@
|
||||
|
||||
.containerMain.featureDescription {
|
||||
white-space: pre-line;
|
||||
padding: 16px 0 0 0;
|
||||
}
|
||||
|
||||
@@ -1,21 +1,49 @@
|
||||
<template name="features">
|
||||
<div fit>
|
||||
<div class="scroll-y" fit>
|
||||
<div class="resources"><!--resources-->
|
||||
|
||||
</div>
|
||||
<div class="actions">
|
||||
|
||||
<div class="resourceCards" layout horizontal wrap>
|
||||
<!--Armor-->
|
||||
<paper-shadow class="card container statCard" hero-id="main" {{detailHero}} layout horizontal>
|
||||
<div class="containerLeft">
|
||||
{{attributeValue "armor"}}
|
||||
</div>
|
||||
<div class="containerRight" flex horizontal layout center>
|
||||
Armor Class
|
||||
</div>
|
||||
<paper-ripple fit></paper-ripple>
|
||||
</paper-shadow>
|
||||
<!--Speed-->
|
||||
<paper-shadow class="card container statCard" hero-id="main" {{detailHero}} layout horizontal>
|
||||
<div class="containerLeft">
|
||||
{{attributeValue "speed"}}
|
||||
</div>
|
||||
<div class="containerRight" flex horizontal layout center>
|
||||
Speed
|
||||
</div>
|
||||
<paper-ripple fit></paper-ripple>
|
||||
</paper-shadow>
|
||||
<!--ki-->
|
||||
{{>resource name="ki" title="Ki Points" char=this}}
|
||||
<!--sorceryPoints-->
|
||||
{{>resource name="sorceryPoints" title="Sorcery Points" char=this}}
|
||||
<!--rages-->
|
||||
{{>resource name="rages" title="Rages" char=this}}
|
||||
<!--superiorityDice-->
|
||||
{{>resource name="superiorityDice" title="Superiority Dice" char=this}}
|
||||
<!--expertiseDice-->
|
||||
{{>resource name="expertiseDice" title="Expertise Dice" char=this}}
|
||||
{{>gridPadding num="6" class="card container"}}
|
||||
</div>
|
||||
<!--<div class="cardHeader" layout horizontal center>Features</div>-->
|
||||
<div class="containers">
|
||||
{{#each features}}
|
||||
<paper-shadow class="card container featureCard" hero-id="main" {{detailHero}} style="order: {{featureOrder}};">
|
||||
<paper-shadow class="card container featureCard" hero-id="main" {{detailHero}}>
|
||||
<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero}}>
|
||||
<div class="containerName subhead" hero-id="title" flex {{detailHero}}>{{name}}</div>
|
||||
{{#if hasUses}}<div class="subhead" style="margin-right: 8px">{{usesLeft}}/{{usesValue}}</div>{{/if}}
|
||||
<paper-ripple fit></paper-ripple>
|
||||
</div>
|
||||
<div flex class="containerMain body1 featureDescription">{{description}}</div>
|
||||
{{#if description}}<div flex class="containerMain body1 featureDescription">{{description}}</div>{{/if}}
|
||||
{{#if hasUses}}
|
||||
<div class="containerFoot" layout horizontal center end-justified>
|
||||
{{#if usesLeft}}<paper-button class="useFeature">Use</paper-button>{{/if}}
|
||||
@@ -36,4 +64,23 @@
|
||||
aria-label="Add"
|
||||
hero-id="main"></paper-fab>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template name="resource">
|
||||
{{#if char.attributeBase name}}
|
||||
<paper-shadow class="card container" hero-id="main" {{detailHero}} layout horizontal>
|
||||
<div class="containerLeft">
|
||||
<div class="resourceValue">{{char.attributeValue name}}</div>
|
||||
<!--<div class="resourceMax">{{char.attributeBase name}}</div>-->
|
||||
<div class="resourceButtons">
|
||||
<paper-icon-button class="resourceUp" icon="arrow-drop-up" disabled={{cantIncrement}}></paper-icon-button>
|
||||
<paper-icon-button class="resourceDown" icon="arrow-drop-down" disabled={{cantDecrement}}></paper-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containerRight" flex relative horizontal layout center>
|
||||
{{title}}
|
||||
<paper-ripple fit></paper-ripple>
|
||||
</div>
|
||||
</paper-shadow>
|
||||
{{/if}}
|
||||
</template>
|
||||
|
||||
@@ -40,4 +40,30 @@ Template.features.events({
|
||||
var featureId = this._id;
|
||||
Features.update(featureId, {$set: {used: 0}});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Template.resource.helpers({
|
||||
cantIncrement: function(){
|
||||
return !(this.char.attributeValue(this.name) < this.char.attributeBase(this.name));
|
||||
},
|
||||
cantDecrement: function(){
|
||||
return !(this.char.attributeValue(this.name) > 0);
|
||||
}
|
||||
});
|
||||
|
||||
Template.resource.events({
|
||||
"tap .resourceUp": function(event){
|
||||
if(this.char.attributeValue(this.name) < this.char.attributeBase(this.name)){
|
||||
var modifier = {$inc: {}};
|
||||
modifier.$inc[this.name + ".adjustment"] = 1;
|
||||
Characters.update(this.char._id, modifier, {validate: false});
|
||||
}
|
||||
},
|
||||
"tap .resourceDown": function(event){
|
||||
if(this.char.attributeValue(this.name) > 0){
|
||||
var modifier = {$inc: {}};
|
||||
modifier.$inc[this.name + ".adjustment"] = -1;
|
||||
Characters.update(this.char._id, modifier, {validate: false});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -8,36 +8,100 @@
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.container {
|
||||
.containerLeft {
|
||||
padding: 16px;
|
||||
background-color: #2196F3;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
border-radius: 2px 0 0 2px;
|
||||
|
||||
/* same style as display-1 */
|
||||
font-size: 34px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
color: rgba(255,255,255,0.54);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.containerRight {
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
/* same style as subhead */
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
color: #000;
|
||||
color: rgba(0,0,0,0.87);
|
||||
letter-spacing: 0.010em;
|
||||
}
|
||||
|
||||
.resourceValue {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.resourceMax {
|
||||
display: inline-block;
|
||||
align-self: flex-end;
|
||||
|
||||
/* same style as subhead */
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
color: rgba(255,255,255,0.54);
|
||||
letter-spacing: 0.010em;
|
||||
}
|
||||
|
||||
.resourceMax:before {
|
||||
content: "/";
|
||||
}
|
||||
|
||||
.resourceButtons {
|
||||
margin: -16px -16px -16px 8px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.resourceButtons paper-icon-button{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.resourceButtons paper-icon-button[disabled]{
|
||||
color: rgba(255, 255, 255, 0.26);
|
||||
}
|
||||
|
||||
.resourceButtons /deep/ core-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.containerTop {
|
||||
cursor: pointer;
|
||||
margin: -16px -16px 0 -16px;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
border-radius: 2px 2px 0 0;
|
||||
}
|
||||
|
||||
.equipmentTop {
|
||||
margin: -16px -16px 0 -16px;
|
||||
padding: 16px;
|
||||
border-bottom: rgba(0,0,0,0.12) solid 1px;
|
||||
}
|
||||
|
||||
.containerMain {
|
||||
margin: 0 -16px -16px -16px;
|
||||
padding-bottom: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.equipmentMain {
|
||||
margin: 0 -16px -16px -16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.inventoryItem {
|
||||
background: white;
|
||||
transition: box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: box-shadow 0.1s ease;
|
||||
height: 40px;
|
||||
margin: 1px 0 1px 0;
|
||||
font-size: 16px;
|
||||
@@ -68,3 +132,7 @@
|
||||
background-color: rgb(232, 232, 232);
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#inventory .containerMain {
|
||||
padding: 0 0 16px 0;
|
||||
}
|
||||
|
||||
@@ -33,11 +33,11 @@
|
||||
<input id="quantityInput" type="number" value={{quantity}}>
|
||||
</paper-input-decorator>
|
||||
<!--Weight-->
|
||||
<paper-input-decorator label="Weight" floatinglabel>
|
||||
<paper-input-decorator label="Weight Each (lbs)" floatinglabel>
|
||||
<input id="weightInput" type="number" value={{weight}}>
|
||||
</paper-input-decorator>
|
||||
<!--Value-->
|
||||
<paper-input-decorator label="Value" floatinglabel>
|
||||
<paper-input-decorator label="Value Each (GP)" floatinglabel>
|
||||
<input id="valueInput" type="number" value={{value}}>
|
||||
</paper-input-decorator>
|
||||
<!--Description-->
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
#persona .containerMain{
|
||||
margin: 0;
|
||||
padding: 16px 0 0 0;
|
||||
white-space: pre-line;
|
||||
}
|
||||
@@ -1,3 +1,7 @@
|
||||
#spells .containerMain {
|
||||
padding: 0 0 16px 0;
|
||||
}
|
||||
|
||||
#spells .inventoryItem {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,18 @@
|
||||
<template name="spells">
|
||||
<div fit>
|
||||
<div id="spells" class="scroll-y" fit>
|
||||
<div class="resourceCards" layout horizontal wrap>
|
||||
{{>resource name="level1SpellSlots" title="Level 1" char=this}}
|
||||
{{>resource name="level2SpellSlots" title="Level 2" char=this}}
|
||||
{{>resource name="level3SpellSlots" title="Level 3" char=this}}
|
||||
{{>resource name="level4SpellSlots" title="Level 4" char=this}}
|
||||
{{>resource name="level5SpellSlots" title="Level 5" char=this}}
|
||||
{{>resource name="level6SpellSlots" title="Level 6" char=this}}
|
||||
{{>resource name="level7SpellSlots" title="Level 7" char=this}}
|
||||
{{>resource name="level8SpellSlots" title="Level 8" char=this}}
|
||||
{{>resource name="level9SpellSlots" title="Level 9" char=this}}
|
||||
{{>gridPadding num="8" class="card container"}}
|
||||
</div>
|
||||
<div class="containers">
|
||||
{{#each spellLists}}
|
||||
<paper-shadow class="card container" hero-id="main" {{detailHero}} style="order: {{order}};">
|
||||
@@ -18,7 +30,7 @@
|
||||
</div>
|
||||
</div>
|
||||
{{#if settings.showUnprepared}}
|
||||
{{#if maxPrepared}}<div class="subhead">{{numPrepared}} / {{maxPrepared}}</div>{{/if}}
|
||||
{{#if maxPrepared}}<div class="subhead">{{numPrepared}} / {{evaluate charId maxPrepared}}</div>{{/if}}
|
||||
<paper-icon-button class="finishPrep" icon="done"></paper-icon-button>
|
||||
{{else}}
|
||||
<paper-icon-button class="prepSpells" icon="book"></paper-icon-button>
|
||||
|
||||
Reference in New Issue
Block a user