Merge branch '1500-elemental-floating-numbers' into 'master'

Make damage numbers configurable, by default colored according to the element of the attack

Closes #1500

See merge request Isleward/isleward!525

src/client/css/main.less

@@ -174,6 +174,13 @@ body {
 :root {
 	scrollbar-color: @lightGray @gray !important;
 	scrollbar-width: thin !important;
+
+	--color-element-default: @white;
+	--color-element-arcane: @pinkA;
+	--color-element-frost: @blueA;
+	--color-element-fire: @redA;
+	--color-element-holy: @yellow;
+	--color-element-poison: @tealB;
 }
 
 .q0 {

src/client/js/config.js

@@ -13,14 +13,16 @@ define([
 		rememberChatChannel: true,
 		soundVolume: 100,
 		musicVolume: 100,
-		partyView: 'full'
+		partyView: 'full',
+		damageNumbers: 'element'
 	};
 
 	const valueChains = {
 		partyView: ['full', 'compact', 'minimal'],
 		showQuests: ['on', 'minimal', 'off'],
 		qualityIndicators: ['border', 'bottom', 'background', 'off'],
-		unusableIndicators: ['off', 'border', 'top', 'background']
+		unusableIndicators: ['off', 'border', 'top', 'background'],
+		damageNumbers: ['element', 'white', 'off']
 	};
 
 	const getNextValue = key => {

src/client/js/rendering/numbers.js

@@ -1,12 +1,27 @@
 define([
 	'js/system/events',
 	'js/objects/objects',
-	'js/rendering/renderer'
+	'js/rendering/renderer',
+	'js/config'
 ], function (
 	events,
 	objects,
-	renderer
+	renderer,
+	config
 ) {
+	//Create an object of the form: { elementName: elementIntegerColor, ... } from corresponding variable values.
+	// These variables are defiend in main.less and take the form: var(--color-element-elementName)
+	const elementColors = Object.fromEntries(
+		['default', 'arcane', 'frost', 'fire', 'holy', 'poison'].map(e => {
+			const variableName = `--color-element-${e}`;
+			const variableValue = getComputedStyle(document.documentElement).getPropertyValue(variableName);
+
+			const integerColor = `0x${variableValue.replace('#', '')}`;
+
+			return [e, integerColor];
+		})
+	);
+
 	return {
 		list: [],
 
@@ -15,6 +30,9 @@ define([
 		},
 
 		onGetDamage: function (msg) {
+			if (config.damageNumbers === 'off')
+				return;
+
 			let target = objects.objects.find(function (o) {
 				return (o.id === msg.id);
 			});
@@ -33,7 +51,8 @@ define([
 				event: msg.event,
 				text: msg.text,
 				crit: msg.crit,
-				heal: msg.heal
+				heal: msg.heal,
+				element: msg.element
 			};
 
 			if (numberObj.event) 
@@ -50,12 +69,15 @@ define([
 				text = (numberObj.heal ? '+' : '') + (~~(amount * div) / div);
 			}
 
+			const colorVariableName = config.damageNumbers === 'element' ? numberObj.element : 'default';
+				
 			numberObj.sprite = renderer.buildText({
 				fontSize: numberObj.crit ? 22 : 18,
 				layerName: 'effects',
 				x: numberObj.x,
 				y: numberObj.y,
-				text: text
+				text: text,
+				color: elementColors[colorVariableName]
 			});
 
 			this.list.push(numberObj);

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

@@ -38,6 +38,7 @@ define([
 			this.find('.item.unusable .name').on('click', this.toggleUnusableIndicators.bind(this));
 			this.find('.item.lastChannel .name').on('click', this.toggleLastChannel.bind(this));
 			this.find('.item.partyView .name').on('click', this.togglePartyView.bind(this));
+			this.find('.item.damageNumbers .name').on('click', this.toggleDamageNumbers.bind(this));
 
 			//Can only toggle fullscreen directly in a listener, not deferred the way jQuery does it,
 			// so we register this handler in a different way
@@ -55,7 +56,8 @@ define([
 				'onToggleQuestsVisibility',
 				'onToggleLastChannel',
 				'onVolumeChange',
-				'onTogglePartyView'
+				'onTogglePartyView',
+				'onToggleDamageNumbers'
 			].forEach(e => {
 				this.onEvent(e, this[e].bind(this));
 			});
@@ -191,6 +193,18 @@ define([
 			this.find('.item.partyView .value').html(newValue);
 		},
 
+		toggleDamageNumbers: function () {
+			config.toggle('damageNumbers');
+
+			events.emit('onToggleDamageNumbers', config.damageNumbers);
+		},
+
+		onToggleDamageNumbers: function (state) {
+			const newValue = state[0].toUpperCase() + state.substr(1);
+
+			this.find('.item.damageNumbers .value').html(newValue);
+		},
+
 		onVolumeChange: function ({ soundType, volume }) {
 			const item = this.find(`.item.volume.${soundType}`);
 			
@@ -220,6 +234,7 @@ define([
 			this.onToggleUnusableIndicators(config.unusableIndicators);
 			this.onToggleLastChannel(config.rememberChatChannel);
 			this.onTogglePartyView(config.partyView);
+			this.onToggleDamageNumbers(config.damageNumbers);
 			
 			this.onVolumeChange({
 				soundType: 'sound',

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

@@ -48,6 +48,10 @@
 				<div class="name">Party</div>
 				<div class="value">Full</div>
 			</div>
+			<div class="item damageNumbers">
+				<div class="name">Damage Numbers</div>
+				<div class="value">Element</div>
+			</div>
 			<div class="heading inventory">Inventory</div>
 			<div class="item quality">
 				<div class="name">Quality Indicators</div>

src/server/components/stats.js

@@ -571,7 +571,8 @@ module.exports = {
 			id: obj.id,
 			source: source.id,
 			crit: damage.crit,
-			amount: amount
+			amount: amount,
+			element: damage.element
 		};
 
 		this.values.hp -= amount;