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

rpg-docs/public/svg/bar-border.svg

@@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="320"
+   height="30"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="HealthBorder.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.8"
+     inkscape:cx="178.85068"
+     inkscape:cy="29.437792"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1600"
+     inkscape:window-height="838"
+     inkscape:window-x="-8"
+     inkscape:window-y="116"
+     inkscape:window-maximized="1"
+     inkscape:object-paths="true"
+     inkscape:object-nodes="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-page="true"
+     inkscape:snap-global="false" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(19.96875,-947.25)">
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 265.65114,948.84563 c 11.40211,5.43244 22.26521,4.26799 28.87884,-0.34803"
+       id="path4530"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 294.30677,976.00005 c 0,-2.94902 2.05977,-4.52345 4.47476,-4.52345 l 0,-18.45558 c -2.41499,0 -4.47476,-1.57444 -4.47476,-4.52346 l -308.551038,0 c 0,2.94902 -2.059762,4.52346 -4.474757,4.52346 l 0,18.45558 c 2.414995,0 4.474757,1.57443 4.474757,4.52345 z"
+       id="path4528"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 283.03458,952.37304 c 5.92784,0 15.21313,4.1525 15.18103,9.6371 -0.0321,5.179 -9.36549,10.04896 -15.29332,10.04896"
+       id="path3999"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccc" />
+    <path
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0"
+       id="path4538"
+       d="m 265.65114,975.59509 c 11.40211,-5.43244 22.26521,-4.26799 28.87884,0.34803"
+       style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+    <path
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0"
+       id="path4540"
+       d="m 14.419218,948.84563 c -11.4021095,5.43244 -22.2652095,4.26799 -28.87884,-0.34803"
+       style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+    <path
+       sodipodi:nodetypes="ccc"
+       inkscape:connector-curvature="0"
+       id="path4542"
+       d="m -2.9642215,952.37304 c -5.92784,0 -15.2131305,4.1525 -15.1810305,9.6371 0.0321,5.179 9.3654905,10.04896 15.2933205,10.04896"
+       style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 14.419218,975.59509 c -11.4021095,-5.43244 -22.2652095,-4.26799 -28.87884,0.34803"
+       id="path4544"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>