Temporary HP (the attribute) now appears on Stats page

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

@@ -3,10 +3,27 @@
 	margin-right: 8px;
 }
 
+.healthCard #temporaryHitPointSlider {
+	--paper-diff-slider-active-color: #009688; /* teal */
+	--paper-diff-slider-knob-color: #009688; /* these don't seem to work? */
+	--paper-diff-slider-pin-color: #009688;
+}
+
+.healthCard .tempHitPointSlider {
+	--paper-diff-slider-active-color: #00BCD4; /* cyan */
+	--paper-diff-slider-knob-color: #00BCD4; /* these don't seem to work? */
+	--paper-diff-slider-pin-color: #00BCD4;
+}
+
+.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

@@ -11,17 +11,35 @@
 			</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}}
+			{{#if characterCalculate "attributeBase" _id "tempHP"}}
-				<div>
+				<!-- main THP slider -->
-					{{name}}
+				<div class="layout horizontal center {{#if tempHitPoints.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 tempHitPoints}}
 				<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>
@@ -31,7 +49,8 @@
 							  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,6 +16,7 @@ Template.healthCard.onRendered(function(){
 		const id = Template.currentData()._id;
 		if (oldId !== id){
 			this.find("#hitPointSlider").resetOldValue();
+			this.find("#temporaryHitPointSlider").resetOldValue();
 			oldId = id;
 		}
 	});
@@ -93,7 +94,13 @@ 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 .tempHitPointSlider": function(event){ //this is the extra bars
 		var value = event.currentTarget.value;
 		var used = this.maximum - value;
 		TemporaryHitPoints.update(this._id, {$set: {"used": used}});