Added dialog to choose temporary hitpoints

rpg-docs/client/views/character/inventory/splitStackDialog/splitStackDialog.html

@@ -2,7 +2,7 @@
 <template name="splitStackDialog">
 	<div style="width: 300px; height: 110px;">
 		<paper-input-decorator label="Quantity" floatinglabel>
-			<input id="quantityInput" type="number" value={{quantity}}>
+			<input autoFocus id="quantityInput" type="number" value={{quantity}}>
 		</paper-input-decorator>
 		<paper-button id="oneButton">  One  </paper-button>
 		<paper-button id="halfButton"> Half </paper-button>

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

@@ -0,0 +1,13 @@
+<!-- data just needs charId -->
+<template name="addTHPDialog">
+	<div style="width: 200px; height: 100px;">
+		<paper-input-decorator label="Quantity" floatinglabel>
+			<input autoFocus id="quantityInput" type="number" value="10">
+		</paper-input-decorator>
+		<div layout horizontal justify-center>
+			Delete when zero <paper-checkbox id="deleteWhenZeroCheckbox" checked style="margin-left: 8px;"></paper-checkbox>
+		</div>
+	</div>
+	<paper-button id="cancelButton" affirmative> Cancel </paper-button>
+	<paper-button id="addButton"    affirmative> Add    </paper-button>
+</template>

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

@@ -0,0 +1,15 @@
+Template.addTHPDialog.events({
+	'tap #addButton': function(event, instance){
+		console.log({
+			charId: this.charId,
+			maximum: +instance.find('#quantityInput').value,
+			deleteOnZero: !!instance.find('#deleteWhenZeroCheckbox').checked
+		});
+		TemporaryHitPoints.insert({
+			charId: this.charId,
+			maximum: +instance.find('#quantityInput').value,
+			deleteOnZero: !!instance.find('#deleteWhenZeroCheckbox').checked
+		});
+	}
+});
+

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

@@ -1,5 +1,6 @@
 .healthCard paper-slider{
 	width: 100%;
+	margin-right: 8px;
 }
 
 /*Slider knob color*/

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

@@ -12,12 +12,18 @@
 						  role="slider"
 						  ></paper-slider>
 			{{#each tempHitPoints}}
-				<paper-slider class="tempHitPointSlider"
-						  value={{left}}
-						  max={{maximum}} 
-						  editable pin
-						  role="slider"
-						  ></paper-slider>
+				<div layout horizontal>
+					<paper-slider class="tempHitPointSlider"
+							  value={{left}}
+							  max={{maximum}}
+							  editable pin
+							  role="slider"
+							  flex
+							  ></paper-slider>
+					{{#unless left}}{{#unless deleteOnZero}}
+						<paper-icon-button class="deleteTHP" icon="delete"></paper-icon-button>
+					{{/unless}}{{/unless}}
+				</div>
 			{{/each}}
 			<div class="caption">
 				{{#if multipliers.immunities.length}} <div>Immune:     {{#each multipliers.immunities}}  {{name}} {{/each}}</div>{{/if}}

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

@@ -18,10 +18,10 @@ Template.healthCard.helpers({
 		else return "radio-button-off";
 	},
 	failDisabled: function(num){
-		return !(num === this.fail || num - 1 === this.fail)
+		return !(num === this.fail || num - 1 === this.fail);
 	},
 	passDisabled: function(num){
-		return !(num === this.pass || num - 1 === this.pass)
+		return !(num === this.pass || num - 1 === this.pass);
 	},
 	dead: function(){
 		return this.fail >= 3;
@@ -50,7 +50,7 @@ Template.healthCard.helpers({
 			"weaknesses": multipliers["2"] || []
 		};
 	}
-})
+});
 
 Template.healthCard.events({
 	"change #hitPointSlider": function(event){
@@ -63,9 +63,14 @@ Template.healthCard.events({
 		var used = this.maximum - value;
 		TemporaryHitPoints.update(this._id, {$set: {"used": used}});
 	},
+	"tap .deleteTHP": function(event){
+		TemporaryHitPoints.remove(this._id);
+	},
 	"tap #addTempHP": function(event){
-		var max = prompt("Add temporary hitpoints", "10");
-		TemporaryHitPoints.insert({charId: this._id, maximum: max, used: 0});
+		GlobalUI.showDialog({
+				template: "addTHPDialog",
+				data: {charId: this._id}
+			});
 	},
 	"tap .failBubble": function(event){
 		if(event.currentTarget.disabled) return;

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

@@ -70,7 +70,6 @@
 	<paper-action-dialog global-dialog backdrop
 						 transition="core-transition-center"
 						 class="scrolling {{#if globalDialogFullOnMobile}}full-on-mobile{{/if}}"
-						 autoclosedisabled
 						 heading={{globalDialogHeader}}
 						 layered>
 		{{#if globalDialogTemplate}}