From c55f2c51ab3a27909b4445a2749a8a206754e25a Mon Sep 17 00:00:00 2001
From: Thaum <stefanzermatten@gmail.com>
Date: Thu, 18 Dec 2014 11:02:03 +0000
Subject: [PATCH] Changed attribute dialogs to hero transitions

---
 rpg-docs/.meteor/release                      |   2 +-
 rpg-docs/.meteor/versions                     |  24 +--
 rpg-docs/client/views/GeneralCSS/general.css  |  16 ++
 .../client/views/character/Stats/stats.css    |  43 ++++-
 .../client/views/character/Stats/stats.html   | 181 ++++++++++--------
 .../client/views/character/Stats/stats.js     |  73 +++++--
 .../views/character/characterSheet.html       |  12 +-
 .../client/views/character/skills/skills.css  |   1 +
 rpg-docs/client/views/index.html              |   5 +
 .../paperTemplates/clickCard/clickCard.html   |   2 +-
 10 files changed, 246 insertions(+), 113 deletions(-)

diff --git a/rpg-docs/.meteor/release b/rpg-docs/.meteor/release
index 87bf4952..f1b62559 100644
--- a/rpg-docs/.meteor/release
+++ b/rpg-docs/.meteor/release
@@ -1 +1 @@
-METEOR@1.0
+METEOR@1.0.1
diff --git a/rpg-docs/.meteor/versions b/rpg-docs/.meteor/versions
index 14525024..7d59a45b 100644
--- a/rpg-docs/.meteor/versions
+++ b/rpg-docs/.meteor/versions
@@ -2,9 +2,9 @@ accounts-base@1.1.2
 accounts-password@1.0.4
 accounts-ui-unstyled@1.1.4
 accounts-ui@1.1.3
-aldeed:autoform@3.2.0
+aldeed:autoform@4.1.0
 aldeed:collection2@2.2.0
-aldeed:simple-schema@1.0.3
+aldeed:simple-schema@1.1.0
 application-configuration@1.0.3
 autoupdate@1.1.3
 base64@1.0.1
@@ -18,7 +18,7 @@ ctl-helper@1.0.4
 ctl@1.0.2
 cw4gn3r:jquery-event-drag@2.2.0
 dburles:collection-helpers@1.0.1
-ddp@1.0.11
+ddp@1.0.12
 deps@1.0.5
 ejson@1.0.4
 email@1.0.4
@@ -30,14 +30,14 @@ htmljs@1.0.2
 http@1.0.8
 id-map@1.0.1
 insecure@1.0.1
-iron:controller@1.0.0
-iron:core@1.0.0
-iron:dynamic-template@1.0.0
-iron:layout@1.0.0
-iron:location@1.0.1
-iron:middleware-stack@1.0.0
-iron:router@1.0.1
-iron:url@1.0.0
+iron:controller@1.0.3
+iron:core@1.0.3
+iron:dynamic-template@1.0.3
+iron:layout@1.0.3
+iron:location@1.0.3
+iron:middleware-stack@1.0.3
+iron:router@1.0.3
+iron:url@1.0.3
 jquery@1.0.1
 json@1.0.1
 launch-screen@1.0.0
@@ -51,7 +51,7 @@ minifiers@1.1.2
 minimongo@1.0.5
 mobile-status-bar@1.0.1
 mongo-livedata@1.0.6
-mongo@1.0.8
+mongo@1.0.9
 mrt:moment@2.6.0
 npm-bcrypt@0.7.7
 observe-sequence@1.0.3
diff --git a/rpg-docs/client/views/GeneralCSS/general.css b/rpg-docs/client/views/GeneralCSS/general.css
index 03dc0f08..d961f5eb 100644
--- a/rpg-docs/client/views/GeneralCSS/general.css
+++ b/rpg-docs/client/views/GeneralCSS/general.css
@@ -12,6 +12,10 @@ body.core-narrow {
 	padding: 8px;
 }
 
