Added more material design touch response, swipe pages, and began effects lists

rpg-docs/client/globalHelpers/session.js

@@ -0,0 +1,3 @@
+Template.registerHelper("session", function(key){
+	return Session.get(key);
+});

rpg-docs/client/globalHelpers/signedString.js

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

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

@@ -4,70 +4,72 @@
 			{{> abilityCards}}
 		</div>
 		<div class="statsFlex">
-			<paper-shadow class="card" id="armor">
+			{{#clickCard class="card" id="armor"}}
 				<h1>{{attributeValue "armor"}}</h1>
 				<p class="caption">Armor</p>
-			</paper-shadow>
-			<paper-shadow class="card" id="initiative">
+			{{/clickCard}}
+			{{#clickCard class="card" id="initiative"}}
 				<h1>{{skillMod "initiative"}}</h1>
 				<p class="caption">Initiative</p>
-			</paper-shadow>
-			<paper-shadow class="card" id="proficiencyBonus">
+			{{/clickCard}}
+			{{#clickCard class="card" id="proficiencyBonus"}}
 				<h1>{{attributeValue "proficiencyBonus"}}</h1>
 				<p class="caption">Proficiency Bonus</p>
-			</paper-shadow>
-			<paper-shadow class="card" id="speed">
+			{{/clickCard}}
+			{{#clickCard class="card" id="speed"}}
 				<h1>{{attributeValue "speed"}}</h1>
 				<p class="caption">Speed</p>
-			</paper-shadow>
-			<paper-shadow class="card" id="passivePerception">
+			{{/clickCard}}
+			{{#clickCard class="card" id="passivePerception"}}
 				<h1>{{passiveSkill "perception"}}</h1>
 				<p class="caption">Passive Perception</p>
-			</paper-shadow>
-			<paper-shadow class="card" id="hitDice">
-				<h1>{{> hitDice hitDice="d6HitDice" d="6"}}</h1>
-				<h1>{{> hitDice hitDice="d8HitDice" d="8"}}</h1>
-				<h1>{{> hitDice hitDice="d10HitDice" d="10"}}</h1>
-				<h1>{{> hitDice hitDice="d12HitDice" d="12"}}</h1>
+			{{/clickCard}}
+			{{#clickCard class="card" id="hitDice"}}
+				<h1 class="attribute">{{> hitDice hitDice="d6HitDice" d="6"}}</h1>
+				<h1 class="attribute">{{> hitDice hitDice="d8HitDice" d="8"}}</h1>
+				<h1 class="attribute">{{> hitDice hitDice="d10HitDice" d="10"}}</h1>
+				<h1 class="attribute">{{> hitDice hitDice="d12HitDice" d="12"}}</h1>
 				<p class="caption">Hit Dice</p>
-			</paper-shadow>
+			{{/clickCard}}
 			{{# if canCast}}
-			<paper-shadow class="card" id="spellSlots">
-				<h1>{{> spellSlots}}</h1>
-				<p class="caption">Spell Slots</p>
-			</paper-shadow>
+				{{#clickCard class="card" id="spellSlots"}}
+					<h1>{{> spellSlots}}</h1>
+					<p class="caption">Spell Slots</p>
+				{{/clickCard}}
 			{{/if}}
 			{{# if attributeBase "rages"}}
-			<paper-shadow class="card" id="rages">
-				<h1>{{attributeValue "rages"}}</h1>
-				<p class="caption">rages</p>
-			</paper-shadow>
+				{{#clickCard class="card" id="rages"}}
+					<h1>{{attributeValue "rages"}}</h1>
+					<p class="caption">rages</p>
+				{{/clickCard}}
 			{{/if}}
 			{{# if attributeBase "sorceryPoints"}}
-			<paper-shadow class="card" id="sorceryPoints">
-				<h1>{{attributeValue "sorceryPoints"}}</h1>
-				<p class="caption">Sorcery Points</p>
-			</paper-shadow>
+				{{#clickCard class="card" id="sorceryPoints"}}
+					<h1>{{attributeValue "sorceryPoints"}}</h1>
+					<p class="caption">Sorcery Points</p>
+				{{/clickCard}}
 			{{/if}}
 			{{# if attributeBase "expertiseDice"}}
-			<paper-shadow class="card" id="expertiseDice">
-				<h1>{{attributeValue "expertiseDice"}}</h1>
-				<p class="caption">Expertise Dice</p>
-			</paper-shadow>
+				{{#clickCard class="card" id="expertiseDice"}}
+					<h1>{{attributeValue "expertiseDice"}}</h1>
+					<p class="caption">Expertise Dice</p>
+				{{/clickCard}}
 			{{/if}}
 			{{# if attributeBase "superiorityDice"}}
-			<paper-shadow class="card" id="superiorityDice">
-				<h1>{{attributeValue "superiorityDice"}}</h1>
-				<p class="caption">Superiority Dice</p>
-			</paper-shadow>
+				{{#clickCard class="card" id="superiorityDice"}}
+					<h1>{{attributeValue "superiorityDice"}}</h1>
+					<p class="caption">Superiority Dice</p>
+				{{/clickCard}}
 			{{/if}}	
 		</div>
 	</div>
+	{{> attributeDialog character=this}}
+	{{> skillDialog character=this}}
 </template>
 
 <template name="hitDice">
 	{{# if ../attributeBase hitDice}}
-	{{../attributeValue hitDice}}d{{d}} + {{../abilityMod "constitution"}}
+		{{../attributeValue hitDice}}d{{d}} + {{../abilityMod "constitution"}}
 	{{/if}}
 </template>
 
@@ -82,3 +84,59 @@
 	{{attributeValue "level8SpellSlots"}}
 	{{attributeValue "level9SpellSlots"}}
 </template>
+
+<template name="attributeDialog">
+	<!--needs character, attributeName, attributeTitle-->
+	<paper-dialog id="attributeDialog" heading={{session "selectedAttributeTitle"}} backdrop transition="core-transition-center">
+		{{#if attributeName}}
+		{{character.attributeValue attributeName}}<br>
+		{{#each effects.add}}
+			{{> attributeEffect}}
+		{{/each}}
+		{{#each effects.mul}}
+			{{> attributeEffect}}
+		{{/each}}
+		{{#each effects.min}}
+			{{> attributeEffect}}
+		{{/each}}
+		{{#each effects.max}}
+			{{> attributeEffect}}
+		{{/each}}
+		{{signedString attribute.adjustment}}
+		{{/if}}
+	</paper-dialog>
+</template>
+
+<template name="attributeEffect">
+	{{#if editing}}
+		<div class="editEffect">
+			<paper-dropdown-menu label="Operation">
+				<core-menu id="operationSelector">
+					<paper-item>add</paper-item>
+					<paper-item>multiply</paper-item>
+					<paper-item>min</paper-item>
+					<paper-item>max</paper-item>
+				</core-menu>
+			</paper-dropdown-menu>
+			<paper-input id="effectValueInput" label="Value" floatinglabel></paper-input>
+			<paper-input id="effectNameInput" label="Name" floatinglabel></paper-input>
+			<paper-icon-button id="doneButton" icon="done" title="save" role="button" aria-label="save"></paper-icon-button>
+			<paper-icon-button id="cancelButton" icon="clear" title="cancel" role="button" aria-label="cancel"></paper-icon-button>
+			<paper-icon-button id="deleteButton" icon="delete" title="delete" role="button" aria-label="delete"></paper-icon-button>
+		</div>
+	{{else}}
+		<div class="effect">
+			<div class="effectValue">{{operation}} {{signedEffectValue}}</div><div class="effectName"> {{name}}</div>
+			{{#if editable}}
+				<div class="editButton">EDIT</div>
+			{{/if}}
+		</div>
+	{{/if}}
+</template>
+
+<template name="skillDialog">
+	<!--needs character and skill string-->
+	<paper-dialog id="skillDialog" backdrop transition="core-transition-center">
+
+	</paper-dialog>
+</template>

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

@@ -0,0 +1,91 @@
+selectAttribute = function(name, title){
+	Session.set("selectedAttribute", name);
+	Session.set("selectedAttributeTitle", title);
+	Session.set("editingEffect", null);
+	document.querySelector("#attributeDialog").toggle();
+};
+
+selectSkill = function(name, title){
+	Session.set("selectedSkill", name);
+	Session.set("selectedSkillTitle", title);
+	Session.set("editingEffect", null);
+	document.querySelector("#skillDialog").toggle();
+};
+
+Template.stats.events({
+	"click #armor": function(){
+		console.log("clicked armor");
+		selectAttribute("armor", "Armor")
+	}
+});
+
+Template.attributeDialog.helpers({
+	attributeTitle: function(){
+		return Session.get("selectedAttributeTitle");
+	},
+	attributeName: function(){
+		return Session.get("selectedAttribute");
+	},
+	attribute: function(){
+		return this.character.getField(Session.get("selectedAttribute"));
+	},
+	effects: function(){
+		var attribute = this.character.getField(Session.get("selectedAttribute"));
+		return _.groupBy(attribute.effects, "operation");
+	},
+	effectValue: function(){
+		return evaluateEffect(Template.parentData(1).character._id, this);
+	}
+});
+
+Template.attributeEffect.helpers({
+	editing: function(){
+		return Session.get("editingEffect") === this._id;
+	},
+	editable: function(){
+		return this.type === "editable";
+	},
+	operation: function(){
+		switch(this.operation){
+			case "add":
+				return;
+			case "mul":
+				return Spacebars.SafeString("×");
+			case "min":
+				return "min";
+			case "max":
+				return "max";
+			default:
+				return this.operation;
+		}
+	},
+	signedEffectValue: function(){
+		var value = evaluateEffect(Template.parentData(1).character._id, this);
+		return signedString(value);
+	}
+});
+
+Template.attributeEffect.events({
+	"click .editButton": function(event){
+		Session.set("editingEffect", this._id);
+	},
+	"click #doneButton": function(event){
+		var newEffect = {};
+		//TODO setup the changed effect
+		var attribute = Session.get("selectedAttribute");
+		var charId = Template.parentData(2)._id;
+		Meteor.call("updateEffect", charId, attribute, this._id, newEffect)
+		Session.set("editingEffect", null);
+	},
+	"click #cancelButton": function(event){
+		Session.set("editingEffect", null);
+	},
+	"click #deleteButton": function(event){
+		console.log("check that ", Template.parentData(2), "is a character");
+		var attribute = Session.get("selectedAttribute");
+		var pullObject = {};
+		pullObject[attribute + ".effects"] = {_id: this._id};
+		Characters.update(Template.parentData(2)._id, {$pull: pullObject});
+		Session.set("editingEffect", null);
+	}
+});

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

@@ -11,6 +11,7 @@
 	text-align: center;
 	background-color: #D50000;
 	padding: 16px;
+	position: relative;
 }
 
 .abilityFlex .card {

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

@@ -10,6 +10,7 @@
 <template name="strengthCard">
 	<paper-shadow class="card double">
 		<div class="abilityScore red white-text">
+			{{> ripple color="#eee"}}
 			<h1 class="display1">{{attributeValue "strength"}}</h1>
 			<h2>{{abilityMod "strength"}}</h2>
 		</div>
@@ -25,6 +26,7 @@
 <template name="dexterityCard">
 	<paper-shadow class="card double">
 		<div class="abilityScore green white-text">
+			{{> ripple color="#eee"}}
 			<h1 class="display1">{{attributeValue "dexterity"}}</h1>
 			<h2>{{abilityMod "dexterity"}}</h2>
 		</div>
@@ -42,6 +44,7 @@
 <template name="constitutionCard">
 	<paper-shadow class="card double">
 		<div class="abilityScore deep-orange white-text">
+			{{> ripple color="#eee"}}
 			<h1 class="display1">{{attributeValue "constitution"}}</h1>
 			<h2>{{abilityMod "constitution"}}</h2>
 		</div>
@@ -56,6 +59,7 @@
 <template name="intelligenceCard">
 	<paper-shadow class="card double">
 		<div class="abilityScore indigo white-text">
+			{{> ripple color="#eee"}}
 			<h1 class="display1">{{attributeValue "intelligence"}}</h1>
 			<h2>{{abilityMod "intelligence"}}</h2>
 		</div>
@@ -75,6 +79,7 @@
 <template name="wisdomCard">
 	<paper-shadow class="card double">
 		<div class="abilityScore purple white-text">
+			{{> ripple color="#eee"}}
 			<h1 class="display1">{{attributeValue "wisdom"}}</h1>
 			<h2>{{abilityMod "wisdom"}}</h2>
 		</div>
@@ -94,6 +99,7 @@
 <template name="charismaCard">
 	<paper-shadow class="card double">
 		<div class="abilityScore pink white-text">
+			{{> ripple color="#eee"}}
 			<h1 class="display1">{{attributeValue "charisma"}}</h1>
 			<h2>{{abilityMod "charisma"}}</h2>
 		</div>

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

@@ -3,17 +3,18 @@
 		<paper-tab>Stats</paper-tab>
 		<paper-tab>Features</paper-tab>
 		<paper-tab>Inventory</paper-tab>
+		Proficiency Bonus
 		<paper-tab>Spellbook</paper-tab>
 		<paper-tab>Persona</paper-tab>
 		<paper-tab>Journal</paper-tab>
 	</paper-tabs>
-
-	<core-animated-pages selected={{selectedTab}} transitions="slide-from-right">
-		<div>{{> stats}}</div>
-		<div>features</div>
-		<div>inventory</div>
-		<div>spellBook</div>
-		<div>persona</div>
-		<div>journal</div>
+	
+	<core-animated-pages id="tabPages" selected={{selectedTab}} transitions="slide-from-right">
+		<swipe-detect>{{> stats}}</swipe-detect>
+		<swipe-detect>features</swipe-detect>
+		<swipe-detect>inventory</swipe-detect>
+		<swipe-detect>spellBook</swipe-detect>
+		<swipe-detect>persona</swipe-detect>
+		<swipe-detect>journal</swipe-detect>
 	</core-animated-pages>
 </template>

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

@@ -1,6 +1,18 @@
 Template.characterSheet.created = function(){
 	Template.instance().selectedTab = new ReactiveVar(0)
-}
+};
+
+var setTab = function(instance, num){
+	instance.selectedTab.set(num);
+};
+
+var incTab = function(instance, num){
+	var current = +instance.selectedTab.get();
+	var selected = current + num;
+	if (selected < 0) return;
+	if (selected >= document.querySelector('#tabPages').children.length) return;
+	setTab(instance, selected);
+};
 
 Template.characterSheet.rendered = function(){
 	var observer = new ObjectObserver(document.querySelector('#characterSheetTabs'));
@@ -9,11 +21,11 @@ Template.characterSheet.rendered = function(){
 		Object.keys(changed).forEach(function(property) {
 			if(property === "selected"){
 				var selected = changed[property];
-				instance.selectedTab.set(selected);
+				setTab(instance, selected);
 			}
 		})
 	});
-}
+};
 
 Template.characterSheet.helpers({
 	selectedTab: function(){
@@ -22,8 +34,16 @@ Template.characterSheet.helpers({
 });
 
 Template.characterSheet.events({
-	
-})
+	"#tabPages track": function(event){
+		console.log(event);
+	},
+	"swipeleft": function(event){
+		incTab(Template.instance(), 1);
+	},
+	"swiperight": function(event){
+		incTab(Template.instance(), -1);
+	},
+});
 
 /* requires the following templates
 stats

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

@@ -2,6 +2,11 @@
 	height: 32px;
 	display: flex;
 	align-items: center;
+	position: relative;
+}
+
+.skillRow:hover{
+	background: #FFEBEE;
 }
 
 .profIcon{

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

@@ -15,6 +15,7 @@
 
 <template name="skillRow">
 	<div class="subhead skillRow">
+		{{> ripple}}
 		<div class="profIcon" style="background-image: url(/png/profIcons/{{profIcon skill}})"></div>
 		{{#if failSkill}}
 		<div class="fail skillMod">fail</div>

rpg-docs/client/views/index.html

@@ -1,11 +1,16 @@
 <head>
 	<title>RPG Docs</title>
 	<meta name="viewport" content="width=device-width initial-scale=1.0, user-scalable=no">
-    <link rel="import" href="/bower_components/polymer/polymer.html">
-    <link rel="import" href="/bower_components/paper-tabs/paper-tabs.html">
-    <link rel="import" href="/bower_components/core-animated-pages/core-animated-pages.html">
-    <link rel="import" href="/bower_components/core-animated-pages/transitions/slide-from-right.html">
-    <link rel="import" href="/bower_components/paper-shadow/paper-shadow.html">
-    <link rel="import" href="/bower_components/paper-spinner/paper-spinner.html">
-    <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic,900,900italic,100italic,100&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
+	<link rel="import" href="/bower_components/polymer/polymer.html">
+	<link rel="import" href="/bower_components/paper-tabs/paper-tabs.html">
+	<link rel="import" href="/bower_components/core-animated-pages/core-animated-pages.html">
+	<link rel="import" href="/bower_components/core-animated-pages/transitions/slide-from-right.html">
+	<link rel="import" href="/bower_components/paper-dialog/paper-dialog.html">
+	<link rel="import" href="/bower_components/paper-shadow/paper-shadow.html">
+	<link rel="import" href="/bower_components/paper-spinner/paper-spinner.html">
+	<link rel="import" href="/bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
+	<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
+	<link rel="import" href="/bower_components/paper-input/paper-input.html">
+	<link rel="import" href="/custom_components/swipe-detect/swipe-detect.html">
+	<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic,900,900italic,100italic,100&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
 </head>

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

@@ -0,0 +1,6 @@
+<template name="clickCard">
+	<paper-shadow class="clickCard {{class}}" z="1" animated id={{id}}>
+		{{> ripple}}
+		{{> UI.contentBlock}}
+	</paper-shadow>
+</template>

rpg-docs/client/views/paperTemplates/clickCard/clickCard.js

@@ -0,0 +1,8 @@
+Template.clickCard.events({
+	"click paper-shadow ": function(event){
+		event.currentTarget.setZ(2);
+		_.delay(function(){
+			event.currentTarget.setZ(1);	
+		}, 300)
+	}
+})

rpg-docs/client/views/paperTemplates/ripple/ripple.css

@@ -0,0 +1,8 @@
+.custom-ripple {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	color: #D50000;
+}

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

@@ -0,0 +1,7 @@
+<template name="ripple">
+	{{#if color}}
+	<paper-ripple style="color:{{color}}" class="recenteringTouch custom-ripple"></paper-ripple>
+	{{else}}
+	<paper-ripple class="recenteringTouch custom-ripple"></paper-ripple>
+	{{/if}}
+</template>