Merge branch '2000-online-list' into 'master'

Resolve "Move the online list to a mod"

Closes #2000

See merge request Isleward/isleward!630

.gitlab-ci.yml

@@ -8,6 +8,7 @@ audit:
   stage: test
   script:
     - cd src/server
+    - npm install
     - npm audit
   allow_failure: true
   only:
@@ -17,9 +18,10 @@ audit:
 lint-server:
   stage: test
   script:
-    - npm install eslint@7.32.0 eslint-plugin-prettier prettier babel-eslint eslint-plugin-requirejs
-    - cd src/server
-    - ../../node_modules/.bin/eslint . 
+    - cd src
+    - npm install
+    - cd server
+    - ../node_modules/.bin/eslint . 
   only:
     - merge_requests
     - master
@@ -27,9 +29,10 @@ lint-server:
 lint-client:
   stage: test
   script:
-    - npm install eslint@7.32.0 eslint-plugin-prettier prettier babel-eslint eslint-plugin-requirejs
-    - cd src/client
-    - ../../node_modules/.bin/eslint .
+    - cd src
+    - npm install
+    - cd client
+    - ../node_modules/.bin/eslint . 
   only:
     - merge_requests
     - master

src/.eslintignore

@@ -1,3 +0,0 @@
-/client/plugins/*
-node_modules/*
-*.json

src/client/.eslintrc

@@ -220,7 +220,7 @@
 		"no-throw-literal": 2,
 		"no-undef": 1,
 		"no-undef-init": 2,
-		"no-underscore-dangle": 1,
+		"no-underscore-dangle": 0,
 		"no-unneeded-ternary": 2,
 		"no-unreachable": 1,
 		"no-unused-expressions": 2,

src/client/js/main.js

@@ -11,7 +11,6 @@ define([
 	'js/sound/sound',
 	'js/system/globals',
 	'js/components/components',
-	'ui/templates/online/online',
 	'ui/templates/tooltips/tooltips'
 ], function (
 	client,

src/client/js/system/events.js

@@ -26,10 +26,7 @@ define([
 			return callback;
 		},
 		clearQueue: function () {
-			//Hack to allow the player list to persist
-			this.queue.spliceWhere(function (q) {
-				return ((q.event !== 'onGetConnectedPlayer') && (q.event !== 'onGetDisconnectedPlayer'));
-			});
+			this.queue.length = 0;
 		},
 		off: function (eventName, callback) {
 			let list = this.events[eventName] || [];

src/client/package.json

@@ -2,12 +2,7 @@
   "name": "isleward_client",
   "version": "0.12.0",
   "description": "isleward",
-  "dependencies": {
-  },
   "devDependencies": {
-    "eslint": "^7.32.0",
-    "babel-eslint": "^10.1.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-requirejs": "^4.0.1"
+
   }
 }

src/client/ui/factory.js

@@ -97,7 +97,7 @@ define([
 				else
 					path = this.root + 'ui/templates/' + type + '/' + type;
 			}
-		
+
 			require([path], this.onGetTemplate.bind(this, options, type));
 		},
 		

src/client/ui/templates/online/online.js

@@ -1,177 +0,0 @@
-define([
-	'js/system/events',
-	'js/system/client',
-	'js/system/globals',
-	'html!ui/templates/online/template',
-	'css!ui/templates/online/styles',
-	'html!ui/templates/online/templateListItem'
-], function (
-	events,
-	client,
-	globals,
-	template,
-	styles,
-	templateListItem
-) {
-	return {
-		tpl: template,
-		centered: true,
-
-		onlineList: [],
-
-		modal: true,
-		hasClose: true,
-
-		actions: [],
-
-		postRender: function () {
-			globals.onlineList = this.onlineList;
-
-			this.onEvent('onGetConnectedPlayer', this.onGetConnectedPlayer.bind(this));
-			this.onEvent('onGetDisconnectedPlayer', this.onGetDisconnectedPlayer.bind(this));
-
-			this.onEvent('onGetSocialActions', this.onGetSocialActions.bind(this));
-
-			this.onEvent('onKeyDown', this.onKeyDown.bind(this));
-			this.onEvent('onShowOnline', this.toggle.bind(this));
-		},
-
-		onGetSocialActions: function (actions) {
-			this.actions = actions;
-		},
-
-		onKeyDown: function (key) {
-			if (key === 'o')
-				this.toggle();
-		},
-
-		onAfterShow: function () {
-			this.build();
-		},
-
-		onGetConnectedPlayer: function (list) {
-			if (!list.length)
-				list = [list];
-
-			let onlineList = this.onlineList;
-
-			list.forEach(function (l) {
-				let exists = onlineList.find(function (o) {
-					return (o.name === l.name);
-				});
-				if (exists)
-					$.extend(true, exists, l);
-				else
-					onlineList.push(l);
-			});
-
-			onlineList
-				.sort(function (a, b) {
-					if (a.level === b.level) {
-						if (a.name > b.name)
-							return 1;
-						return -1;
-					} return b.level - a.level;
-				});
-
-			if (this.shown)
-				this.build();
-		},
-
-		onGetDisconnectedPlayer: function (playerName) {
-			let onlineList = this.onlineList;
-
-			onlineList.spliceWhere(function (o) {
-				return (o.name === playerName);
-			});
-
-			if (this.shown)
-				this.build();
-		},
-
-		build: function () {
-			let headingText = this.el.find('.heading-text');
-			let playerCount = this.onlineList.length;
-			headingText.html(`online players (${playerCount})`);
-
-			let container = this.el.find('.list');
-			container
-				.children(':not(.heading)')
-				.remove();
-
-			this.onlineList.forEach(function (l) {
-				let html = templateListItem
-					.replace('$NAME$', l.name)
-					.replace('$LEVEL$', l.level)
-					.replace('$CLASS$', l.class);
-
-				let el = $(html)
-					.appendTo(container)
-					.on('contextmenu', this.showContext.bind(this, l));
-
-				if (isMobile)
-					el.on('mousedown', this.showContext.bind(this, l));
-			}, this);
-		},
-
-		showContext: function (char, e) {
-			if (char.name !== window.player.name) {
-				const extraActions = this.actions.map(({ command, text }) => {
-					return {
-						text,
-						callback: this.performAction.bind(this, command, char.name)
-					};
-				});
-
-				const isBlocked = window.player.social.isPlayerBlocked(char.name);
-
-				const actions = [{
-					text: 'invite to party',
-					callback: this.invite.bind(this, char.id)
-				}, {
-					text: 'whisper',
-					callback: events.emit.bind(events, 'onDoWhisper', char.name)
-				}, {
-					text: isBlocked ? 'unblock' : 'block',
-					callback: this.block.bind(this, char.name)
-				}, ...extraActions];
-
-				events.emit('onBeforeOnlineListContext', char.id, actions);
-			
-				events.emit('onContextMenu', actions, e);
-			}
-
-			e.preventDefault();
-			return false;
-		},
-
-		performAction: function (command, charName) {
-			client.request({
-				cpn: 'social',
-				method: 'chat',
-				data: {
-					message: `/${command} ${charName}`
-				}
-			});
-		},
-
-		block: function (charName) {
-			const isBlocked = window.player.social.isPlayerBlocked(charName);
-			let method = isBlocked ? 'unblock' : 'block';
-
-			this.performAction(method, charName);
-		},
-
-		invite: function (charId) {
-			this.hide();
-
-			client.request({
-				cpn: 'social',
-				method: 'getInvite',
-				data: {
-					targetId: charId
-				}
-			});
-		}
-	};
-});

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

@@ -1,100 +0,0 @@
-@import "../../../css/colors.less";
-
-.uiOnline {
-	display: none;
-	background-color: @blackB;
-	border: 5px solid @blackB;
-	text-align: center;
-	width: 450px;
-	height: 396px;
-
-	> .heading {
-		color: @blueA;
-		width: 100%;
-		height: 36px;
-		background-color: @blackB;
-
-		.heading-text {
-			padding-top: 8px;
-			margin: auto;
-		}
-
-	}
-
-	.bottom {
-		height: calc(100% - 36px);
-		background-color: @blackC;
-		padding: 8px;
-
-		.list {
-			width: 100%;
-			height: 100%;
-			overflow-y: auto;
-			background-color: @blackC;
-			display: flex;
-			flex-direction: column;
-
-			.heading {
-				height: 24px;
-				color: @white;
-
-				> div {
-					float: left;
-					padding: 4px;
-					height: 24px;
-
-					&:nth-child(1) {
-						width: 10%;
-					}
-
-					&:nth-child(2) {
-						width: 55%;
-					}
-
-					&:nth-child(3) {
-						width: 35%;
-					}
-
-				}
-
-			}
-
-			.onlineUser {
-				color: @grayC;
-				height: 24px;
-				cursor: pointer;
-
-				> div {
-					float: left;
-					padding: 4px;
-					height: 24px;
-
-					&:nth-child(1) {
-						width: 10%;
-					}
-
-					&:nth-child(2) {
-						width: 55%;
-					}
-
-					&:nth-child(3) {
-						width: 35%;
-					}
-
-				}
-
-				&:hover {
-					background-color: @blackB;
-				}
-
-			}
-
-		}
-
-	}
-
-}
-
-.mobile .uiOnline {
-	z-index: 2;
-}

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

@@ -1,14 +0,0 @@
-<div class="uiOnline hasBorderShadow">
-	<div class="heading">
-		<div class="heading-text">online players</div>
-	</div>
-	<div class="bottom">
-		<div class="list">
-			<div class="heading">
-				<div class="col">level</div>
-				<div class="col">name</div>
-				<div class="col">spirit</div>
-			</div>
-		</div>
-	</div>
-</div>

src/client/ui/templates/online/templateListItem.html

@@ -1,5 +0,0 @@
-<div class="onlineUser">
-	<div class="level">$LEVEL$</div>
-	<div class="name">$NAME$</div>
-	<div class>($CLASS$)</div>
-</div>

src/client/ui/templates/party/party.js

@@ -30,7 +30,7 @@ define([
 			this.onEvent('onGetParty', this.onGetParty.bind(this));
 			this.onEvent('onPartyDisband', this.onPartyDisband.bind(this));
 
-			this.onEvent('onGetConnectedPlayer', this.onGetConnectedPlayer.bind(this));
+			this.onEvent('globalObjectListUpdated', this.globalObjectListUpdated.bind(this));
 
 			this.onEvent('onGetPartyStats', this.onGetPartyStats.bind(this));
 
@@ -38,46 +38,34 @@ define([
 			this.onTogglePartyView(config.partyView);
 		},
 
-		onGetConnectedPlayer: function (msg) {
+		globalObjectListUpdated: function ({ list }) {
 			if (!window.player)
 				return;
 
 			const { party } = this;
-			const { player: { serverId: playerId, zoneId: playerZone } } = window;
+			const { player: { serverId: playerId } } = window;
+
+			const player = list.find(l => l.id === playerId);
+			const { zoneId: playerZone } = player;
 
 			if (!party)
 				return;
 
-			if (!(msg instanceof Array))
-				msg = [msg];
-
-			msg.forEach(m => {
-				const { id: mId, zoneId: mZone } = m;
+			list.forEach(l => {
+				const { id: mId, zoneId: mZone, level: mLevel } = l;
 
-				if (!party.includes(m.id))
+				if (!party.includes(mId))
 					return;
 
 				if (mId !== playerId) {
-					const el = this.find('.member[memberId="' + m.id + '"]');
+					const el = this.find('.member[memberId="' + mId + '"]');
 					el.removeClass('differentZone');
 
-					if (m.zoneId !== playerZone)
+					if (mZone !== playerZone)
 						el.addClass('differentZone');
 
-					el.find('.txtLevel').html('level: ' + m.level);
-
-					return;
+					el.find('.txtLevel').html('level: ' + mLevel);
 				}
-
-				party.forEach(p => {
-					const mObj = globals.onlineList.find(o => o.id === p);
-
-					const el = this.find('.member[memberId="' + p + '"]');
-					el.removeClass('differentZone');
-
-					if (mObj.zoneId !== mZone)
-						el.addClass('differentZone');
-				});
 			});
 		},
 

src/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "isleward",
+  "version": "0.12.0",
+  "description": "isleward",
+  "dependencies": {
+   
+  },
+  "devDependencies": {
+    "babel-eslint": "^10.1.0",
+    "eslint": "7.32.0",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-requirejs": "^4.0.1"
+  }
+}

src/server/.eslintignore

@@ -1,2 +1,2 @@
 node_modules/*
-config/passiveTree.js
+config/passiveTree.js

src/server/.eslintrc

@@ -306,7 +306,13 @@
 	"overrides": [
 		{
 			"files": [
-				"**/clientComponents/**/*.js"
+				"clientComponents/**/*"
+			],
+			"extends": "../client/.eslintrc"
+		},
+		{
+			"files": [
+				"mods/**/ui/**/*"
 			],
 			"extends": "../client/.eslintrc"
 		}

