diff --git a/src/client/css/main.less b/src/client/css/main.less
index 50b13bca..c04df048 100644
--- a/src/client/css/main.less
+++ b/src/client/css/main.less
@@ -22,6 +22,10 @@ body {
right: 10px;
top: 100px;
}
+
+ .uiMenu, .uiQuests, .uiEvents, .uiTooltipInfo {
+ display: none;
+ }
}
* {
diff --git a/src/client/index.html b/src/client/index.html
index 86a6dd14..6a7fc45a 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -1,6 +1,7 @@
+
Isleward
@@ -9,6 +10,7 @@
+
diff --git a/src/client/js/components/components.js b/src/client/js/components/components.js
index 962f47b3..389524b6 100644
--- a/src/client/js/components/components.js
+++ b/src/client/js/components/components.js
@@ -1,6 +1,7 @@
let components = [
'keyboardMover',
'mouseMover',
+ 'touchMover',
'player',
'pather',
'attackAnimation',
diff --git a/src/client/js/components/pather.js b/src/client/js/components/pather.js
index c9768bad..0e615f10 100644
--- a/src/client/js/components/pather.js
+++ b/src/client/js/components/pather.js
@@ -1,9 +1,11 @@
define([
'js/rendering/renderer',
- 'js/system/events'
+ 'js/system/events',
+ 'js/system/client'
], function (
renderer,
- events
+ events,
+ client
) {
let round = Math.round.bind(Math);
let maxPathLength = 50;
@@ -54,8 +56,8 @@ define([
if (this.path.length >= maxPathLength || this.obj.moveAnimation)
return;
- pather.pathPos.x = x;
- pather.pathPos.y = y;
+ this.pathPos.x = x;
+ this.pathPos.y = y;
this.path.push({
x: x,
diff --git a/src/client/js/components/spellbook.js b/src/client/js/components/spellbook.js
index 58fcd8a4..4ba69e05 100644
--- a/src/client/js/components/spellbook.js
+++ b/src/client/js/components/spellbook.js
@@ -142,7 +142,7 @@ define([
if (!spell.aura && !spell.targetGround && !spell.autoTargetFollower && !this.target)
return;
- let hoverTile = this.obj.mouseMover.hoverTile;
+ let hoverTile = (this.obj.mouseMover || this.obj.touchMover).hoverTile;
let target = hoverTile;
if (spell.autoTargetFollower && !this.target)
target = null;
diff --git a/src/client/js/components/touchMover.js b/src/client/js/components/touchMover.js
index d7916875..58d10864 100644
--- a/src/client/js/components/touchMover.js
+++ b/src/client/js/components/touchMover.js
@@ -13,14 +13,29 @@ define([
lastNode: null,
nodes: [],
- minSqrDistance: 9,
+ hoverTile: null,
+
+ minSqrDistance: 1200,
+ diagonalThreshold: 35,
init: function () {
- ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'].forEach(e => this[e].bind(this));
+ ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'].forEach(e => {
+ events.on(e, this[e].bind(this));
+ });
},
onTouchStart: function (e) {
this.lastNode = e;
+
+ let tileX = ~~(e.worldX / scale);
+ let tileY = ~~(e.worldY / scale);
+
+ this.hoverTile = {
+ x: tileX,
+ y: tileY
+ };
+
+ events.emit('onChangeHoverTile', tileX, tileY);
},
onTouchMove: function (e) {
@@ -30,8 +45,22 @@ define([
if (sqrDistance < this.minSqrDistance)
return;
- let dx = 1;
- let dy = 0;
+ let dx = e.x - lastNode.x;
+ let dy = e.y - lastNode.y;
+
+ let diff = Math.abs(dx - dy);
+ if (diff < this.diagonalThreshold) {
+ dx = ~~(dx / Math.abs(dx));
+ dy = ~~(dy / Math.abs(dy));
+ } else if (Math.abs(dx) > Math.abs(dy)) {
+ dx = ~~(dx / Math.abs(dx));
+ dy = 0;
+ } else {
+ dx = 0;
+ dy = ~~(dy / Math.abs(dy));
+ }
+
+ this.lastNode = e;
let newX = this.obj.pather.pathPos.x + dx;
let newY = this.obj.pather.pathPos.y + dy;
@@ -41,10 +70,10 @@ define([
return;
}
- this.obj.pather.addQueue(newX, newY);
+ this.obj.pather.add(newX, newY);
},
- onTouchEnd: function () {
+ onTouchEnd: function (e) {
this.lastNode = null;
},
@@ -52,7 +81,7 @@ define([
this.lastNode = null;
},
- ump: function (dx, dy) {
+ bump: function (dx, dy) {
if (this.obj.pather.path.length > 0)
return;
diff --git a/src/client/js/input.js b/src/client/js/input.js
index 9f435cbd..159f79eb 100644
--- a/src/client/js/input.js
+++ b/src/client/js/input.js
@@ -60,9 +60,7 @@ define([
$('.ui-container')
.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('mousemove', this.events.mouse.mouseMove.bind(this))
.on('touchstart', this.events.touch.touchStart.bind(this))
.on('touchmove', this.events.touch.touchMove.bind(this))
.on('touchend', this.events.touch.touchEnd.bind(this))
@@ -221,7 +219,9 @@ define([
let touch = e.touches[0];
events.emit('onTouchStart', {
x: touch.clientX,
- y: touch.clientY
+ y: touch.clientY,
+ worldX: touch.clientX + renderer.pos.x,
+ worldY: touch.clientY + renderer.pos.y
});
},
diff --git a/src/client/js/main.js b/src/client/js/main.js
index 3fa27b4c..44d6814a 100644
--- a/src/client/js/main.js
+++ b/src/client/js/main.js
@@ -25,6 +25,9 @@ define([
hasFocus: true,
init: function () {
+ if (isMobile)
+ $('.ui-container').addClass('mobile');
+
client.init(this.onClientReady.bind(this));
},
diff --git a/src/client/js/misc/helpers.js b/src/client/js/misc/helpers.js
index 3391e6ec..7f7ceecb 100644
--- a/src/client/js/misc/helpers.js
+++ b/src/client/js/misc/helpers.js
@@ -100,6 +100,20 @@ window._ = {
}
return result;
+ },
+
+ toggleFullScreen: function () {
+ let doc = window.document;
+ let docEl = doc.documentElement;
+
+ let requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
+ let cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
+
+ if (!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement)
+ requestFullScreen.call(docEl);
+
+ else
+ cancelFullScreen.call(doc);
}
};
diff --git a/src/client/js/rendering/renderer.js b/src/client/js/rendering/renderer.js
index 131fc7ff..4a968f3e 100644
--- a/src/client/js/rendering/renderer.js
+++ b/src/client/js/rendering/renderer.js
@@ -221,6 +221,9 @@ define([
},
onResize: function () {
+ if (isMobile)
+ return;
+
let zoom = window.devicePixelRatio;
this.width = $('body').width() * zoom;
diff --git a/src/client/ui/templates/login/login.js b/src/client/ui/templates/login/login.js
index 1cc6118e..1185b6e3 100644
--- a/src/client/ui/templates/login/login.js
+++ b/src/client/ui/templates/login/login.js
@@ -50,7 +50,7 @@ define([
this.show();
},
- onLoginClick: function () {
+ onLoginClick: function () {
if (this.el.hasClass('disabled'))
return;
diff --git a/src/client/ui/templates/spells/spells.js b/src/client/ui/templates/spells/spells.js
index c1777269..43e3b5c3 100644
--- a/src/client/ui/templates/spells/spells.js
+++ b/src/client/ui/templates/spells/spells.js
@@ -44,6 +44,7 @@ define([
let el = $(html)
.appendTo(this.el);
el
+ .on('click', this.onClickSpell.bind(this, hotkey))
.on('mouseover', this.onShowTooltip.bind(this, el, spell))
.on('mouseleave', this.onHideTooltip.bind(this, el));
@@ -66,7 +67,20 @@ define([
}
},
+ onClickSpell: function (hotkey, e) {
+ e.preventDefault();
+
+ let key = (hotkey === 'space') ? ' ' : hotkey;
+
+ window.player.spellbook.onKeyDown(key);
+
+ return false;
+ },
+
onShowTooltip: function (el, spell) {
+ if (isMobile)
+ return false;
+
let pos = el.offset();
pos = {
x: pos.left + 56,
diff --git a/src/client/ui/templates/target/styles.less b/src/client/ui/templates/target/styles.less
index ca1061fb..297e00c4 100644
--- a/src/client/ui/templates/target/styles.less
+++ b/src/client/ui/templates/target/styles.less
@@ -124,3 +124,8 @@
}
}
}
+
+.mobile .uiTarget {
+ left: 10px;
+ top: 100px;
+}