isleward/src/client/ui/templates/equipment/equipment.js

define([
	'js/system/events',
	'js/system/client',
	'html!ui/templates/equipment/template',
	'css!ui/templates/equipment/styles'
], function(
	events,
	client,
	template,
	styles
) {
	return {
		tpl: template,

		centered: true,

		modal: true,

		stats: null,
		equipment: null,

		hoverItem: null,
		hoverEl: null,
		hoverCompare: null,
		shiftDown: false,

		postRender: function() {
			this.onEvent('onGetStats', this.onGetStats.bind(this));
			this.onEvent('onGetItems', this.onGetItems.bind(this));

			this.onEvent('onShowEquipment', this.toggle.bind(this));

			this.find('.tab').on('click', this.onTabClick.bind(this));

			this.onEvent('onKeyDown', this.onKeyDown.bind(this));
			this.onEvent('onKeyUp', this.onKeyUp.bind(this));
		},

		toggle: function(show) {
			this.shown = !this.el.is(':visible');

			if (this.shown) {
				this.find('.itemList').hide();
				this.show();
				this.onGetStats();
				this.onGetItems();
			} else {
				this.find('.itemList').hide();
				this.hide();
			}

			this.onHoverItem(null, null, null);
		},

		onKeyDown: function(key) {
			if (key == 'j')
				this.toggle();
			else if (key == 'shift') {
				this.shiftDown = true;
				if (this.hoverItem)
					this.onHoverItem(this.hoverEl, this.hoverItem, this.hoverCompare);
			}
		},
		onKeyUp: function(key) {
			if (key == 'shift') {
				this.shiftDown = false;
				if (this.hoverItem)
					this.onHoverItem(this.hoverEl, this.hoverItem, null);
			}
		},

		onTabClick: function(e) {
			this.find('.tab.selected').removeClass('selected');

			$(e.currentTarget).addClass('selected');

			this.onGetStats(this.stats);
		},

		onGetItems: function(items) {
			items = items || this.items;
			this.items = items;

			if (!this.shown)
				return;

			this.find('.slot').addClass('empty');

			var skipSpellId = 0;

			this.find('[slot]')
				.removeData('item')
				.addClass('empty show-default-icon')
				.find('.icon')
					.off()
					.css('background-image', '')
					.css('background-position', '')
					.on('click', this.buildSlot.bind(this));

			items
				.filter(function(item) {
					var spellId = item.spellId;
					if ((spellId != null) && (item.slot))
						skipSpellId = spellId;

					return ((item.eq) && ((item.slot) || (item.spellId != null)));
				}, this)
				.forEach(function(item) {
					var imgX = -item.sprite[0] * 64;
					var imgY = -item.sprite[1] * 64;

					var slot = item.slot;
					if (!slot) {
						var spellId = item.spellId;
						if (spellId > skipSpellId)
							spellId--;
						slot = 'rune-' + spellId;
					}

					var spritesheet = item.spritesheet || '../../../images/items.png';

					var elSlot = this.find('[slot="' + slot + '"]');
					elSlot
						.data('item', item)
						.removeClass('empty show-default-icon')
						.find('.icon')
							.css('background', 'url("' + spritesheet + '") ' + imgX + 'px ' + imgY + 'px')
							.off()
							.on('mousemove', this.onHoverItem.bind(this, elSlot, item, null))
							.on('mouseleave', this.onHoverItem.bind(this, null, null))
							.on('click', this.buildSlot.bind(this, elSlot));
				}, this);
		},

		buildSlot: function(el) {
			if (el.currentTarget)
				el = $(el.currentTarget).parent();

			var slot = el.attr('slot');
			var isRune = (slot.indexOf('rune') == 0);

			var container = this.find('.itemList')
				.empty()
				.show();

			this.hoverCompare = el.data('item');

			var items = this.items
				.filter(function(item) {
					if (isRune)
						return ((!item.slot) && (item.spell) && (!item.eq));
					else
						return ((item.slot == slot) && (!item.eq));
				}, this);
			items.splice(0, 0, {
				name: 'None',
				slot: this.hoverCompare ? this.hoverCompare.slot : null,
				id: this.hoverCompare ? this.hoverCompare.id : null,
				empty: true
			});
			if (this.hoverCompare)
				items.splice(1, 0, this.hoverCompare);

			items
				.forEach(function(item) {
					var sprite = item.sprite || [7, 0];

					var spriteSheet = item.empty ? '../../../images/uiIcons.png' : item.spritesheet || '../../../images/items.png';
					var imgX = -sprite[0] * 64;
					var imgY = -sprite[1] * 64;

					var el = $('<div class="slot"><div class="icon"></div></div>')
						.appendTo(container);

					el
						.find('.icon')
						.css('background', 'url("' + spriteSheet + '") ' + imgX + 'px ' + imgY + 'px')
						.on('mousemove', this.onHoverItem.bind(this, el, item, null))
						.on('mouseleave', this.onHoverItem.bind(this, null, null))
						.on('click', this.equipItem.bind(this, item));

					if (item == this.hoverCompare)
						el.find('.icon').addClass('eq');
				}, this);

			if (items.length == 0)
				container.hide();
		},

		equipItem: function(item) {
			if (item == this.hoverCompare) {
				this.find('.itemList').hide();
				return;
			}

			var cpn = 'equipment';
			var method = 'equip';
			var data = item.id;

			if (item.empty)
				method = 'unequip';

			if (!item.slot) {
				cpn = 'inventory';
				method = 'learnAbility';
				data = {
					id: item.id,
					replaceId: this.hoverCompare ? this.hoverCompare.id : null
				};

				if (item.empty) {
					if (!this.hoverCompare) {
						this.find('.itemList').hide();
						return;
					}
					else
						data = this.hoverCompare.id;
				}
			}

			client.request({
				cpn: 'player',
				method: 'performAction',
				data: {
					cpn: cpn,
					method: method,
					data: data
				}
			});

			this.find('.itemList').hide();
		},

		onHoverItem: function(el, item, compare, e) {
			if (el) {
				this.hoverItem = item;
				this.hoverEl = el;

				var ttPos = null;
				if (e) {
					ttPos = {
						x: ~~(e.clientX + 32),
						y: ~~(e.clientY)
					};
				}

				events.emit('onShowItemTooltip', item, ttPos, this.hoverCompare, false, this.shiftDown);
			} else {
				events.emit('onHideItemTooltip', this.hoverItem);
				this.hoverItem = null;
			}
		},

		onGetStats: function(stats) {
			if (stats)
				this.stats = stats;

			stats = this.stats;

			if (!this.shown)
				return;

			var container = this.el.find('.stats');

			container
				.children('*:not(.tabs)')
				.remove();

			var xpRemaining = (stats.xpMax - stats.xp).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');

			var newStats = {
				basic: {
					level: stats.level,
					'next level': xpRemaining + 'xp',
					gap1: '',
					gold: window.player.trade.gold,
					gap2: '',
					hp: ~~stats.hp + '/' + stats.hpMax,
					mana: ~~stats.mana + '/' + stats.manaMax,
					'hp regen': stats.regenHp,
					'mana regen': stats.regenMana + '%',
					gap3: '',
					str: stats.str,
					int: stats.int,
					dex: stats.dex
				},
				offense: {
					'crit chance': (~~(stats.critChance * 10) / 10) + '%',
					gap1: '',
					'arcane increase': stats.elementArcanePercent + '%',
					'fire increase': stats.elementFirePercent + '%',
					'frost increase': stats.elementFrostPercent + '%',
					'holy increase': stats.elementHolyPercent + '%',
					'physical increase': stats.elementPhysicalPercent + '%',
					'poison increase': stats.elementPoisonPercent + '%',
					gap2: '',
					'damage increase': stats.dmgPercent + '%'
				},
				defense: {
					armor: stats.armor,
					gap1: '',
					'arcane resist': stats.elementArcaneResist,
					'fire resist': stats.elementFireResist,
					'frost resist': stats.elementFrostResist,
					'holy resist': stats.elementHolyResist,
					'physical resist': stats.elementPhysicalResist,
					'poison resist': stats.elementPoisonResist,
					gap2: '',
					'all resist': stats.elementAllResist
				},
				misc: {
					'magic find': stats.magicFind,
					gap1: '',
					'sprint chance': (stats.sprintChance || 0) + '%',
					gap2: '',
					'xp increase': stats.xpIncrease + '%',
				}
			}[this.find('.tab.selected').html()];

			for (var s in newStats) {
				var label = s + ': ';
				var value = newStats[s];

				var isGap = false;
				if (label.indexOf('gap') == 0) {
					isGap = true;
					label = '';
					value = '';
				}

				var row = $('<div class="stat"><font class="q0">' + label + '</font><font color="#999">' + value + '</font></div>')
					.appendTo(container);

				if (s == 'gold')
					row.addClass('gold');
				else if ((s == 'level') || (s == 'next level'))
					row.addClass('blueText');

				if (isGap)
					row.addClass('empty');
			}
		}
	};
});