Implemented Effect View for skills

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

@@ -5,7 +5,9 @@
 		<div flex>
 			{{name}}
 		</div>
-		<paper-icon-button icon="more-vert" role="button"></paper-icon-button>
+		<div>
+			{{> colorDropdown}}
+		</div>
 		<div class="bottom fit" horizontal layout>
 			<paper-tabs flex horizontal center layout id="characterSheetTabs" selected={{selectedTab}} class="{{colorClass}}">
 				<paper-tab name="stats">Stats</paper-tab>

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

@@ -22,5 +22,8 @@ Template.characterSheet.events({
 	},
 	"tap #characterSheetTabs paper-tab": function(event, instance){
 		setTab(this._id, event.currentTarget.getAttribute("name"));
-	}
+	},
+	"color-change": function(event, instance){
+		Characters.update(this._id, {$set: {color: event.color}});
+	},
 });

rpg-docs/client/views/character/effects/effectView/effectView.html

@@ -0,0 +1,12 @@
+<template name="effectView">
+	<div class="effectView" layout horizontal center>
+		{{#if sourceId}}
+			<div>{{sourceName}}</div>
+		{{else}}
+			<div flex>{{statName}}</div>
+		{{/if}}
+		<div>{{operationName}}</div>
+		<div>{{statValue}}</div>
+		<br>
+	</div>
+</template>

rpg-docs/client/views/character/effects/effectView/effectView.js

@@ -0,0 +1,133 @@
+//TODO add dexterity armor
+var stats = {
+	"strength":{"name":"Strength"},
+	"dexterity":{"name":"Dexterity"},
+	"constitution":{"name":"Constitution"},
+	"intelligence":{"name":"Intelligence"},
+	"wisdom":{"name":"Wisdom"},
+	"charisma":{"name":"Charisma"},
+	"strengthSave":{"name":"Strength Save",},
+	"dexteritySave":{"name":"Dexterity Save",},
+	"constitutionSave":{"name":"Constitution Save",},
+	"intelligenceSave":{"name":"Intelligence Save",},
+	"wisdomSave":{"name":"Wisdom Save",},
+	"charismaSave":{"name":"Charisma Save",},
+	"acrobatics":{"name":"Acrobatics",},
+	"animalHandling":{"name":"Animal Handling",},
+	"arcana":{"name":"Arcana",},
+	"athletics":{"name":"Athletics",},
+	"deception":{"name":"Deception",},
+	"history":{"name":"History",},
+	"insight":{"name":"Insight",},
+	"intimidation":{"name":"Intimidation",},
+	"investigation":{"name":"Investigation",},
+	"medicine":{"name":"Medicine",},
+	"nature":{"name":"Nature",},
+	"perception":{"name":"Perception",},
+	"performance":{"name":"Performance",},
+	"persuasion":{"name":"Persuasion",},
+	"religion":{"name":"Religion",},
+	"sleightOfHand":{"name":"Sleight of Hand",},
+	"stealth":{"name":"Stealth",},
+	"survival":{"name":"Survival",},
+	"initiative":{"name":"Initiative",},
+	"hitPoints":{"name":"Hit Points"},
+	"armor":{"name":"Armor"},
+	"dexterityArmor":{"name":"Dexterity Armor Bonus"}
+	,"speed":{"name":"Speed"},
+	"proficiencyBonus":{"name":"Proficiency Bonus"},
+	"ki":{"name":"Ki Points"},
+	"sorceryPoints":{"name":"Sorcery Points"},
+	"rages":{"name":"Rages"},
+	"rageDamage":{"name":"Rage Damage"},
+	"expertiseDice":{"name":"Expertise Dice"},
+	"superiorityDice":{"name":"Superiority Dice"},
+	"level1SpellSlots":{"name":"level 1 Spell Slots"},
+	"level2SpellSlots":{"name":"level 2 Spell Slots"},
+	"level3SpellSlots":{"name":"level 3 Spell Slots"},
+	"level4SpellSlots":{"name":"level 4 Spell Slots"},
+	"level5SpellSlots":{"name":"level 5 Spell Slots"},
+	"level6SpellSlots":{"name":"level 6 Spell Slots"},
+	"level7SpellSlots":{"name":"level 7 Spell Slots"},
+	"level8SpellSlots":{"name":"level 8 Spell Slots"},
+	"level9SpellSlots":{"name":"level 9 Spell Slots"},
+	"d6HitDice":{"name":"d6 Hit Dice"},
+	"d8HitDice":{"name":"d8 Hit Dice"},
+	"d10HitDice":{"name":"d10 Hit Dice"},
+	"d12HitDice":{"name":"d12 Hit Dice"},
+	"acidMultiplier":{"name":"Acid", "group": "Weakness/Resistance"},
+	"bludgeoningMultiplier":{"name":"Bludgeoning", "group": "Weakness/Resistance"},
+	"coldMultiplier":{"name":"Cold", "group": "Weakness/Resistance"},
+	"fireMultiplier":{"name":"Fire", "group": "Weakness/Resistance"},
+	"forceMultiplier":{"name":"Force", "group": "Weakness/Resistance"},
+	"lightningMultiplier":{"name":"Lightning", "group": "Weakness/Resistance"},
+	"necroticMultiplier":{"name":"Necrotic", "group": "Weakness/Resistance"},
+	"piercingMultiplier":{"name":"Piercing", "group": "Weakness/Resistance"},
+	"poisonMultiplier":{"name":"Poison", "group": "Weakness/Resistance"},
+	"psychicMultiplier":{"name":"Psychic", "group": "Weakness/Resistance"},
+	"radiantMultiplier":{"name":"Radiant", "group": "Weakness/Resistance"},
+	"slashingMultiplier":{"name":"Slashing", "group": "Weakness/Resistance"},
+	"thunderMultiplier":{"name":"Thunder", "group": "Weakness/Resistance"}
+};
+
+var operations = {
+	base: {name: "Base Value"}, 
+	proficiency: {name: "Proficiency"},
+	add: {name: "Add"},
+	mul: {name: "Multiply"},
+	min: {name: "Min"},
+	max: {name: "Max"},
+	advantage: {name: "Advantage"},
+	disadvantage: {name: "Disadvantage"},
+	passiveAdd: {name: "Passive Bonus"},
+	fail: {name: "Automatically Fail"},
+	conditional: {name: "Conditional Benefit"}
+};
+
+Template.effectView.helpers({
+	sourceName: function(){
+		var id = this.sourceId;
+		if(!id) return;
+		switch(this.type){
+			case "feature":
+				return "Feature - " + Features.findOne(id, {fields: {name: 1}}).name;
+			case "class":
+				return Classes.findOne(id, {fields: {name: 1}}).name;
+			case "buff":
+				return "Buff - " + Buffs.findOne(id, {fields: {name: 1}}).name;
+			case "equipment":
+				return "Equipment - " + Items.findOne(id, {fields: {name: 1}}).name;
+			case "racial":
+				return Characters.findOne(this.charId, {fields: {race: 1}}).race;
+			case "inate":
+				return "Inate"
+		}
+	},
+	statName: function(){
+		return stats[this.stat] && stats[this.stat].name || "No Stat"
+	},
+	operationName: function(){
+		if(this.operation === "proficiency") return null;
+		if(stats[this.stat].group === "Weakness/Resistance") return null;
+		return operations[this.operation] && operations[this.operation].name || "No Operation"
+	},
+	statValue: function(){
+		if(this.operation === "advantage" ||
+		   this.operation === "disadvantage" ||
+		   this.operation === "fail" ||
+		   this.operation === "conditional"){
+			return null;
+		}
+		if(this.operation === "proficiency"){
+			if(this.value == 0.5 || this.calculation == 0.5) return "Half Proficiency";
+			if(this.value == 1   || this.calculation == 1)   return "Proficiency";
+			if(this.value == 2   || this.calculation == 2)   return "Double Proficiency";
+		}
+		if(stats[this.stat].group === "Weakness/Resistance"){
+			if(this.value == 0.5 || this.calculation == 0.5) return "Resistance";
+			if(this.value == 2   || this.calculation == 2)   return "Vulnerability";
+			if(this.value == 0   || this.calculation == 0)   return "Immunity";
+		}
+		return this.calculation || this.value;
+	}
+});

rpg-docs/client/views/character/effects/effectsViewList/effectsViewList.html

@@ -0,0 +1,12 @@
+<!--needs to be given charId, sourceId and type-->
+<template name="effectsViewList">
+	{{#if effects}}
+		<hr style="margin: 16px 0 16px 0;">
+		<div id="effects">
+			<h2>Effects</h2>
+			{{#each effects}}
+				{{>effectView}}
+			{{/each}}
+		</div>
+	{{/if}}
+</template>

rpg-docs/client/views/character/effects/effectsViewList/effectsViewList.js

@@ -0,0 +1,10 @@
+Template.effectsViewList.helpers({
+	effects: function(){
+		if(this.sourceId){
+			return Effects.find({sourceId: this.sourceId, type: this.type, charId: this.charId}, {fields: {sourceId: 0}});
+		} else if(this.stat){
+			return Effects.find({charId: this.charId, stat: this.stat});
+		}
+
+	}
+});

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

@@ -36,8 +36,5 @@ Template.featureDialog.helpers({
 	},
 	usesSet: function(){
 		return _.isString(this.uses);
-	},
-	colorClass: function(){
-		return getColorClass(this.color)
 	}
 });

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

@@ -22,9 +22,9 @@
 </template>
 
 <template name="containerCardHelper">
-	<paper-shadow class="card container {{class}}"  hero-id="main" {{detailHero field}}>
-		<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero field}}>
-			<div class="containerName subhead" hero-id="title" flex {{detailHero field}}>{{title}}</div>
+	<paper-shadow class="card container {{class}}"  hero-id="main" {{detailHero field ../_id}}>
+		<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero field ../_id}}>
+			<div class="containerName subhead" hero-id="title" flex {{detailHero field ../_id}}>{{title}}</div>
 		</div>
 		<div flex class="containerMain">{{> UI.contentBlock}}</div>
 	</paper-shadow>

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

@@ -1,13 +1,13 @@
 <template name="abilityMiniCard">
-	<paper-shadow class="card double">
+	<paper-shadow class="card double abilityMiniCard">
 		<div class="abilityScore white-text {{color}}">
-			{{> ripple color="#eee"}}
 			<h1 class="display1">{{../attributeValue ability}}</h1>
 			<h2>{{../abilityMod ability}}</h2>
 		</div>
 		<div class="abilityCardRight subhead" layout horizontal center>
 			{{title}}
 		</div>
+		<paper-ripple fit></paper-ripple>
 	</paper-shadow>
 </template>
 

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

@@ -0,0 +1,81 @@
+<!-- needs name, char, and skillName -->
+<template name="skillDialog">
+	{{#baseDialog title=name class=colorClass hideColor="true" hideDelete="true"}}
+	<!--proficiency-->
+	<div>
+		<core-icon icon="{{profIcon}}"></core-icon>
+		{{#if profSource}}
+			{{#with profSource}}
+				{{statValue}} - {{sourceName}}
+			{{/with}}
+		{{else}}
+			Not Proficient
+		{{/if}}
+	</div>
+	<!--numerical value-->
+	<div>
+		<!--Ability Mod-->
+		<div>
+			<div>{{abilityName}}</div>
+			<div>{{char.abilityMod ability}}</div>
+		</div>
+		<!--Prof bonus-->
+		{{#if char.proficiency skillName}}
+			<div>
+				<div>{{#with profSource}}{{statValue}}{{/with}}</div>
+				<div>+{{profBonus}}</div>
+			</div>
+		{{/if}}
+		<!--numerical effects-->
+		{{#each addEffects}}
+			<div>
+				<div>{{sourceName}}</div>
+				<div>&plus;{{statValue}}</div>
+			</div>
+		{{/each}}
+		{{#each mulEffects}}
+			<div>
+				<div>{{sourceName}}</div>
+				<div>&times;{{statValue}}</div>
+			</div>
+		{{/each}}
+		{{#each minEffects}}
+			<div>
+				<div>{{sourceName}}</div>
+				<div>Min: {{statValue}}</div>
+			</div>
+		{{/each}}
+		{{#each maxEffects}}
+			<div>
+				<div>{{sourceName}}</div>
+				<div>Max: {{statValue}}</div>
+			</div>
+		{{/each}}
+		<!--Total-->
+		<div>
+			<div>Total</div>
+			<div>{{char.skillMod skillName}}</div>
+		</div>
+	</div>
+	<!--Advantage effects-->
+	{{#if advEffects.count}}
+		Advantage:
+		{{#each advEffects}}
+			<div>{{sourceName}}</div>
+		{{/each}}
+	{{/if}}
+	{{#if dadvEffects.count}}
+		Disadvantage:
+		{{#each dadvEffects}}
+			<div>{{sourceName}}</div>
+		{{/each}}
+	{{/if}}
+	<!--Conditional Benefits-->
+	{{#each conditionalEffects}}
+		<div>
+			<div>{{sourceName}}</div>
+			<div>*{{statValue}}</div>
+		</div>
+	{{/each}}
+	{{/baseDialog}}
+</template>

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

@@ -0,0 +1,195 @@
+//TODO add dexterity armor
+var stats = {
+	"strength":{"name":"Strength"},
+	"dexterity":{"name":"Dexterity"},
+	"constitution":{"name":"Constitution"},
+	"intelligence":{"name":"Intelligence"},
+	"wisdom":{"name":"Wisdom"},
+	"charisma":{"name":"Charisma"},
+	"strengthSave":{"name":"Strength Save",},
+	"dexteritySave":{"name":"Dexterity Save",},
+	"constitutionSave":{"name":"Constitution Save",},
+	"intelligenceSave":{"name":"Intelligence Save",},
+	"wisdomSave":{"name":"Wisdom Save",},
+	"charismaSave":{"name":"Charisma Save",},
+	"acrobatics":{"name":"Acrobatics",},
+	"animalHandling":{"name":"Animal Handling",},
+	"arcana":{"name":"Arcana",},
+	"athletics":{"name":"Athletics",},
+	"deception":{"name":"Deception",},
+	"history":{"name":"History",},
+	"insight":{"name":"Insight",},
+	"intimidation":{"name":"Intimidation",},
+	"investigation":{"name":"Investigation",},
+	"medicine":{"name":"Medicine",},
+	"nature":{"name":"Nature",},
+	"perception":{"name":"Perception",},
+	"performance":{"name":"Performance",},
+	"persuasion":{"name":"Persuasion",},
+	"religion":{"name":"Religion",},
+	"sleightOfHand":{"name":"Sleight of Hand",},
+	"stealth":{"name":"Stealth",},
+	"survival":{"name":"Survival",},
+	"initiative":{"name":"Initiative",},
+	"hitPoints":{"name":"Hit Points"},
+	"armor":{"name":"Armor"},
+	"dexterityArmor":{"name":"Dexterity Armor Bonus"}
+	,"speed":{"name":"Speed"},
+	"proficiencyBonus":{"name":"Proficiency Bonus"},
+	"ki":{"name":"Ki Points"},
+	"sorceryPoints":{"name":"Sorcery Points"},
+	"rages":{"name":"Rages"},
+	"rageDamage":{"name":"Rage Damage"},
+	"expertiseDice":{"name":"Expertise Dice"},
+	"superiorityDice":{"name":"Superiority Dice"},
+	"level1SpellSlots":{"name":"level 1 Spell Slots"},
+	"level2SpellSlots":{"name":"level 2 Spell Slots"},
+	"level3SpellSlots":{"name":"level 3 Spell Slots"},
+	"level4SpellSlots":{"name":"level 4 Spell Slots"},
+	"level5SpellSlots":{"name":"level 5 Spell Slots"},
+	"level6SpellSlots":{"name":"level 6 Spell Slots"},
+	"level7SpellSlots":{"name":"level 7 Spell Slots"},
+	"level8SpellSlots":{"name":"level 8 Spell Slots"},
+	"level9SpellSlots":{"name":"level 9 Spell Slots"},
+	"d6HitDice":{"name":"d6 Hit Dice"},
+	"d8HitDice":{"name":"d8 Hit Dice"},
+	"d10HitDice":{"name":"d10 Hit Dice"},
+	"d12HitDice":{"name":"d12 Hit Dice"},
+	"acidMultiplier":{"name":"Acid", "group": "Weakness/Resistance"},
+	"bludgeoningMultiplier":{"name":"Bludgeoning", "group": "Weakness/Resistance"},
+	"coldMultiplier":{"name":"Cold", "group": "Weakness/Resistance"},
+	"fireMultiplier":{"name":"Fire", "group": "Weakness/Resistance"},
+	"forceMultiplier":{"name":"Force", "group": "Weakness/Resistance"},
+	"lightningMultiplier":{"name":"Lightning", "group": "Weakness/Resistance"},
+	"necroticMultiplier":{"name":"Necrotic", "group": "Weakness/Resistance"},
+	"piercingMultiplier":{"name":"Piercing", "group": "Weakness/Resistance"},
+	"poisonMultiplier":{"name":"Poison", "group": "Weakness/Resistance"},
+	"psychicMultiplier":{"name":"Psychic", "group": "Weakness/Resistance"},
+	"radiantMultiplier":{"name":"Radiant", "group": "Weakness/Resistance"},
+	"slashingMultiplier":{"name":"Slashing", "group": "Weakness/Resistance"},
+	"thunderMultiplier":{"name":"Thunder", "group": "Weakness/Resistance"}
+};
+
+var operations = {
+	base: {name: "Base Value"}, 
+	proficiency: {name: "Proficiency"},
+	add: {name: "+"},
+	mul: {name: "×"},
+	min: {name: "Min"},
+	max: {name: "Max"},
+	advantage: {name: "Advantage"},
+	disadvantage: {name: "Disadvantage"},
+	passiveAdd: {name: "Passive Bonus"},
+	fail: {name: "Automatically Fail"},
+	conditional: {name: "Conditional Benefit"}
+};
+
+var abilities = {
+	strength: {name: "Strength"},
+	dexterity: {name: "Dexterity"},
+	constitution: {name: "Constitution"},
+	intelligence: {name: "Intelligence"},
+	wisdom: {name: "Wisdom"},
+	charisma: {name: "Charisma"},	
+}
+
+Template.skillDialog.created = function(){
+	this.data.char = Characters.findOne(this.data.charId, {fields: {_id : 1}});
+};
+
+Template.skillDialog.helpers({
+	profIcon: function(){
+		var prof = this.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(){
+		var effs = Effects.find({charId: this.char._id, stat: this.skillName, operation: "proficiency"}, {sort: {value: -1}}).fetch();
+		return effs && effs[0];
+	},
+	profBonus: function(){
+		return this.char.proficiency(this.skillName) * this.char.attributeValue("proficiencyBonus");
+	},
+	addEffects: function(){
+		return Effects.find({charId: this.char._id, stat: this.skillName, operation: "add"});
+	},
+	mulEffects: function(){
+		return Effects.find({charId: this.char._id, stat: this.skillName, operation: "mul"});
+	},
+	minEffects: function(){
+		return Effects.find({charId: this.char._id, stat: this.skillName, operation: "min"});
+	},
+	maxEffects: function(){
+		return Effects.find({charId: this.char._id, stat: this.skillName, operation: "max"});
+	},
+	advEffects: function(){
+		return Effects.find({charId: this.char._id, stat: this.skillName, operation: "advantage"});
+	},
+	dadvEffects: function(){
+		return Effects.find({charId: this.char._id, stat: this.skillName, operation: "disadvantage"});
+	},
+	conditionalEffects: function(){
+		return Effects.find({charId: this.char._id, stat: this.skillName, operation: "conditional"});
+	},
+	ability: function(){
+		var opts = {fields: {}};
+		opts.fields[this.skillName] = 1;
+		var char = Characters.findOne(this.char._id, 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 ability = skill.ability;
+		return abilities[ability] && abilities[ability].name;
+	},
+	char: function(){
+		return Characters.findOne(this.charId, {fields:{_id: 1}});
+	},
+	sourceName: function(){
+		var id = this.sourceId;
+		if(!id) return;
+		switch(this.type){
+			case "feature":
+				return Features.findOne(id, {fields: {name: 1}}).name;
+			case "class":
+				return Classes.findOne(id, {fields: {name: 1}}).name;
+			case "buff":
+				return Buffs.findOne(id, {fields: {name: 1}}).name;
+			case "equipment":
+				return Items.findOne(id, {fields: {name: 1}}).name;
+			case "racial":
+				return Characters.findOne(this.charId, {fields: {race: 1}}).race;
+			case "inate":
+				return "Inate"
+		}
+	},
+	operationName: function(){
+		if(this.operation === "proficiency") return null;
+		if(stats[this.stat].group === "Weakness/Resistance") return null;
+		return operations[this.operation] && operations[this.operation].name || "No Operation"
+	},
+	statValue: function(){
+		if(this.operation === "advantage" ||
+		   this.operation === "disadvantage" ||
+		   this.operation === "fail"){
+			return null;
+		}
+		if(this.operation === "proficiency"){
+			if(this.value == 0.5 || this.calculation == 0.5) return "Half Proficiency";
+			if(this.value == 1   || this.calculation == 1)   return "Proficiency";
+			if(this.value == 2   || this.calculation == 2)   return "Double Proficiency";
+		}
+		if(stats[this.stat].group === "Weakness/Resistance"){
+			if(this.value == 0.5 || this.calculation == 0.5) return "Resistance";
+			if(this.value == 2   || this.calculation == 2)   return "Vulnerability";
+			if(this.value == 0   || this.calculation == 0)   return "Immunity";
+		}
+		return this.calculation || this.value;
+	}
+});

rpg-docs/client/views/character/stats/skillRow/skillRow.css

@@ -1,6 +1,7 @@
 .skillRow {
 	height: 32px;
 	margin: 0 -16px 0 -16px;
+	background: white;
 }
 
 .skillRow core-icon {

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

@@ -1,5 +1,5 @@
 <template name="skillRow">
-	<paper-item class="skillRow" layout horizontal>
+	<paper-item class="skillRow" layout horizontal hero-id="main" {{detailHero skill ../_id}}>
 		<core-icon icon="{{profIcon}}"></core-icon>
 		{{#if failSkill}}
 		<div class="fail skillMod">fail</div>

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

@@ -11,46 +11,17 @@
 			{{> abilityMiniCard ability="intelligence" title="Intelligence" color="deep-orange"}}
 			{{> abilityMiniCard ability="wisdom" title="Wisdom" color="purple"}}
 			{{> abilityMiniCard ability="charisma" title="Charisma" color="pink"}}
+			
 			<!--Armor-->
-			<paper-shadow class="card container statCard" hero-id="main" {{detailHero}} layout horizontal>
-				<div class="containerLeft teal">
-					{{attributeValue "armor"}}
-				</div>
-				<div class="containerRight" flex horizontal layout center>
-					Armor Class
-				</div>
-				<paper-ripple fit></paper-ripple>
-			</paper-shadow>
+			{{> statCard stat="armor" name="Armor Class" color="teal"}}
 			<!--Speed-->
-			<paper-shadow class="card container statCard" hero-id="main" {{detailHero}} layout horizontal>
-				<div class="containerLeft teal">
-					{{attributeValue "speed"}}
-				</div>
-				<div class="containerRight" flex horizontal layout center>
-					Speed
-				</div>
-				<paper-ripple fit></paper-ripple>
-			</paper-shadow>
+			{{> statCard stat="speed" name="Speed" color="teal"}}
 			<!--Initiative-->
-			<paper-shadow class="card container statCard" hero-id="main" {{detailHero}} layout horizontal>
-				<div class="containerLeft indigo">
-					{{skillMod "initiative"}}
-				</div>
-				<div class="containerRight" flex horizontal layout center>
-					Initiative
-				</div>
-				<paper-ripple fit></paper-ripple>
-			</paper-shadow>
+			{{> statCard stat="initiative" name="Initiative" color="indigo" isSkill="true"}}
 			<!--Proficiency Bonus-->
-			<paper-shadow class="card container statCard" hero-id="main" {{detailHero}} layout horizontal>
-				<div class="containerLeft blue">
-					+{{attributeValue "proficiencyBonus"}}
-				</div>
-				<div class="containerRight" flex horizontal layout center>
-					Proficiency Bonus
-				</div>
-				<paper-ripple fit></paper-ripple>
-			</paper-shadow>
+			{{> statCard stat="proficiencyBonus" name="Proficiency Bonus" color="blue" prefix="+"}}
+			
+			<!--Hit Dice-->
 			{{>hitDice name="d6HitDice" diceNum="6" char=this}}
 			{{>hitDice name="d8HitDice" diceNum="8" char=this}}
 			{{>hitDice name="d10HitDice" diceNum="10" char=this}}
@@ -98,3 +69,19 @@
 		</div>
 	</div>
 </template>
+
+<template name="statCard">
+	<paper-shadow class="card container statCard" hero-id="main" {{detailHero stat ../_id}} layout horizontal>
+		<div class="containerLeft {{color}}">
+			{{#if isSkill}}
+				{{../skillMod stat}}
+			{{else}}
+				{{prefix}}{{../attributeValue stat}}
+			{{/if}}
+		</div>
+		<div class="containerRight" flex horizontal layout center>
+			{{name}}
+		</div>
+		<paper-ripple fit></paper-ripple>
+	</paper-shadow>
+</template>

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

@@ -1,5 +1,23 @@
 Template.stats.events({
-	
+	"tap .statCard": function(event, instance){
+		if(this.isSkill){
+			var charId = instance.data._id;
+			GlobalUI.setDetail({
+				template: "skillDialog",
+				data:     {name: this.name, skillName: this.stat, charId: charId},
+				heroId:   charId + this.stat
+			});
+		}
+	},
+	"tap .skillRow": function(event, instance){
+		var skill = this.skill;
+		var charId = instance.data._id;
+		GlobalUI.setDetail({
+				template: "skillDialog",
+				data:     {name: this.name, skillName: skill, charId: charId},
+				heroId:   charId + skill
+			});
+	}
 });
 
 Template.stats.helpers({