diff --git a/src/client/.eslintrc b/src/client/.eslintrc index 37b851aa..324bda0c 100644 --- a/src/client/.eslintrc +++ b/src/client/.eslintrc @@ -55,7 +55,8 @@ "_": false, "PIXI": false, "scale": false, - "scaleMult": false + "scaleMult": false, + "isMobile": false }, "rules": { diff --git a/src/client/js/components/bumpAnimation.js b/src/client/js/components/bumpAnimation.js index 5c02a543..d9b0bfcb 100644 --- a/src/client/js/components/bumpAnimation.js +++ b/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; } } diff --git a/src/client/js/components/keyboardMover.js b/src/client/js/components/keyboardMover.js index 58c4c102..a54f091d 100644 --- a/src/client/js/components/keyboardMover.js +++ b/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); } }; }); diff --git a/src/client/js/components/pather.js b/src/client/js/components/pather.js index 8d9c98e0..c9768bad 100644 --- a/src/client/js/components/pather.js +++ b/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); } }; }); diff --git a/src/client/js/components/player.js b/src/client/js/components/player.js index d31044ca..7bb3f95b 100644 --- a/src/client/js/components/player.js +++ b/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'); diff --git a/src/client/js/components/touchMover.js b/src/client/js/components/touchMover.js new file mode 100644 index 00000000..d7916875 --- /dev/null +++ b/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 + }); + } + }; +}); diff --git a/src/client/js/input.js b/src/client/js/input.js index 06432936..9f435cbd 100644 --- a/src/client/js/input.js +++ b/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'); + } } } }; diff --git a/src/client/js/misc/helpers.js b/src/client/js/misc/helpers.js index 42bea962..3391e6ec 100644 --- a/src/client/js/misc/helpers.js +++ b/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) { diff --git a/src/client/js/objects/objects.js b/src/client/js/objects/objects.js index 7bedcd71..eb18af1b 100644 --- a/src/client/js/objects/objects.js +++ b/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; } },