movement and basic spellcasts

5 years ago · b6d46d5114
--- 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;
 	}
 }

 * {
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html>
 	<head>
 		<meta name="mobile-web-app-capable" content="yes">
 		<title>Isleward</title>
 		<link rel="stylesheet" href="css/loader.css">
 		<link rel="stylesheet" href="css/main.css">
@@ -9,6 +10,7 @@
 		<script src="plugins/require.min.js" data-main="js/app"></script>
 		<script>if (window.module) module = window.module;</script>
 		<link rel="icon" href="images/favicon.ico">
 		<link rel="manifest" href="/manifest.json">
 	</head>
 	<body>
 		<div class="canvas-container"></div>
--- 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',
--- 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,
--- 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;
--- 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;

--- 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
 					});
 				},

--- 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));
 		},

--- 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);
 	}
 };

--- 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;
--- 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;

--- 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,
--- 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;
 }