From 1b14fbb94198c140ba6e3acd7019d5fd887747a6 Mon Sep 17 00:00:00 2001 From: Thaum Date: Tue, 4 Nov 2014 11:51:33 +0000 Subject: [PATCH] Added drag-for-damage functionality to the health bar --- rpg-docs/.meteor/packages | 2 + rpg-docs/.meteor/versions | 1 + rpg-docs/client/views/character/features.js | 1 - rpg-docs/client/views/healthBar/healthBar.css | 63 ++++++++++-- .../client/views/healthBar/healthBar.html | 20 +++- rpg-docs/client/views/healthBar/healthBar.js | 93 +++++++++++++++++- rpg-docs/public/png/bar-border.png | Bin 0 -> 1211 bytes 7 files changed, 163 insertions(+), 17 deletions(-) create mode 100644 rpg-docs/public/png/bar-border.png diff --git a/rpg-docs/.meteor/packages b/rpg-docs/.meteor/packages index 4fcfc4bd..a679f9bf 100644 --- a/rpg-docs/.meteor/packages +++ b/rpg-docs/.meteor/packages @@ -11,4 +11,6 @@ accounts-password accounts-ui random dburles:collection-helpers +reactive-var +cw4gn3r:jquery-event-drag diff --git a/rpg-docs/.meteor/versions b/rpg-docs/.meteor/versions index 95d1cef1..0ed087f8 100644 --- a/rpg-docs/.meteor/versions +++ b/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 diff --git a/rpg-docs/client/views/character/features.js b/rpg-docs/client/views/character/features.js index 7a36110a..2a1e77c1 100644 --- a/rpg-docs/client/views/character/features.js +++ b/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; } }); diff --git a/rpg-docs/client/views/healthBar/healthBar.css b/rpg-docs/client/views/healthBar/healthBar.css index 22af9fd4..b85016b3 100644 --- a/rpg-docs/client/views/healthBar/healthBar.css +++ b/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; } \ No newline at end of file diff --git a/rpg-docs/client/views/healthBar/healthBar.html b/rpg-docs/client/views/healthBar/healthBar.html index 2fcbf80c..27f4ff48 100644 --- a/rpg-docs/client/views/healthBar/healthBar.html +++ b/rpg-docs/client/views/healthBar/healthBar.html @@ -1,8 +1,20 @@ \ No newline at end of file diff --git a/rpg-docs/client/views/healthBar/healthBar.js b/rpg-docs/client/views/healthBar/healthBar.js index 08603011..f06d4b5b 100644 --- a/rpg-docs/client/views/healthBar/healthBar.js +++ b/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); } }); \ No newline at end of file diff --git a/rpg-docs/public/png/bar-border.png b/rpg-docs/public/png/bar-border.png new file mode 100644 index 0000000000000000000000000000000000000000..39a17ac82cf778e66e9f2553ed4c31455e6360be GIT binary patch literal 1211 zcmV;s1VsCZP)^ELPh`p1V~9l zK~!ko?V3wy6=xL3e-opLi3YW5)zl>TsIfkx_|_tdk5&u1Fjb@#H+H3nxN#%Yx@tD! z6Ghz^1c|hZ60{{MSx5?{^+D8%M!{#RjkeJc^U&OJ@%<o1{MN2z-yoqxDMO}n&NQ(EMO)u3m6PE0O{hPQ+#Q;(;i?ca2|+B z(NbV5Fb(L_O=Z$W{5GIW%J?$wVV&zOC;*N~H($DzN%sOhOLx!*m@ckL#a&EXE&=xG z{xP7?{-XzcujA>!GRa;7p8$__ZXB=)Sg%!tR?aJV(jDNY<%XX29|NNm8hzj@a83_d zp$G1bNC!R@AIoJ7PXs;ys(>0jQ;q(U4~$n-$prdJejhjm9GAx-4zB|Pb&oP}gC~KF zT3{{kOUUI`1M7g#tWf6z%`(ax$pS_H25xJsk^!E)r?Gwnus{oJy!Iolg%^bX{_+k_ zvNz(f1o%nZ2KXE}Eu*wS5Tc#}M}b`HT#mv@qpqpao53n6%_713R=F?6NM*1P;g$^*Wy6c>dp*B@XMw>3$%?I=`zkgUppDGy?~LQI5~JVU)b2 zS)qJ(R|fe)iTV~W&+*q|m@kg&fE67Xq*!lGmw};9Y+bnc5(h|ltFf5s**miljv@uLwt}Tj(u^yn+{4RshHZm z4_pAU9d~g@wz&1hbt+vH7d>DLrl$1*_?C#8y~8^rOI*GXx0`A0n{;ZB0Qta=N;uWJ z*%-&`J7cW4trnL*h+7+x28n7=foaa4#gvR=O8(zr+MC%xn&Z3$Y2sv=II0k5&A=Jj z_muJoHK;mj;jROI4#__Pz6Lg8T9|gyZ_vAR%#uC9l$e7S?nV86ACZsgu?H>OeBi@S zl1`)T5JXJRegZfNJPO@&r4sr8Tj&8h6yFMTk%y_%Po%ZJH52#-(`yfU$kmt;p(b5d z8B#FUdVoyH?_nDH=YVqHc`r4<2f$*?fWvYtYSdW^?0#qgPQ|om`(Z|XhDlx{;*SBB zB+CW<)EBxh@2MnW%&O1|VS6!SL6`Kq4pX<^5E0h8LXNzv7&H73R0c|bMOJc4COjFT zM2pM^{?ZEniq>hH?jlcI6^lDxTo%%H3}{VQi7?7VQj@G*jTuq7Arj+(;lLEkfLgjd zWeXqXYOSwVfZ&J Zcni1W0NWC04} literal 0 HcmV?d00001