Merge pull request #122 from Dumbgenius/feature-22-temp-hp, requires migration

Feature - TempHP as a character attribute,

rpg-docs/client/views/character/stats/addEHPDialog/addEHPDialog.html

@@ -1,5 +1,5 @@
 <!-- data just needs charId -->
-<template name="addTHPDialog">
+<template name="addEHPDialog">
 	<div class="fit layout vertical">
 		<app-header-layout has-scrolling-region class="new-character-dialog flex">
 			<app-header fixed effects="waterfall">

rpg-docs/client/views/character/stats/addEHPDialog/addEHPDialog.js

@@ -1,8 +1,8 @@
-Template.addTHPDialog.onRendered(function(){
+Template.addEHPDialog.onRendered(function(){
 	this.find("#quantityInput").focus();
 });
 
-Template.addTHPDialog.events({
+Template.addEHPDialog.events({
 	"tap .addButton": function(event, instance){
 		popDialogStack();
 		var max = +instance.find("#quantityInput").value;

rpg-docs/client/views/character/stats/healthCard/healthCard.css

@@ -3,10 +3,15 @@
 	margin-right: 8px;
 }
 
+.healthCard .bottom-border {
+	border-bottom: rgba(0,0,0,0.24) solid 1px;
+	margin-bottom: 12px;
+}
+
 .healthCard #stableButton {
 	color: #b71c1c;
 	transition: color 0.4s ease;
-	width: 100%
+	width: 100%;
 }
 
 .healthCard #stableButton:before {

rpg-docs/client/views/character/stats/healthCard/healthCard.html

@@ -5,33 +5,52 @@
 				Hit Points
 			</div>
 			<paper-icon-button class="white54"
-							   id="addTempHP"
+							   id="addExtraHP"
 							   icon="add"
 							   disabled={{#unless canEditCharacter _id}}true{{/unless}}>
 			</paper-icon-button>
 		</div>
 		<div class="right flex layout vertical center-justified" style="min-width: 180px;">
+			<!-- main HP slider -->
 			<div class="layout horizontal">
 				<paper-diff-slider id="hitPointSlider"
 								   editable pin
 								   disabled={{#unless canEditCharacter _id}}true{{/unless}}>
 				</paper-diff-slider>
 			</div>
-			{{#each tempHitPoints}}
-				<div>
-					{{name}}
+			{{#if characterCalculate "attributeBase" _id "tempHP"}}
+				<!-- main THP slider -->
+				<div class="layout horizontal center {{#if extraHitPoints.count}}bottom-border{{/if}}">
+					<div class="self-center">
+						Temporary Hit Points
+					</div>
+					<paper-diff-slider id="temporaryHitPointSlider"
+									   class="flex"
+									   editable pin
+									   disabled={{#unless canEditCharacter _id}}true{{/unless}}
+									   max={{characterCalculate "attributeBase" _id "tempHP"}}
+									   value={{characterCalculate "attributeValue" _id "tempHP"}}
+									   >
+					</paper-diff-slider>
 				</div>
+			{{/if}}
+
+			{{#each extraHitPoints}}
 				<div class="layout horizontal center">
+					<div class="self-center">
+						{{name}}
+					</div>
 					<div style="height: 40px; width: 40px;">
 						{{#unless left}}
-							<paper-icon-button class="deleteTHP" icon="delete"></paper-icon-button>
+							<paper-icon-button class="deleteEHP" icon="delete"></paper-icon-button>
 						{{/unless}}
 					</div>
-					<paper-diff-slider class="tempHitPointSlider flex"
+					<paper-diff-slider class="extraHitPointSlider flex"
 							  max={{maximum}}
 							  value={{left}}
 							  editable pin
-							  ></paper-diff-slider>
+							  >
+					</paper-diff-slider>
 				</div>
 			{{/each}}
 			<div class="paper-font-caption">

rpg-docs/client/views/character/stats/healthCard/healthCard.js

@@ -5,7 +5,7 @@ Template.healthCard.binding({
 	"#hitPointSlider": {
 		max: () => Characters.calculate.attributeBase(currentId() , "hitPoints"),
 		value: () => Characters.calculate.attributeValue(currentId() , "hitPoints"),
-	}
+	},
 });
 
 // Reset the old value between characters so that we don't get red health lost
@@ -16,13 +16,14 @@ Template.healthCard.onRendered(function(){
 		const id = Template.currentData()._id;
 		if (oldId !== id){
 			this.find("#hitPointSlider").resetOldValue();
+			this.find("#temporaryHitPointSlider").resetOldValue();
 			oldId = id;
 		}
 	});
 });
 
 Template.healthCard.helpers({
-	tempHitPoints: function(){
+	extraHitPoints: function(){
 		return TemporaryHitPoints.find({charId: this._id});
 	},
 	showDeathSave: function(){
@@ -93,17 +94,23 @@ Template.healthCard.events({
 				}}
 			);
 	},
-	"change .tempHitPointSlider": function(event){
+	"change #temporaryHitPointSlider": function(event){ //this is the actual THP stat
+		var value = event.currentTarget.value;
+		var base = Characters.calculate.attributeBase(this._id, "tempHP");
+		var adjustment = value - base;
+		Characters.update(this._id, {$set: {"tempHP.adjustment": adjustment}});
+	},
+	"change .extraHitPointSlider": function(event){ //this is the extra bars
 		var value = event.currentTarget.value;
 		var used = this.maximum - value;
 		TemporaryHitPoints.update(this._id, {$set: {"used": used}});
 	},
-	"click .deleteTHP": function(event){
+	"click .deleteEHP": function(event){
 		TemporaryHitPoints.remove(this._id);
 	},
-	"click #addTempHP": function(event){
+	"click #addExtraHP": function(event){
 		pushDialogStack({
-			template: "addTHPDialog",
+			template: "addEHPDialog",
 			data: {charId: this._id},
 			element: event.currentTarget.parentElement,
 		});