Fixed issue with health bars clamping to 100

rpg-docs/client/lib/bindProperty.js

@@ -0,0 +1,24 @@
+/**
+ * Take in a map like this:
+ * {
+ *   "#someId": {
+ *     proprty1() { return someReactiveValue()}
+ *   }
+ * }
+ * and bind the properties to the DOM on autorun.
+ *
+ * Useful for polymer components where you need to set the order of property updating
+ * or alter properties that don't bind well to their attributes
+ */
+Blaze.Template.prototype.binding = function(bindingMap){
+	this.onRendered(function(){
+		_.each(bindingMap, (propertyMap, cssPattern) => {
+			node = this.find(cssPattern);
+			_.each(propertyMap, (func, property) => {
+				this.autorun(() => {
+					node[property] = func && func.call && func.call(this, node);
+				});
+			});
+		});
+	});
+};

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

@@ -13,8 +13,6 @@
 		<div class="right flex layout vertical center-justified" style="min-width: 180px;">
 			<div class="layout horizontal">
 				<paper-diff-slider id="hitPointSlider"
-								   value={{characterCalculate "attributeValue" _id "hitPoints"}}
-								   max={{characterCalculate "attributeBase" _id "hitPoints"}}
 								   editable pin
 								   disabled={{#unless canEditCharacter _id}}true{{/unless}}>
 				</paper-diff-slider>

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

@@ -1,3 +1,26 @@
+const currentId = () => Template.currentData()._id;
+
+// Use binding to ensure max is always set before value to prevent value clamping poorly
+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
+// bar when changing character
+Template.healthCard.onRendered(function(){
+	let oldId = Template.currentData()._id;
+	this.autorun(() => {
+		const id = Template.currentData()._id;
+		if (oldId !== id){
+			this.find("#hitPointSlider").resetOldValue();
+			oldId = id;
+		}
+	});
+});
+
 Template.healthCard.helpers({
 	tempHitPoints: function(){
 		return TemporaryHitPoints.find({charId: this._id});