more work on #1460, moving mod client components to mod

src/client/js/components/components.js

@@ -1,78 +1,87 @@
-let components = [
-	'keyboardMover',
-	'mouseMover',
-	'touchMover',
-	'player',
-	'pather',
+const templates = {};
+const eventList = {};
+
+let events = null;
+
+const hookEvent = function (e, cb) {
+	if (!eventList[e])
+		eventList[e] = [];
+
+	eventList[e].push(cb);
+	events.on(e, cb);
+};
+
+const unhookEvents = function () {
+	Object.entries(eventList).forEach(([eventName, callbacks]) => {
+		callbacks.forEach(c => events.off(eventName, c));
+	});
+};
+
+const componentPaths = [
+	'animation',
 	'attackAnimation',
-	'lightningEffect',
-	'moveAnimation',
 	'bumpAnimation',
-	'animation',
-	'light',
-	'lightPatch',
-	'projectile',
-	'particles',
-	'explosion',
-	'spellbook',
-	'inventory',
-	'stats',
+	'chatter',
 	'chest',
+	'dialogue',
 	'effects',
-	'quests',
 	'events',
-	'resourceNode',
-	'gatherer',
-	'stash',
+	'explosion',
 	'flash',
-	'chatter',
-	'dialogue',
-	'trade',
+	'inventory',
+	'keyboardMover',
+	'light',
+	'lightningEffect',
+	'lightPatch',
+	'mouseMover',
+	'moveAnimation',
+	'particles',
+	'passives',
+	'pather',
+	'player',
+	'projectile',
+	'quests',
 	'reputation',
 	'serverActions',
 	'social',
-	'passives',
 	'sound',
+	'spellbook',
+	'stash',
+	'stats',
+	'touchMover',
+	'trade',
 	'whirlwind'
-].map(function (c) {
-	return 'js/components/' + c;
-});
+].map(c => 'js/components/' + c);
 
 define([
-	...components, 
-	'../system/events'
-], function () {
-	const events = arguments[arguments.length - 1];
-	
-	const hookEvent = function (e, cb) {
-		if (!this.eventList[e])
-			this.eventList[e] = [];
+	'../system/events',
+	'../system/globals'
+], function (
+	eventModule,
+	globals
+) {
+	events = eventModule;
 
-		this.eventList[e].push(cb);
-		events.on(e, cb);
-	};
-
-	const unhookEvents = function () {
-		Object.entries(this.eventList).forEach(([eventName, callbacks]) => {
-			callbacks.forEach(c => events.off(eventName, c));
-		});
-	};
-
-	let templates = {};
+	return {
+		init: async function () {
+			const extraComponents = globals.clientConfig.components;
+			componentPaths.push(...extraComponents);
 
-	[].forEach.call(arguments, function (t, i) {
-		//Don't do this for the events module
-		if (i === arguments[2].length - 1)
-			return;
+			await Promise.all(componentPaths.map(path => {
+				return new Promise(async res => {
+					require([path], cpn => {
+						cpn.eventList = {};
+						cpn.hookEvent = hookEvent.bind(cpn);
+						cpn.unhookEvents = unhookEvents.bind(cpn);
 
-		t.eventList = {};
-		t.hookEvent = hookEvent.bind(t);
-		t.unhookEvents = unhookEvents.bind(t);
+						templates[cpn.type] = cpn;
 
-		templates[t.type] = t;
-	});
+						res();
+					});
+				});
+			}));
+		},
 
-	return {
 		getTemplate: function (type) {
 			if (type === 'lightpatch')
 				type = 'lightPatch';

src/client/js/components/gatherer.js

@@ -1,81 +0,0 @@
-define([
-	'js/system/client',
-	'js/system/events',
-	'js/misc/physics'
-], function (
-	client,
-	events,
-	physics
-) {
-	return {
-		type: 'gatherer',
-		effect: null,
-
-		init: function () {
-			this.obj.on('onKeyDown', this.onKeyDown.bind(this));
-			this.hookEvent('onRezone', this.onRezone.bind(this));
-		},
-
-		extend: function (msg) {
-			if ((msg.width) && (msg.progress !== 100)) {
-				if (this.effect)
-					this.effect.destroyed = true;
-
-				let x = 0;
-				let y = 0;
-				do {
-					x = msg.x + ~~(Math.random() * msg.width);
-					y = msg.y + ~~(Math.random() * msg.height);
-				} while (!physics.isTileBlocking(x, y) || Math.max(Math.abs(x - this.obj.x), Math.abs(y - this.obj.y)) <= 2);
-
-				this.obj.flipX = (x < this.obj.x);
-				this.obj.setSpritePosition();
-
-				this.effect = this.obj.addComponent('lightningEffect', {
-					new: true,
-					toX: x,
-					toY: y,
-					ttl: -1,
-					divisions: 4,
-					cdMax: 12,
-					colors: [0xc0c3cf, 0xc0c3cf, 0x929398],
-					maxDeviate: 5,
-					lineGrow: true,
-					lineShrink: true
-				});
-			} else {
-				if ((msg.progress === 100) && (this.effect)) {
-					this.effect.destroyed = true;
-					this.effect = null;
-				}
-
-				events.emit('onShowProgress', (msg.action || 'Gathering') + '...', msg.progress);
-			}
-		},
-
-		onRezone: function () {
-			this.extend({
-				progress: 100,
-				action: 'Fishing'
-			});
-		},
-
-		onKeyDown: function (key) {
-			if (key !== 'g')
-				return;
-
-			client.request({
-				cpn: 'player',
-				method: 'performAction',
-				data: {
-					cpn: 'gatherer',
-					method: 'gather'
-				}
-			});
-		},
-
-		destroy: function () {
-			this.unhookEvents();
-		}
-	};
-});

src/client/js/components/resourceNode.js

@@ -1,72 +0,0 @@
-define([
-	'js/misc/physics'
-], function (
-	physics
-) {
-	let bptParticles = {
-		chance: 0.1,
-		blueprint: {
-			color: {
-				start: 'f2f5f5'
-			},
-			alpha: {
-				start: 0.75,
-				end: 0.2
-			},
-			scale: {
-				start: 6,
-				end: 2
-			},
-			lifetime: {
-				min: 1,
-				max: 3
-			},
-			chance: 0.025
-		}
-	};
-
-	return {
-		type: 'resourceNode',
-
-		init: function () {
-			let x = this.obj.x;
-			let y = this.obj.y;
-			let w = this.obj.width || 1;
-			let h = this.obj.height || 1;
-
-			let isFish = (this.nodeType === 'fish');
-
-			for (let i = x; i < x + w; i++) {
-				for (let j = y; j < y + h; j++) {
-					let bpt = $.extend(true, {}, bptParticles, {
-						new: true
-					});
-
-					if (isFish) {
-						if (!physics.isTileBlocking(i, j))
-							continue;
-						else if (Math.random() < 0.4)
-							continue;
-
-						$.extend(true, bpt, {
-							blueprint: {
-								color: {
-									start: '48edff'
-								},
-								spawnType: 'rect',
-								spawnRect: {
-									x: 40 * (i - x),
-									y: 40 * (j - y),
-									w: 40,
-									h: 40
-								}
-							}
-						});
-					}
-
-					this.obj.addComponent('particles', bpt);
-				}
-			}
-		}
-	};
-});

src/client/js/main.js

@@ -10,6 +10,7 @@ define([
 	'js/resources',
 	'js/sound/sound',
 	'js/system/globals',
+	'js/components/components',
 	'ui/templates/online/online',
 	'ui/templates/tooltips/tooltips'
 ], function (
@@ -23,7 +24,8 @@ define([
 	events,
 	resources,
 	sound,
-	globals
+	globals,
+	components
 ) {
 	let fnQueueTick = null;
 	const getQueueTick = updateMethod => {
@@ -57,6 +59,8 @@ define([
 			await resources.init();
 			events.emit('onResourcesLoaded');
 
+			await components.init();
+
 			this.start();
 		},
 

src/server/config/clientConfig.js

@@ -25,6 +25,9 @@ const config = {
 		'images/skins/0010.png',
 		'images/skins/0012.png'
 	],
+	//Client components required by mods
+	// Format: [ 'cpnPath', ... ]
+	components: [],
 	uiList: [],
 	contextMenuActions: {
 		player: [],

src/server/server.js

@@ -103,7 +103,8 @@ module.exports = {
 					file.includes('mods/') &&
 					(
 						file.includes('.png') ||
-						file.includes('/ui/')
+						file.includes('/ui/') ||
+						file.includes('/clientComponents/')
 					)
 				)
 			);