Fix mobile device tooltip support

For the first time since original tooltips, we have a pressed-down
animation for move/switch buttons!

More importantly, long-presses are no longer weird, and now just
lock in the tooltip instead of also opening a context menu.

In addition, clicking on a locked tooltip dismisses it, which should
help address complaints about locked tooltips being hard to dismiss.
This makes it slightly harder to select text in locked tooltips, but
clicking and dragging on desktop still works.

src/battle-tooltips.ts

@@ -145,6 +145,7 @@ class BattleTooltips {
 	static elem: HTMLDivElement | null = null;
 	static parentElem: HTMLElement | null = null;
 	static isLocked = false;
+	static isPressed = false;
 
 	static hideTooltip() {
 		if (!BattleTooltips.elem) return;
@@ -166,6 +167,10 @@ class BattleTooltips {
 	lockTooltip() {
 		if (BattleTooltips.elem && !BattleTooltips.isLocked) {
 			BattleTooltips.isLocked = true;
+			if (BattleTooltips.isPressed) {
+				$(BattleTooltips.parentElem!).removeClass('pressed');
+				BattleTooltips.isPressed = false;
+			}
 			$('#tooltipwrapper').addClass('tooltip-locked');
 		}
 	}
@@ -180,15 +185,29 @@ class BattleTooltips {
 		const $elem = $(elem);
 		$elem.on('mouseover', '.has-tooltip', this.showTooltipEvent);
 		$elem.on('click', '.has-tooltip', this.clickTooltipEvent);
-		$elem.on('touchstart', '.has-tooltip', this.holdLockTooltipEvent);
-		$elem.on('touchend', '.has-tooltip', BattleTooltips.unshowTooltip);
-		$elem.on('touchleave', '.has-tooltip', BattleTooltips.unshowTooltip);
-		$elem.on('touchcancel', '.has-tooltip', BattleTooltips.unshowTooltip);
 		$elem.on('focus', '.has-tooltip', this.showTooltipEvent);
 		$elem.on('mouseout', '.has-tooltip', BattleTooltips.unshowTooltip);
 		$elem.on('mousedown', '.has-tooltip', this.holdLockTooltipEvent);
 		$elem.on('blur', '.has-tooltip', BattleTooltips.unshowTooltip);
 		$elem.on('mouseup', '.has-tooltip', BattleTooltips.unshowTooltip);
+
+		$elem.on('touchstart', '.has-tooltip', e => {
+			e.preventDefault();
+			this.holdLockTooltipEvent(e);
+			if (e.currentTarget === BattleTooltips.parentElem && BattleTooltips.parentElem!.tagName === 'BUTTON') {
+				$(BattleTooltips.parentElem!).addClass('pressed');
+				BattleTooltips.isPressed = true;
+			}
+		});
+		$elem.on('touchend', '.has-tooltip', e => {
+			e.preventDefault();
+			if (e.currentTarget === BattleTooltips.parentElem && BattleTooltips.isPressed) {
+				BattleTooltips.parentElem!.click();
+			}
+			BattleTooltips.unshowTooltip();
+		});
+		$elem.on('touchleave', '.has-tooltip', BattleTooltips.unshowTooltip);
+		$elem.on('touchcancel', '.has-tooltip', BattleTooltips.unshowTooltip);
 	}
 
 	clickTooltipEvent = (e: Event) => {
@@ -202,7 +221,7 @@ class BattleTooltips {
 	 *
 	 * (Namely, a long-tap or long-click)
 	 */
-	holdLockTooltipEvent = (e: Event) => {
+	holdLockTooltipEvent = (e: JQuery.TriggeredEvent) => {
 		if (BattleTooltips.isLocked) BattleTooltips.hideTooltip();
 		const target = e.currentTarget as HTMLElement;
 		this.showTooltip(target);
@@ -224,6 +243,10 @@ class BattleTooltips {
 	 */
 	static unshowTooltip() {
 		if (BattleTooltips.isLocked) return;
+		if (BattleTooltips.isPressed) {
+			$(BattleTooltips.parentElem!).removeClass('pressed');
+			BattleTooltips.isPressed = false;
+		}
 		BattleTooltips.hideTooltip();
 	}
 
@@ -310,6 +333,13 @@ class BattleTooltips {
 		if (!$wrapper.length) {
 			$wrapper = $(`<div id="tooltipwrapper" role="tooltip"></div>`);
 			$(document.body).append($wrapper);
+			$wrapper.on('click', e => {
+				try {
+					const selection = window.getSelection();
+					if (selection.type === 'Range') return;
+				} catch (err) {}
+				BattleTooltips.hideTooltip();
+			});
 		} else {
 			$wrapper.removeClass('tooltip-locked');
 		}

style/client.css

@@ -2032,7 +2032,9 @@ a.ilink.yours {
 	border-color: #606060;
 }
 .switchmenu button:active,
-.movemenu button:active {
+.movemenu button:active,
+.switchmenu button.pressed,
+.movemenu button.pressed {
 	background: linear-gradient(to bottom,  #cfcfcf,  #f2f2f2);
 }
 

style/sim-types.css

@@ -13,7 +13,7 @@
 	background: linear-gradient(to bottom,  hsl(60,14%,94%),  hsl(60,14%,77%));
 	border-color: hsl(60,14%,41%);
 }
-.movemenu button.type-Normal:active {
+.movemenu button.type-Normal:active, .movemenu button.type-Normal.pressed {
 	/* bg: 83 to 88, border: 41 */
 	background: hsl(60,14%,77%);
 	background: linear-gradient(to bottom,  hsl(60,14%,77%),  hsl(60,14%,83%));
@@ -35,7 +35,7 @@
 	background: linear-gradient(to bottom,  hsl(3,40%,94%),  hsl(3,40%,77%));
 	border-color: hsl(3,40%,41%);
 }
-.movemenu button.type-Fighting:active {
+.movemenu button.type-Fighting:active, .movemenu button.type-Fighting.pressed {
 	/* bg: 83 to 88, border: 41 */
 	background: hsl(342, 16%, 77%);
 	background: linear-gradient(to bottom,  hsl(3,40%,77%),  hsl(3,40%,83%));
@@ -57,7 +57,7 @@
 	background: linear-gradient(to bottom,  hsl(255,20%,94%),  hsl(255,20%,77%));
 	border-color: hsl(255,20%,41%);
 }
-.movemenu button.type-Flying:active {
+.movemenu button.type-Flying:active, .movemenu button.type-Flying.pressed {
 	/* bg: 83 to 88, border: 41 */
 	background: hsl(255,20%,77%);
 	background: linear-gradient(to bottom,  hsl(255,20%,77%),  hsl(255,20%,83%));
@@ -79,7 +79,7 @@
 	background: linear-gradient(to bottom,  hsl(300,30%,94%),  hsl(300,30%,77%));
 	border-color: hsl(300,30%,41%);
 }
-.movemenu button.type-Poison:active {
+.movemenu button.type-Poison:active, .movemenu button.type-Poison.pressed {
 	/* bg: 83 to 88, border: 41 */
 	background: hsl(300,30%,77%);
 	background: linear-gradient(to bottom,  hsl(300,30%,77%),  hsl(300,30%,83%));
@@ -101,7 +101,7 @@
 	background: linear-gradient(to bottom,  hsl(44,27%,94%),  hsl(44,27%,77%));
 	border-color: hsl(44,27%,41%);
 }
-.movemenu button.type-Ground:active {
+.movemenu button.type-Ground:active, .movemenu button.type-Ground.pressed {
 	/* bg: 83 to 88, border: 41 */
 	background: hsl(44,27%,77%);
 	background: linear-gradient(to bottom,  hsl(44,27%,77%),  hsl(44,27%,83%));
@@ -123,7 +123,7 @@
 	background: linear-gradient(to bottom,  hsl(49,35%,94%),  hsl(49,35%,77%));
 	border-color: hsl(49,35%,41%);
 }
-.movemenu button.type-Rock:active {
+.movemenu button.type-Rock:active, .movemenu button.type-Rock.pressed {
 	/* bg: 83 to 88, border: 41 */
 	background: hsl(49,35%,77%);
 	background: linear-gradient(to bottom,  hsl(49,35%,77%),  hsl(49,35%,83%));
@@ -145,7 +145,7 @@
 	background: linear-gradient(to bottom,  hsl(66,42%,94%),  hsl(66,42%,77%));
 	border-color: hsl(66,42%,41%);
 }
-.movemenu button.type-Bug:active {
+.movemenu button.type-Bug:active, .movemenu button.type-Bug.pressed {
 	/* bg: 83 to 88, border: 41 */
 	background: hsl(66,42%,77%);
 	background: linear-gradient(to bottom,  hsl(66,42%,77%),  hsl(66,42%,83%));
@@ -167,7 +167,7 @@
 	background: linear-gradient(to bottom,  hsl(262,21%,94%),  hsl(262,21%,77%));
 	border-color: hsl(262,21%,41%);
 }
-.movemenu button.type-Ghost:active {
+.movemenu button.type-Ghost:active, .movemenu button.type-Ghost.pressed {
 	/* bg: 83 to 88, border: 41 */
 	background: hsl(262,21%,77%);
 	background: linear-gradient(to bottom,  hsl(262,21%,77%),  hsl(262,21%,83%));
@@ -189,7 +189,7 @@
 	background: linear-gradient(to bottom,  hsl(240,6%,94%),  hsl(240,6%,77%));
 	border-color: hsl(240,6%,41%);
 }
-.movemenu button.type-Steel:active {
+.movemenu button.type-Steel:active, .movemenu button.type-Steel.pressed {
 	/* bg: 83 to 88, border: 41 */
 	background: hsl(240,6%,77%);
 	background: linear-gradient(to bottom,  hsl(240,6%,77%),  hsl(240,6%,83%));
@@ -211,7 +211,7 @@
 	background: linear-gradient(to bottom,  hsl(25,40%,94%),  hsl(25,40%,77%));
 	border-color: hsl(25,40%,41%);
 }
-.movemenu button.type-Fire:active {
+.movemenu button.type-Fire:active, .movemenu button.type-Fire.pressed {
 	/* bg: 83 to 88, border: 41 */
 	background: hsl(25,40%,77%);
 	background: linear-gradient(to bottom,  hsl(25,40%,77%),  hsl(25,40%,83%));
@@ -233,7 +233,7 @@
 	background: linear-gradient(to bottom,  hsl(222,29%,94%),  hsl(222,29%,77%));
 	border-color: hsl(222,29%,41%);
 }
-.movemenu button.type-Water:active {
+.movemenu button.type-Water:active, .movemenu button.type-Water.pressed {
 	/* bg: 83 to 88, border: 41 */
 	background: hsl(222,29%,77%);
 	background: linear-gradient(to bottom,  hsl(222,29%,77%),  hsl(222,29%,83%));
@@ -255,7 +255,7 @@
 	background: linear-gradient(to bottom,  hsl(100,30%,94%),  hsl(100,30%,77%));
 	border-color: hsl(100,30%,41%);
 }
-.movemenu button.type-Grass:active {
+.movemenu button.type-Grass:active, .movemenu button.type-Grass.pressed {
 	/* bg: 83 to 88, border: 41 */
 	background: hsl(100,30%,77%);
 	background: linear-gradient(to bottom,  hsl(100,30%,77%),  hsl(100,30%,83%));
@@ -277,7 +277,7 @@
 	background: linear-gradient(to bottom,  hsl(48,41%,94%),  hsl(48,41%,77%));
 	border-color: hsl(48,41%,41%);
 }
-.movemenu button.type-Electric:active {
+.movemenu button.type-Electric:active, .movemenu button.type-Electric.pressed {
 	/* bg: 83 to 88, border: 41 */
 	background: hsl(48,41%,77%);
 	background: linear-gradient(to bottom,  hsl(48,41%,77%),  hsl(48,41%,83%));
@@ -299,7 +299,7 @@
 	background: linear-gradient(to bottom,  hsl(342,33%,94%),  hsl(342,33%,77%));
 	border-color: hsl(342,33%,41%);
 }
-.movemenu button.type-Psychic:active {
+.movemenu button.type-Psychic:active, .movemenu button.type-Psychic.pressed {
 	/* bg: 83 to 88, border: 41 */
 	background: hsl(342,33%,77%);
 	background: linear-gradient(to bottom,  hsl(342,33%,77%),  hsl(342,33%,83%));
@@ -321,7 +321,7 @@
 	background: linear-gradient(to bottom,  hsl(180,15%,94%),  hsl(180,15%,77%));
 	border-color: hsl(180,15%,41%);
 }
-.movemenu button.type-Ice:active {
+.movemenu button.type-Ice:active, .movemenu button.type-Ice.pressed {
 	/* bg: 83 to 88, border: 41 */
 	background: hsl(180,15%,77%);
 	background: linear-gradient(to bottom,  hsl(180,15%,77%),  hsl(180,15%,83%));
@@ -343,7 +343,7 @@
 	background: linear-gradient(to bottom,  hsl(257,39%,94%),  hsl(257,39%,77%));
 	border-color: hsl(257,39%,41%);
 }
-.movemenu button.type-Dragon:active {
+.movemenu button.type-Dragon:active, .movemenu button.type-Dragon.pressed {
 	/* bg: 83 to 88, border: 41 */
 	background: hsl(257,39%,77%);
 	background: linear-gradient(to bottom,  hsl(257,39%,77%),  hsl(257,39%,83%));
@@ -365,7 +365,7 @@
 	background: linear-gradient(to bottom,  hsl(24,18%,94%),  hsl(24,18%,77%));
 	border-color: hsl(24,18%,41%);
 }
-.movemenu button.type-Dark:active {
+.movemenu button.type-Dark:active, .movemenu button.type-Dark.pressed {
 	/* bg: 83 to 88, border: 41 */
 	background: hsl(24,18%,77%);
 	background: linear-gradient(to bottom,  hsl(24,18%,77%),  hsl(24,18%,83%));
@@ -387,7 +387,7 @@
 	background: linear-gradient(to bottom,  hsl(310,41%,94%),  hsl(310,41%,77%));
 	border-color: hsl(310,41%,41%);
 }
-.movemenu button.type-Fairy:active {
+.movemenu button.type-Fairy:active, .movemenu button.type-Fairy.pressed {
 	/* bg: 83 to 88, border: 41 */
 	background: hsl(310,41%,77%);
 	background: linear-gradient(to bottom,  hsl(310,41%,77%),  hsl(310,41%,83%));