diff --git a/src/ui/abstact-option-select-ui-handler.ts b/src/ui/abstact-option-select-ui-handler.ts index 10dbedd7b2f..07e43a344dd 100644 --- a/src/ui/abstact-option-select-ui-handler.ts +++ b/src/ui/abstact-option-select-ui-handler.ts @@ -35,6 +35,7 @@ const scrollDownLabel = "↓"; export default abstract class AbstractOptionSelectUiHandler extends UiHandler { protected optionSelectContainer: Phaser.GameObjects.Container; + protected optionSelectTextContainer: Phaser.GameObjects.Container; protected optionSelectBg: Phaser.GameObjects.NineSlice; protected optionSelectText: BBCodeText; protected optionSelectIcons: Phaser.GameObjects.Sprite[]; @@ -53,6 +54,7 @@ export default abstract class AbstractOptionSelectUiHandler extends UiHandler { protected unskippedIndices: number[] = []; protected defaultTextStyle: TextStyle = TextStyle.WINDOW; + protected textContent: string; constructor(mode: Mode | null) { @@ -78,6 +80,9 @@ export default abstract class AbstractOptionSelectUiHandler extends UiHandler { this.optionSelectBg.setOrigin(1, 1); this.optionSelectContainer.add(this.optionSelectBg); + this.optionSelectTextContainer = globalScene.add.container(0, 0); + this.optionSelectContainer.add(this.optionSelectTextContainer); + this.optionSelectIcons = []; this.scale = getTextStyleOptions(TextStyle.WINDOW, globalScene.uiTheme).scale; @@ -123,19 +128,18 @@ export default abstract class AbstractOptionSelectUiHandler extends UiHandler { ); this.optionSelectText.setOrigin(0, 0); this.optionSelectText.setName("text-option-select"); - this.optionSelectContainer.add(this.optionSelectText); + this.optionSelectTextContainer.add(this.optionSelectText); this.optionSelectContainer.setPosition((globalScene.game.canvas.width / 6) - 1 - (this.config?.xOffset || 0), -48 + (this.config?.yOffset || 0)); this.optionSelectBg.width = Math.max(this.optionSelectText.displayWidth + 24, this.getWindowWidth()); this.optionSelectBg.height = this.getWindowHeight(); - this.optionSelectText.setPosition(this.optionSelectBg.x - this.optionSelectBg.width + 12 + 24 * this.scale, this.optionSelectBg.y - this.optionSelectBg.height + 2 + 42 * this.scale); + this.optionSelectTextContainer.setPosition(this.optionSelectBg.x - this.optionSelectBg.width + 12 + 24 * this.scale, this.optionSelectBg.y - this.optionSelectBg.height + 2 + 42 * this.scale); // Now that the container and background widths are established, we can set up the proper text restricted to visible options - this.optionSelectText.setText(optionsWithScroll.map(o => o.item + this.textContent = optionsWithScroll.map(o => o.item ? `[shadow=${getTextColor(o.style ?? this.defaultTextStyle, true, globalScene.uiTheme)}][color=${getTextColor(o.style ?? TextStyle.WINDOW, false, globalScene.uiTheme)}] ${o.label}[/color][/shadow]` : `[shadow=${getTextColor(o.style ?? this.defaultTextStyle, true, globalScene.uiTheme)}][color=${getTextColor(o.style ?? TextStyle.WINDOW, false, globalScene.uiTheme)}]${o.label}[/color][/shadow]` - ).join("\n") - - ); + ).join("\n"); + this.optionSelectText.setText(this.textContent); options.forEach((option: OptionSelectItem, i: number) => { if (option.item) { @@ -184,7 +188,7 @@ export default abstract class AbstractOptionSelectUiHandler extends UiHandler { if (this.config.delay) { this.blockInput = true; - this.optionSelectText.setAlpha(0.5); + this.optionSelectTextContainer.setAlpha(0.5); this.cursorObj?.setAlpha(0.8); globalScene.time.delayedCall(Utils.fixedInt(this.config.delay), () => this.unblockInput()); } @@ -278,7 +282,7 @@ export default abstract class AbstractOptionSelectUiHandler extends UiHandler { } this.blockInput = false; - this.optionSelectText.setAlpha(1); + this.optionSelectTextContainer.setAlpha(1); this.cursorObj?.setAlpha(1); }