Added drag-for-damage functionality to the health bar

rpg-docs/.meteor/packages

@@ -11,4 +11,6 @@ accounts-password
 accounts-ui
 random
 dburles:collection-helpers
+reactive-var
+cw4gn3r:jquery-event-drag
 

rpg-docs/.meteor/versions

@@ -14,6 +14,7 @@ callback-hook@1.0.1
 check@1.0.2
 ctl-helper@1.0.4
 ctl@1.0.2
+cw4gn3r:jquery-event-drag@2.2.0
 dburles:collection-helpers@1.0.1
 ddp@1.0.11
 deps@1.0.5

rpg-docs/client/views/character/features.js

@@ -1,7 +1,6 @@
 Template.features.helpers({
 	features: function(){
 		var features = Features.find({character: this._id});
-		console.log('found: ', features);
 		return features;
 	}
 });

rpg-docs/client/views/healthBar/healthBar.css

@@ -1,23 +1,66 @@
-.healthBar{
-	width: 320px;
+.healthBarContainer{
+	width: 300px;
 	height: 30px;
+	display: flex;
+	position: relative;
+	align-items: center; /* align vertical */
+	margin-top: 25px;
 }
 
-.healthBarInner{
-	height: 100%;
+.healthBar{
+	position: relative;
+	height: 30px;
+	flex-grow: 1;
+}
+
+.healthBarGreen{
+	position: absolute;
+	height: 30px;
 	border-radius: 15px;
 	background-color: green;
 }
 
+.healthBarRed{
+	position: absolute;
+	height: 30px;
+	border-radius: 15px;
+	background-color: red;
+}
+
+.healthBarYellow{
+	position: absolute;
+	height: 30px;
+	border-radius: 15px;
+	background-color: yellow;
+}
+
 .healthBarBorder{
-	position: relative;
-	left: 0px;
-	top: -100%;
-	width: 100%;
-	height: 100%;
-	background-image: url('/svg/bar-border.svg');
+	position: absolute;
+	height: 2px;
+	border-width: 14px 40px 14px 40px;
+	width: 160px;
+	border-image: url('/png/bar-border.png') 14 40 14 40;
 	
 	display: flex;
 	justify-content: center; /* align horizontal */
 	align-items: center; /* align vertical */
+}
+
+.healthBarButton{
+	display: inline-block;
+	width: 30px;
+	height: 30px;
+}
+
+.healthBarPlus{
+	
+}
+
+.healthBarMinus{
+	
+}
+
+.deltaHp{
+	position: absolute;
+	top: -20px;
 }

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

@@ -1,8 +1,20 @@
 <template name="healthBar">
-	<div class= "healthBar">		
-		<div class="healthBarInner" style="width: {{hpPercent}}%"></div>
-		<div class="healthBarBorder">
-			<span class="hpReadout">{{attributeValue attributes.hitPoints}}/{{maxHp}}</span>
+	<div class="deltaHpContainer">
+			
 		</div>
+	<div class="healthBarContainer">
+		<button class="healthBarMinus healthBarButton"></button>
+		<div class= "healthBar">
+			<div class="deltaHp" style="left:{{hpPercentDelta}}%">
+				<button id="applyDelta" style="display: {{showDelta}}">{{deltaHp}}</button>
+			</div>
+			<div class="healthBarYellow" style="width: {{hpYellow}}%"></div>
+			<div class="healthBarRed" style="width: {{hpRed}}%"></div>
+			<div class="healthBarGreen" style="width: {{hpGreen}}%"></div>
+			<div class="healthBarBorder">
+				<span class="hpReadout">{{attributeValue attributes.hitPoints}}/{{maxHp}}</span>
+			</div>
+		</div>
+		<button class="healthBarPlus healthBarButton"></button>
 	</div>
 </template>

rpg-docs/client/views/healthBar/healthBar.js

@@ -1,13 +1,102 @@
 Template.healthBar.helpers({
-	hpPercent: function(){
+	hpRed: function(){
 		var currentHp = this.attributeValue(this.attributes.hitPoints);
 		var damage = this.attributes.hitPoints.base;
 		return 100*(currentHp/(currentHp - damage));
 	},
-	
+	hpGreen: function(){
+		var currentHp = this.attributeValue(this.attributes.hitPoints);
+		var damage = this.attributes.hitPoints.base;
+		var maxHp = currentHp - damage;
+		var percent =  100*(currentHp/ maxHp);
+		var change = 100 * Template.instance().deltaHp.get() / maxHp;
+		if(change < 0){
+			return percent + change;
+		}else{
+			return percent;
+		}
+	},
+	hpYellow: function(){
+		var currentHp = this.attributeValue(this.attributes.hitPoints);
+		var damage = this.attributes.hitPoints.base;
+		var maxHp = currentHp - damage;
+		var percent =  100*(currentHp/ maxHp);
+		var change = 100 * Template.instance().deltaHp.get() / maxHp;
+		if(change > 0){
+			return percent + change;
+		} else{
+			return percent;
+		}
+	},
+	hpPercentDelta: function(){
+		if(!Template.instance().deltaHp){
+			Template.instance().deltaHp = new ReactiveVar(0);
+		}
+		var currentHp = this.attributeValue(this.attributes.hitPoints);
+		var damage = this.attributes.hitPoints.base;
+		var maxHp = currentHp - damage;
+		var percent =  100*(currentHp/ maxHp);
+		var change = 100 * Template.instance().deltaHp.get() / maxHp;
+		return percent + change;
+	},
 	maxHp: function(){
 		var currentHp = this.attributeValue(this.attributes.hitPoints);
 		var damage = this.attributes.hitPoints.base;
 		return currentHp - damage;
+	},
+	deltaHp: function(){
+		if(!Template.instance().deltaHp){
+			Template.instance().deltaHp = new ReactiveVar(0);
+		}
+		return Template.instance().deltaHp.get();
+	},
+	showDelta: function(){
+		if(Template.instance().deltaHp){
+			if(Template.instance().deltaHp.get() !== 0) return "initial";
+		}
+		return "none";
+	}
+});
+
+Template.healthBar.events({
+	"dragstart .healthBar": function(event) {
+		Template.instance().startDrag = new ReactiveVar(Template.instance().deltaHp.get());
+	},
+	"drag": function(event, templateInstance, handler){
+		//the width of the bar, fetch dynamically if needed
+		var healthBarWidth = 240;
+		var hpLeft = this.attributeValue(this.attributes.hitPoints)
+		var damage = this.attributes.hitPoints.base
+		var maxHp = hpLeft - damage;
+		var dragMultiplier = maxHp / healthBarWidth; 
+		var newValue = dragMultiplier * handler.deltaX + Template.instance().startDrag.get();
+		//don't heal more than -damage
+		newValue = newValue < -damage ? newValue : -damage;
+		//dont damage more than hit points left
+		newValue = newValue > -hpLeft ? newValue : -hpLeft;
+		//floor the value
+		newValue = Math.floor(newValue);
+		//set the value
+		Template.instance().deltaHp.set(newValue);
+	},
+	"click .healthBarPlus": function(event){
+		var newValue = Template.instance().deltaHp.get() + 1;
+		//don't heal more than -damage
+		var damage = this.attributes.hitPoints.base
+		newValue = newValue < -damage ? newValue : -damage;
+		//set value
+		Template.instance().deltaHp.set(newValue);
+	},
+	"click .healthBarMinus": function(event){
+		var newValue = Template.instance().deltaHp.get() - 1;
+		//dont damage more than hit points left
+		var hpLeft = this.attributeValue(this.attributes.hitPoints)
+		newValue = newValue > -hpLeft ? newValue : -hpLeft;
+		//set value
+		Template.instance().deltaHp.set(newValue);
+	},
+	"click #applyDelta": function(event){
+		Characters.update(this._id, {$inc: {"attributes.hitPoints.base": Template.instance().deltaHp.get()}})
+		Template.instance().deltaHp.set(0);
 	}
 });