[UI] Adding container to set transparency of optionSelectText (#5396)

Author: Wlowscha

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);
   }