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

rpg-docs/public/custom_components/paper-diff-slider/paper-diff-slider.html

@@ -1,13 +1,3 @@
-s<!--
-@license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by paper as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-
 <link rel="import" href="../../components/polymer/polymer.html">
 <link rel="import" href="../../components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
 <link rel="import" href="../../components/iron-flex-layout/iron-flex-layout.html">
@@ -514,6 +504,11 @@ Custom property | Description | Default
         this.value = this._clampValue(this.value - this.step);
       },
 
+      resetOldValue: function(){
+          this.secondaryProgress = this.value;
+          this._setOldValue(this.value);
+      },
+
       _updateKnob: function(value, min, max, snaps, step) {
         this.setAttribute('aria-valuemin', min);
         this.setAttribute('aria-valuemax', max);