[UI] Adding container to set transparency of optionSelectText (pagefa…

…ultgames#5396)
IBBCalc · Feb 27, 2025 · aae9a1f · aae9a1f
1 parent b730f0e
commit aae9a1f
Showing 1 changed file with 12 additions and 8 deletions.
diff --git a/src/ui/abstact-option-select-ui-handler.ts b/src/ui/abstact-option-select-ui-handler.ts
@@ -36,6 +36,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[];
@@ -54,6 +55,7 @@ export default abstract class AbstractOptionSelectUiHandler extends UiHandler {
   protected unskippedIndices: number[] = [];
 
   protected defaultTextStyle: TextStyle = TextStyle.WINDOW;
+  protected textContent: string;
 
 
   constructor(mode: Mode | null) {
@@ -79,6 +81,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;
@@ -124,19 +129,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) {
@@ -185,7 +189,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());
     }
@@ -279,7 +283,7 @@ export default abstract class AbstractOptionSelectUiHandler extends UiHandler {
     }
 
     this.blockInput = false;
-    this.optionSelectText.setAlpha(1);
+    this.optionSelectTextContainer.setAlpha(1);
     this.cursorObj?.setAlpha(1);
   }