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

This commit is contained in:
Wlowscha 2025-02-23 00:38:11 +01:00 committed by GitHub
parent b1b71dbd6d
commit bd288ad862
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -35,6 +35,7 @@ const scrollDownLabel = "↓";
export default abstract class AbstractOptionSelectUiHandler extends UiHandler { export default abstract class AbstractOptionSelectUiHandler extends UiHandler {
protected optionSelectContainer: Phaser.GameObjects.Container; protected optionSelectContainer: Phaser.GameObjects.Container;
protected optionSelectTextContainer: Phaser.GameObjects.Container;
protected optionSelectBg: Phaser.GameObjects.NineSlice; protected optionSelectBg: Phaser.GameObjects.NineSlice;
protected optionSelectText: BBCodeText; protected optionSelectText: BBCodeText;
protected optionSelectIcons: Phaser.GameObjects.Sprite[]; protected optionSelectIcons: Phaser.GameObjects.Sprite[];
@ -53,6 +54,7 @@ export default abstract class AbstractOptionSelectUiHandler extends UiHandler {
protected unskippedIndices: number[] = []; protected unskippedIndices: number[] = [];
protected defaultTextStyle: TextStyle = TextStyle.WINDOW; protected defaultTextStyle: TextStyle = TextStyle.WINDOW;
protected textContent: string;
constructor(mode: Mode | null) { constructor(mode: Mode | null) {
@ -78,6 +80,9 @@ export default abstract class AbstractOptionSelectUiHandler extends UiHandler {
this.optionSelectBg.setOrigin(1, 1); this.optionSelectBg.setOrigin(1, 1);
this.optionSelectContainer.add(this.optionSelectBg); this.optionSelectContainer.add(this.optionSelectBg);
this.optionSelectTextContainer = globalScene.add.container(0, 0);
this.optionSelectContainer.add(this.optionSelectTextContainer);
this.optionSelectIcons = []; this.optionSelectIcons = [];
this.scale = getTextStyleOptions(TextStyle.WINDOW, globalScene.uiTheme).scale; 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.setOrigin(0, 0);
this.optionSelectText.setName("text-option-select"); 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.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.width = Math.max(this.optionSelectText.displayWidth + 24, this.getWindowWidth());
this.optionSelectBg.height = this.getWindowHeight(); 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 // 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]`
: `[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) => { options.forEach((option: OptionSelectItem, i: number) => {
if (option.item) { if (option.item) {
@ -184,7 +188,7 @@ export default abstract class AbstractOptionSelectUiHandler extends UiHandler {
if (this.config.delay) { if (this.config.delay) {
this.blockInput = true; this.blockInput = true;
this.optionSelectText.setAlpha(0.5); this.optionSelectTextContainer.setAlpha(0.5);
this.cursorObj?.setAlpha(0.8); this.cursorObj?.setAlpha(0.8);
globalScene.time.delayedCall(Utils.fixedInt(this.config.delay), () => this.unblockInput()); 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.blockInput = false;
this.optionSelectText.setAlpha(1); this.optionSelectTextContainer.setAlpha(1);
this.cursorObj?.setAlpha(1); this.cursorObj?.setAlpha(1);
} }