Made hero attribute reactive and iterated inventory UI

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>
-					<div hero-id="toolbar"></div>
+				<paper-shadow class="featureCard" hero-id="main" {{detailHero}} animated>
+					<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 {
+	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">
-						<h2 class="containerName">{{name}}</h2>
-						{{#each items ../_id _id}}
-							<paper-item class="inventoryItem" hero-id="main">
+					<paper-shadow class="card container"  hero-id="main" {{detailHero}}>
+						<div class="containerTop green white-text" hero-id="toolbar" layout horizontal {{detailHero}}>
+							<div class="containerName title" hero-id="title" flex {{detailHero}}>{{name}}</div>
+							<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},
-			hero:     $(event.currentTarget)
+			data:     {containerId: containerId, charId: this.charId},
+			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 class="dropdown">
-						<core-menu id="containerDropDown" class="menu"  selected={{containerIndex}}>
+				<paper-dropdown-menu id="containerDropDown" label="Container">
+					<paper-dropdown layered class="dropdown">
+						<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 class="dropdown">
-						<core-menu id="slotDropDown" class="menu"  selected={{equipmentSlotIndex}}>
+				<paper-dropdown-menu id="slotDropDown" label="slot">
+					<paper-dropdown layered class="dropdown">
+						<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){
-		Items.update(Template.currentData().itemId, {$set: {container: this._id}});
+	"core-select #containerDropDown": function(event){
+		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){
-		Items.update(Template.currentData().itemId, {$set: {equipmentSlot: this.value}});
+	"core-select #slotDropDown": function(event){
+		var detail = event.originalEvent.detail;
+		if(!detail.isSelected) return;
+		var value = detail.item.getAttribute("value");
+		Items.update(Template.currentData().itemId, {$set: {equipmentSlot: value}});
 	}
 });