+body /deep/ core-menu {
+	overflow-x: hidden !important;
+}
+
 .calculatedValue {
 	color: #021C33;
 	font-weight: bold;
@@ -78,3 +82,15 @@ paper-button {
 .center {
 	text-align: center;
 }
+
+.screen-center {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	-webkit-transform: translate(-50%, -50%);
+	transform: translate(-50%, -50%);
+}
+
+*[hidden] {
+	visibility: hidden;
+}
diff --git a/rpg-docs/client/views/character/Stats/stats.css b/rpg-docs/client/views/character/Stats/stats.css
index 316ee8e8..e2d44935 100644
--- a/rpg-docs/client/views/character/Stats/stats.css
+++ b/rpg-docs/client/views/character/Stats/stats.css
@@ -3,12 +3,16 @@
 }
 
 #stats, #stats .abilityFlex, #stats .statsFlex{
-	display: flex;
+	display: flex !important;
 	justify-content: center;
-	align-items: flex-start;
+	align-items: stretch;
 	flex-wrap: wrap;
 }
 
+#stats .card {
+	flex-grow: 1;
+}
+
 #stats .abilityFlex{
 	flex-basis: 642px;
 	flex-grow: 1;
@@ -19,4 +23,39 @@
 	min-width: 152px;
 	flex-basis: 0px;
 	flex-grow: 1;
+}
+
+.editEffect > * {
+	vertical-align: bottom;
+}
+
+.detailCard {
+	background: white;
+	border-radius: 2px;
+	padding: 16px;
+}
+
+#detailContainer {
+	position: fixed;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	pointer-events: none;
+}
+
+#detailContainer > *{
+	pointer-events: auto;
+}
+
+#darkOverlay {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: rgba(0,0,0,0.6);
+}
+
+section:not(.core-selected):not([animate]) paper-shadow[hero] {
+	visibility: hidden;
 }
\ No newline at end of file
diff --git a/rpg-docs/client/views/character/Stats/stats.html b/rpg-docs/client/views/character/Stats/stats.html
index d765894e..63967878 100644
--- a/rpg-docs/client/views/character/Stats/stats.html
+++ b/rpg-docs/client/views/character/Stats/stats.html
@@ -1,70 +1,83 @@
 <template name="stats">
