Rename buffs ui to effects and manage effect icons client-side

src/client/ui/templates/buffs/buffs.js

@@ -1,59 +0,0 @@
-define([
-	'js/system/events',
-	'html!ui/templates/buffs/template',
-	'css!ui/templates/buffs/styles',
-	'html!ui/templates/buffs/templateBuff'
-], function (
-	events,
-	template,
-	styles,
-	templateBuff
-) {
-	let icons = {
-		stunned: [4, 0],
-		regenHp: [3, 1],
-		regenMana: [4, 1],
-		swiftness: [5, 1],
-		stealth: [7, 0],
-		reflectDamage: [2, 1],
-		holyVengeance: [4, 0]
-	};
-
-	return {
-		tpl: template,
-
-		icons: {},
-
-		postRender: function () {
-			this.onEvent('onGetBuff', this.onGetBuff.bind(this));
-			this.onEvent('onRemoveBuff', this.onRemoveBuff.bind(this));
-		},
-
-		onGetBuff: function (buff) {
-			let icon = icons[buff.type];
-			if (!icon)
-				return;
-
-			let imgX = icon[0] * -32;
-			let imgY = icon[1] * -32;
-
-			let html = templateBuff;
-			let el = $(html).appendTo(this.el)
-				.find('.inner')
-				.css({
-					background: 'url(../../../images/statusIcons.png) ' + imgX + 'px ' + imgY + 'px'
-				});
-
-			this.icons[buff.id] = el.parent();
-		},
-
-		onRemoveBuff: function (buff) {
-			let el = this.icons[buff.id];
-			if (!el)
-				return;
-
-			el.remove();
-			delete this.icons[buff.id];
-		}
-	};
-});

src/client/ui/templates/buffs/styles.css

@@ -1 +0,0 @@
-.uiBuffs{position:absolute;left:16px;top:104px}.uiBuffs .icon{width:40px;height:40px;padding:4px;background-color:rgba(49,33,54,.75);margin-right:16px;float:left}.uiBuffs .icon .inner{width:32px;height:32px;background:url(../../../images/statusIcons.png) 0 0}.mobile .uiBuffs{left:316px;top:10px}

src/client/ui/templates/buffs/template.html

@@ -1 +0,0 @@
-<div class="uiBuffs"></div>

src/client/ui/templates/effects/effects.js

@@ -0,0 +1,54 @@
+define([
+	'html!ui/templates/effects/template',
+	'css!ui/templates/effects/styles',
+	'html!ui/templates/effects/templateEffect'
+], function (
+	template,
+	styles,
+	templateEffect
+) {
+	return {
+		tpl: template,
+
+		icons: {},
+
+		postRender: function () {
+			this.onEvent('onGetEffectIcon', this.onGetEffectIcon.bind(this));
+			this.onEvent('onRemoveEffectIcon', this.onRemoveEffectIcon.bind(this));
+		},
+
+		buildIcon: function (config) {
+			let { icon, url } = config;
+
+			if (!url)
+				url = '../../../images/statusIcons.png';
+
+			let imgX = icon[0] * -32;
+			let imgY = icon[1] * -32;
+
+			let html = templateEffect;
+			let el = $(html).appendTo(this.el)
+				.find('.inner')
+				.css({
+					background: `url(${url}) ${imgX}px ${imgY}px`
+				});
+
+			return el.parent();
+		},
+
+		onGetEffectIcon: function (config) {
+			let el = this.buildIcon(config);
+
+			this.icons[config.id] = el;
+		},
+
+		onRemoveEffectIcon: function (config) {
+			let el = this.icons[config.id];
+			if (!el)
+				return;
+			
+			el.remove();
+			delete this.icons[config.id];
+		}
+	};
+});

src/client/ui/templates/effects/styles.css

@@ -0,0 +1 @@
+.uiEffects{position:absolute;left:16px;top:104px}.uiEffects .icon{width:40px;height:40px;padding:4px;background-color:rgba(49,33,54,.75);margin-right:16px;float:left}.uiEffects .icon .inner{width:32px;height:32px;background:url(../../../images/statusIcons.png) 0 0}.mobile .uiEffects{left:316px;top:10px}

src/client/ui/templates/buffs/styles.less → src/client/ui/templates/effects/styles.less

@@ -1,6 +1,6 @@
 @import "../../../css/colors.less";
 
