Fixed and finished implementing attribute summary detail views
This commit is contained in:
@@ -98,7 +98,7 @@ if(Meteor.isServer) Characters.after.insert(function (userId, char) {
|
||||
});
|
||||
|
||||
Effects.attachBehaviour('softRemovable');
|
||||
makeChild(Effects, ['name', 'enabled']); //children of lots of things
|
||||
makeChild(Effects, ["enabled"]); //children of lots of things
|
||||
|
||||
Effects.allow(CHARACTER_SUBSCHEMA_ALLOW);
|
||||
Effects.deny(CHARACTER_SUBSCHEMA_DENY);
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
Template.registerHelper("signedString", function(number){
|
||||
return number > 0? "+" + number : "" + number;
|
||||
return number >= 0? "+" + number : "" + number;
|
||||
});
|
||||
@@ -104,7 +104,7 @@ paper-button {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
|
||||
.clickable, .statCard {
|
||||
.clickable, .statCard, .abilityMiniCard {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
paper-tabs, core-toolbar {
|
||||
background-color: #795548;
|
||||
box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
@@ -21,18 +20,9 @@ paper-tabs ::shadow #ink {
|
||||
|
||||
paper-tabs.transparent-brown {
|
||||
background-color: transparent;
|
||||
color: #795548;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
paper-tabs.transparent-brown::shadow #selectionBar {
|
||||
background-color: #795548;
|
||||
}
|
||||
|
||||
paper-tabs.transparent-brown paper-tab::shadow #ink {
|
||||
color: #795548;
|
||||
}
|
||||
|
||||
core-toolbar.medium-tall {
|
||||
height: 108px;
|
||||
}
|
||||
|
||||
@@ -117,16 +117,16 @@
|
||||
|
||||
<template name="resource">
|
||||
{{#if char.attributeBase name}}
|
||||
<paper-shadow class="card container" hero-id="main" {{detailHero}} layout horizontal>
|
||||
<div class="containerLeft {{getColor}}">
|
||||
<div class="resourceValue">{{char.attributeValue name}}</div>
|
||||
<!--<div class="resourceMax">{{char.attributeBase name}}</div>-->
|
||||
<paper-shadow class="card container" hero-id="main" {{detailHero name char._id}} layout horizontal>
|
||||
<div class="containerLeft {{getColor}}" hero-id="toolbar" {{detailHero name char._id}} >
|
||||
<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 class="resourceValue">{{char.attributeValue name}}</div>
|
||||
<!--<div class="resourceMax">{{char.attributeBase name}}</div>-->
|
||||
</div>
|
||||
<div class="containerRight" flex relative horizontal layout center>
|
||||
<div class="containerRight clickable" flex relative horizontal layout center>
|
||||
{{title}}
|
||||
<paper-ripple fit></paper-ripple>
|
||||
</div>
|
||||
|
||||
@@ -125,5 +125,12 @@ Template.resource.events({
|
||||
modifier.$inc[this.name + ".adjustment"] = -1;
|
||||
Characters.update(this.char._id, modifier, {validate: false});
|
||||
}
|
||||
},
|
||||
"tap .containerRight": function (event, instance) {
|
||||
GlobalUI.setDetail({
|
||||
template: "attributeDialog",
|
||||
data: {name: this.title, statName: this.name, charId: this.char._id},
|
||||
heroId: this.char._id + this.name
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@@ -72,7 +72,7 @@ div#stats {
|
||||
}
|
||||
|
||||
.resourceButtons {
|
||||
margin: -16px -16px -16px 8px;
|
||||
margin: -16px 8px -16px -16px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<div flex class="containerMain">
|
||||
{{#each levels}}{{#if showSlots ..}}
|
||||
<div class="itemSlot">
|
||||
<paper-item class="inventoryItem spellSlot" hero-id="main" {{detailHero}} layout horizontal>
|
||||
<paper-item class="inventoryItem spellSlot" hero-id="main" {{detailHero slotStatName ../_id}} layout horizontal>
|
||||
<div class="slotName">
|
||||
{{name}}
|
||||
</div>
|
||||
|
||||
@@ -113,6 +113,9 @@ Template.spells.helpers({
|
||||
});
|
||||
}
|
||||
return bubbles;
|
||||
},
|
||||
slotStatName: function () {
|
||||
return "level" + this.level +"SpellSlots";
|
||||
}
|
||||
});
|
||||
|
||||
@@ -136,6 +139,16 @@ Template.spells.events({
|
||||
}
|
||||
event.stopPropagation();
|
||||
},
|
||||
"tap .spellSlot": function (event, instance) {
|
||||
var name = "Level " + this.level +" Spell Slots";
|
||||
var stat = "level" + this.level +"SpellSlots";
|
||||
var charId = instance.data._id;
|
||||
GlobalUI.setDetail({
|
||||
template: "attributeDialog",
|
||||
data: {name: name, statName: stat, charId: charId},
|
||||
heroId: charId + stat
|
||||
});
|
||||
},
|
||||
"tap .containerTop": function(event){
|
||||
GlobalUI.setDetail({
|
||||
template: "spellListDialog",
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<template name="abilityMiniCard">
|
||||
<paper-shadow class="card double abilityMiniCard">
|
||||
<div class="abilityScore white-text {{color}}">
|
||||
<paper-shadow class="card double abilityMiniCard"
|
||||
hero-id="main" {{detailHero ability ../_id}}>
|
||||
<div class="abilityScore white-text {{color}}"
|
||||
hero-id="toolbar" {{detailHero ability ../_id}}>
|
||||
<h1 class="display1">{{../attributeValue ability}}</h1>
|
||||
<h2>{{../abilityMod ability}}</h2>
|
||||
</div>
|
||||
|
||||
@@ -6,13 +6,13 @@
|
||||
</template>
|
||||
|
||||
<template name="attributeDialogView">
|
||||
<div layout horizontal center-aligned>
|
||||
<div layout horizontal center-justified end>
|
||||
<div class="display2">
|
||||
{{char.attributeValue statName}}
|
||||
{{attributeValue}}
|
||||
</div>
|
||||
{{#if adjustment}}
|
||||
<div class="display1">
|
||||
/{{char.attributeBase statName}}
|
||||
/{{attributeBase}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
@@ -50,17 +50,19 @@
|
||||
<td>Max: {{statValue}}</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
<tr class="body2">
|
||||
<td>Base Value</td>
|
||||
<td>{{char.attributeBase statName}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Adjustment</td>
|
||||
<td>{{signedString adjustment}}</td>
|
||||
</tr>
|
||||
{{#if adjustment}}
|
||||
<tr class="body2">
|
||||
<td>Base Value</td>
|
||||
<td>{{attributeBase}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Adjustment</td>
|
||||
<td>{{signedString adjustment}}</td>
|
||||
</tr>
|
||||
{{/if}}
|
||||
<tr class="body2">
|
||||
<td>Total</td>
|
||||
<td>{{char.attributeValue statName}}</td>
|
||||
<td>{{attributeValue}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</template>
|
||||
@@ -93,39 +93,44 @@ var abilities = {
|
||||
charisma: {name: "Charisma"},
|
||||
};
|
||||
|
||||
Template.attributeDialogView.created = function(){
|
||||
this.data.char = Characters.findOne(this.data.charId, {fields: {_id : 1}});
|
||||
};
|
||||
|
||||
Template.attributeDialogView.helpers({
|
||||
or: function(a, b, c){
|
||||
return a || b || c;
|
||||
},
|
||||
adjustment: function(){
|
||||
var value = this.char.attributeValue(this.statName);
|
||||
var base = this.char.attributeBase(this.statName);
|
||||
var char = Characters.findOne(this.charId);
|
||||
if(!char) return;
|
||||
var value = char.attributeValue(this.statName);
|
||||
var base = char.attributeBase(this.statName);
|
||||
return value - base;
|
||||
},
|
||||
baseEffects: function(){
|
||||
return Effects.find({charId: this.char._id, stat: this.statName, operation: "base"});
|
||||
return Effects.find({charId: this.charId, stat: this.statName, operation: "base"});
|
||||
},
|
||||
addEffects: function(){
|
||||
return Effects.find({charId: this.char._id, stat: this.statName, operation: "add"});
|
||||
return Effects.find({charId: this.charId, stat: this.statName, operation: "add"});
|
||||
},
|
||||
mulEffects: function(){
|
||||
return Effects.find({charId: this.char._id, stat: this.statName, operation: "mul"});
|
||||
return Effects.find({charId: this.charId, stat: this.statName, operation: "mul"});
|
||||
},
|
||||
minEffects: function(){
|
||||
return Effects.find({charId: this.char._id, stat: this.statName, operation: "min"});
|
||||
return Effects.find({charId: this.charId, stat: this.statName, operation: "min"});
|
||||
},
|
||||
maxEffects: function(){
|
||||
return Effects.find({charId: this.char._id, stat: this.statName, operation: "max"});
|
||||
return Effects.find({charId: this.charId, stat: this.statName, operation: "max"});
|
||||
},
|
||||
char: function(){
|
||||
return Characters.findOne(this.charId, {fields:{_id: 1}});
|
||||
attributeBase: function(){
|
||||
var char = Characters.findOne(this.charId);
|
||||
if(!char) throw "character is " + char;
|
||||
return char.attributeBase(this.statName);
|
||||
},
|
||||
attributeValue: function () {
|
||||
var char = Characters.findOne(this.charId);
|
||||
if(!char) throw "character is " + char;
|
||||
return char.attributeValue(this.statName);
|
||||
},
|
||||
sourceName: function(){
|
||||
if (this.parent.collection === "Characters") return "inate";
|
||||
if (this.parent.collection === "Characters") return this.name;
|
||||
return this.getParent().name;
|
||||
},
|
||||
operationName: function(){
|
||||
@@ -133,7 +138,7 @@ Template.attributeDialogView.helpers({
|
||||
return op && op.name || "No Operation";
|
||||
},
|
||||
statValue: function(){
|
||||
return evaluate(this.charId, this.calculation) || this.value;
|
||||
return evaluateEffect(this.charId, this);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
<template name="healthCard">
|
||||
<paper-shadow class="card container healthCard" hero-id="main" {{detailHero}} layout horizontal wrap>
|
||||
<div class="green white-text subhead padded leftRound" layout vertical center-justified>
|
||||
Hit Points
|
||||
<paper-shadow class="card container healthCard"
|
||||
hero-id="main" {{detailHero "hitPoints" _id}}
|
||||
layout horizontal wrap>
|
||||
<div class="green white-text subhead padded leftRound"
|
||||
hero-id="toolbar" {{detailHero "hitPoints" _id}}
|
||||
layout vertical center>
|
||||
<div class="hitPointTitle clickable">Hit Points</div>
|
||||
<paper-icon-button class="white54" id="addTempHP" icon="add"></paper-icon-button>
|
||||
</div>
|
||||
<div class="padded" flex layout vertical center-justified style="min-width: 180px;">
|
||||
|
||||
@@ -93,67 +93,71 @@ var abilities = {
|
||||
charisma: {name: "Charisma"},
|
||||
};
|
||||
|
||||
Template.skillDialogView.created = function(){
|
||||
this.data.char = Characters.findOne(this.data.charId, {fields: {_id : 1}});
|
||||
};
|
||||
|
||||
Template.skillDialogView.helpers({
|
||||
or: function(a, b, c){
|
||||
return a || b || c;
|
||||
},
|
||||
profIcon: function(){
|
||||
var prof = this.char.proficiency(this.skillName);
|
||||
var char = Characters.findOne(this.charId);
|
||||
if(!char) return;
|
||||
var prof = char.proficiency(this.skillName);
|
||||
if(prof > 0 && prof < 1) return "image:brightness-2";
|
||||
if(prof === 1) return "image:brightness-1";
|
||||
if(prof > 1) return "av:album";
|
||||
return "radio-button-off";
|
||||
},
|
||||
profSource: function(){
|
||||
return Proficiencies.findOne({charId: this.char._id, name: this.skillName}, {sort: {value: -1}});
|
||||
return Proficiencies.findOne({charId: this.charId, name: this.skillName}, {sort: {value: -1}});
|
||||
},
|
||||
profBonus: function(){
|
||||
return this.char.proficiency(this.skillName) * this.char.attributeValue("proficiencyBonus");
|
||||
var char = Characters.findOne(this.charId);
|
||||
if(!char) return;
|
||||
return char.proficiency(this.skillName) * char.attributeValue("proficiencyBonus");
|
||||
},
|
||||
proficiencyValue: function(){
|
||||
var prof = this.char.proficiency(this.skillName);
|
||||
var char = Characters.findOne(this.charId);
|
||||
if(!char) return;
|
||||
var prof = char.proficiency(this.skillName);
|
||||
if(prof == 0.5) return "Half Proficiency";
|
||||
if(prof == 1) return "Proficient";
|
||||
if(prof == 2) return "Double Proficiency";
|
||||
return prof + "x Proficiency";
|
||||
},
|
||||
addEffects: function(){
|
||||
return Effects.find({charId: this.char._id, stat: this.skillName, operation: "add"});
|
||||
return Effects.find({charId: this.charId, stat: this.skillName, operation: "add"});
|
||||
},
|
||||
mulEffects: function(){
|
||||
return Effects.find({charId: this.char._id, stat: this.skillName, operation: "mul"});
|
||||
return Effects.find({charId: this.charId, stat: this.skillName, operation: "mul"});
|
||||
},
|
||||
minEffects: function(){
|
||||
return Effects.find({charId: this.char._id, stat: this.skillName, operation: "min"});
|
||||
return Effects.find({charId: this.charId, stat: this.skillName, operation: "min"});
|
||||
},
|
||||
maxEffects: function(){
|
||||
return Effects.find({charId: this.char._id, stat: this.skillName, operation: "max"});
|
||||
return Effects.find({charId: this.charId, stat: this.skillName, operation: "max"});
|
||||
},
|
||||
advEffects: function(){
|
||||
return Effects.find({charId: this.char._id, stat: this.skillName, operation: "advantage"});
|
||||
return Effects.find({charId: this.charId, stat: this.skillName, operation: "advantage"});
|
||||
},
|
||||
dadvEffects: function(){
|
||||
return Effects.find({charId: this.char._id, stat: this.skillName, operation: "disadvantage"});
|
||||
return Effects.find({charId: this.charId, stat: this.skillName, operation: "disadvantage"});
|
||||
},
|
||||
conditionalEffects: function(){
|
||||
return Effects.find({charId: this.char._id, stat: this.skillName, operation: "conditional"});
|
||||
return Effects.find({charId: this.charId, stat: this.skillName, operation: "conditional"});
|
||||
},
|
||||
ability: function(){
|
||||
var opts = {fields: {}};
|
||||
opts.fields[this.skillName] = 1;
|
||||
var char = Characters.findOne(this.char._id, opts);
|
||||
var char = Characters.findOne(this.charId, opts);
|
||||
var skill = char && char[this.skillName];
|
||||
return skill.ability;
|
||||
},
|
||||
abilityName: function(){
|
||||
var opts = {fields: {}};
|
||||
opts.fields[this.skillName] = 1;
|
||||
var char = Characters.findOne(this.char._id, opts);
|
||||
var skill = char && char[this.skillName];
|
||||
var char = Characters.findOne(this.charId, opts);
|
||||
if(!char) return;
|
||||
var skill = char[this.skillName];
|
||||
if(!skill) return;
|
||||
var ability = skill.ability;
|
||||
return abilities[ability] && abilities[ability].name;
|
||||
},
|
||||
|
||||
@@ -72,7 +72,8 @@
|
||||
|
||||
<template name="statCard">
|
||||
<paper-shadow class="card container statCard" hero-id="main" {{detailHero stat ../_id}} layout horizontal>
|
||||
<div class="containerLeft {{color}}">
|
||||
<div class="containerLeft {{color}}"
|
||||
hero-id="toolbar" {{detailHero stat ../_id}}>
|
||||
{{#if isSkill}}
|
||||
{{../skillMod stat}}
|
||||
{{else}}
|
||||
|
||||
@@ -15,6 +15,14 @@ Template.stats.events({
|
||||
});
|
||||
}
|
||||
},
|
||||
"tap .abilityMiniCard": function(event, instance){
|
||||
var charId = Template.parentData()._id;
|
||||
GlobalUI.setDetail({
|
||||
template: "attributeDialog",
|
||||
data: {name: this.title, statName: this.ability, charId: charId},
|
||||
heroId: charId + this.ability
|
||||
});
|
||||
},
|
||||
"tap .skillRow": function(event, instance){
|
||||
var skill = this.skill;
|
||||
var charId = instance.data._id;
|
||||
@@ -23,6 +31,13 @@ Template.stats.events({
|
||||
data: {name: this.name, skillName: skill, charId: charId},
|
||||
heroId: charId + skill
|
||||
});
|
||||
},
|
||||
"tap .hitPointTitle": function (event, instance) {
|
||||
GlobalUI.setDetail({
|
||||
template: "attributeDialog",
|
||||
data: {name: "Hit Points", statName: "hitPoints", charId: this._id},
|
||||
heroId: this._id + "hitPoints"
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user