18xchat/assets/Scripts/chat18x/ui/panels/SettingPanel.ts

import {
  _decorator,
  Component,
  Node,
  Button,
  Label,
  Color,
  Sprite,
  tween,
  Vec3,
} from "cc";
import Utils from "../../../Main/Common/Utils";
import li_BaseView from "../../../Main/Common/li_BaseView";
import { GButton } from "../../../Main/Common/GButton";
import LanguageUtils, {
  LanguageType,
} from "../../../Main/Common/LanguageUtils";
import AudioManager from "../../../Main/Manager/AudioManager";
import PlayerDataManager from "../../../Main/Manager/PlayerDataManager";
const { ccclass, property } = _decorator;

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

@ccclass("SettingPanel")
export class SettingPanel extends li_BaseView {
  private _nodeTab: any = {};

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

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

  private languageDrawdown: Node;
  private curLanguage: Label;
  private languageButtons: LanguageButton[] = [];
  private currentSelectedLang: LanguageType = null;
  protected start(): void {}

  onLoadCT(): void {
    Utils.parseNode(this.node, this._nodeTab);

    this.initUI();
    this.registerListener();

    if (this.languageDrawdown) {
      this.languageDrawdown.active = false;
      this.languageDrawdown.setScale(new Vec3(1, 0, 1));
    }
  }
  onEnable() {
    this.currentSelectedLang = LanguageUtils.CurrentLanguage;
    this.updateSelection();
    this.updateAudioButtonStates();

    this.playEnterAnimation();
  }

  private music_on: Node;
  private music_off: Node;
  private sound_on: Node;
  private sound_off: Node;
  private initUI() {
    this.languageDrawdown = this._nodeTab.languageSelection;
    this.curLanguage = this._nodeTab.curLanguage.getComponent(Label);
    this.initLanguageButton(
      this._nodeTab.Language1.getComponent(Button),
      LanguageType.EN,
      "English"
    );
    this.initLanguageButton(
      this._nodeTab.Language2.getComponent(Button),
      LanguageType.HI,
      "हिंदी"
    );

    this.languageButtons.forEach((b) => {
      if (b.language == LanguageUtils.CurrentLanguage) {
        this.curLanguage.string = b.label.string;
      }
    });

    this.music_on = this._nodeTab.MusicBtn.getChildByName("On");
    this.music_off = this._nodeTab.MusicBtn.getChildByName("Off");
    this.sound_on = this._nodeTab.SoundBtn.getChildByName("On");
    this.sound_off = this._nodeTab.SoundBtn.getChildByName("Off");

    this.updateAudioButtonStates();
  }

  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 updateAudioButtonStates() {
    const soundState = PlayerDataManager.I.IsSoundOn;
    this.sound_on.active = soundState;
    this.sound_off.active = !soundState;

    const musicState = PlayerDataManager.I.IsMusicOn;
    this.music_on.active = musicState;
    this.music_off.active = !musicState;
  }

  registerListener() {
    GButton.BandClick(this._nodeTab.MusicBtn, this.switchMusic, this);
    GButton.BandClick(this._nodeTab.SoundBtn, this.switchSound, this);
    GButton.BandClick(
      this._nodeTab.LanguageBtn,
      this.openLanguageSelection,
      this
    );

    // GButton.BandClick(this._nodeTab.Language1, this.switchToEn, this);
    // GButton.BandClick(this._nodeTab.Language2, this.swithcToHi, this);

    GButton.BandClick(this._nodeTab.closeBtn, this.close, this);

    this.languageButtons.forEach((langBtn) => {
      if (langBtn.button) {
        langBtn.button.node.on(
          Button.EventType.CLICK,
          () => {
            this.onLanguageSelect(langBtn.language);
          },
          this
        );
      }
    });
  }
  switchSound() {
    const currentState = PlayerDataManager.I.IsSoundOn;
    PlayerDataManager.I.SetSoundOn(!currentState);
    this.updateAudioButtonStates();
  }

  switchMusic() {
    const currentState = PlayerDataManager.I.IsMusicOn;
    PlayerDataManager.I.SetMusicOn(!currentState);
    this.updateAudioButtonStates();
  }

  isShow: boolean = false;
  openLanguageSelection() {
    if (!this.isShow) {
      if (this.languageDrawdown) {
        this.languageDrawdown.active = true;
        tween(this.languageDrawdown)
          .to(0.2, { scale: new Vec3(1, 1, 1) })
          .start();
      }
    } else {
      tween(this.languageDrawdown)
        .to(0.2, { scale: new Vec3(1, 0, 1) })
        .start();
    }
    this.isShow = !this.isShow;
  }

  switchToEn() {
    this.onLanguageSelect(LanguageType.EN);
  }

  switchToCn() {
    this.onLanguageSelect(LanguageType.CN);
  }

  swithcToHi() {
    this.onLanguageSelect(LanguageType.HI);
  }

  private onLanguageSelect(language: LanguageType) {
    if (this.currentSelectedLang === language) {
      return;
    }
    //AudioManager.I.PlayEffect("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.curLanguage.string = selectedBtn.label.string;

    if (this.languageDrawdown) {
      tween(this.languageDrawdown)
        .to(0.2, { scale: new Vec3(1, 0, 1) })
        .start();
    }
    this.isShow = false;
  }

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