mika/pokerogue
1
0
Fork 0
mirror of https://github.com/pagefaultgames/pokerogue.git synced 2025-08-20 22:39:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

[ui] Fix tooltip placement when using touchscreen

Browse Source
This commit is contained in:
Moka 2024-11-04 23:07:57 +01:00
parent 7a0c88e661
commit 9190165669
1 changed files with 29 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/ui/ui.ts
View File

@ -391,6 +391,7 @@ export default class UI extends Phaser.GameObjects.Container {
this.tooltipContent.y = title ? 16 : 4; this.tooltipContent.y = title ? 16 : 4;
this.tooltipBg.width = Math.min(Math.max(this.tooltipTitle.displayWidth, this.tooltipContent.displayWidth) + 12, 838); this.tooltipBg.width = Math.min(Math.max(this.tooltipTitle.displayWidth, this.tooltipContent.displayWidth) + 12, 838);
this.tooltipBg.height = (title ? 31 : 19) + 10.5 * (wrappedContent.split("\n").length - 1); this.tooltipBg.height = (title ? 31 : 19) + 10.5 * (wrappedContent.split("\n").length - 1);
this.tooltipTitle.x = this.tooltipBg.width / 2;
} }
hideTooltip(): void { hideTooltip(): void {
@ -400,12 +401,34 @@ export default class UI extends Phaser.GameObjects.Container {
update(): void { update(): void {
if (this.tooltipContainer.visible) { if (this.tooltipContainer.visible) {
const xReverse = this.scene.game.input.mousePointer && this.scene.game.input.mousePointer.x >= this.scene.game.canvas.width - this.tooltipBg.width * 6 - 12; const isTouch = (this.scene as BattleScene).inputMethod === "touch";
const yReverse = this.scene.game.input.mousePointer && this.scene.game.input.mousePointer.y >= this.scene.game.canvas.height - this.tooltipBg.height * 6 - 12; const pointerX = this.scene.game.input.activePointer.x;
this.tooltipContainer.setPosition( const pointerY = this.scene.game.input.activePointer.y;
!xReverse ? this.scene.game.input.mousePointer!.x / 6 + 2 : this.scene.game.input.mousePointer!.x / 6 - this.tooltipBg.width - 2, const tooltipWidth = this.tooltipBg.width;
!yReverse ? this.scene.game.input.mousePointer!.y / 6 + 2 : this.scene.game.input.mousePointer!.y / 6 - this.tooltipBg.height - 2, const tooltipHeight = this.tooltipBg.height;
); const padding = 2;
// Default placement is top left corner of the screen on mobile. Otherwise below the cursor, to the right
let x = isTouch ? padding : pointerX / 6 + padding;
let y = isTouch ? padding : pointerY / 6 + padding;
if (isTouch) {
// If we are in the top left quadrant on mobile, move the tooltip to the top right corner
if (pointerX <= this.scene.game.canvas.width / 2 && pointerY <= this.scene.game.canvas.height / 2) {
x = this.scene.game.canvas.width / 6 - tooltipWidth - padding;
}
} else {
// If the tooltip would go offscreen on the right, or is close to it, move to the left of the cursor
if (x + tooltipWidth + padding > this.scene.game.canvas.width / 6) {
x = Math.max(padding, pointerX / 6 - tooltipWidth - padding);
}
// If the tooltip would go offscreen at the bottom, or is close to it, move above the cursor
if (y + tooltipHeight + padding > this.scene.game.canvas.height / 6) {
y = Math.max(padding, pointerY / 6 - tooltipHeight - padding);
}
}
this.tooltipContainer.setPosition(x, y);
} }
} }