Updated Features UI to include use limits

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

@@ -19,6 +19,20 @@
 						<textarea id="featureDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
 					</paper-autogrow-textarea>
 				</paper-input-decorator>
+				<hr style="margin: 16px 0 16px 0;">
+				<div layout horizontal center>
+					<div class="caption">Limit Uses <paper-toggle-button id="limitUseCheck"
+											 checked={{usesSet}} 
+											 role="button" 
+											 aria-pressed="false" 
+											 tabindex="0" 
+											 touch-action="pan-y">
+						</paper-toggle-button>
+						{{#if usesSet}}
+							<paper-input id="usesInput" label="Uses" floatinglabel value={{uses}}></paper-input>
+						{{/if}}
+					</div>
+				</div>
 				{{#if effects}}
 					<hr style="margin: 16px 0 16px 0;">
 					<div id="effects">

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

@@ -40,7 +40,21 @@ Template.featureDialog.events({
 	"change #featureDescriptionInput": function(event){
 		var description = Template.instance().find("#featureDescriptionInput").value;
 		Features.update(this._id, {$set: {description: description}});
-	}
+	},
+	"change #limitUseCheck": function(event){
+		var currentUses = this.uses;
+		var featureId = this._id;
+		if( event.target.checked && !_.isString(currentUses) ){
+			Features.update(featureId, {$set: {uses: ""}}, {removeEmptyStrings: false});
+		} else if (!event.target.checked && _.isString(currentUses)){
+			Features.update(featureId, {$unset: {uses: ""}});
+		}
+	},
+	"change #usesInput, input #quantityInput": function(event){
+		var value = event.target.value;
+		var featureId = this._id;
+		Features.update(featureId, {$set: {uses: value}});
+	},
 });
 
 Template.featureDialog.helpers({
@@ -50,5 +64,8 @@ Template.featureDialog.helpers({
 	effects: function(){
 		var cursor = Effects.find({sourceId: this._id, type: "feature"})
 		return cursor;
+	},
+	usesSet: function(){
+		return _.isString(this.uses);
 	}
 });

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

@@ -1,10 +1,5 @@
-paper-shadow.featureCard {
-	width: 300px;
-	padding: 16px;
-	margin: 4px;
-	background: white;
-	flex-grow: 1;
-	border-radius: 2px;
+.containerTop {
+	cursor: pointer;
 }
 
 .features {
@@ -19,6 +14,7 @@ paper-shadow.featureCard {
 	margin-bottom: 8px;
 }
 
-.featureCardBottom {
+.containerMain.featureDescription {
 	white-space: pre-line;
+	padding-bottom: 0;
 }

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

@@ -7,16 +7,24 @@
 			<div class="actions">
 
 			</div>
-			<div class="features">
+			<div class="containers">
 				{{#each features}}
-				<paper-shadow class="featureCard" hero-id="main" {{detailHero}} animated>
-					<div hero-id="toolbar" {{detailHero}}></div>
-					<div class="featureCardTop">
-						<h2>{{name}}</h2>
-					</div>
-					<div class="featureCardBottom"><p>{{description}}</p></div>
-					<paper-ripple fit></paper-ripple>
-				</paper-shadow>
+					<paper-shadow class="card container featureCard"  hero-id="main" {{detailHero}}>
+						<div class="containerTop green white-text" hero-id="toolbar" layout horizontal center {{detailHero}}>
+							<div class="containerName title" hero-id="title" flex {{detailHero}}>{{name}}</div>
+							{{#if hasUses}}<div class="subhead" style="margin-right: 8px">{{usesLeft}}/{{usesValue}}</div>{{/if}}
+							<paper-ripple fit></paper-ripple>
+						</div>
+						<div flex class="containerMain body1 featureDescription">
+							{{description}}
+						</div>
+						{{#if hasUses}}
+							<div class="containerFoot" layout horizontal center end-justified>
+								{{#if usesLeft}}<paper-button class="useFeature">Use</paper-button>{{/if}}
+								<paper-button class="resetFeature">Reset</paper-button>
+							</div>
+						{{/if}}
+					</paper-shadow>
 				{{/each}}
 			</div>
 			<div class="fab-buffer"></div>

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

@@ -2,6 +2,9 @@ Template.features.helpers({
 	features: function(){
 		var features = Features.find({charId: this._id});
 		return features;
+	},
+	hasUses: function(){
+		return this.usesValue() > 0;
 	}
 });
 
@@ -14,7 +17,7 @@ Template.features.events({
 			heroId:   featureId
 		})
 	},
-	"tap .featureCard": function(event){
+	"tap .containerTop": function(event){
 		var featureId = this._id;
 		var charId = Template.parentData()._id;
 		GlobalUI.setDetail({
@@ -22,5 +25,13 @@ Template.features.events({
 			data:     {featureId: featureId, charId: charId},
 			heroId:   featureId
 		});
+	},
+	"tap .useFeature": function(event){
+		var featureId = this._id;
+		Features.update(featureId, {$inc: {used: 1}});
+	},
+	"tap .resetFeature": function(event){
+		var featureId = this._id;
+		Features.update(featureId, {$set: {used: 0}});
 	}
 });