more work on making wQuery work

src/client/js/app.js

@@ -6,7 +6,7 @@ require.config({
 	waitSeconds: 120,
 	paths: {
 		socket: 'plugins/socket',
-		wquery: 'plugins/wquery.min',
+		wquery: 'plugins/wquery',
 		text: 'plugins/text',
 		html: 'plugins/html',
 		css: 'plugins/css',

src/client/js/main.js

@@ -58,7 +58,6 @@ define([
 			uiFactory.build('login', 'body');
 
 			this.update();
-			this.render();
 
 			$('.loader-container').remove();
 		},
@@ -79,19 +78,15 @@ define([
 			}
 		},
 
-		render: function () {
-			numbers.render();
-			renderer.render();
-
-			requestAnimationFrame(this.render.bind(this));
-		},
-		
 		update: function () {
 			objects.update();
 			renderer.update();
 			uiFactory.update();
 
-			setTimeout(this.update.bind(this), 16);
+			numbers.render();
+			renderer.render();
+
+			requestAnimationFrame(this.update.bind(this));
 		}
 	};
 });

src/client/plugins/wquery.js

@@ -18,8 +18,12 @@ const sq = {
 	},
 
 	find: function (queryString) {
-		const el = (this[0] || document).querySelectorAll(queryString);
-		return sq.wrap(el);
+		if (!this[0])
+			return sq.wrap(document.querySelectorAll(queryString));
+
+		let els = [];
+		this.each(el => els.push(...el.querySelectorAll(queryString)));
+		return sq.wrap(els);
 	},
 
 	children: function () {
@@ -27,18 +31,45 @@ const sq = {
 	},
 
 	parent: function () {
-		return sq.wrap([this[0].parentElement]);
+		let parents = [];
+		this.each(el => parents.push(el.parentElement));
+
+		return sq.wrap(parents);
 	},
 
-	on: function (event, fn) {
-		this.each(el => el.addEventListener(event, e => {
+	on: function (event, fn, preventDefault) {
+		let fnHandler = function (fn, el, noDefault, e) {
 			e.target = el;
-			fn(e);
-		}));
+			requestAnimationFrame(fn.bind(null, e));
+
+			if (noDefault) {
+				e.preventDefault();
+				return false;
+			}
+		};
+
+		this.each(el => el.addEventListener(event, fnHandler.bind(null, fn, el, preventDefault)));
 
 		return this;
 	},
 
+	off: function () {
+		let newNodes = [];
+
+		this.each(el => {
+			let newNode = el.cloneNode(true);
+			el.parentNode.replaceChild(newNode, el);
+			newNodes.push(newNode);
+		});
+
+		return this.wrap(newNodes);
+	},
+
+	clone: function () {
+		let newNode = this[0].cloneNode(true);
+		return this.wrap([newNode]);
+	},
+
 	each: function (fn) {
 		const len = this.length;
 		for (let i = 0; i < len; i++) 
@@ -83,12 +114,25 @@ const sq = {
 	},
 
 	show: function () {
-		this.each(el => el.attributeStyleMap.set('display', 'block'));
+		this.each(el => {
+			if ($(el).css('display') !== 'none')
+				return;
+
+			let newDisplay = el.oldDisplay || 'block';
+			delete el.oldDisplay;
+			el.attributeStyleMap.set('display', newDisplay);
+		});
+
 		return this;
 	},
 
 	hide: function () {
-		this.each(el => el.attributeStyleMap.set('display', 'none'));
+		this.each(el => {
+			let oldDisplay = $(el).css('display');
+			if (oldDisplay !== 'none')
+				el.oldDisplay = oldDisplay;
+			el.attributeStyleMap.set('display', 'none');
+		});
 		return this;	
 	},
 
@@ -96,9 +140,14 @@ const sq = {
 		let config = property;
 		let aLen = arguments.length;
 
-		if (aLen === 1 && typeof(property) === 'string')
-			return (this[0].attributeStyleMap.get(property) || {}).value;
-		else if (aLen === 2) {
+		if (aLen === 1 && typeof(property) === 'string') {
+			let value = this[0].attributeStyleMap.get(property);
+			if (!value) {
+				let styles = this[0].computedStyleMap();
+				value = (styles.get(property) || {});
+			}
+			return value.value;
+		} else if (aLen === 2) {
 			config = {
 				[property]: value
 			};
@@ -218,11 +267,21 @@ const sq = {
 		return res;
 	},
 
-	width: function () {
+	width: function (val) {
+		if (val) {
+			this.css('width', val);
+			return this;
+		}
+
 		return this[0].offsetWidth;
 	},
 
-	height: function () {
+	height: function (val) {
+		if (val) {
+			this.css('height', val);
+			return this;
+		}
+
 		return this[0].offsetHeight;
 	},
 
@@ -235,6 +294,11 @@ const sq = {
 		return this;
 	},
 
+	blur: function () {
+		this[0].blur();
+		return this;
+	},
+
 	cloneRecursive: function (o, newO) {
 		if (typeof o !== 'object') 
 			return o;

src/client/ui/factory.js

@@ -8,6 +8,7 @@ define([
 	return {
 		uis: [],
 		root: '',
+
 		init: function (root) {
 			if (root)
 				this.root = root + '/';
@@ -16,6 +17,7 @@ define([
 			events.on('onUiKeyDown', this.onUiKeyDown.bind(this));
 			events.on('onResize', this.onResize.bind(this));
 		},
+
 		onEnterGame: function () {
 			events.clearQueue();
 
@@ -68,17 +70,25 @@ define([
 
 			this.getTemplate(type, options);
 		},
+
 		getTemplate: function (type, options) {
 			require([this.root + 'ui/templates/' + type + '/' + type], this.onGetTemplate.bind(this, options));
 		},
+
 		onGetTemplate: function (options, template) {
 			let ui = $.extend(true, {}, uiBase, template);
 			ui.setOptions(options);
+
+			requestAnimationFrame(this.renderUi.bind(this, ui));
+		},
+
+		renderUi: function (ui) {
 			ui.render();
 			ui.el.data('ui', ui);
 
 			this.uis.push(ui);
 		},
+
 		onResize: function () {
 			this.uis.forEach(function (ui) {
 				if (ui.centered)

src/client/ui/templates/createCharacter/createCharacter.js

@@ -72,7 +72,7 @@ define([
 		},
 
 		onProphecyHover: function (e) {
-			let el = $(e.currentTarget);
+			let el = $(e.target);
 
 			let pos = {
 				x: e.clientX + 25,
@@ -85,11 +85,11 @@ define([
 			$('.uiTooltips .tooltip').addClass('bright');
 		},
 		onProphecyUnhover: function (e) {
-			let el = $(e.currentTarget);
+			let el = $(e.target);
 			events.emit('onHideTooltip', el[0]);
 		},
 		onProphecyClick: function (e) {
-			let el = $(e.currentTarget);
+			let el = $(e.target);
 			let pName = el.attr('prophecy');
 
 			if (el.hasClass('active')) {
@@ -143,7 +143,7 @@ define([
 		},
 
 		onClassHover: function (e) {
-			let el = $(e.currentTarget);
+			let el = $(e.target);
 
 			let pos = {
 				x: e.clientX + 25,
@@ -160,7 +160,7 @@ define([
 			$('.uiTooltips .tooltip').addClass('bright');
 		},
 		onClassUnhover: function (e) {
-			let el = $(e.currentTarget);
+			let el = $(e.target);
 			events.emit('onHideTooltip', el[0]);
 		},
 		changeClass: function (e) {

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

@@ -76,7 +76,7 @@ define([
 		onTabClick: function (e) {
 			this.find('.tab.selected').removeClass('selected');
 
-			$(e.currentTarget).addClass('selected');
+			$(e.target).addClass('selected');
 
 			this.onGetStats(this.stats);
 		},
@@ -106,7 +106,7 @@ define([
 				.css('background-position', '')
 				.on('click', this.buildSlot.bind(this));
 
-			this.find('[slot]').toArray().forEach(function (el) {
+			this.find('[slot]').each(function (el) {
 				el = $(el);
 				let slot = el.attr('slot');
 				let newItems = window.player.inventory.items.some(function (i) {
@@ -172,8 +172,8 @@ define([
 		},
 
 		buildSlot: function (el) {
-			if (el.currentTarget)
-				el = $(el.currentTarget).parent();
+			if (el.target)
+				el = $(el.target).parent();
 
 			let slot = el.attr('slot');
 			let isRune = (slot.indexOf('rune') === 0);

src/client/ui/templates/events/events.js

@@ -67,13 +67,11 @@ define([
 
 			let eventEl = container.find('.event');
 
-			eventEl
-				.sort(function (a, b) {
-					a = $(a).hasClass('active') ? 1 : 0;
-					b = $(b).hasClass('active') ? 1 : 0;
-					return b - a;
-				})
-				.appendTo(container);
+			eventEl.each(c => {
+				let childEl = $(c);
+				if (childEl.hasClass('active'))
+					childEl.prependTo(container);
+			});
 		},
 
 		onUpdateEvent: function (eventObj) {

src/client/ui/templates/inventory/inventory.js

@@ -107,7 +107,7 @@ define([
 					.on('mouseleave', this.hideTooltip.bind(this, itemEl, item))
 					.find('.icon')
 					.css('background', 'url(' + spritesheet + ') ' + imgX + 'px ' + imgY + 'px')
-					.on('contextmenu', this.showContext.bind(this, item));
+					.on('contextmenu', this.showContext.bind(this, item), true);
 
 				if (item.quantity > 1 || item.eq || item.active || item.has('quickSlot')) {
 					let elQuantity = itemEl.find('.quantity');

src/client/ui/templates/leaderboard/leaderboard.js

@@ -39,7 +39,7 @@ define([
 		},
 
 		onPage: function (e) {
-			let el = $(e.currentTarget);
+			let el = $(e.target);
 			let offset = ~~el.attr('offset');
 
 			this.offset += offset;
@@ -75,7 +75,7 @@ define([
 		},
 
 		onProphecyClick: function (e) {
-			let el = $(e.currentTarget);
+			let el = $(e.target);
 
 			el.toggleClass('selected');
 

src/client/ui/templates/messages/messages.js

@@ -106,7 +106,7 @@ define([
 		},
 
 		onClickFilter: function (e) {
-			let el = $(e.currentTarget);
+			let el = $(e.target);
 			el.toggleClass('active');
 
 			let filter = el.attr('filter');

src/client/ui/templates/options/options.js

@@ -26,7 +26,8 @@ define([
 		postRender: function () {
 			this.onEvent('onToggleOptions', this.toggle.bind(this));
 
-			this.el.find('.btnScreen').on('click', this.toggleScreen.bind(this));
+			//Can only toggle fullscreen directly in a listener, not deferred the way wQuery does it
+			this.el.find('.btnScreen')[0].addEventListener('click', this.toggleScreen.bind(this));
 			this.el.find('.btnCharSelect').on('click', this.charSelect.bind(this));
 			this.el.find('.btnLogOut').on('click', this.logOut.bind(this));
 			this.el.find('.btnContinue').on('click', this.toggle.bind(this));

src/client/ui/templates/passives/passives.js

@@ -21,7 +21,6 @@ define([
 		tpl: tpl,
 
 		modal: true,
-		centered: true,
 
 		canvas: null,
 		size: {},

src/client/ui/templates/passives/styles.less

@@ -7,7 +7,9 @@
 	text-align: center;
 	height: 100%;
 	width: 100%;
-	margin: 5px;
+	position: absolute;
+	left: 0px;
+	top: 0px;
 
 	> .heading {
 		color: @white;

src/client/ui/templates/reputation/reputation.js

@@ -52,7 +52,7 @@ define([
 
 		onSelectFaction: function (el, faction) {
 			this.find('.selected').removeClass('selected');
-			$(el).addClass('selected');
+			el.addClass('selected');
 
 			this.find('.info .heading-bottom').html(faction.name.toLowerCase());
 			this.find('.info .description').html(faction.description.toLowerCase());
@@ -72,7 +72,7 @@ define([
 
 			let w = ~~(this.find('.front').width() / 5) * 5;
 			this.find('.front').css({
-				width: w + 'px'
+				width: w
 			});
 
 			percentage = ~~(percentage * 10) / 10;

src/client/ui/templates/smithing/smithing.js

@@ -43,7 +43,7 @@ define([
 		},
 
 		clickAction: function (e) {
-			let el = $(e.currentTarget);
+			let el = $(e.target);
 			this.find('.col-btn').removeClass('selected');
 
 			let action = el.attr('action');

src/client/ui/templates/tooltips/tooltips.js

@@ -59,9 +59,9 @@ define([
 			}
 
 			if ((zIndex) && (zIndex !== 'auto'))
-				this.tooltip.css('zIndex', zIndex);
+				this.tooltip.css('z-index', zIndex);
 			else
-				this.tooltip.css('zIndex', '');
+				this.tooltip.css('z-index', '');
 		}
 	};
 });

src/server/misc/mods.js

@@ -10,7 +10,7 @@ module.exports = {
 
 		modList.forEach(function (m) {
 			let mod = require('../mods/' + m + '/index');
-			this.onGetMod(m, mod);
+			//this.onGetMod(m, mod);
 		}, this);
 
 		cbDone();