-	<div id="stats">
-		<div class="abilityFlex">
-			{{> abilityCards}}
-		</div>
-		<div class="statsFlex">
-			{{#clickCard class="card" id="armor"}}
-				<h1>{{attributeValue "armor"}}</h1>
-				<p class="caption">Armor</p>
-			{{/clickCard}}
-			{{#clickCard class="card" id="initiative"}}
-				<h1>{{skillMod "initiative"}}</h1>
-				<p class="caption">Initiative</p>
-			{{/clickCard}}
-			{{#clickCard class="card" id="proficiencyBonus"}}
-				<h1>{{attributeValue "proficiencyBonus"}}</h1>
-				<p class="caption">Proficiency Bonus</p>
-			{{/clickCard}}
-			{{#clickCard class="card" id="speed"}}
-				<h1>{{attributeValue "speed"}}</h1>
-				<p class="caption">Speed</p>
-			{{/clickCard}}
-			{{#clickCard class="card" id="passivePerception"}}
-				<h1>{{passiveSkill "perception"}}</h1>
-				<p class="caption">Passive Perception</p>
-			{{/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>
-			{{/clickCard}}
-			{{# if canCast}}
-				{{#clickCard class="card" id="spellSlots"}}
-					<h1>{{> spellSlots}}</h1>
-					<p class="caption">Spell Slots</p>
-				{{/clickCard}}
-			{{/if}}
-			{{# if attributeBase "rages"}}
-				{{#clickCard class="card" id="rages"}}
-					<h1>{{attributeValue "rages"}}</h1>
-					<p class="caption">rages</p>
-				{{/clickCard}}
-			{{/if}}
-			{{# if attributeBase "sorceryPoints"}}
-				{{#clickCard class="card" id="sorceryPoints"}}
-					<h1>{{attributeValue "sorceryPoints"}}</h1>
-					<p class="caption">Sorcery Points</p>
-				{{/clickCard}}
-			{{/if}}
-			{{# if attributeBase "expertiseDice"}}
-				{{#clickCard class="card" id="expertiseDice"}}
-					<h1>{{attributeValue "expertiseDice"}}</h1>
-					<p class="caption">Expertise Dice</p>
-				{{/clickCard}}
-			{{/if}}
-			{{# if attributeBase "superiorityDice"}}
-				{{#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}}
+	<core-animated-pages selected={{selectedSection}} transitions="hero-transition cross-fade">
+		<section id="stats">
+			<div class="abilityFlex">
+				{{> abilityCards}}
+			</div>
+			<div class="statsFlex">
+				<paper-shadow {{isHero "armor"}} class="card attribute" hero-id="armor">
+					<h1>{{attributeValue "armor"}}</h1>
+					<p class="caption">Armor</p>
+				</paper-shadow>
+				<paper-shadow {{isHero "initiative"}} class="card skill" hero-id="initiative">
+					<h1>{{skillMod "initiative"}}</h1>
+					<p class="caption">Initiative</p>
+				</paper-shadow>
+				<paper-shadow {{isHero "proficiencyBonus"}} class="card attribute" hero-id="proficiencyBonus">
+					<h1>{{attributeValue "proficiencyBonus"}}</h1>
+					<p class="caption">Proficiency Bonus</p>
+				</paper-shadow>
+				<paper-shadow {{isHero "speed"}} class="card attribute" hero-id="speed">
+					<h1>{{attributeValue "speed"}}</h1>
+					<p class="caption">Speed</p>
+				</paper-shadow>
+				<paper-shadow {{isHero "passivePerception"}} class="card" hero-id="passivePerception">
+					<h1>{{passiveSkill "perception"}}</h1>
+					<p class="caption">Passive Perception</p>
+				</paper-shadow>
+				<paper-shadow class="card" id="hitDice">
+					<h1 class="attribute" hero-id="d6HitDice" {{isHero "d6HitDice"}}>
+						{{> hitDice hitDice="d6HitDice" d="6"}}
+					</h1>
+					<h1 class="attribute" hero-id="d8HitDice" {{isHero "d8HitDice"}}>
+						{{> hitDice hitDice="d8HitDice" d="8"}}
+					</h1>
+					<h1 class="attribute" hero-id="d10HitDice" {{isHero "d10HitDice"}}>
+						{{> hitDice hitDice="d10HitDice" d="10"}}
+					</h1>
+					<h1 class="attribute" hero-id="d12HitDice" {{isHero "d12HitDice"}}>
+						{{> hitDice hitDice="d12HitDice" d="12"}}
+					</h1>
+					<p class="caption">Hit Dice</p>
+				</paper-shadow>
+				{{# if canCast}}
+					<paper-shadow class="card" id="spellSlots">
+						<h1>{{> spellSlots}}</h1>
+						<p class="caption">Spell Slots</p>
+					</paper-shadow>
+				{{/if}}
+				{{# if attributeBase "rages"}}
+					<paper-shadow class="card" id="rages">
+						<h1>{{attributeValue "rages"}}</h1>
+						<p class="caption">rages</p>
+					</paper-shadow>
+				{{/if}}
+				{{# if attributeBase "sorceryPoints"}}
+					<paper-shadow class="card" id="sorceryPoints">
+						<h1>{{attributeValue "sorceryPoints"}}</h1>
+						<p class="caption">Sorcery Points</p>
+					</paper-shadow>
+				{{/if}}
+				{{# if attributeBase "expertiseDice"}}
+					<paper-shadow class="card" id="expertiseDice">
+						<h1>{{attributeValue "expertiseDice"}}</h1>
+						<p class="caption">Expertise Dice</p>
+					</paper-shadow>
+				{{/if}}
+				{{# if attributeBase "superiorityDice"}}
+					<paper-shadow class="card" id="superiorityDice">
+						<h1>{{attributeValue "superiorityDice"}}</h1>
+						<p class="caption">Superiority Dice</p>
+					</paper-shadow>
+				{{/if}}	
+			</div>
+		</section>
+		<section id="detailContainer">
+			<div cross-fade id="darkOverlay"></div>
+			{{> attributeDialog character=this}}
+			{{> skillDialog character=this}}	
+		</section>
+	</core-animated-pages>
 </template>
 
 <template name="hitDice">
@@ -87,8 +100,14 @@
 
 <template name="attributeDialog">
 	<!--needs character, attributeName, attributeTitle-->
-	<paper-dialog id="attributeDialog" heading={{session "selectedAttributeTitle"}} backdrop transition="core-transition-center">
-		{{#if attributeName}}
+	{{#if attributeName}}
+	<paper-shadow id="attributeDialog"
+				  class="detailCard"
+				  hero-id={{session "selectedAttribute"}} 
+				  hero
+				  heading={{session "selectedAttributeTitle"}} 
+				  z="2">
+		
 		{{character.attributeValue attributeName}}<br>
 		{{#each effects.add}}
 			{{> attributeEffect}}
@@ -103,23 +122,25 @@
 			{{> attributeEffect}}
 		{{/each}}
 		{{signedString attribute.adjustment}}
-		{{/if}}
-	</paper-dialog>
+	</paper-shadow>
+	{{/if}}
 </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 layered class="dropdown">
+					<core-menu id="operationSelector" selected={{operationNumber}} class="menu">
+						<paper-item>add</paper-item>
+						<paper-item>multiply</paper-item>
+						<paper-item>min</paper-item>
+						<paper-item>max</paper-item>
+					</core-menu>
+				</paper-dropdown>
 			</paper-dropdown-menu>
-			<paper-input id="effectValueInput" label="Value" floatinglabel></paper-input>
-			<paper-input id="effectNameInput" label="Name" floatinglabel></paper-input>
+			<paper-input id="effectValueInput" label="Value" value={{value}} floatinglabel></paper-input>
+			<paper-input id="effectNameInput" label="Name" value={{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>
@@ -128,7 +149,7 @@
 		<div class="effect">
 			<div class="effectValue">{{operation}} {{signedEffectValue}}</div><div class="effectName"> {{name}}</div>
 			{{#if editable}}
-				<div class="editButton">EDIT</div>
+				<paper-icon-button id="editButton" icon="create" title="edit" role="button" aria-label="edit"></paper-icon-button>
 			{{/if}}
 		</div>
 	{{/if}}
@@ -136,7 +157,7 @@
 
 <template name="skillDialog">
 	<!--needs character and skill string-->
-	<paper-dialog id="skillDialog" backdrop transition="core-transition-center">
+	<paper-dialog layered="false" id="skillDialog" backdrop transition="core-transition-center">
 
 	</paper-dialog>
 </template>
diff --git a/rpg-docs/client/views/character/Stats/stats.js b/rpg-docs/client/views/character/Stats/stats.js
index 4c264846..183d1190 100644
--- a/rpg-docs/client/views/character/Stats/stats.js
+++ b/rpg-docs/client/views/character/Stats/stats.js
@@ -2,20 +2,56 @@ 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.created = function(){
+	this.selectedSection = new ReactiveVar(0);
+}
+
 Template.stats.events({
-	"click #armor": function(){
-		console.log("clicked armor");
-		selectAttribute("armor", "Armor")
+	"tap .attribute": function(event){
+		var instance = Template.instance();
+		var selected = $(event.currentTarget).attr("hero-id");
+		var current = Session.get("selectedAttribute");
+		var f = function(){
+			selectAttribute(selected, "Title");
+			instance.selectedSection.set(1);
+		}
+		//we already have the dialog open
+		if(instance.selectedSection.get() === 1 && current != selected){
+			instance.selectedSection.set(0);
+			_.delay(f, 200);
+		} else {
+			f();
+		}
+			
+	},
+	"tap #darkOverlay": function(event){
+		Template.instance().selectedSection.set(0);
+		// let the user click through before it is completely gone
+		$("#darkOverlay").css("pointer-events", "none");
+		// make clickable again later
+		_.delay(function(){
+			$("#darkOverlay").css("pointer-events", "auto");
+		}, 500);
+	}
+});
+
+Template.stats.helpers({
+	selectedSection: function(){
+		return Template.instance().selectedSection.get();
+	},
+	isHero: function(string){
+		if(string === Session.get("selectedAttribute")||
+		   string === Session.get("selectedSkill")){
+			return "hero";
+		}
 	}
 });
 
@@ -59,6 +95,20 @@ Template.attributeEffect.helpers({
 				return this.operation;
 		}
 	},
+	operationNumber: function(){
+		switch(this.operation){
+			case "add":
+				return 0;
+			case "mul":
+				return 1;
+			case "min":
+				return 2;
+			case "max":
+				return 3;
+			default:
+				return -1;
+		}
+	},
 	signedEffectValue: function(){
 		var value = evaluateEffect(Template.parentData(1).character._id, this);
 		return signedString(value);
@@ -66,22 +116,23 @@ Template.attributeEffect.helpers({
 });
 
 Template.attributeEffect.events({
-	"click .editButton": function(event){
+	"tap #editButton": function(event){
 		Session.set("editingEffect", this._id);
 	},
-	"click #doneButton": function(event){
-		var newEffect = {};
+	"tap #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){
+	"tap #cancelButton": function(event){
 		Session.set("editingEffect", null);
 	},
-	"click #deleteButton": function(event){
-		console.log("check that ", Template.parentData(2), "is a character");
+	"tap #deleteButton": function(event){
 		var attribute = Session.get("selectedAttribute");
 		var pullObject = {};
 		pullObject[attribute + ".effects"] = {_id: this._id};
diff --git a/rpg-docs/client/views/character/characterSheet.html b/rpg-docs/client/views/character/characterSheet.html
index 0a9994ee..b5b28d97 100644
--- a/rpg-docs/client/views/character/characterSheet.html
+++ b/rpg-docs/client/views/character/characterSheet.html
@@ -10,11 +10,11 @@
 	</paper-tabs>
 	
 	<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>
+		<swipe-detect touch-action="pan-y">{{> stats}}</swipe-detect>
+		<swipe-detect touch-action="pan-y">features</swipe-detect>
+		<swipe-detect touch-action="pan-y">inventory</swipe-detect>
+		<swipe-detect touch-action="pan-y">spellBook</swipe-detect>
+		<swipe-detect touch-action="pan-y">persona</swipe-detect>
+		<swipe-detect touch-action="pan-y">journal</swipe-detect>
 	</core-animated-pages>
 </template>
diff --git a/rpg-docs/client/views/character/skills/skills.css b/rpg-docs/client/views/character/skills/skills.css
index 2c29b89d..71c4205b 100644
--- a/rpg-docs/client/views/character/skills/skills.css
+++ b/rpg-docs/client/views/character/skills/skills.css
@@ -19,6 +19,7 @@
 	/*TODO fix the actual images and remove inversion*/
 	-webkit-filter: invert(100%);
 	opacity: 0.54;
+	pointer-events: none;
 }
 
 .skillMod {
diff --git a/rpg-docs/client/views/index.html b/rpg-docs/client/views/index.html
index bcb2f040..ec06c4ee 100644
--- a/rpg-docs/client/views/index.html
+++ b/rpg-docs/client/views/index.html
@@ -5,10 +5,15 @@
 	<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/core-animated-pages/transitions/hero-transition.html">
+	<link rel="import" href="/bower_components/core-animated-pages/transitions/cross-fade.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-dropdown/paper-dropdown.html">
+	<link rel="import" href="/bower_components/core-menu/core-menu.html">
+	<link rel="import" href="/bower_components/paper-item/paper-item.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">
diff --git a/rpg-docs/client/views/paperTemplates/clickCard/clickCard.html b/rpg-docs/client/views/paperTemplates/clickCard/clickCard.html
index cbfeeae6..aa73ba4a 100644
--- a/rpg-docs/client/views/paperTemplates/clickCard/clickCard.html
+++ b/rpg-docs/client/views/paperTemplates/clickCard/clickCard.html
@@ -1,5 +1,5 @@
 <template name="clickCard">
-	<paper-shadow class="clickCard {{class}}" z="1" animated id={{id}}>
+	<paper-shadow animated class="clickCard {{class}}" z="1" id={{id}}>
 		{{> ripple}}
 		{{> UI.contentBlock}}
 	</paper-shadow>