first work on mobile

src/client/.eslintrc

@@ -55,7 +55,8 @@
     "_": false,
     "PIXI": false,
     "scale": false,
-    "scaleMult": false
+    "scaleMult": false,
+    "isMobile": false
   },
 
   "rules": {

src/client/js/components/bumpAnimation.js

@@ -47,8 +47,6 @@ define([
 					this.direction *= -1;
 					if ((this.direction === 1) && (!this.infinite))
 						this.destroyed = true;
-					else
-						this.obj.dirty = true;
 				}
 			}
 

src/client/js/components/keyboardMover.js

@@ -23,9 +23,6 @@ define([
 			if (this.obj.dead)
 				return;
 
-			if (this.obj.moveAnimation)
-				this.obj.pather.clearPath();
-
 			if (this.moveCd > 0) {
 				this.moveCd--;
 				return;
@@ -76,32 +73,7 @@ define([
 
 			this.moveCd = this.moveCdMax;
 
-			this.addQueue(newX, newY);
-		},
-
-		addQueue: function (x, y) {
-			let pather = this.obj.pather;
-			const isPriority = !pather.path.length;
-
-			if (this.obj.moveAnimation)
-				return;
-			else if (!pather.add(x, y))
-				return;
-
-			this.obj.dirty = true;			
-
-			pather.pathPos.x = x;
-			pather.pathPos.y = y;
-
-			client.request({
-				cpn: 'player',
-				method: 'move',
-				priority: isPriority ? true : null,
-				data: {
-					x: x,
-					y: y
-				}
-			});
+			this.obj.pather.addQueue(newX, newY);
 		}
 	};
 });

src/client/js/components/pather.js

@@ -51,9 +51,12 @@ define([
 		},
 
 		add: function (x, y) {
-			if (this.path.length >= maxPathLength)
+			if (this.path.length >= maxPathLength || this.obj.moveAnimation)
 				return;
 
+			pather.pathPos.x = x;
+			pather.pathPos.y = y;
+
 			this.path.push({
 				x: x,
 				y: y,
@@ -68,10 +71,21 @@ define([
 				})
 			});
 
-			return true;
+			client.request({
+				cpn: 'player',
+				method: 'move',
+				priority: !this.path.length,
+				data: {
+					x: x,
+					y: y
+				}
+			});
 		},
 
 		update: function () {
+			if (this.obj.moveAnimation)
+				this.clearPath();
+
 			let x = this.obj.x;
 			let y = this.obj.y;
 
@@ -100,13 +114,6 @@ define([
 					return;
 				}
 			}
-		},
-
-		setPath: function (path) {
-			this.path = this.path.concat(path);
-
-			this.pathPos.x = round(path[path.length - 1].x);
-			this.pathPos.y = round(path[path.length - 1].y);
 		}
 	};
 });

src/client/js/components/player.js

@@ -20,8 +20,13 @@ define([
 		init: function () {
 			const obj = this.obj;
 
-			obj.addComponent('keyboardMover');
-			obj.addComponent('mouseMover');
+			if (isMobile) 
+				obj.addComponent('touchMover');
+			else {
+				obj.addComponent('keyboardMover');
+				obj.addComponent('mouseMover');
+			}
+			
 			obj.addComponent('serverActions');
 			obj.addComponent('pather');
 

src/client/js/components/touchMover.js

@@ -0,0 +1,65 @@
+define([
+	'js/system/client',
+	'js/misc/physics',
+	'js/system/events'
+], function (
+	client,
+	physics,
+	events
+) {
+	return {
+		type: 'touchMover',
+
+		lastNode: null,
+		nodes: [],
+
+		minSqrDistance: 9,
+
+		init: function () {
+			['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'].forEach(e => this[e].bind(this));
+		},
+
+		onTouchStart: function (e) {
+			this.lastNode = e;
+		},
+
+		onTouchMove: function (e) {
+			const lastNode = this.lastNode;
+
+			let sqrDistance = Math.pow(lastNode.x - e.x, 2) + Math.pow(lastNode.y - e.y, 2);
+			if (sqrDistance < this.minSqrDistance)
+				return;
+
+			let dx = 1;
+			let dy = 0;
+
+			let newX = this.obj.pather.pathPos.x + dx;
+			let newY = this.obj.pather.pathPos.y + dy;
+
+			if (physics.isTileBlocking(~~newX, ~~newY)) {
+				this.bump(dx, dy);
+				return;
+			}
+
+			this.obj.pather.addQueue(newX, newY);
+		},
+
+		onTouchEnd: function () {
+			this.lastNode = null;
+		},
+
+		onTouchCancel: function () {
+			this.lastNode = null;
+		},
+
+		ump: function (dx, dy) {
+			if (this.obj.pather.path.length > 0)
+				return;
+
+			this.obj.addComponent('bumpAnimation', {
+				deltaX: dx,
+				deltaY: dy
+			});
+		}
+	};
+});

src/client/js/input.js

@@ -61,6 +61,12 @@ define([
 				.on('mousedown', this.events.mouse.mouseDown.bind(this))
 				.on('mouseup', this.events.mouse.mouseUp.bind(this))
 				.on('mousemove', this.events.mouse.mouseMove.bind(this));
+
+			$('.canvas-container');
+				.on('touchstart', this.events.touch.touchStart.bind(this))
+				.on('touchmove', this.events.touch.touchMove.bind(this))
+				.on('touchend', this.events.touch.touchEnd.bind(this))
+				.on('touchcancel', this.events.touch.touchCancel.bind(this));
 		},
 
 		resetKeys: function () {
@@ -168,6 +174,7 @@ define([
 					events.emit('onKeyUp', key);
 				}
 			},
+
 			mouse: {
 				mouseDown: function (e) {
 					let el = $(e.target);
@@ -207,6 +214,32 @@ define([
 					this.mouse.x = e.offsetX + (renderer.pos.x);
 					this.mouse.y = e.offsetY + (renderer.pos.y);
 				}
+			},
+
+			touch: {
+				touchStart: function (e) {
+					let touch = e.touches[0];
+					events.emit('onTouchStart', {
+						x: touch.clientX,
+						y: touch.clientY
+					});
+				},
+
+				touchMove: function (e) {
+					let touch = e.touches[0];
+					events.emit('onTouchMove', {
+						x: touch.clientX,
+						y: touch.clientY
+					});
+				},
+
+				touchEnd: function (e) {
+					events.emit('onTouchEnd');
+				},
+
+				touchCancel: function (e) {
+					events.emit('onTouchCancel');
+				}
 			}
 		}
 	};

src/client/js/misc/helpers.js

@@ -1,7 +1,8 @@
-/* global _, scale, scaleMult */
+/* global _, scale, scaleMult, isMobile */
 
 window.scale = 40;
 window.scaleMult = 5;
+window.isMobile = /Mobi|Android/i.test(navigator.userAgent);
 
 //eslint-disable-next-line no-extend-native
 Array.prototype.firstIndex = function (callback, thisArg) {

src/client/js/objects/objects.js

@@ -15,7 +15,6 @@ define([
 		showNames: false,
 
 		objects: [],
-		dirty: false,
 
 		init: function () {
 			events.on('onKeyDown', this.onKeyDown.bind(this));
@@ -113,8 +112,6 @@ define([
 		},
 
 		onGetObject: function (obj) {
-			this.dirty = true;
-
 			//Things like attacks don't have ids
 			let exists = null;
 			if (obj.has('id')) 
@@ -327,8 +324,6 @@ define([
 				}
 
 				o.update();
-				if (o.dirty)
-					this.dirty = true;
 			}
 		},