src/server/components/player.js

@@ -107,35 +107,13 @@ module.exports = {
 
 		atlas.addObject(this.obj, true);
 
-		cons.emit('events', {
-			onGetMessages: [{
-				messages: [{
-					class: 'color-blueB',
-					message: this.obj.name + ' has come online'
-				}]
-			}],
-			onGetConnectedPlayer: [cons.getCharacterList()]
+		eventEmitter.emit('playerObjAdded', {
+			obj
 		});
 
 		cb();
 	},
 
-	broadcastSelf: function () {
-		let obj = this.obj;
-
-		let self = {
-			id: obj.id,
-			zoneId: obj.zoneId,
-			name: obj.name,
-			level: obj.level,
-			class: obj.class
-		};
-
-		cons.emit('events', {
-			onGetConnectedPlayer: [self]
-		});
-	},
-
 	hasSeen: function (id) {
 		return (this.seen.indexOf(id) > -1);
 	},

src/server/objects/objects.js

@@ -1,3 +1,5 @@
+const eventEmitter = require('../misc/events');
+
 let objBase = require('./objBase');
 
 module.exports = {
@@ -305,8 +307,11 @@ module.exports = {
 						class: 'color-blueB',
 						message: player.name + ' has reached level ' + obj.level
 					}]
-				}],
-				onGetConnectedPlayer: [cons.getCharacterList()]
+				}]
+			});
+
+			eventEmitter.emit('playerObjChanged', {
+				obj: player
 			});
 		}
 	},

