Fixed and finished implementing attribute summary detail views

rpg-docs/Model/Character/Effects.js

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

rpg-docs/client/globalHelpers/signedString.js

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

rpg-docs/client/views/GeneralCSS/general.css

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

rpg-docs/client/views/character/characterSheet.css

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

rpg-docs/client/views/character/features/features.html

@@ -117,16 +117,16 @@
 
 <template name="resource">
 	{{#if char.attributeBase name}}
-		<paper-shadow class="card container" hero-id="main" {{detailHero}} layout horizontal>
+		<paper-shadow class="card container" hero-id="main" {{detailHero name char._id}} layout horizontal>
-			<div class="containerLeft {{getColor}}">
+			<div class="containerLeft {{getColor}}" hero-id="toolbar" {{detailHero name char._id}} >
-				<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 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>

rpg-docs/client/views/character/features/features.js

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

rpg-docs/client/views/character/inventory/inventory.css

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

rpg-docs/client/views/character/spells/spells.html

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

rpg-docs/client/views/character/spells/spells.js

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

rpg-docs/client/views/character/stats/abilityCards/abilityCards.html

@@ -1,6 +1,8 @@
 <template name="abilityMiniCard">
-	<paper-shadow class="card double abilityMiniCard">
+	<paper-shadow class="card double abilityMiniCard" 
-		<div class="abilityScore white-text {{color}}">
+				  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>

rpg-docs/client/views/character/stats/attributeDialog/attributeDialog.html

@@ -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">
+		{{#if adjustment}}
-			<td>Base Value</td>
+			<tr class="body2">
-			<td>{{char.attributeBase statName}}</td>
+				<td>Base Value</td>
-		</tr>
+				<td>{{attributeBase}}</td>
-		<tr>
+			</tr>
-			<td>Adjustment</td>
+			<tr>
-			<td>{{signedString adjustment}}</td>
+				<td>Adjustment</td>
-		</tr>
+				<td>{{signedString adjustment}}</td>
+			</tr>
+		{{/if}}
 		<tr class="body2">
 			<td>Total</td>
-			<td>{{char.attributeValue statName}}</td>
+			<td>{{attributeValue}}</td>
 		</tr>
 	</table>
 </template>

rpg-docs/client/views/character/stats/attributeDialog/attributeDialog.js

@@ -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 char = Characters.findOne(this.charId);
-		var base = this.char.attributeBase(this.statName);
+		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(){
+	attributeBase: function(){
-		return Characters.findOne(this.charId, {fields:{_id: 1}});
+		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);
 	},
 });
 

rpg-docs/client/views/character/stats/healthCard/healthCard.html

@@ -1,7 +1,11 @@
 <template name="healthCard">
-	<paper-shadow class="card container healthCard" hero-id="main" {{detailHero}} layout horizontal wrap>
+	<paper-shadow class="card container healthCard" 
-		<div class="green white-text subhead padded leftRound" layout vertical center-justified>
+				  hero-id="main" {{detailHero "hitPoints" _id}} 
-			Hit Points
+				  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;">

rpg-docs/client/views/character/stats/skillDialog/skillDialog.js

@@ -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 char = Characters.findOne(this.charId, opts);
-		var skill = char && char[this.skillName];
+		if(!char) return;
+		var skill = char[this.skillName];
+		if(!skill) return;
 		var ability = skill.ability;
 		return abilities[ability] && abilities[ability].name;
 	},

rpg-docs/client/views/character/stats/stats.html

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

rpg-docs/client/views/character/stats/stats.js

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