Added health bars

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

@@ -0,0 +1,23 @@
+.healthBar{
+	width: 320px;
+	height: 30px;
+}
+
+.healthBarInner{
+	height: 100%;
+	border-radius: 15px;
+	background-color: green;
+}
+
+.healthBarBorder{
+	position: relative;
+	left: 0px;
+	top: -100%;
+	width: 100%;
+	height: 100%;
+	background-image: url('/svg/bar-border.svg');
+	
+	display: flex;
+	justify-content: center; /* align horizontal */
+	align-items: center; /* align vertical */
+}

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

@@ -0,0 +1,8 @@
+<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>
+	</div>
+</template>

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

@@ -0,0 +1,13 @@
+Template.healthBar.helpers({
+	hpPercent: function(){
+		var currentHp = this.attributeValue(this.attributes.hitPoints);
+		var damage = this.attributes.hitPoints.base;
+		return 100*(currentHp/(currentHp - damage));
+	},
+	
+	maxHp: function(){
+		var currentHp = this.attributeValue(this.attributes.hitPoints);
+		var damage = this.attributes.hitPoints.base;
+		return currentHp - damage;
+	}
+});