Implemented Effect View for skills

rpg-docs/Model/Character/SubSchemas/Skill.js

@@ -1,4 +1,4 @@
 Schemas.Skill = new SimpleSchema({
 	//attribute name that this skill used as base mod for roll
 	ability: { type: String, defaultValue: "" },
-});
+});

rpg-docs/client/globalHelpers/GlobalUI.js

@@ -98,14 +98,7 @@ Template.layout.events({
 	},
 	"core-animated-pages-transition-end [detail-pages]": function(e) {
 		var detailOpened = Session.get("global.ui.detailShow");
-		if(detailOpened){
+		if(!detailOpened){
-			//HACK by putting core-selected back on the main content section
-			//we stop it being hidden while the detail section is shown
-			$("#mainContentSection").addClass("core-selected");
-			//but we still want to track whether it is or isn't actually selected
-			//so we can hide hero elements, since they are technically now shown as detail
-			$("#mainContentSection").addClass("fake-selected");
-		} else {
 			Session.set("global.ui.detailData", null);
 			Session.set("global.ui.detailTemplate", null);
 			Session.set("global.ui.detailHeroId", null);

rpg-docs/client/globalHelpers/detailHero.js

@@ -1,5 +1,6 @@
-Template.registerHelper("detailHero", function(suffix){
+Template.registerHelper("detailHero", function(suffix, givenId){
-	var id = suffix? this._id + suffix : this._id;
+	var id = givenId || this._id;
+	if(suffix) id += suffix;
 	if ( Session.equals("global.ui.detailHeroId", id) ) {
 		return "hero";
 	}

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

@@ -1,83 +1,83 @@
-html /deep/ .red {
+.red {
 	background-color: #F44336;
 }
 
-html /deep/ .pink {
+.pink {
 	background-color: #E91E63;
 }
 
-html /deep/ .purple {
+.purple {
 	background-color: #9C27B0;
 }
 
-html /deep/ .deep-purple {
+.deep-purple {
 	background-color: #673AB7;
 }
 
-html /deep/ .indigo {
+.indigo {
 	background-color: #3F51B5;
 }
 
-html /deep/ .blue {
+.blue {
 	background-color: #2196F3;
 }
 
-html /deep/ .light-blue {
+.light-blue {
 	background-color: #03A9F4;
 }
 
-html /deep/ .cyan {
+.cyan {
 	background-color: #00BCD4;
 }
 
-html /deep/ .teal {
+.teal {
 	background-color: #009688;
 }
 
-html /deep/ .green {
+.green {
 	background-color: #4CAF50;
 }
 
-html /deep/ .light-green {
+.light-green {
 	background-color: #8BC34A;
 }
 
-html /deep/ .lime {
+.lime {
 	background-color: #CDDC39;
 }
 
-html /deep/ .yellow {
+.yellow {
 	background-color: #FFEB3B;
 }
 
-html /deep/ .amber {
+.amber {
 	background-color: #FFC107;
 }
 
-html /deep/ .orange {
+.orange {
 	background-color: #FF9800;
 }
 
-html /deep/ .deep-orange {
+.deep-orange {
 	background-color: #FF5722;
 }
 
-html /deep/ .brown {
+.brown {
 	background-color: #795548;
 }
 
-html /deep/ .grey {
+.grey {
 	background-color: #9E9E9E;
 }
 
-html /deep/ .blue-grey {
+.blue-grey {
 	background-color: #607D8B;
 }
 
-html /deep/ .white {
+.white {
 	background-color: #ffffff;
 }
 
-html /deep/ .black {
+.black {
-	background-color: #000000;
+	background-color: #262626;
 }

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

@@ -63,6 +63,6 @@
 	}
 }
 
-.fake-selected [hero] {
+.not-selected [hero] {
 	visibility: hidden;
 }

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

@@ -82,7 +82,7 @@ p, .body1, body {
 	letter-spacing: 0.010em;
 }
 
-.white-text p{
+.white-text p, .white-text .body1{
 	color: rgba(255,255,255,0.87);
 }
 

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}}>
+	<paper-shadow class="card container {{class}}"  hero-id="main" {{detailHero field ../_id}}>
-		<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero field}}>
+		<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero field ../_id}}>
-			<div class="containerName subhead" hero-id="title" flex {{detailHero field}}>{{title}}</div>
+			<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>
+			{{> statCard stat="armor" name="Armor Class" color="teal"}}
-				<div class="containerLeft teal">
-					{{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>
+			{{> statCard stat="speed" name="Speed" color="teal"}}
-				<div class="containerLeft teal">
-					{{attributeValue "speed"}}
-				</div>
-				<div class="containerRight" flex horizontal layout center>
-					Speed
-				</div>
-				<paper-ripple fit></paper-ripple>
-			</paper-shadow>
 			<!--Initiative-->
-			<paper-shadow class="card container statCard" hero-id="main" {{detailHero}} layout horizontal>
+			{{> statCard stat="initiative" name="Initiative" color="indigo" isSkill="true"}}
-				<div class="containerLeft indigo">
-					{{skillMod "initiative"}}
-				</div>
-				<div class="containerRight" flex horizontal layout center>
-					Initiative
-				</div>
-				<paper-ripple fit></paper-ripple>
-			</paper-shadow>
 			<!--Proficiency Bonus-->
-			<paper-shadow class="card container statCard" hero-id="main" {{detailHero}} layout horizontal>
+			{{> statCard stat="proficiencyBonus" name="Proficiency Bonus" color="blue" prefix="+"}}
-				<div class="containerLeft blue">
+			
-					+{{attributeValue "proficiencyBonus"}}
+			<!--Hit Dice-->
-				</div>
-				<div class="containerRight" flex horizontal layout center>
-					Proficiency Bonus
-				</div>
-				<paper-ripple fit></paper-ripple>
-			</paper-shadow>
 			{{>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({

rpg-docs/client/views/layout/layout.css

@@ -0,0 +1,12 @@
+#accountSummary {
+	padding-top: 32px;
+	min-height: 146px;
+	background-image: url(/png/paper-dice-crown.png);
+  	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: center center;
+}
+
+#mainContentSection {
+	display: initial !important;
+}

rpg-docs/client/views/layout/layout.html

@@ -2,7 +2,41 @@
 
 	<core-drawer-panel>
 		<core-header-panel drawer navigation flex mode="seamed" class="white">
-			<core-toolbar class="grey white-text">Cloud Character Sheet</core-toolbar>
+			<div id="accountSummary" class="padded white-text">
+				{{#if loggingIn}}
+					<paper-spinner active alt="Signing In"></paper-spinner>
+				{{else}}{{#if currentUser}}
+					{{#with currentUser}}
+						<div class="body2">
+							{{username}}
+						</div>
+						<div class="body1">
+							{{#each emails}}
+								{{address}}
+							{{/each}}
+							<paper-menu-button>
+								<paper-icon-button icon="arrow-drop-down" noink></paper-icon-button>
+								<paper-dropdown class="dropdown">
+									<core-menu class="menu">
+										<paper-item id="signOutButton">Sign Out</paper-item>
+									</core-menu>
+								</paper-dropdown>
+							</paper-menu-button>
+						</div>
+					{{/with}}
+				{{else}}
+						<h2>Sign In</h2>
+						<paper-input class="fullwidth" label="Email" id="emailInput"></paper-input><br>
+						<paper-input-decorator class="fullwidth" label="Password">
+							<input class="fullwidth" type="password" is="core-input" id="passwordInput">
+						</paper-input-decorator><br>
+					{{#if session "creatingNewUser"}}
+						<paper-button raised id="createAccountButton">Create Account</paper-button>
+					{{else}}
+						<paper-button raised id="signInButton">Sign In</paper-button>
+					{{/if}}
+				{{/if}}{{/if}}
+			</div>
 			<core-menu theme="core-light-theme">
 				<paper-item id="charactersMenuButton">Characters</paper-item>
 			</core-menu>
@@ -12,7 +46,7 @@
 							 detail-pages 
 							 transitions="hero-transition cross-fade"
 							 selected={{globalDetailSelected}}>
-			<section id="mainContentSection">
+			<section id="mainContentSection" class={{notSelected}}>
 				<core-header-panel fit mode="seamed">
 					{{> yield}}
 				</core-header-panel>

rpg-docs/client/views/layout/layout.js

@@ -1,4 +1,29 @@
+Template.layout.helpers({
+	notSelected: function(){
+		return Session.get("global.ui.detailShow")? "not-selected" : null;
+	}
+})
+
 Template.layout.events({
+	"tap #signInButton": function(event, instance){
+		var email = instance.find("#emailInput").value;
+		var pass = instance.find("#passwordInput").value;
+		Meteor.loginWithPassword(email, pass);
+	},
+	"keypress #emailInput, keypress #passwordInput": function (event, instance) {
+		if (event.which === 13) {
+			var email = instance.find("#emailInput").value;
+			var pass = instance.find("#passwordInput").value;
+			Meteor.loginWithPassword(email, pass);
+		}
+	},
+	"tap #signOutButton": function(event, instance){
+		Meteor.logout();
+	},
+	"tap #createAccountButton": function(event, instance){
+		console.warn("not yet implemented");
+		//Session.set("creatingNewUser", true);
+	},
 	"tap #charactersMenuButton": function(event, instance){
 		Router.go("/");
 	}

rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.html

@@ -13,7 +13,7 @@
 <template name="colorDropdown">
 	<paper-menu-button id="colorDropdown">
 		<paper-icon-button icon="editor:format-paint" noink></paper-icon-button>
-		<paper-dropdown class="dropdown">
+		<paper-dropdown class="dropdown" halign="right">
 			<core-menu class="menu">
 				{{#each colors}}
 					<paper-item name={{key}} class="colorMenuItem {{colorClass key}}">{{className}}</paper-item>