Added Health Bar

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

@@ -17,3 +17,17 @@
 .containerMain.featureDescription {
 	white-space: pre-line;
 }
+
+.resourceCards paper-shadow.healthCard {
+	width: 100%;
+	padding: 0 16px 0 0;
+}
+
+.healthCard paper-slider{
+	width: 100%;
+}
+
+#hitPointSlider::shadow #sliderBar::shadow #activeProgress {
+	background-color: #0f9d58;
+	height: 50px;
+}

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

@@ -2,6 +2,14 @@
 	<div fit>
 		<div class="scroll-y" fit>
 			<div class="resourceCards" layout horizontal wrap>
+				<paper-shadow class="card container healthCard" hero-id="main" {{detailHero}} layout vertical>
+					<paper-slider id="hitPointSlider"
+							  value={{attributeValue "hitPoints"}}
+							  max={{attributeBase "hitPoints"}} 
+							  editable pin
+							  role="slider"
+							  ></paper-slider>
+				</paper-shadow>
 				<!--Armor-->
 				<paper-shadow class="card container statCard" hero-id="main" {{detailHero}} layout horizontal>
 					<div class="containerLeft">

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

@@ -39,6 +39,11 @@ Template.features.events({
 	"tap .resetFeature": function(event){
 		var featureId = this._id;
 		Features.update(featureId, {$set: {used: 0}});
+	},
+	"change #hitPointSlider": function(event){
+		var value = event.currentTarget.value;
+		var adjustment = value - this.attributeBase("hitPoints");
+		Characters.update(this._id, {$set: {"hitPoints.adjustment": adjustment}});
 	}
 });