Added Health Bar

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

@@ -19,12 +19,12 @@
 	</core-toolbar>
 	<div fit>
 		<core-animated-pages id="tabPages" selected={{selectedTab}} transitions="slide-from-right" fit>
-			<swipe-detect touch-action="pan-y" flex>{{> stats}}</swipe-detect>
+			<section flex>{{> stats}}</section>
-			<swipe-detect touch-action="pan-y" flex>{{> features}}</swipe-detect>
+			<section flex>{{> features}}</section>
-			<swipe-detect touch-action="pan-y" flex>{{> inventory}}</swipe-detect>
+			<section flex>{{> inventory}}</section>
-			<swipe-detect touch-action="pan-y" flex>{{> spells}}</swipe-detect>
+			<section flex>{{> spells}}</section>
-			<swipe-detect touch-action="pan-y" flex>{{> persona}}</swipe-detect>
+			<section flex>{{> persona}}</section>
-			<swipe-detect touch-action="pan-y" flex>{{> journal}}</swipe-detect>
+			<section flex>{{> journal}}</section>
 		</core-animated-pages>
 	</div>
 </template>

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}});
 	}
 });
 

rpg-docs/client/views/layout/imports.html

@@ -29,6 +29,7 @@
 <link rel="import" href="/components/paper-item/paper-item.html">
 <link rel="import" href="/components/paper-menu-button/paper-menu-button.html">
 <link rel="import" href="/components/paper-shadow/paper-shadow.html">
+<link rel="import" href="/components/paper-slider-diff/paper-slider.html">
 <link rel="import" href="/components/paper-spinner/paper-spinner.html">
 <link rel="import" href="/components/paper-tabs/paper-tabs.html">
 <link rel="import" href="/components/paper-toggle-button/paper-toggle-button.html">