|
- define([
- 'js/system/events',
- 'html!ui/templates/spells/template',
- 'css!ui/templates/spells/styles',
- 'html!ui/templates/spells/templateSpell',
- 'html!ui/templates/spells/templateTooltip'
- ], function(
- events,
- template,
- styles,
- templateSpell,
- templateTooltip
- ) {
- return {
- tpl: template,
-
- spells: null,
-
- postRender: function() {
- this.onEvent('onGetSpells', this.onGetSpells.bind(this));
- this.onEvent('onGetSpellCooldowns', this.onGetSpellCooldowns.bind(this));
- this.onEvent('onGetStats', this.onGetStats.bind(this));
-
- setInterval(this.update.bind(this), 100);
- },
-
- onGetSpells: function(spells) {
- this.el.empty();
-
- this.spells = spells;
-
- for (var i = 0; i < spells.length; i++) {
- var icon = spells[i].icon;
- var x = -(icon[0] * 64);
- var y = -(icon[1] * 64);
-
- var html = templateSpell
- .replace('$HOTKEY$', (i + 1));
-
- var el = $(html)
- .appendTo(this.el);
- el
- .on('mouseover', this.onShowTooltip.bind(this, el, spells[i]))
- .on('mouseleave', this.onHideTooltip.bind(this, el));
-
- var spritesheet = spells[i].spritesheet || '../../../images/abilityIcons.png';
- el
- .find('.icon').css({
- 'background': 'url("' + spritesheet + '") ' + x + 'px ' + y + 'px'
- })
- .next().html(i + 1);
-
- this.onGetSpellCooldowns({
- spell: i,
- cd: spells[i].cd * 350 //HACK - we don't actually know how long a tick is
- });
- }
- },
-
- onShowTooltip: function(el, spell) {
- var pos = el.offset();
- pos = {
- x: pos.left + 56,
- y: pos.top + el.height() + 16
- };
-
- var cd = ~~((spell.cdMax * 350) / 1000);
-
- var values = Object.keys(spell.values).filter(function(v) {
- return ((v != 'damage') && (v != 'healing'));
- }).map(function(v) {
- return v + ': ' + spell.values[v];
- }).join('<br />');
-
- var tooltip = templateTooltip
- .replace('$NAME$', spell.name)
- .replace('$DESCRIPTION$', spell.description)
- .replace('$MANA$', spell.manaCost)
- .replace('$CD$', cd)
- .replace('$VALUES$', values)
- .replace('$ELEMENT$', spell.element);
-
- if (spell.range) {
- tooltip = tooltip
- .replace('$RANGE$', spell.range);
- } else {
- tooltip = tooltip
- .replace('range', 'range hidden');
- }
-
- events.emit('onShowTooltip', tooltip, el[0], pos, 200, false, true, this.el.css('z-index'));
- },
- onHideTooltip: function(el) {
- events.emit('onHideTooltip', el[0]);
- },
-
- onGetSpellCooldowns: function(options) {
- var spell = this.spells[options.spell];
- spell.ttl = options.cd;
- spell.ttlStart = +new Date;
- },
-
- onGetStats: function(stats) {
- var mana = stats.mana;
-
- var spells = this.spells;
- if (!spells)
- return;
-
- for (var i = 0; i < spells.length; i++) {
- var spell = spells[i];
-
- var el = this.el.children('div').eq(i).find('.hotkey');
- el.removeClass('no-mana');
- if (spell.manaCost > mana)
- el.addClass('no-mana');
- }
- },
-
- update: function() {
- var spells = this.spells;
- if (!spells)
- return;
-
- var time = +new Date;
-
- for (var i = 0; i < spells.length; i++) {
- var spell = spells[i];
-
- if (!spell.ttl) {
- this.el.children('div').eq(i).find('.cooldown').css({
- width: '0%'
- });
- continue;
- }
-
- var elapsed = time - spell.ttlStart;
- var width = 1 - (elapsed / spell.ttl);
- if (width <= 0) {
- delete spell.ttl;
- width = 0;
- }
-
- width = Math.ceil((width * 100) / 4) * 4;
-
- this.el.children('div').eq(i).find('.cooldown').css({
- width: width + '%'
- });
- }
- }
- }
- });
|