diff --git a/src/battle-tooltips.ts b/src/battle-tooltips.ts index f7f261cc2..924c35069 100644 --- a/src/battle-tooltips.ts +++ b/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 = $(``); $(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'); } diff --git a/style/client.css b/style/client.css index c83bf5ff5..25428b0db 100644 --- a/style/client.css +++ b/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); } diff --git a/style/sim-types.css b/style/sim-types.css index a2744977d..18f988f9d 100644 --- a/style/sim-types.css +++ b/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%));