src/server/package.json

@@ -15,10 +15,6 @@
     "universal-analytics": "^0.5.1"
   },
   "devDependencies": {
-    "babel-eslint": "^10.1.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-requirejs": "^4.0.1",
     "sqlite3": "^5.0.3"
   }
 }

src/server/security/connections.js

@@ -1,5 +1,6 @@
 //External Modules
 const objects = require('../objects/objects');
+const eventEmitter = require('../misc/events');
 
 //Helpers
 const { route, routeGlobal } = require('./connections/route');
@@ -56,14 +57,8 @@ module.exports = {
 		}
 
 		if (player.name) {
-			this.emit('events', {
-				onGetMessages: [{
-					messages: [{
-						class: 'color-blueB',
-						message: player.name + ' has gone offline'
-					}]
-				}],
-				onGetDisconnectedPlayer: [player.name]
+			eventEmitter.emit('playerObjRemoved', {
+				id: player.id
 			});
 
 			if (player.has('id'))
@@ -107,14 +102,8 @@ module.exports = {
 			}
 		});
 
-		this.emit('events', {
-			onGetMessages: [{
-				messages: [{
-					class: 'color-blueB',
-					message: player.name + ' has gone offline'
-				}]
-			}],
-			onGetDisconnectedPlayer: [player.name]
+		eventEmitter.emit('playerObjRemoved', {
+			id: player.id
 		});
 
 		//If we don't do this, the atlas will try to remove it from the thread

src/server/server/requestHandlers.js

@@ -9,7 +9,6 @@ const appRoot = (req, res) => {
 const appFile = (req, res) => {
 	let root = req.url.split('/')[1];
 	let file = req.params[0];
-	
 	file = file.replace('/' + root + '/', '');
 
 	const validRequest = (

src/server/world/atlas.js

@@ -46,7 +46,9 @@ module.exports = {
 		serverObj.zoneId = thread.id;
 		serverObj.zoneName = thread.name;
 
-		serverObj.player.broadcastSelf();
+		events.emit('playerObjChanged', {
+			obj
+		});
 
 		const simpleObj = obj.getSimple ? obj.getSimple(true, true) : obj;