Merge pull request FreezingMoon#1526 from TheSeally/fixHoverOnTouchDe…

…vices

UI tooltips touch events, fixes FreezingMoon#1506

src/style/styles.less

@@ -947,7 +947,7 @@ div.section.info {
 	overflow: hidden;
 }
 
-.button:hover + .desc {
+.button.hover + .desc {
 	width: 270px;
 	border: 2px black solid;
 	overflow: visible;
@@ -1021,7 +1021,7 @@ div.section.info {
 	border-left: 6px solid black;
 }
 
-#rightpanel .button:hover + .desc {
+#rightpanel .button.hover + .desc {
 	width: 250px;
 	left: -259px;
 	text-align: right;

src/ui/button.js

@@ -14,6 +14,11 @@ export class Button {
 			click: function() {},
 			mouseover: function() {},
 			mouseleave: function() {},
+			touchstart: function() {},
+			touchend: function() {},
+			touchX: 0,
+			touchY: 0,
+			hasShortcut: false,
 			clickable: true,
 			state: 'normal', // disabled, normal, glowing, selected, active
 			$button: undefined,
@@ -40,6 +45,8 @@ export class Button {
 		this.$button
 			.unbind('click')
 			.unbind('mouseover')
+			.unbind('touchstart')
+			.unbind('touchend')
 			.unbind('mouseleave');
 
 		if (state != 'disabled') {
@@ -57,6 +64,10 @@ export class Button {
 				return;
 			}
 
+			if (this.hasShortcut) {
+				this.$button.addClass('hover');
+			}
+
 			this.mouseover();
 		});
 
@@ -65,9 +76,46 @@ export class Button {
 				return;
 			}
 
+			if (this.hasShortcut) {
+				this.$button.removeClass('hover');
+			}
+
 			this.mouseleave();
 		});
 
+		this.$button.bind('touchstart', event => {
+			event.preventDefault();
+			event.stopPropagation();
+
+			if (game.freezedInput || !this.clickable) {
+				return;
+			}
+
+			if (this.hasShortcut) {
+				this.$button.addClass('hover');
+			}
+
+			this.touchX = event.changedTouches[0].pageX;
+			this.touchY = event.changedTouches[0].pageY;
+		});
+
+		this.$button.bind('touchend', event => {
+			event.preventDefault();
+			event.stopPropagation();
+
+			if (game.freezedInput || !this.clickable) {
+				return;
+			}
+
+			if (this.hasShortcut) {
+				this.$button.removeClass('hover');
+			}
+
+			if (this.shouldTriggerClick(event.changedTouches[0]) && this.state != 'disabled') {
+				this.click();
+			}
+		});
+
 		this.$button.removeClass('disabled glowing selected active noclick');
 		this.$button.css(this.css.normal);
 
@@ -100,4 +148,16 @@ export class Button {
 
 		this.mouseleave();
 	}
+
+	shouldTriggerClick(changedTouches) {
+		const endTouchX = changedTouches.pageX;
+		const endTouchY = changedTouches.pageY;
+		let result = false;
+
+		if (Math.abs(this.touchX - endTouchX) < 50 && Math.abs(this.touchY - endTouchY) < 50) {
+			result = true;
+		}
+
+		return result;
+	}
 }

src/ui/interface.js

@@ -81,6 +81,7 @@ export class UI {
 		this.btnAudio = new Button(
 			{
 				$button: $j('#audio.button'),
+				hasShortcut: true,
 				click: () => {
 					// if audio element was already active, close dash
 					if ($j('#musicplayerwrapper').is(':visible')) {
@@ -98,6 +99,7 @@ export class UI {
 		this.btnSkipTurn = new Button(
 			{
 				$button: $j('#skip.button'),
+				hasShortcut: true,
 				click: () => {
 					if (!this.dashopen) {
 						if (game.turnThrottle) {
@@ -119,6 +121,7 @@ export class UI {
 		this.btnDelay = new Button(
 			{
 				$button: $j('#delay.button'),
+				hasShortcut: true,
 				click: () => {
 					if (!this.dashopen) {
 						let creature = game.activeCreature;
@@ -147,6 +150,7 @@ export class UI {
 		this.btnFlee = new Button(
 			{
 				$button: $j('#flee.button'),
+				hasShortcut: true,
 				click: () => {
 					if (!this.dashopen) {
 						if (game.turn < game.minimumTurnBeforeFleeing) {
@@ -465,6 +469,7 @@ export class UI {
 			let b = new Button(
 				{
 					$button: $j('#abilities > div:nth-child(' + (i + 1) + ') > .ability'),
+					hasShortcut: true,
 					abilityId: i,
 					css: {
 						disabled: {