-.uiBuffs {
+.uiEffects {
 	position: absolute;
 	left: 16px;
 	top: 104px;
@@ -23,7 +23,7 @@
 
 }
 
-.mobile .uiBuffs {
+.mobile .uiEffects {
 	left: 316px;
 	top: 10px;
 }

src/client/ui/templates/effects/template.html

@@ -0,0 +1 @@
+<div class="uiEffects"></div>

src/client/ui/templates/buffs/templateBuff.html → src/client/ui/templates/effects/templateEffect.html

@@ -1,3 +1,3 @@
-<div class="icon buff">
+<div class="icon effect">
 	<div class="inner"></div>
 </div>

src/server/clientComponents/effects.js

@@ -1,15 +1,34 @@
 define([
+	'js/system/events',
 	'js/rendering/numbers'
 ], function (
+	events,
 	numbers
 ) {
+	const defaultBuffIcons = {
+		stunned: [4, 0]
+	};
+
 	const effectBase = {
 		init: function () {
 			this.defaultDamageText(false);
+
+			if (this.self && defaultBuffIcons[this.type]) {
+				events.emit('onGetEffectIcon', {
+					id: this.id,
+					icon: defaultBuffIcons[this.type]
+				});
+			}
 		},
 
 		destroy: function () {
 			this.defaultDamageText(true);
+
+			if (this.self && defaultBuffIcons[this.type]) {
+				events.emit('onRemoveEffectIcon', {
+					id: this.id
+				});
+			}
 		},
 
 		defaultDamageText: function (removing) {

src/server/clientComponents/effects/auras.js

@@ -1,9 +1,11 @@
 define([
-	'js/rendering/renderer'
+	'js/rendering/renderer',
+	'js/system/events'
 ], function (
-	renderer
+	renderer,
+	events
 ) {
-	let auras = {
+	const auras = {
 		reflectDamage: 0,
 		stealth: 1,
 		regenHp: 9,
@@ -12,6 +14,14 @@ define([
 		holyVengeance: 8,
 		rare: 16
 	};
+	const buffIcons = {
+		regenHp: [3, 1],
+		regenMana: [4, 1],
+		swiftness: [5, 1],
+		stealth: [7, 0],
+		reflectDamage: [2, 1],
+		holyVengeance: [4, 0]
+	};
 
 	let templates = {};
 
@@ -41,6 +51,13 @@ define([
 				});
 
 				this.defaultDamageText();
+
+				if (this.self && buffIcons[type]) {
+					events.emit('onGetEffectIcon', {
+						id: this.id,
+						icon: buffIcons[type]
+					});
+				}
 			},
 
 			getAlpha: function () {
@@ -97,6 +114,12 @@ define([
 				});
 
 				this.defaultDamageText(true);
+
+				if (this.self && buffIcons[type]) {
+					events.emit('onRemoveEffectIcon', {
+						id: this.id
+					});
+				}
 			},
 
 			setVisible: function (visible) {

src/server/components/effects.js

@@ -189,14 +189,8 @@ module.exports = {
 
 		this.effects.push(builtEffect);
 
-		if (!options.silent) {
-			this.obj.instance.syncer.queue('onGetBuff', {
-				type: options.type,
-				id: builtEffect.id
-			}, [this.obj.serverId]);
-
+		if (!options.silent)
 			this.obj.syncer.setArray(false, 'effects', 'addEffects', builtEffect.simplify());
-		}
 
 		this.obj.instance.eventEmitter.emit('onAddEffect', this.obj, builtEffect);
 
@@ -228,10 +222,6 @@ module.exports = {
 		if (effect.silent)
 			return;
 
-		this.obj.instance.syncer.queue('onRemoveBuff', {
-			id: id
-		}, [this.obj.serverId]);
-
 		this.obj.syncer.setArray(false, 'effects', 'removeEffects', id);
 	},
 

src/server/config/clientConfig.js

@@ -173,7 +173,7 @@ const config = {
 		'party',
 		'help',
 		'dialogue',
-		'buffs',
+		'effects',
 		'tooltips',
 		'tooltipInfo',
 		'tooltipItem',

src/server/config/effects/effectTemplate.js

@@ -31,6 +31,7 @@ module.exports = {
 
 	simplify: function () {
 		return {
+			id: this.id,
 			type: this.type
 		};
 	}