Fixed and finished implementing attribute summary detail views

This commit is contained in:
Stefan Zermatten
2015-04-21 15:42:10 +02:00
parent 6926693e9d
commit dce20375b5
16 changed files with 114 additions and 71 deletions

View File

@@ -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);

View File

@@ -1,3 +1,3 @@
Template.registerHelper("signedString", function(number){
return number > 0? "+" + number : "" + number;
return number >= 0? "+" + number : "" + number;
});

View File

@@ -104,7 +104,7 @@ paper-button {
color: rgba(0, 0, 0, 0.54);
}
.clickable, .statCard {
.clickable, .statCard, .abilityMiniCard {
cursor: pointer;
}

View File

@@ -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;
}

View File

@@ -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>

View File

@@ -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
});
}
});

View File

@@ -72,7 +72,7 @@ div#stats {
}
.resourceButtons {
margin: -16px -16px -16px 8px;
margin: -16px 8px -16px -16px;
align-self: center;
}

View File

@@ -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>

View File

@@ -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",

View File

@@ -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>

View File

@@ -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>

View File

@@ -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);
},
});

View File

@@ -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;">

View File

@@ -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;
},

View File

@@ -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}}

View File

@@ -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"
});
}
});