18xchat/assets/Scripts/Sub/UI/SimpleLanguagePanel.ts

import {
  _decorator,
  Component,
  Node,
  Button,
  Label,
  Color,
  Sprite,
  tween,
  Vec3,
} from "cc";
import li_BaseView from "../../Main/Common/li_BaseView";
import LanguageUtils, { LanguageType } from "../../Main/Common/LanguageUtils";
import AudioManager from "../../Main/Manager/AudioManager";
import ConfigManager from "../../chat18x/manager/ConfigManager";

const { ccclass, property } = _decorator;

interface LanguageButton {
  button: Button;
  label: Label;
  checkMark: Node;
  bg: Sprite;
  language: LanguageType;
}

@ccclass("SimpleLanguagePanel")
export class SimpleLanguagePanel extends li_BaseView {
  @property(Button)
  private closeBtn: Button = null;

  @property(Node)
  private languageDrawdown: Node = null;

  @property(Label)
  private titleLabel: Label = null;

  @property(Button)
  private btnEnglish: Button = null;

  @property(Button)
  private btnChinese: Button = null;

  @property(Button)
  private btnHindi: Button = null;

  @property(Button)
  private btnFrench: Button = null;

  @property(Button)
  private btnGerman: Button = null;

  @property(Node)
  private panelBg: Node = null;

  private languageButtons: LanguageButton[] = [];
  private currentSelectedLang: LanguageType = null;

  onLoadCT() {
    super.onLoadCT();
    this.initUI();
    this.bindEvents();
    this.playEnterAnimation();
  }

  onEnable() {
    this.currentSelectedLang = LanguageUtils.CurrentLanguage;
    this.updateSelection();
    this.languageDrawdown.active = false;
  }

  public onClickLanguageSelect() {
    this.languageDrawdown.active = true;
  }

  private initUI() {
    // 初始化语言按钮数组
    this.initLanguageButton(this.btnEnglish, LanguageType.EN, "English");
    this.initLanguageButton(this.btnChinese, LanguageType.CN, "中文");
    this.initLanguageButton(this.btnHindi, LanguageType.HI, "हिंदी");
    this.initLanguageButton(this.btnFrench, LanguageType.FR, "Français");
    this.initLanguageButton(this.btnGerman, LanguageType.DE, "Deutsch");
  }

  private initLanguageButton(
    button: Button,
    language: LanguageType,
    displayName: string
  ) {
    if (!button) return;

    const node = button.node;

    // 查找或创建标签
    let labelNode = node.getChildByName("Label");
    if (!labelNode) {
      labelNode = node.getChildByName("label");
    }

    let label: Label = null;
    if (labelNode) {
      label = labelNode.getComponent(Label);
      if (label) {
        label.string = displayName;
      }
    }

    // 查找或创建选中标记
    let checkMark = node.getChildByName("CheckMark");
    if (!checkMark) {
      checkMark = node.getChildByName("checkmark");
    }
    if (checkMark) {
      checkMark.active = false;
    }

    // 获取背景
    let bg = node.getComponent(Sprite);
    if (!bg) {
      const bgNode = node.getChildByName("Bg");
      if (bgNode) {
        bg = bgNode.getComponent(Sprite);
      }
    }

    this.languageButtons.push({
      button,
      label,
      checkMark,
      bg,
      language,
    });
  }

  private bindEvents() {
    if (this.closeBtn) {
      this.closeBtn.node.on(Button.EventType.CLICK, this.onCloseBtnClick, this);
    }

    // 绑定语言按钮事件
    this.languageButtons.forEach((langBtn) => {
      if (langBtn.button) {
        langBtn.button.node.on(
          Button.EventType.CLICK,
          () => {
            this.onLanguageSelect(langBtn.language);
          },
          this
        );
      }
    });
  }

  private onLanguageSelect(language: LanguageType) {
    if (this.currentSelectedLang === language) {
      return;
    }

    //AudioManager.I.playSfx("click");

    this.currentSelectedLang = language;
    LanguageUtils.setLanguage(language);
    this.updateSelection();

    // 播放选中动画
    const selectedBtn = this.languageButtons.find(
      (btn) => btn.language === language
    );
    if (selectedBtn && selectedBtn.button) {
      this.playSelectAnimation(selectedBtn.button.node);
    }

    // 延迟关闭面板
    this.scheduleOnce(() => {
      this.playExitAnimation(() => {
        this.close();
      });
    }, 0.5);
  }

  private updateSelection() {
    this.languageButtons.forEach((langBtn) => {
      const isSelected = langBtn.language === this.currentSelectedLang;

      // 更新选中标记
      if (langBtn.checkMark) {
        langBtn.checkMark.active = isSelected;
      }

      // 更新背景色
      if (langBtn.bg) {
        if (isSelected) {
          langBtn.bg.color = new Color(150, 255, 150, 255);
        } else {
          langBtn.bg.color = new Color(255, 255, 255, 255);
        }
      }

      // 更新按钮交互性
      if (langBtn.button) {
        langBtn.button.interactable = !isSelected;
      }
    });
  }

  private playSelectAnimation(node: Node) {
    tween(node)
      .to(0.1, { scale: new Vec3(1.1, 1.1, 1) })
      .to(0.1, { scale: new Vec3(1, 1, 1) })
      .start();
  }

  private playEnterAnimation() {
    if (this.panelBg) {
      this.panelBg.scale = new Vec3(0.8, 0.8, 1);
      tween(this.panelBg)
        .to(0.3, { scale: new Vec3(1, 1, 1) }, { easing: "backOut" })
        .start();
    }
  }

  private playExitAnimation(callback: () => void) {
    if (this.panelBg) {
      tween(this.panelBg)
        .to(0.2, { scale: new Vec3(0.8, 0.8, 1) }, { easing: "backIn" })
        .call(callback)
        .start();
    } else {
      callback();
    }
  }

  private onCloseBtnClick() {
    //AudioManager.I.playSfx("click");
    this.playExitAnimation(() => {
      this.close();
    });
  }

  onDestroy() {
    // if (this.closeBtn) {
    //   this.closeBtn.node.off(
    //     Button.EventType.CLICK,
    //     this.onCloseBtnClick,
    //     this
    //   );
    // }

    // this.languageButtons.forEach((langBtn) => {
    //   if (langBtn.button) {
    //     langBtn.button.node.targetOff(this);
    //   }
    // });

    super.onDestroy();
  }
}