Made hero attribute reactive and iterated inventory UI

rpg-docs/Model/Inventory/Containers.js

@@ -23,7 +23,7 @@ Containers.helpers({
 	},
 	totalWeight: function(){
 		var weight = this.weight;
-		Items.find({container: this._id, equipped: false}, {fields: {weight: 1, value: 1}}).forEach(function(item){
+		Items.find({container: this._id, equipped: false}, {fields: {quantity: 1, weight: 1}}).forEach(function(item){
 			weight += item.totalWeight();
 		});
 		return weight;

rpg-docs/client/globalHelpers/GlobalUI.js

@@ -37,7 +37,7 @@ this.GlobalUI = (function() {
 	GlobalUI.showDetail = function(opts) {
 		Session.set("global.ui.detailData", opts.data);
 		Session.set("global.ui.detailTemplate", opts.template);
-		GlobalUI.detailHero = opts.hero;
+		Session.set("global.ui.detailHeroId", opts.heroId);
 		Session.set("global.ui.detailShow", true);
 	};
 
@@ -51,7 +51,7 @@ this.GlobalUI = (function() {
 	GlobalUI.setDetail = function(opts) {
 		Session.set("global.ui.detailData", opts.data);
 		Session.set("global.ui.detailTemplate", opts.template);
-		GlobalUI.detailHero = opts.hero;
+		Session.set("global.ui.detailHeroId", opts.heroId);
 	};
 
 	GlobalUI.closeDetail = function(){
@@ -108,21 +108,15 @@ Template.layout.events({
 		} else {
 			Session.set("global.ui.detailData", null);
 			Session.set("global.ui.detailTemplate", null);
-			//remove the hero attribute
+			Session.set("global.ui.detailHeroId", null);
-			var heroElem = GlobalUI.detailHero;
-			heroElem && heroElem.attr("hero", null);
-			heroElem && heroElem.find("[hero-id]").attr("hero", null);
-			GlobalUI.detailHero = null;
 		}
 	},
 	"core-animated-pages-transition-prepare": function(e) {
 		var detailOpened = Session.get("global.ui.detailShow");
 		if(detailOpened) {
-			//add the hero attribute where needed
+			//set up the transition
-			var heroElem = GlobalUI.detailHero;
-			heroElem && heroElem.attr("hero", "");
-			heroElem && heroElem.find("[hero-id]").attr("hero", "");
 		} else {
+			//undo hack
 			$("#mainContentSection").removeClass("fake-selected");
 		}
 	},

rpg-docs/client/globalHelpers/detailHero.js

@@ -0,0 +1,5 @@
+Template.registerHelper("detailHero", function(){
+	if ( Session.equals("global.ui.detailHeroId", this._id) ) {
+		return "hero";
+	}
+});

rpg-docs/client/globalHelpers/round.js

@@ -0,0 +1,6 @@
+Template.registerHelper("round", function(value, decimalPlaces){
+	decimalPlaces = +decimalPlaces || 2;
+	var num = +value;
+	var tens = Math.pow(10, decimalPlaces)
+	return Math.round(num * tens) / tens;
+});

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

@@ -44,7 +44,7 @@ h2, .title {
 	letter-spacing: 0.005em;
 }
 
-.white-text h2{
+.white-text h2, .white-text .title, .white-text.title{
 	color: rgba(255,255,255,0.87);
 }
 

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

@@ -9,8 +9,8 @@
 			</div>
 			<div class="features">
 				{{#each features}}
-				<paper-shadow class="featureCard" hero-id="main" animated>
+				<paper-shadow class="featureCard" hero-id="main" {{detailHero}} animated>
-					<div hero-id="toolbar"></div>
+					<div hero-id="toolbar" {{detailHero}}></div>
 					<div class="featureCardTop">
 						<h2>{{name}}</h2>
 					</div>

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

@@ -11,7 +11,7 @@ Template.features.events({
 		GlobalUI.setDetail({
 			template: "featureDialog",
 			data:     {featureId: featureId, charId: this._id},
-			hero:     $(event.currentTarget)
+			heroId:   featureId
 		})
 	},
 	"tap .featureCard": function(event){
@@ -20,7 +20,7 @@ Template.features.events({
 		GlobalUI.setDetail({
 			template: "featureDialog",
 			data:     {featureId: featureId, charId: charId},
-			hero:     $(event.currentTarget)
+			heroId:   featureId
 		});
 	}
 });

rpg-docs/client/views/character/inventory/containerDialog/containerDialog.html

@@ -3,7 +3,7 @@
 		<core-header-panel fit>
 			<core-toolbar hero-id="toolbar" hero>
 				<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
-				<div flex>{{name}}</div>
+				<div flex hero-id="title" hero>{{name}}</div>
 				<paper-icon-button id="deleteContainer" 
 								   role="button"
 								   tabindex="0"

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

@@ -1,3 +1,28 @@
-.containerName {
+#inventory {
-	cursor: pointer;
+	padding: 4px;
+}
+
+.containers {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.container {
+	width: 332px;
+	flex-grow: 1;
+}
+
+.containerTop {
+	cursor: pointer;
+	margin: -16px -16px 0 -16px;
+	padding: 16px;
+}
+
+.containerBottom {
+	margin: 0 -16px -16px -16px;
+	padding: 16px;
+}
+
+.inventoryItem {
+	background: white;
 }

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

@@ -5,27 +5,33 @@
 				Armor:<br>
 				{{#if armor}}
 					{{#with armor}}
-						<paper-item class="inventoryItem"  hero-id="main">{{name}}</paper-item>
+						<paper-item class="inventoryItem"  hero-id="main" {{detailHero}}>{{name}}</paper-item>
 					{{/with}}
 				{{else}}
 					<paper-item>none</paper-item>
 				{{/if}}
 				Equipment:<br>
 				{{#each equipment}}
-					<paper-item class="inventoryItem"  hero-id="main">
+					<paper-item class="inventoryItem"  hero-id="main" {{detailHero}}>
 						{{name}}
 					</paper-item>
 				{{/each}}
 			</paper-shadow>
 			<div class="containers">
 				{{#each containers}}
-					<paper-shadow class="card"  hero-id="main">
+					<paper-shadow class="card container"  hero-id="main" {{detailHero}}>
-						<h2 class="containerName">{{name}}</h2>
+						<div class="containerTop green white-text" hero-id="toolbar" layout horizontal {{detailHero}}>
-						{{#each items ../_id _id}}
+							<div class="containerName title" hero-id="title" flex {{detailHero}}>{{name}}</div>
-							<paper-item class="inventoryItem" hero-id="main">
+							<div class="caption" style="margin-right: 8px">{{valueString totalValue}}</div>
+							<div class="caption">{{round totalWeight}}lbs</div>
+						</div>
+						<div flex class="containerMain">
+							{{#each items ../_id _id}}
+							<paper-item class="inventoryItem" hero-id="main" {{detailHero}}>
 								{{#if gt1 quantity}}{{quantity}}{{/if}}&nbsp;{{pluralName}}
 							</paper-item>
 						{{/each}}
+						</div>
 					</paper-shadow>
 				{{/each}}
 			</div>

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

@@ -39,7 +39,7 @@ Template.inventory.events({
 			GlobalUI.setDetail({
 				template: "itemDialog",
 				data:     {itemId: itemId, charId: charId},
-				hero:     $(event.currentTarget)
+				heroId:   itemId
 			});
 		});
 	},
@@ -47,8 +47,8 @@ Template.inventory.events({
 		var containerId = Containers.insert({name: "New Container", isCarried: true, charId: this._id});
 		GlobalUI.setDetail({
 			template: "containerDialog",
-			data:     {containerId: this._id, charId: this.charId},
+			data:     {containerId: containerId, charId: this.charId},
-			hero:     $(event.currentTarget)
+			heroId:   containerId
 		});
 	},
 	"tap .inventoryItem": function(event){
@@ -57,14 +57,14 @@ Template.inventory.events({
 		GlobalUI.setDetail({
 			template: "itemDialog",
 			data:     {itemId: itemId, charId: charId},
-			hero:     $(event.currentTarget)
+			heroId:   itemId
 		});
 	},
-	"tap .containerName": function(event){
+	"tap .containerTop": function(event){
 		GlobalUI.setDetail({
 			template: "containerDialog",
 			data:     {containerId: this._id, charId: this.charId},
-			hero:     $(event.currentTarget).parent()
+			heroId:   this._id
 		});
 	}
 });

rpg-docs/client/views/character/inventory/itemDialog/itemDialog.html

@@ -47,21 +47,21 @@
 					</paper-autogrow-textarea>
 				</paper-input-decorator>
 				<!--Container dropdown-->
-				<paper-dropdown-menu label="Container">
+				<paper-dropdown-menu id="containerDropDown" label="Container">
-					<paper-dropdown class="dropdown">
+					<paper-dropdown layered class="dropdown">
-						<core-menu id="containerDropDown" class="menu"  selected={{containerIndex}}>
+						<core-menu class="menu"  selected={{containerIndex}}>
 							{{#each containers}}
-								<paper-item class="containerMenuItem">{{name}}</paper-item>
+								<paper-item containerId={{_id}} class="containerMenuItem">{{name}}</paper-item>
 							{{/each}}
 						</core-menu>
 					</paper-dropdown>
 				</paper-dropdown-menu>
 				<!--Equipment slot dropdown-->
-				<paper-dropdown-menu label="slot">
+				<paper-dropdown-menu id="slotDropDown" label="slot">
-					<paper-dropdown class="dropdown">
+					<paper-dropdown layered class="dropdown">
-						<core-menu id="slotDropDown" class="menu"  selected={{equipmentSlotIndex}}>
+						<core-menu class="menu"  selected={{equipmentSlotIndex}}>
 							{{#each equipmentSlots}}
-								<paper-item class="slotMenuItem">{{name}}</paper-item>
+								<paper-item class="slotMenuItem" value={{value}}>{{name}}</paper-item>
 							{{/each}}
 						</core-menu>
 					</paper-dropdown>

rpg-docs/client/views/character/inventory/itemDialog/itemDialog.js

@@ -64,11 +64,17 @@ Template.itemDialog.events({
 		var equipped = Template.instance().find("#equippedInput").checked;
 		Items.update(this._id, {$set: {equipped: equipped}});
 	},
-	"tap .containerMenuItem": function(event){
+	"core-select #containerDropDown": function(event){
-		Items.update(Template.currentData().itemId, {$set: {container: this._id}});
+		var detail = event.originalEvent.detail;
+		if(!detail.isSelected) return;
+		var containerId = detail.item.getAttribute("containerId");
+		Items.update(Template.currentData().itemId, {$set: {container: containerId}});
 	},
-	"tap .slotMenuItem": function(event){
+	"core-select #slotDropDown": function(event){
-		Items.update(Template.currentData().itemId, {$set: {equipmentSlot: this.value}});
+		var detail = event.originalEvent.detail;
+		if(!detail.isSelected) return;
+		var value = detail.item.getAttribute("value");
+		Items.update(Template.currentData().itemId, {$set: {equipmentSlot: value}});
 	}
 });