From 2df8a7f25529db43a8285c711ef9d0ed07a3da09 Mon Sep 17 00:00:00 2001 From: Wlowscha <54003515+Wlowscha@users.noreply.github.com> Date: Mon, 28 Jul 2025 22:45:04 +0200 Subject: [PATCH] Using `scaledCanvas` everywhere --- .../encounters/bug-type-superfan-encounter.ts | 2 +- .../global-trade-system-encounter.ts | 6 +++--- .../encounters/weird-dream-encounter.ts | 6 +++--- src/field/damage-number-handler.ts | 2 +- src/phases/egg-hatch-phase.ts | 6 +++--- src/phases/end-card-phase.ts | 2 +- src/phases/evolution-phase.ts | 8 ++++---- src/timed-event-manager.ts | 2 +- src/ui/abstact-option-select-ui-handler.ts | 4 ++-- src/ui/achv-bar.ts | 6 +++--- src/ui/achvs-ui-handler.ts | 4 ++-- src/ui/ball-ui-handler.ts | 2 +- src/ui/battle-info/player-battle-info.ts | 2 +- src/ui/battle-message-ui-handler.ts | 8 ++++---- src/ui/candy-bar.ts | 6 +++--- src/ui/challenges-select-ui-handler.ts | 6 +++--- src/ui/char-sprite.ts | 6 +++--- src/ui/confirm-ui-handler.ts | 4 ++-- src/ui/egg-gacha-ui-handler.ts | 6 +++--- src/ui/egg-hatch-scene-handler.ts | 2 +- src/ui/egg-list-ui-handler.ts | 8 +++----- src/ui/egg-summary-ui-handler.ts | 6 +++--- src/ui/evolution-scene-handler.ts | 2 +- src/ui/fight-ui-handler.ts | 2 +- src/ui/filter-text.ts | 2 +- src/ui/menu-ui-handler.ts | 10 +++++----- src/ui/modal-ui-handler.ts | 10 +++++----- src/ui/modifier-select-ui-handler.ts | 13 +++++------- src/ui/mystery-encounter-ui-handler.ts | 2 +- src/ui/party-exp-bar.ts | 6 +++--- src/ui/party-ui-handler.ts | 2 +- src/ui/pokeball-tray.ts | 8 ++++---- src/ui/pokedex-page-ui-handler.ts | 20 +++++++++---------- src/ui/pokedex-ui-handler.ts | 10 +++++----- src/ui/run-history-ui-handler.ts | 6 +++--- src/ui/run-info-ui-handler.ts | 12 +++++------ src/ui/save-slot-select-ui-handler.ts | 6 +++--- src/ui/saving-icon-handler.ts | 2 +- .../settings/abstract-binding-ui-handler.ts | 12 +++++------ .../abstract-control-settings-ui-handler.ts | 14 ++++++------- .../settings/abstract-settings-ui-handler.ts | 14 ++++++------- src/ui/settings/navigation-menu.ts | 2 +- src/ui/starter-select-ui-handler.ts | 12 +++++------ src/ui/title-ui-handler.ts | 8 ++++---- src/ui/ui.ts | 16 +++++---------- 45 files changed, 142 insertions(+), 153 deletions(-) diff --git a/src/data/mystery-encounters/encounters/bug-type-superfan-encounter.ts b/src/data/mystery-encounters/encounters/bug-type-superfan-encounter.ts index 5badac0fe3e..d86f1511207 100644 --- a/src/data/mystery-encounters/encounters/bug-type-superfan-encounter.ts +++ b/src/data/mystery-encounters/encounters/bug-type-superfan-encounter.ts @@ -721,7 +721,7 @@ function doBugTypeMoveTutor(): Promise { right: true, x: 1, y: -MoveInfoOverlay.getHeight(true) - 1, - width: globalScene.game.canvas.width / 6 - 2, + width: globalScene.scaledCanvas.width - 2, }); globalScene.ui.add(moveInfoOverlay); diff --git a/src/data/mystery-encounters/encounters/global-trade-system-encounter.ts b/src/data/mystery-encounters/encounters/global-trade-system-encounter.ts index b914927123a..57c4a2387de 100644 --- a/src/data/mystery-encounters/encounters/global-trade-system-encounter.ts +++ b/src/data/mystery-encounters/encounters/global-trade-system-encounter.ts @@ -561,14 +561,14 @@ function generateTradeOption(alreadyUsedSpecies: PokemonSpecies[], originalBst?: function showTradeBackground() { return new Promise(resolve => { - const tradeContainer = globalScene.add.container(0, -globalScene.game.canvas.height / 6); + const tradeContainer = globalScene.add.container(0, -globalScene.scaledCanvas.height); tradeContainer.setName("Trade Background"); const flyByStaticBg = globalScene.add.rectangle( 0, 0, - globalScene.game.canvas.width / 6, - globalScene.game.canvas.height / 6, + globalScene.scaledCanvas.width, + globalScene.scaledCanvas.height, 0, ); flyByStaticBg.setName("Black Background"); diff --git a/src/data/mystery-encounters/encounters/weird-dream-encounter.ts b/src/data/mystery-encounters/encounters/weird-dream-encounter.ts index 1164d2ca7ca..ca385472414 100644 --- a/src/data/mystery-encounters/encounters/weird-dream-encounter.ts +++ b/src/data/mystery-encounters/encounters/weird-dream-encounter.ts @@ -648,15 +648,15 @@ function getTransformedSpecies( } function doShowDreamBackground() { - const transformationContainer = globalScene.add.container(0, -globalScene.game.canvas.height / 6); + const transformationContainer = globalScene.add.container(0, -globalScene.scaledCanvas.height); transformationContainer.name = "Dream Background"; // In case it takes a bit for video to load const transformationStaticBg = globalScene.add.rectangle( 0, 0, - globalScene.game.canvas.width / 6, - globalScene.game.canvas.height / 6, + globalScene.scaledCanvas.width, + globalScene.scaledCanvas.height, 0, ); transformationStaticBg.setName("Black Background"); diff --git a/src/field/damage-number-handler.ts b/src/field/damage-number-handler.ts index 1bbacc19566..112b08631b0 100644 --- a/src/field/damage-number-handler.ts +++ b/src/field/damage-number-handler.ts @@ -30,7 +30,7 @@ export class DamageNumberHandler { const baseScale = target.getSpriteScale() / 6; const damageNumber = addTextObject( target.x, - -(globalScene.game.canvas.height / 6) + target.y - target.getSprite().height / 2, + -globalScene.scaledCanvas.height + target.y - target.getSprite().height / 2, formatStat(amount, true), TextStyle.SUMMARY, ); diff --git a/src/phases/egg-hatch-phase.ts b/src/phases/egg-hatch-phase.ts index 94923ae8c1f..e9d28e0fe2a 100644 --- a/src/phases/egg-hatch-phase.ts +++ b/src/phases/egg-hatch-phase.ts @@ -148,9 +148,9 @@ export class EggHatchPhase extends Phase { this.eggHatchOverlay = globalScene.add.rectangle( 0, - -globalScene.game.canvas.height / 6, - globalScene.game.canvas.width / 6, - globalScene.game.canvas.height / 6, + -globalScene.scaledCanvas.height, + globalScene.scaledCanvas.width, + globalScene.scaledCanvas.height, 0xffffff, ); this.eggHatchOverlay.setOrigin(0, 0); diff --git a/src/phases/end-card-phase.ts b/src/phases/end-card-phase.ts index b9b383db13d..0716f714b68 100644 --- a/src/phases/end-card-phase.ts +++ b/src/phases/end-card-phase.ts @@ -26,7 +26,7 @@ export class EndCardPhase extends Phase { this.text = addTextObject( globalScene.game.canvas.width / 12, - globalScene.game.canvas.height / 6 - 16, + globalScene.scaledCanvas.height - 16, i18next.t("battle:congratulations"), TextStyle.SUMMARY, { fontSize: "128px" }, diff --git a/src/phases/evolution-phase.ts b/src/phases/evolution-phase.ts index cad79455af3..ad3db97d520 100644 --- a/src/phases/evolution-phase.ts +++ b/src/phases/evolution-phase.ts @@ -90,16 +90,16 @@ export class EvolutionPhase extends Phase { .setVisible(false); this.evolutionBgOverlay = globalScene.add - .rectangle(0, 0, globalScene.game.canvas.width / 6, globalScene.game.canvas.height / 6, 0x262626) + .rectangle(0, 0, globalScene.scaledCanvas.width, globalScene.scaledCanvas.height, 0x262626) .setOrigin(0) .setAlpha(0); this.evolutionContainer.add([this.evolutionBaseBg, this.evolutionBgOverlay, this.evolutionBg]); this.evolutionOverlay = globalScene.add.rectangle( 0, - -globalScene.game.canvas.height / 6, - globalScene.game.canvas.width / 6, - globalScene.game.canvas.height / 6 - 48, + -globalScene.scaledCanvas.height, + globalScene.scaledCanvas.width, + globalScene.scaledCanvas.height - 48, 0xffffff, ); this.evolutionOverlay.setOrigin(0).setAlpha(0); diff --git a/src/timed-event-manager.ts b/src/timed-event-manager.ts index 9877f298404..9e711735e7f 100644 --- a/src/timed-event-manager.ts +++ b/src/timed-event-manager.ts @@ -653,7 +653,7 @@ export class TimedEventDisplay extends Phaser.GameObjects.Container { console.log(this.event.bannerKey); const padding = 5; const showTimer = this.event.eventType !== EventType.NO_TIMER_DISPLAY; - const yPosition = globalScene.game.canvas.height / 6 - padding - (showTimer ? 10 : 0) - (this.event.yOffset ?? 0); + const yPosition = globalScene.scaledCanvas.height - padding - (showTimer ? 10 : 0) - (this.event.yOffset ?? 0); this.banner = new Phaser.GameObjects.Image(globalScene, this.availableWidth / 2, yPosition - padding, key); this.banner.setName("img-event-banner"); this.banner.setOrigin(0.5, 1); diff --git a/src/ui/abstact-option-select-ui-handler.ts b/src/ui/abstact-option-select-ui-handler.ts index 2fb0159b6ef..b7279bc2d30 100644 --- a/src/ui/abstact-option-select-ui-handler.ts +++ b/src/ui/abstact-option-select-ui-handler.ts @@ -66,7 +66,7 @@ export abstract class AbstractOptionSelectUiHandler extends UiHandler { setup() { const ui = this.getUi(); - this.optionSelectContainer = globalScene.add.container(globalScene.game.canvas.width / 6 - 1, -48); + this.optionSelectContainer = globalScene.add.container(globalScene.scaledCanvas.width - 1, -48); this.optionSelectContainer.setName(`option-select-${this.mode ? UiMode[this.mode] : "UNKNOWN"}`); this.optionSelectContainer.setVisible(false); ui.add(this.optionSelectContainer); @@ -135,7 +135,7 @@ export abstract class AbstractOptionSelectUiHandler extends UiHandler { this.optionSelectText.setName("text-option-select"); this.optionSelectTextContainer.add(this.optionSelectText); this.optionSelectContainer.setPosition( - globalScene.game.canvas.width / 6 - 1 - (this.config?.xOffset || 0), + globalScene.scaledCanvas.width - 1 - (this.config?.xOffset || 0), -48 + (this.config?.yOffset || 0), ); this.optionSelectBg.width = Math.max(this.optionSelectText.displayWidth + 24, this.getWindowWidth()); diff --git a/src/ui/achv-bar.ts b/src/ui/achv-bar.ts index bb1ef95c9de..0f71bcbfde0 100644 --- a/src/ui/achv-bar.ts +++ b/src/ui/achv-bar.ts @@ -21,7 +21,7 @@ export class AchvBar extends Phaser.GameObjects.Container { public shown: boolean; constructor() { - super(globalScene, globalScene.game.canvas.width / 6, 0); + super(globalScene, globalScene.scaledCanvas.width, 0); this.playerGender = globalScene.gameData.gender; } @@ -118,7 +118,7 @@ export class AchvBar extends Phaser.GameObjects.Container { globalScene.tweens.add({ targets: this, - x: globalScene.game.canvas.width / 6 - this.bg.width / 2, + x: globalScene.scaledCanvas.width - this.bg.width / 2, duration: 500, ease: "Sine.easeOut", }); @@ -136,7 +136,7 @@ export class AchvBar extends Phaser.GameObjects.Container { globalScene.tweens.add({ targets: this, - x: globalScene.game.canvas.width / 6, + x: globalScene.scaledCanvas.width, duration: 500, ease: "Sine.easeIn", onComplete: () => { diff --git a/src/ui/achvs-ui-handler.ts b/src/ui/achvs-ui-handler.ts index 01fd1d45a61..2c04e24e0f2 100644 --- a/src/ui/achvs-ui-handler.ts +++ b/src/ui/achvs-ui-handler.ts @@ -72,9 +72,9 @@ export class AchvsUiHandler extends MessageUiHandler { const ui = this.getUi(); /** Width of the global canvas / 6 */ - const WIDTH = globalScene.game.canvas.width / 6; + const WIDTH = globalScene.scaledCanvas.width; /** Height of the global canvas / 6 */ - const HEIGHT = globalScene.game.canvas.height / 6; + const HEIGHT = globalScene.scaledCanvas.height; this.mainContainer = globalScene.add.container(1, -HEIGHT + 1); diff --git a/src/ui/ball-ui-handler.ts b/src/ui/ball-ui-handler.ts index 67beb0eba84..99dabd893df 100644 --- a/src/ui/ball-ui-handler.ts +++ b/src/ui/ball-ui-handler.ts @@ -37,7 +37,7 @@ export class BallUiHandler extends UiHandler { const optionsText = addTextObject(0, 0, optionsTextContent, TextStyle.WINDOW, { align: "right", maxLines: 6 }); const optionsTextWidth = optionsText.displayWidth; this.pokeballSelectContainer = globalScene.add.container( - globalScene.game.canvas.width / 6 - 51 - Math.max(64, optionsTextWidth), + globalScene.scaledCanvas.width - 51 - Math.max(64, optionsTextWidth), -49, ); this.pokeballSelectContainer.setVisible(false); diff --git a/src/ui/battle-info/player-battle-info.ts b/src/ui/battle-info/player-battle-info.ts index 62a2eddecb9..8784495e6d2 100644 --- a/src/ui/battle-info/player-battle-info.ts +++ b/src/ui/battle-info/player-battle-info.ts @@ -39,7 +39,7 @@ export class PlayerBattleInfo extends BattleInfo { statOverflow: 1, }, }; - super(Math.floor(globalScene.game.canvas.width / 6) - 10, -72, true, posParams); + super(Math.floor(globalScene.scaledCanvas.width) - 10, -72, true, posParams); this.hpNumbersContainer = globalScene.add.container(-15, 10).setName("container_hp"); diff --git a/src/ui/battle-message-ui-handler.ts b/src/ui/battle-message-ui-handler.ts index b58897b9022..2ecca06172b 100644 --- a/src/ui/battle-message-ui-handler.ts +++ b/src/ui/battle-message-ui-handler.ts @@ -94,7 +94,7 @@ export class BattleMessageUiHandler extends MessageUiHandler { this.levelUpStatsContainer = levelUpStatsContainer; - const levelUpStatsLabelsContent = addTextObject(globalScene.game.canvas.width / 6 - 73, -94, "", TextStyle.WINDOW, { + const levelUpStatsLabelsContent = addTextObject(globalScene.scaledCanvas.width - 73, -94, "", TextStyle.WINDOW, { maxLines: 6, }); let levelUpStatsLabelText = ""; @@ -106,7 +106,7 @@ export class BattleMessageUiHandler extends MessageUiHandler { levelUpStatsLabelsContent.x -= levelUpStatsLabelsContent.displayWidth; const levelUpStatsBg = addWindow( - globalScene.game.canvas.width / 6, + globalScene.scaledCanvas.width, -100, 80 + levelUpStatsLabelsContent.displayWidth, 100, @@ -117,7 +117,7 @@ export class BattleMessageUiHandler extends MessageUiHandler { levelUpStatsContainer.add(levelUpStatsLabelsContent); const levelUpStatsIncrContent = addTextObject( - globalScene.game.canvas.width / 6 - 50, + globalScene.scaledCanvas.width - 50, -94, "+\n+\n+\n+\n+\n+", TextStyle.WINDOW, @@ -128,7 +128,7 @@ export class BattleMessageUiHandler extends MessageUiHandler { this.levelUpStatsIncrContent = levelUpStatsIncrContent; const levelUpStatsValuesContent = addBBCodeTextObject( - globalScene.game.canvas.width / 6 - 7, + globalScene.scaledCanvas.width - 7, -94, "", TextStyle.WINDOW, diff --git a/src/ui/candy-bar.ts b/src/ui/candy-bar.ts index 239b963227b..b29ac3ec520 100644 --- a/src/ui/candy-bar.ts +++ b/src/ui/candy-bar.ts @@ -19,7 +19,7 @@ export class CandyBar extends Phaser.GameObjects.Container { public shown: boolean; constructor() { - super(globalScene, globalScene.game.canvas.width / 6, -(globalScene.game.canvas.height / 6) + 15); + super(globalScene, globalScene.scaledCanvas.width, -globalScene.scaledCanvas.height + 15); } setup(): void { @@ -80,7 +80,7 @@ export class CandyBar extends Phaser.GameObjects.Container { this.tween = globalScene.tweens.add({ targets: this, - x: globalScene.game.canvas.width / 6 - (this.bg.width - 5), + x: globalScene.scaledCanvas.width - (this.bg.width - 5), duration: 500, ease: "Sine.easeOut", onComplete: () => { @@ -111,7 +111,7 @@ export class CandyBar extends Phaser.GameObjects.Container { this.tween = globalScene.tweens.add({ targets: this, - x: globalScene.game.canvas.width / 6, + x: globalScene.scaledCanvas.width, duration: 500, ease: "Sine.easeIn", onComplete: () => { diff --git a/src/ui/challenges-select-ui-handler.ts b/src/ui/challenges-select-ui-handler.ts index 4f205d59de8..275f7c2302d 100644 --- a/src/ui/challenges-select-ui-handler.ts +++ b/src/ui/challenges-select-ui-handler.ts @@ -58,11 +58,11 @@ export class GameChallengesUiHandler extends UiHandler { this.widestTextBox = 0; - this.challengesContainer = globalScene.add.container(1, -(globalScene.game.canvas.height / 6) + 1); + this.challengesContainer = globalScene.add.container(1, -globalScene.scaledCanvas.height + 1); this.challengesContainer.setName("challenges"); this.challengesContainer.setInteractive( - new Phaser.Geom.Rectangle(0, 0, globalScene.game.canvas.width / 6, globalScene.game.canvas.height / 6), + new Phaser.Geom.Rectangle(0, 0, globalScene.scaledCanvas.width, globalScene.scaledCanvas.height), Phaser.Geom.Rectangle.Contains, ); @@ -79,7 +79,7 @@ export class GameChallengesUiHandler extends UiHandler { this.challengesContainer.add(bgOverlay); // TODO: Change this back to /9 when adding in difficulty - const headerBg = addWindow(0, 0, globalScene.game.canvas.width / 6, 24); + const headerBg = addWindow(0, 0, globalScene.scaledCanvas.width, 24); headerBg.setName("window-header-bg"); headerBg.setOrigin(0, 0); diff --git a/src/ui/char-sprite.ts b/src/ui/char-sprite.ts index 381421086ff..1ab00291ff6 100644 --- a/src/ui/char-sprite.ts +++ b/src/ui/char-sprite.ts @@ -10,7 +10,7 @@ export class CharSprite extends Phaser.GameObjects.Container { public shown: boolean; constructor() { - super(globalScene, globalScene.game.canvas.width / 6 + 32, -42); + super(globalScene, globalScene.scaledCanvas.width + 32, -42); } setup(): void { @@ -49,7 +49,7 @@ export class CharSprite extends Phaser.GameObjects.Container { globalScene.tweens.add({ targets: this, - x: globalScene.game.canvas.width / 6 - 102, + x: globalScene.scaledCanvas.width - 102, duration: 750, ease: "Cubic.easeOut", onComplete: () => { @@ -95,7 +95,7 @@ export class CharSprite extends Phaser.GameObjects.Container { globalScene.tweens.add({ targets: this, - x: globalScene.game.canvas.width / 6 + 32, + x: globalScene.scaledCanvas.width + 32, duration: 750, ease: "Cubic.easeIn", onComplete: () => { diff --git a/src/ui/confirm-ui-handler.ts b/src/ui/confirm-ui-handler.ts index b2f35931278..aeef7fc1c91 100644 --- a/src/ui/confirm-ui-handler.ts +++ b/src/ui/confirm-ui-handler.ts @@ -69,7 +69,7 @@ export class ConfirmUiHandler extends AbstractOptionSelectUiHandler { const xOffset = args.length >= 7 && args[6] !== null ? (args[6] as number) : 0; const yOffset = args.length >= 8 && args[7] !== null ? (args[7] as number) : 0; - this.optionSelectContainer.setPosition(globalScene.game.canvas.width / 6 - 1 + xOffset, -48 + yOffset); + this.optionSelectContainer.setPosition(globalScene.scaledCanvas.width - 1 + xOffset, -48 + yOffset); this.setCursor(this.switchCheck ? this.switchCheckCursor : 0); return true; @@ -103,7 +103,7 @@ export class ConfirmUiHandler extends AbstractOptionSelectUiHandler { const xOffset = args.length >= 4 && args[3] !== null ? (args[3] as number) : 0; const yOffset = args.length >= 5 && args[4] !== null ? (args[4] as number) : 0; - this.optionSelectContainer.setPosition(globalScene.game.canvas.width / 6 - 1 + xOffset, -48 + yOffset); + this.optionSelectContainer.setPosition(globalScene.scaledCanvas.width - 1 + xOffset, -48 + yOffset); this.setCursor(this.switchCheck ? this.switchCheckCursor : 0); diff --git a/src/ui/egg-gacha-ui-handler.ts b/src/ui/egg-gacha-ui-handler.ts index 5dcf05e2606..0287e0ee7a5 100644 --- a/src/ui/egg-gacha-ui-handler.ts +++ b/src/ui/egg-gacha-ui-handler.ts @@ -174,7 +174,7 @@ export class EggGachaUiHandler extends MessageUiHandler { const ui = this.getUi(); - this.eggGachaContainer = globalScene.add.container(0, -globalScene.game.canvas.height / 6).setVisible(false); + this.eggGachaContainer = globalScene.add.container(0, -globalScene.scaledCanvas.height).setVisible(false); ui.add(this.eggGachaContainer); const bg = globalScene.add.nineslice(0, 0, "default_bg", undefined, 320, 180, 0, 0, 16, 0).setOrigin(0); @@ -212,7 +212,7 @@ export class EggGachaUiHandler extends MessageUiHandler { this.eggGachaOptionSelectBg = addWindow(0, 0, eggGachaOptionSelectWidth, 16 + 576 * this.scale).setOrigin(1); this.eggGachaOptionsContainer = globalScene.add - .container(globalScene.game.canvas.width / 6, 148) + .container(globalScene.scaledCanvas.width, 148) .add(this.eggGachaOptionSelectBg); this.eggGachaContainer.add(this.eggGachaOptionsContainer); @@ -278,7 +278,7 @@ export class EggGachaUiHandler extends MessageUiHandler { this.eggGachaContainer.add(this.eggGachaOptionsContainer); for (const voucher of getEnumValues(VoucherType)) { - const container = globalScene.add.container(globalScene.game.canvas.width / 6 - 56 * voucher, 0); + const container = globalScene.add.container(globalScene.scaledCanvas.width - 56 * voucher, 0); const bg = addWindow(0, 0, 56, 22).setOrigin(1, 0); container.add(bg); diff --git a/src/ui/egg-hatch-scene-handler.ts b/src/ui/egg-hatch-scene-handler.ts index 5b2c9d40cfa..6536ef2af80 100644 --- a/src/ui/egg-hatch-scene-handler.ts +++ b/src/ui/egg-hatch-scene-handler.ts @@ -19,7 +19,7 @@ export class EggHatchSceneHandler extends UiHandler { } setup() { - this.eggHatchContainer = globalScene.add.container(0, -globalScene.game.canvas.height / 6); + this.eggHatchContainer = globalScene.add.container(0, -globalScene.scaledCanvas.height); globalScene.fieldUI.add(this.eggHatchContainer); const eggLightraysAnimFrames = globalScene.anims.generateFrameNames("egg_lightrays", { start: 0, end: 3 }); diff --git a/src/ui/egg-list-ui-handler.ts b/src/ui/egg-list-ui-handler.ts index 42f969b9d38..2516903f631 100644 --- a/src/ui/egg-list-ui-handler.ts +++ b/src/ui/egg-list-ui-handler.ts @@ -36,11 +36,11 @@ export class EggListUiHandler extends MessageUiHandler { setup() { const ui = this.getUi(); - this.eggListContainer = globalScene.add.container(0, -globalScene.game.canvas.height / 6).setVisible(false); + this.eggListContainer = globalScene.add.container(0, -globalScene.scaledCanvas.height).setVisible(false); ui.add(this.eggListContainer); const bgColor = globalScene.add - .rectangle(0, 0, globalScene.game.canvas.width / 6, globalScene.game.canvas.height / 6, 0x006860) + .rectangle(0, 0, globalScene.scaledCanvas.width, globalScene.scaledCanvas.height, 0x006860) .setOrigin(0); const eggListBg = globalScene.add.image(0, 0, "egg_list_bg").setOrigin(0); @@ -69,9 +69,7 @@ export class EggListUiHandler extends MessageUiHandler { .withUpdateGridCallBack(() => this.updateEggIcons()) .withUpdateSingleElementCallback((i: number) => this.setEggDetails(i)); - this.eggListMessageBoxContainer = globalScene.add - .container(0, globalScene.game.canvas.height / 6) - .setVisible(false); + this.eggListMessageBoxContainer = globalScene.add.container(0, globalScene.scaledCanvas.height).setVisible(false); const eggListMessageBox = addWindow(1, -1, 318, 28).setOrigin(0, 1); this.eggListMessageBoxContainer.add(eggListMessageBox); diff --git a/src/ui/egg-summary-ui-handler.ts b/src/ui/egg-summary-ui-handler.ts index aa4e8974318..c66075dd910 100644 --- a/src/ui/egg-summary-ui-handler.ts +++ b/src/ui/egg-summary-ui-handler.ts @@ -59,11 +59,11 @@ export class EggSummaryUiHandler extends MessageUiHandler { setup() { const ui = this.getUi(); - this.summaryContainer = globalScene.add.container(0, -globalScene.game.canvas.height / 6); + this.summaryContainer = globalScene.add.container(0, -globalScene.scaledCanvas.height); this.summaryContainer.setVisible(false); ui.add(this.summaryContainer); - this.eggHatchContainer = globalScene.add.container(0, -globalScene.game.canvas.height / 6); + this.eggHatchContainer = globalScene.add.container(0, -globalScene.scaledCanvas.height); this.eggHatchContainer.setVisible(false); ui.add(this.eggHatchContainer); @@ -92,7 +92,7 @@ export class EggSummaryUiHandler extends MessageUiHandler { iconContainerX + numCols * iconSize, iconContainerY + 3, 4, - globalScene.game.canvas.height / 6 - 20, + globalScene.scaledCanvas.height - 20, numRows, ); this.summaryContainer.add(scrollBar); diff --git a/src/ui/evolution-scene-handler.ts b/src/ui/evolution-scene-handler.ts index c22cf31faaa..0333594dc36 100644 --- a/src/ui/evolution-scene-handler.ts +++ b/src/ui/evolution-scene-handler.ts @@ -22,7 +22,7 @@ export class EvolutionSceneHandler extends MessageUiHandler { const ui = this.getUi(); - this.evolutionContainer = globalScene.add.container(0, -globalScene.game.canvas.height / 6); + this.evolutionContainer = globalScene.add.container(0, -globalScene.scaledCanvas.height); const messageBg = globalScene.add.sprite(0, 0, "bg", globalScene.windowType).setOrigin(0, 1).setVisible(false); diff --git a/src/ui/fight-ui-handler.ts b/src/ui/fight-ui-handler.ts index 52640d03de9..1d856079939 100644 --- a/src/ui/fight-ui-handler.ts +++ b/src/ui/fight-ui-handler.ts @@ -111,7 +111,7 @@ export class FightUiHandler extends UiHandler implements InfoToggle { right: true, x: 0, y: -MoveInfoOverlay.getHeight(true), - width: globalScene.game.canvas.width / 6 + 4, + width: globalScene.scaledCanvas.width + 4, hideEffectBox: true, hideBg: true, }); diff --git a/src/ui/filter-text.ts b/src/ui/filter-text.ts index ff7119dd778..d5809292c25 100644 --- a/src/ui/filter-text.ts +++ b/src/ui/filter-text.ts @@ -62,7 +62,7 @@ export class FilterText extends Phaser.GameObjects.Container { this.dialogueMessageBox = addWindow( -this.textPadding, 0, - globalScene.game.canvas.width / 6 + this.textPadding * 2, + globalScene.scaledCanvas.width + this.textPadding * 2, 49, false, false, diff --git a/src/ui/menu-ui-handler.ts b/src/ui/menu-ui-handler.ts index fa65cccab2f..10a94a2c51d 100644 --- a/src/ui/menu-ui-handler.ts +++ b/src/ui/menu-ui-handler.ts @@ -96,10 +96,10 @@ export class MenuUiHandler extends MessageUiHandler { ui.bgmBar = this.bgmBar; - this.menuContainer = globalScene.add.container(1, -(globalScene.game.canvas.height / 6) + 1); + this.menuContainer = globalScene.add.container(1, -globalScene.scaledCanvas.height + 1); this.menuContainer.setName("menu"); this.menuContainer.setInteractive( - new Phaser.Geom.Rectangle(0, 0, globalScene.game.canvas.width / 6, globalScene.game.canvas.height / 6), + new Phaser.Geom.Rectangle(0, 0, globalScene.scaledCanvas.width, globalScene.scaledCanvas.height), Phaser.Geom.Rectangle.Contains, ); @@ -146,10 +146,10 @@ export class MenuUiHandler extends MessageUiHandler { this.scale = getTextStyleOptions(TextStyle.WINDOW, globalScene.uiTheme).scale; this.menuBg = addWindow( - globalScene.game.canvas.width / 6 - (this.optionSelectText.displayWidth + 25), + globalScene.scaledCanvas.width - (this.optionSelectText.displayWidth + 25), 0, this.optionSelectText.displayWidth + 19 + 24 * this.scale, - globalScene.game.canvas.height / 6 - 2, + globalScene.scaledCanvas.height - 2, ); this.menuBg.setOrigin(0, 0); @@ -174,7 +174,7 @@ export class MenuUiHandler extends MessageUiHandler { this.dialogueMessageBox = addWindow( -this.textPadding, 0, - globalScene.game.canvas.width / 6 + this.textPadding * 2, + globalScene.scaledCanvas.width + this.textPadding * 2, 49, false, false, diff --git a/src/ui/modal-ui-handler.ts b/src/ui/modal-ui-handler.ts index c93b713831e..8e5f448dcad 100644 --- a/src/ui/modal-ui-handler.ts +++ b/src/ui/modal-ui-handler.ts @@ -46,7 +46,7 @@ export abstract class ModalUiHandler extends UiHandler { this.modalContainer = globalScene.add.container(0, 0); this.modalContainer.setInteractive( - new Phaser.Geom.Rectangle(0, 0, globalScene.game.canvas.width / 6, globalScene.game.canvas.height / 6), + new Phaser.Geom.Rectangle(0, 0, globalScene.scaledCanvas.width, globalScene.scaledCanvas.height), Phaser.Geom.Rectangle.Contains, ); @@ -105,8 +105,8 @@ export abstract class ModalUiHandler extends UiHandler { const overlay = globalScene.add.rectangle( (this.getWidth() + marginLeft + marginRight) / 2, (this.getHeight() + marginTop + marginBottom) / 2, - globalScene.game.canvas.width / 6, - globalScene.game.canvas.height / 6, + globalScene.scaledCanvas.width, + globalScene.scaledCanvas.height, 0, ); overlay.setOrigin(0.5, 0.5); @@ -154,8 +154,8 @@ export abstract class ModalUiHandler extends UiHandler { const [width, height] = [this.getWidth(config), this.getHeight(config)]; this.modalContainer.setPosition( - (globalScene.game.canvas.width / 6 - (width + (marginRight - marginLeft))) / 2, - (-globalScene.game.canvas.height / 6 - (height + (marginBottom - marginTop))) / 2, + (globalScene.scaledCanvas.width - (width + (marginRight - marginLeft))) / 2, + (-globalScene.scaledCanvas.height - (height + (marginBottom - marginTop))) / 2, ); this.modalBg.setSize(width, height); diff --git a/src/ui/modifier-select-ui-handler.ts b/src/ui/modifier-select-ui-handler.ts index 98cf7c8d246..63d6ca1e028 100644 --- a/src/ui/modifier-select-ui-handler.ts +++ b/src/ui/modifier-select-ui-handler.ts @@ -86,10 +86,7 @@ export class ModifierSelectUiHandler extends AwaitableUiHandler { transferButtonText.setOrigin(1, 0); this.transferButtonContainer.add(transferButtonText); - this.checkButtonContainer = globalScene.add.container( - globalScene.game.canvas.width / 6 - 1, - OPTION_BUTTON_YPOSITION, - ); + this.checkButtonContainer = globalScene.add.container(globalScene.scaledCanvas.width - 1, OPTION_BUTTON_YPOSITION); this.checkButtonContainer.setName("use-btn"); this.checkButtonContainer.setVisible(false); ui.add(this.checkButtonContainer); @@ -152,7 +149,7 @@ export class ModifierSelectUiHandler extends AwaitableUiHandler { right: true, x: 1, y: -MoveInfoOverlay.getHeight(true) - 1, - width: globalScene.game.canvas.width / 6 - 2, + width: globalScene.scaledCanvas.width - 2, }); ui.add(this.moveInfoOverlay); // register the overlay to receive toggle events @@ -217,7 +214,7 @@ export class ModifierSelectUiHandler extends AwaitableUiHandler { shopTypeOptions.length > SHOP_OPTIONS_ROW_LIMIT ? -SINGLE_SHOP_ROW_YOFFSET : -DOUBLE_SHOP_ROW_YOFFSET; for (let m = 0; m < typeOptions.length; m++) { - const sliceWidth = globalScene.game.canvas.width / 6 / (typeOptions.length + 2); + const sliceWidth = globalScene.scaledCanvas.width / (typeOptions.length + 2); const option = new ModifierOption( sliceWidth * (m + 1) + sliceWidth * 0.5, -globalScene.game.canvas.height / 12 + optionsYOffset, @@ -241,7 +238,7 @@ export class ModifierSelectUiHandler extends AwaitableUiHandler { row ? SHOP_OPTIONS_ROW_LIMIT : 0, row ? undefined : SHOP_OPTIONS_ROW_LIMIT, ); - const sliceWidth = globalScene.game.canvas.width / 6 / (rowOptions.length + 2); + const sliceWidth = globalScene.scaledCanvas.width / (rowOptions.length + 2); const option = new ModifierOption( sliceWidth * (col + 1) + sliceWidth * 0.5, -globalScene.game.canvas.height / 12 - globalScene.game.canvas.height / 32 - (42 - (28 * row - 1)), @@ -564,7 +561,7 @@ export class ModifierSelectUiHandler extends AwaitableUiHandler { return ret; } - const sliceWidth = globalScene.game.canvas.width / 6 / (options.length + 2); + const sliceWidth = globalScene.scaledCanvas.width / (options.length + 2); if (this.rowCursor < 2) { // Cursor on free items this.cursorObj.setPosition( diff --git a/src/ui/mystery-encounter-ui-handler.ts b/src/ui/mystery-encounter-ui-handler.ts index b6bc464855c..881c375fa8a 100644 --- a/src/ui/mystery-encounter-ui-handler.ts +++ b/src/ui/mystery-encounter-ui-handler.ts @@ -471,7 +471,7 @@ export class MysteryEncounterUiHandler extends UiHandler { // View Party Button const viewPartyText = addBBCodeTextObject( - globalScene.game.canvas.width / 6, + globalScene.scaledCanvas.width, -24, getBBCodeFrag(i18next.t("mysteryEncounterMessages:view_party_button"), TextStyle.PARTY), TextStyle.PARTY, diff --git a/src/ui/party-exp-bar.ts b/src/ui/party-exp-bar.ts index 952a1f8227a..c9567ceb042 100644 --- a/src/ui/party-exp-bar.ts +++ b/src/ui/party-exp-bar.ts @@ -14,7 +14,7 @@ export class PartyExpBar extends Phaser.GameObjects.Container { public shown: boolean; constructor() { - super(globalScene, globalScene.game.canvas.width / 6, -(globalScene.game.canvas.height / 6) + 15); + super(globalScene, globalScene.scaledCanvas.width, -globalScene.scaledCanvas.height + 15); } setup(): void { @@ -66,7 +66,7 @@ export class PartyExpBar extends Phaser.GameObjects.Container { this.tween = globalScene.tweens.add({ targets: this, - x: globalScene.game.canvas.width / 6 - (this.bg.width - 5), + x: globalScene.scaledCanvas.width - (this.bg.width - 5), duration: 500 / Math.pow(2, globalScene.expGainsSpeed), ease: "Sine.easeOut", onComplete: () => { @@ -92,7 +92,7 @@ export class PartyExpBar extends Phaser.GameObjects.Container { this.tween = globalScene.tweens.add({ targets: this, - x: globalScene.game.canvas.width / 6, + x: globalScene.scaledCanvas.width, duration: 500, ease: "Sine.easeIn", onComplete: () => { diff --git a/src/ui/party-ui-handler.ts b/src/ui/party-ui-handler.ts index 2068740c10a..f2dec29c770 100644 --- a/src/ui/party-ui-handler.ts +++ b/src/ui/party-ui-handler.ts @@ -302,7 +302,7 @@ export class PartyUiHandler extends MessageUiHandler { this.partyCancelButton = partyCancelButton; - this.optionsContainer = globalScene.add.container(globalScene.game.canvas.width / 6 - 1, -1); + this.optionsContainer = globalScene.add.container(globalScene.scaledCanvas.width - 1, -1); partyContainer.add(this.optionsContainer); this.iconAnimHandler = new PokemonIconAnimHandler(); diff --git a/src/ui/pokeball-tray.ts b/src/ui/pokeball-tray.ts index 9720aa42090..b1522af0e27 100644 --- a/src/ui/pokeball-tray.ts +++ b/src/ui/pokeball-tray.ts @@ -10,7 +10,7 @@ export class PokeballTray extends Phaser.GameObjects.Container { public shown: boolean; constructor(player: boolean) { - super(globalScene, player ? globalScene.game.canvas.width / 6 : 0, player ? -72 : -144); + super(globalScene, player ? globalScene.scaledCanvas.width : 0, player ? -72 : -144); this.player = player; } @@ -36,7 +36,7 @@ export class PokeballTray extends Phaser.GameObjects.Container { .map((_, i) => globalScene.add.sprite( (this.player ? -83 : 76) + - (globalScene.game.canvas.width / 6) * (this.player ? -1 : 1) + + globalScene.scaledCanvas.width * (this.player ? -1 : 1) + 10 * i * (this.player ? 1 : -1), -8, "pb_tray_ball", @@ -67,7 +67,7 @@ export class PokeballTray extends Phaser.GameObjects.Container { this.bg.alpha = 1; this.balls.forEach((ball, b) => { - ball.x += (globalScene.game.canvas.width / 6 + 104) * (this.player ? 1 : -1); + ball.x += (globalScene.scaledCanvas.width + 104) * (this.player ? 1 : -1); let ballFrame = "ball"; if (b >= party.length) { ballFrame = "empty"; @@ -115,7 +115,7 @@ export class PokeballTray extends Phaser.GameObjects.Container { this.balls.forEach((ball, b) => { globalScene.tweens.add({ targets: ball, - x: `${this.player ? "-" : "+"}=${globalScene.game.canvas.width / 6}`, + x: `${this.player ? "-" : "+"}=${globalScene.scaledCanvas.width}`, duration: 250, delay: b * 100, ease: "Sine.easeIn", diff --git a/src/ui/pokedex-page-ui-handler.ts b/src/ui/pokedex-page-ui-handler.ts index 380e0564c02..42fd04d8049 100644 --- a/src/ui/pokedex-page-ui-handler.ts +++ b/src/ui/pokedex-page-ui-handler.ts @@ -299,15 +299,15 @@ export class PokedexPageUiHandler extends MessageUiHandler { const langSettingKey = Object.keys(languageSettings).find(lang => currentLanguage.includes(lang)) ?? "en"; const textSettings = languageSettings[langSettingKey]; - this.starterSelectContainer = globalScene.add.container(0, -globalScene.game.canvas.height / 6); + this.starterSelectContainer = globalScene.add.container(0, -globalScene.scaledCanvas.height); this.starterSelectContainer.setVisible(false); ui.add(this.starterSelectContainer); const bgColor = globalScene.add.rectangle( 0, 0, - globalScene.game.canvas.width / 6, - globalScene.game.canvas.height / 6, + globalScene.scaledCanvas.width, + globalScene.scaledCanvas.height, 0x006860, ); bgColor.setOrigin(0, 0); @@ -602,7 +602,7 @@ export class PokedexPageUiHandler extends MessageUiHandler { this.filterInstructionsContainer.setVisible(true); this.starterSelectContainer.add(this.filterInstructionsContainer); - this.starterSelectMessageBoxContainer = globalScene.add.container(0, globalScene.game.canvas.height / 6); + this.starterSelectMessageBoxContainer = globalScene.add.container(0, globalScene.scaledCanvas.height); this.starterSelectMessageBoxContainer.setVisible(false); this.starterSelectContainer.add(this.starterSelectMessageBoxContainer); @@ -629,7 +629,7 @@ export class PokedexPageUiHandler extends MessageUiHandler { this.menuContainer = globalScene.add.container(-130, 0); this.menuContainer.setName("menu"); this.menuContainer.setInteractive( - new Phaser.Geom.Rectangle(0, 0, globalScene.game.canvas.width / 6, globalScene.game.canvas.height / 6), + new Phaser.Geom.Rectangle(0, 0, globalScene.scaledCanvas.width, globalScene.scaledCanvas.height), Phaser.Geom.Rectangle.Contains, ); @@ -659,10 +659,10 @@ export class PokedexPageUiHandler extends MessageUiHandler { this.scale = getTextStyleOptions(TextStyle.WINDOW, globalScene.uiTheme).scale; this.menuBg = addWindow( - globalScene.game.canvas.width / 6 - 83, + globalScene.scaledCanvas.width - 83, 0, this.optionSelectText.displayWidth + 19 + 24 * this.scale, - globalScene.game.canvas.height / 6 - 2, + globalScene.scaledCanvas.height - 2, ); this.menuBg.setOrigin(0, 0); @@ -685,13 +685,13 @@ export class PokedexPageUiHandler extends MessageUiHandler { this.moveInfoOverlay = new MoveInfoOverlay({ top: true, x: 1, - y: globalScene.game.canvas.height / 6 - MoveInfoOverlay.getHeight() - 29, + y: globalScene.scaledCanvas.height - MoveInfoOverlay.getHeight() - 29, }); this.starterSelectContainer.add(this.moveInfoOverlay); this.infoOverlay = new PokedexInfoOverlay({ x: 1, - y: globalScene.game.canvas.height / 6 - PokedexInfoOverlay.getHeight() - 29, + y: globalScene.scaledCanvas.height - PokedexInfoOverlay.getHeight() - 29, }); this.starterSelectContainer.add(this.infoOverlay); @@ -1100,7 +1100,7 @@ export class PokedexPageUiHandler extends MessageUiHandler { this.starterSelectMessageBoxContainer.setY(0); this.message.setY(4); } else { - this.starterSelectMessageBoxContainer.setY(globalScene.game.canvas.height / 6); + this.starterSelectMessageBoxContainer.setY(globalScene.scaledCanvas.height); this.starterSelectMessageBox.setOrigin(0, 1); this.message.setY(singleLine ? -22 : -37); } diff --git a/src/ui/pokedex-ui-handler.ts b/src/ui/pokedex-ui-handler.ts index 5d49e867b59..669689a0926 100644 --- a/src/ui/pokedex-ui-handler.ts +++ b/src/ui/pokedex-ui-handler.ts @@ -244,15 +244,15 @@ export class PokedexUiHandler extends MessageUiHandler { const langSettingKey = Object.keys(languageSettings).find(lang => currentLanguage.includes(lang)) ?? "en"; const textSettings = languageSettings[langSettingKey]; - this.starterSelectContainer = globalScene.add.container(0, -globalScene.game.canvas.height / 6); + this.starterSelectContainer = globalScene.add.container(0, -globalScene.scaledCanvas.height); this.starterSelectContainer.setVisible(false); ui.add(this.starterSelectContainer); const bgColor = globalScene.add.rectangle( 0, 0, - globalScene.game.canvas.width / 6, - globalScene.game.canvas.height / 6, + globalScene.scaledCanvas.width, + globalScene.scaledCanvas.height, 0x006860, ); bgColor.setOrigin(0, 0); @@ -543,7 +543,7 @@ export class PokedexUiHandler extends MessageUiHandler { this.type2Icon.setOrigin(0, 0); this.starterSelectContainer.add(this.type2Icon); - this.starterSelectMessageBoxContainer = globalScene.add.container(0, globalScene.game.canvas.height / 6); + this.starterSelectMessageBoxContainer = globalScene.add.container(0, globalScene.scaledCanvas.height); this.starterSelectMessageBoxContainer.setVisible(false); this.starterSelectContainer.add(this.starterSelectMessageBoxContainer); @@ -783,7 +783,7 @@ export class PokedexUiHandler extends MessageUiHandler { this.starterSelectMessageBoxContainer.setY(0); this.message.setY(4); } else { - this.starterSelectMessageBoxContainer.setY(globalScene.game.canvas.height / 6); + this.starterSelectMessageBoxContainer.setY(globalScene.scaledCanvas.height); this.starterSelectMessageBox.setOrigin(0, 1); this.message.setY(singleLine ? -22 : -37); } diff --git a/src/ui/run-history-ui-handler.ts b/src/ui/run-history-ui-handler.ts index 00aa47ae65d..457c48654a3 100644 --- a/src/ui/run-history-ui-handler.ts +++ b/src/ui/run-history-ui-handler.ts @@ -54,14 +54,14 @@ export class RunHistoryUiHandler extends MessageUiHandler { const loadSessionBg = globalScene.add.rectangle( 0, 0, - globalScene.game.canvas.width / 6, - -globalScene.game.canvas.height / 6, + globalScene.scaledCanvas.width, + -globalScene.scaledCanvas.height, 0x006860, ); loadSessionBg.setOrigin(0, 0); this.runSelectContainer.add(loadSessionBg); - this.runContainerInitialY = -globalScene.game.canvas.height / 6 + 8; + this.runContainerInitialY = -globalScene.scaledCanvas.height + 8; this.runsContainer = globalScene.add.container(8, this.runContainerInitialY); this.runSelectContainer.add(this.runsContainer); diff --git a/src/ui/run-info-ui-handler.ts b/src/ui/run-info-ui-handler.ts index 465e48a45ad..64492816c8e 100644 --- a/src/ui/run-info-ui-handler.ts +++ b/src/ui/run-info-ui-handler.ts @@ -74,7 +74,7 @@ export class RunInfoUiHandler extends UiHandler { } override async setup() { - this.runContainer = globalScene.add.container(1, -(globalScene.game.canvas.height / 6) + 1); + this.runContainer = globalScene.add.container(1, -globalScene.scaledCanvas.height + 1); // The import of the modifiersModule is loaded here to sidestep async/await issues. this.modifiersModule = Modifier; this.runContainer.setVisible(false); @@ -120,7 +120,7 @@ export class RunInfoUiHandler extends UiHandler { // Creates Header and adds to this.runContainer this.addHeader(); - this.statsBgWidth = (globalScene.game.canvas.width / 6 - 2) / 3; + this.statsBgWidth = (globalScene.scaledCanvas.width - 2) / 3; // Creates Run Result Container this.runResultContainer = globalScene.add.container(0, 24); @@ -147,7 +147,7 @@ export class RunInfoUiHandler extends UiHandler { this.showParty(true); this.runContainer.setInteractive( - new Phaser.Geom.Rectangle(0, 0, globalScene.game.canvas.width / 6, globalScene.game.canvas.height / 6), + new Phaser.Geom.Rectangle(0, 0, globalScene.scaledCanvas.width, globalScene.scaledCanvas.height), Phaser.Geom.Rectangle.Contains, ); this.getUi().bringToTop(this.runContainer); @@ -174,7 +174,7 @@ export class RunInfoUiHandler extends UiHandler { * It does not check if the run has any PokemonHeldItemModifiers though. */ private addHeader() { - const headerBg = addWindow(0, 0, globalScene.game.canvas.width / 6 - 2, 24); + const headerBg = addWindow(0, 0, globalScene.scaledCanvas.width - 2, 24); headerBg.setOrigin(0, 0); this.runContainer.add(headerBg); if (this.runInfo.modifiers.length !== 0) { @@ -723,7 +723,7 @@ export class RunInfoUiHandler extends UiHandler { private parsePartyInfo(): void { const party = this.runInfo.party; const currentLanguage = i18next.resolvedLanguage ?? "en"; - const windowHeight = (globalScene.game.canvas.height / 6 - 23) / 6; + const windowHeight = (globalScene.scaledCanvas.height - 23) / 6; party.forEach((p: PokemonData, i: number) => { const pokemonInfoWindow = new RoundRectangle(globalScene, 0, 14, this.statsBgWidth * 2 + 10, windowHeight - 2, 3); @@ -972,7 +972,7 @@ export class RunInfoUiHandler extends UiHandler { endCard.setScale(0.5); const text = addTextObject( globalScene.game.canvas.width / 12, - globalScene.game.canvas.height / 6 - 16, + globalScene.scaledCanvas.height - 16, i18next.t("battle:congratulations"), TextStyle.SUMMARY, { fontSize: "128px" }, diff --git a/src/ui/save-slot-select-ui-handler.ts b/src/ui/save-slot-select-ui-handler.ts index 9da34e672f1..5b1566b4913 100644 --- a/src/ui/save-slot-select-ui-handler.ts +++ b/src/ui/save-slot-select-ui-handler.ts @@ -54,14 +54,14 @@ export class SaveSlotSelectUiHandler extends MessageUiHandler { const loadSessionBg = globalScene.add.rectangle( 0, 0, - globalScene.game.canvas.width / 6, - -globalScene.game.canvas.height / 6, + globalScene.scaledCanvas.width, + -globalScene.scaledCanvas.height, 0x006860, ); loadSessionBg.setOrigin(0, 0); this.saveSlotSelectContainer.add(loadSessionBg); - this.sessionSlotsContainerInitialY = -globalScene.game.canvas.height / 6 + 8; + this.sessionSlotsContainerInitialY = -globalScene.scaledCanvas.height + 8; this.sessionSlotsContainer = globalScene.add.container(8, this.sessionSlotsContainerInitialY); this.saveSlotSelectContainer.add(this.sessionSlotsContainer); diff --git a/src/ui/saving-icon-handler.ts b/src/ui/saving-icon-handler.ts index 6923017218f..00c8b8b526c 100644 --- a/src/ui/saving-icon-handler.ts +++ b/src/ui/saving-icon-handler.ts @@ -8,7 +8,7 @@ export class SavingIconHandler extends Phaser.GameObjects.Container { private shown: boolean; constructor() { - super(globalScene, globalScene.game.canvas.width / 6 - 4, globalScene.game.canvas.height / 6 - 4); + super(globalScene, globalScene.scaledCanvas.width - 4, globalScene.scaledCanvas.height - 4); } setup(): void { diff --git a/src/ui/settings/abstract-binding-ui-handler.ts b/src/ui/settings/abstract-binding-ui-handler.ts index eb68456a69d..b2bda2455bb 100644 --- a/src/ui/settings/abstract-binding-ui-handler.ts +++ b/src/ui/settings/abstract-binding-ui-handler.ts @@ -73,8 +73,8 @@ export abstract class AbstractBindingUiHandler extends UiHandler { // Setup backgrounds and text objects for UI. this.titleBg = addWindow( - globalScene.game.canvas.width / 6 - this.getWindowWidth(), - -(globalScene.game.canvas.height / 6) + 28 + 21, + globalScene.scaledCanvas.width - this.getWindowWidth(), + -globalScene.scaledCanvas.height + 28 + 21, this.getWindowWidth(), 24, ); @@ -82,8 +82,8 @@ export abstract class AbstractBindingUiHandler extends UiHandler { this.optionSelectContainer.add(this.titleBg); this.actionBg = addWindow( - globalScene.game.canvas.width / 6 - this.getWindowWidth(), - -(globalScene.game.canvas.height / 6) + this.getWindowHeight() + 28 + 21 + 21, + globalScene.scaledCanvas.width - this.getWindowWidth(), + -globalScene.scaledCanvas.height + this.getWindowHeight() + 28 + 21 + 21, this.getWindowWidth(), 24, ); @@ -102,8 +102,8 @@ export abstract class AbstractBindingUiHandler extends UiHandler { this.optionSelectContainer.add(this.timerText); this.optionSelectBg = addWindow( - globalScene.game.canvas.width / 6 - this.getWindowWidth(), - -(globalScene.game.canvas.height / 6) + this.getWindowHeight() + 28, + globalScene.scaledCanvas.width - this.getWindowWidth(), + -globalScene.scaledCanvas.height + this.getWindowHeight() + 28, this.getWindowWidth(), this.getWindowHeight(), ); diff --git a/src/ui/settings/abstract-control-settings-ui-handler.ts b/src/ui/settings/abstract-control-settings-ui-handler.ts index ee9e990ee2a..b40676fc97c 100644 --- a/src/ui/settings/abstract-control-settings-ui-handler.ts +++ b/src/ui/settings/abstract-control-settings-ui-handler.ts @@ -96,11 +96,11 @@ export abstract class AbstractControlSettingsUiHandler extends UiHandler { const ui = this.getUi(); this.navigationIcons = {}; - this.settingsContainer = globalScene.add.container(1, -(globalScene.game.canvas.height / 6) + 1); + this.settingsContainer = globalScene.add.container(1, -globalScene.scaledCanvas.height + 1); this.settingsContainer.setName(`settings-${this.titleSelected}`); this.settingsContainer.setInteractive( - new Phaser.Geom.Rectangle(0, 0, globalScene.game.canvas.width / 6, globalScene.game.canvas.height / 6), + new Phaser.Geom.Rectangle(0, 0, globalScene.scaledCanvas.width, globalScene.scaledCanvas.height), Phaser.Geom.Rectangle.Contains, ); @@ -109,15 +109,15 @@ export abstract class AbstractControlSettingsUiHandler extends UiHandler { this.optionsBg = addWindow( 0, this.navigationContainer.height, - globalScene.game.canvas.width / 6 - 2, - globalScene.game.canvas.height / 6 - 16 - this.navigationContainer.height - 2, + globalScene.scaledCanvas.width - 2, + globalScene.scaledCanvas.height - 16 - this.navigationContainer.height - 2, ); this.optionsBg.setOrigin(0, 0); this.actionsBg = addWindow( 0, - globalScene.game.canvas.height / 6 - this.navigationContainer.height, - globalScene.game.canvas.width / 6 - 2, + globalScene.scaledCanvas.height - this.navigationContainer.height, + globalScene.scaledCanvas.width - 2, 22, ); this.actionsBg.setOrigin(0, 0); @@ -597,7 +597,7 @@ export abstract class AbstractControlSettingsUiHandler extends UiHandler { // Check if the cursor object exists, if not, create it. if (!this.cursorObj) { - const cursorWidth = globalScene.game.canvas.width / 6 - (this.scrollBar.visible ? 16 : 10); + const cursorWidth = globalScene.scaledCanvas.width - (this.scrollBar.visible ? 16 : 10); this.cursorObj = globalScene.add.nineslice(0, 0, "summary_moves_cursor", undefined, cursorWidth, 16, 1, 1, 1, 1); this.cursorObj.setOrigin(0, 0); // Set the origin to the top-left corner. this.optionsContainer.add(this.cursorObj); // Add the cursor to the options container. diff --git a/src/ui/settings/abstract-settings-ui-handler.ts b/src/ui/settings/abstract-settings-ui-handler.ts index 81d733220fc..91d5aec984a 100644 --- a/src/ui/settings/abstract-settings-ui-handler.ts +++ b/src/ui/settings/abstract-settings-ui-handler.ts @@ -56,10 +56,10 @@ export class AbstractSettingsUiHandler extends MessageUiHandler { setup() { const ui = this.getUi(); - this.settingsContainer = globalScene.add.container(1, -(globalScene.game.canvas.height / 6) + 1); + this.settingsContainer = globalScene.add.container(1, -globalScene.scaledCanvas.height + 1); this.settingsContainer.setName(`settings-${this.title}`); this.settingsContainer.setInteractive( - new Phaser.Geom.Rectangle(0, 0, globalScene.game.canvas.width / 6, globalScene.game.canvas.height / 6 - 20), + new Phaser.Geom.Rectangle(0, 0, globalScene.scaledCanvas.width, globalScene.scaledCanvas.height - 20), Phaser.Geom.Rectangle.Contains, ); @@ -70,16 +70,16 @@ export class AbstractSettingsUiHandler extends MessageUiHandler { this.optionsBg = addWindow( 0, this.navigationContainer.height, - globalScene.game.canvas.width / 6 - 2, - globalScene.game.canvas.height / 6 - 16 - this.navigationContainer.height - 2, + globalScene.scaledCanvas.width - 2, + globalScene.scaledCanvas.height - 16 - this.navigationContainer.height - 2, ); this.optionsBg.setName("window-options-bg"); this.optionsBg.setOrigin(0, 0); const actionsBg = addWindow( 0, - globalScene.game.canvas.height / 6 - this.navigationContainer.height, - globalScene.game.canvas.width / 6 - 2, + globalScene.scaledCanvas.height - this.navigationContainer.height, + globalScene.scaledCanvas.width - 2, 22, ); actionsBg.setOrigin(0, 0); @@ -375,7 +375,7 @@ export class AbstractSettingsUiHandler extends MessageUiHandler { const ret = super.setCursor(cursor); if (!this.cursorObj) { - const cursorWidth = globalScene.game.canvas.width / 6 - (this.scrollBar.visible ? 16 : 10); + const cursorWidth = globalScene.scaledCanvas.width - (this.scrollBar.visible ? 16 : 10); this.cursorObj = globalScene.add.nineslice(0, 0, "summary_moves_cursor", undefined, cursorWidth, 16, 1, 1, 1, 1); this.cursorObj.setOrigin(0, 0); this.optionsContainer.add(this.cursorObj); diff --git a/src/ui/settings/navigation-menu.ts b/src/ui/settings/navigation-menu.ts index 2f3aa50f7f3..b889ce57b61 100644 --- a/src/ui/settings/navigation-menu.ts +++ b/src/ui/settings/navigation-menu.ts @@ -124,7 +124,7 @@ export class NavigationMenu extends Phaser.GameObjects.Container { */ setup() { const navigationManager = NavigationManager.getInstance(); - const headerBg = addWindow(0, 0, globalScene.game.canvas.width / 6 - 2, 24); + const headerBg = addWindow(0, 0, globalScene.scaledCanvas.width - 2, 24); headerBg.setOrigin(0, 0); this.add(headerBg); this.width = headerBg.width; diff --git a/src/ui/starter-select-ui-handler.ts b/src/ui/starter-select-ui-handler.ts index 388e7162663..c3d0d341b1d 100644 --- a/src/ui/starter-select-ui-handler.ts +++ b/src/ui/starter-select-ui-handler.ts @@ -404,15 +404,15 @@ export class StarterSelectUiHandler extends MessageUiHandler { const langSettingKey = Object.keys(languageSettings).find(lang => currentLanguage.includes(lang)) ?? "en"; const textSettings = languageSettings[langSettingKey]; - this.starterSelectContainer = globalScene.add.container(0, -globalScene.game.canvas.height / 6); + this.starterSelectContainer = globalScene.add.container(0, -globalScene.scaledCanvas.height); this.starterSelectContainer.setVisible(false); ui.add(this.starterSelectContainer); const bgColor = globalScene.add.rectangle( 0, 0, - globalScene.game.canvas.width / 6, - globalScene.game.canvas.height / 6, + globalScene.scaledCanvas.width, + globalScene.scaledCanvas.height, 0x006860, ); bgColor.setOrigin(0, 0); @@ -1160,7 +1160,7 @@ export class StarterSelectUiHandler extends MessageUiHandler { this.filterInstructionsContainer.setVisible(true); this.starterSelectContainer.add(this.filterInstructionsContainer); - this.starterSelectMessageBoxContainer = globalScene.add.container(0, globalScene.game.canvas.height / 6); + this.starterSelectMessageBoxContainer = globalScene.add.container(0, globalScene.scaledCanvas.height); this.starterSelectMessageBoxContainer.setVisible(false); this.starterSelectContainer.add(this.starterSelectMessageBoxContainer); @@ -1187,7 +1187,7 @@ export class StarterSelectUiHandler extends MessageUiHandler { this.moveInfoOverlay = new MoveInfoOverlay({ top: true, x: 1, - y: globalScene.game.canvas.height / 6 - MoveInfoOverlay.getHeight() - 29, + y: globalScene.scaledCanvas.height - MoveInfoOverlay.getHeight() - 29, }); this.starterSelectContainer.add(this.moveInfoOverlay); @@ -1388,7 +1388,7 @@ export class StarterSelectUiHandler extends MessageUiHandler { this.starterSelectMessageBoxContainer.setY(0); this.message.setY(4); } else { - this.starterSelectMessageBoxContainer.setY(globalScene.game.canvas.height / 6); + this.starterSelectMessageBoxContainer.setY(globalScene.scaledCanvas.height); this.starterSelectMessageBox.setOrigin(0, 1); this.message.setY(singleLine ? -22 : -37); } diff --git a/src/ui/title-ui-handler.ts b/src/ui/title-ui-handler.ts index 66cb69f6a26..ab7a4d020fa 100644 --- a/src/ui/title-ui-handler.ts +++ b/src/ui/title-ui-handler.ts @@ -36,12 +36,12 @@ export class TitleUiHandler extends OptionSelectUiHandler { const ui = this.getUi(); - this.titleContainer = globalScene.add.container(0, -(globalScene.game.canvas.height / 6)); + this.titleContainer = globalScene.add.container(0, -globalScene.scaledCanvas.height); this.titleContainer.setName("title"); this.titleContainer.setAlpha(0); ui.add(this.titleContainer); - const logo = globalScene.add.image(globalScene.game.canvas.width / 6 / 2, 8, "logo"); + const logo = globalScene.add.image(globalScene.scaledCanvas.width / 2, 8, "logo"); logo.setOrigin(0.5, 0); this.titleContainer.add(logo); @@ -53,7 +53,7 @@ export class TitleUiHandler extends OptionSelectUiHandler { this.playerCountLabel = addTextObject( // Actual y position will be determined after the title menu has been populated with options - globalScene.game.canvas.width / 6 - 2, + globalScene.scaledCanvas.width - 2, 0, `? ${i18next.t("menu:playersOnline")}`, TextStyle.MESSAGE, @@ -131,7 +131,7 @@ export class TitleUiHandler extends OptionSelectUiHandler { if (ret) { // Moving player count to top of the menu - this.playerCountLabel.setY(globalScene.game.canvas.height / 6 - 13 - this.getWindowHeight()); + this.playerCountLabel.setY(globalScene.scaledCanvas.height - 13 - this.getWindowHeight()); this.splashMessage = randItem(getSplashMessages()); this.splashMessageText.setText( diff --git a/src/ui/ui.ts b/src/ui/ui.ts index 4c8f0613122..081ba46401c 100644 --- a/src/ui/ui.ts +++ b/src/ui/ui.ts @@ -121,7 +121,7 @@ export class UI extends Phaser.GameObjects.Container { private overlayActive: boolean; constructor() { - super(globalScene, 0, globalScene.game.canvas.height / 6); + super(globalScene, 0, globalScene.scaledCanvas.height); this.mode = UiMode.MESSAGE; this.modeChain = []; @@ -180,13 +180,7 @@ export class UI extends Phaser.GameObjects.Container { for (const handler of this.handlers) { handler.setup(); } - this.overlay = globalScene.add.rectangle( - 0, - 0, - globalScene.game.canvas.width / 6, - globalScene.game.canvas.height / 6, - 0, - ); + this.overlay = globalScene.add.rectangle(0, 0, globalScene.scaledCanvas.width, globalScene.scaledCanvas.height, 0); this.overlay.setName("rect-ui-overlay"); this.overlay.setOrigin(0, 0); globalScene.uiContainer.add(this.overlay); @@ -437,15 +431,15 @@ export class UI extends Phaser.GameObjects.Container { if (isTouch) { // If we are in the top left quadrant on mobile, move the tooltip to the top right corner if (pointerX <= globalScene.game.canvas.width / 2 && pointerY <= globalScene.game.canvas.height / 2) { - x = globalScene.game.canvas.width / 6 - tooltipWidth - padding; + x = globalScene.scaledCanvas.width - 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 > globalScene.game.canvas.width / 6) { + if (x + tooltipWidth + padding > globalScene.scaledCanvas.width) { 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 > globalScene.game.canvas.height / 6) { + if (y + tooltipHeight + padding > globalScene.scaledCanvas.height) { y = Math.max(padding, pointerY / 6 - tooltipHeight - padding); } }