Added health bars
This commit is contained in:
Thaum
23
rpg-docs/client/views/healthBar/healthBar.css
Normal file
23
rpg-docs/client/views/healthBar/healthBar.css
Normal file
@@ -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 */
|
||||
}
|
||||
8
rpg-docs/client/views/healthBar/healthBar.html
Normal file
8
rpg-docs/client/views/healthBar/healthBar.html
Normal file
@@ -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>
|
||||
13
rpg-docs/client/views/healthBar/healthBar.js
Normal file
13
rpg-docs/client/views/healthBar/healthBar.js
Normal file
@@ -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;
|
||||
}
|
||||
});
|
||||
109
rpg-docs/public/svg/bar-border.svg
Normal file
109
rpg-docs/public/svg/bar-border.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 4.6 KiB |
Reference in New Issue
Block a user