game/js/trainingModals/registration/index.js

class Features {
  textData = {
    'newCombats.trainingModal.nextButton': 'Далее',
    'newCombats.trainingModal.closeButton': 'Закрыть',

    'newCombats.trainingModal.step1.title': 'Добро пожаловать в игру!',
    'newCombats.trainingModal.step1.text':
      'Мы поможем Вам адаптироваться в нашей браузерной онлайн игре.\nСуть игры, заключается стремлении стать непобедимым бойцом в игре среди других персонажей!\nСделать это сможет каждый игрок, путём усиления своего персонажа, предметов улучшенного качества, интеграции рун и чарок в предметы и других, интересных усилений.\nНа общем фоне слева, Вы можете наблюдать своего персонажа ( слева ), на котором показаны пустые слоты под предметы, его параметры, ваши деньги, победы/поражения, а с права, общее окно разных локаций, таких как: Магазин, Ремонтная Мастерская, Здание лото, Здание Бойцовского Клуба где проходят поединки, Почта, Переход на Страшилкину Улицу и т.д.\nДалее, мы подскажем Вам, для чего служит нижний фрейм.',

    'newCombats.trainingModal.step2.title': 'Чат и смайлы',
    'newCombats.trainingModal.step2.text':
      'Данное окно предназначено для общения между игроками в личных сообщениях, получения информативно-системных сообщений, общением между соклановцами, либо обычного общения в общем чате, к примеру, в виде торговли предметами.\nЧтобы написать сообщения, нажмите на поле ввода, введите Ваш текст и нажмите "Enter" либо кнопку отправки сообщения.\nДополнительно, к любому вашему сообщению вы можете прикрепить до 3-х смайлов.\nМы очень ценим стремление людей в общении, поэтому пожалуйста, не оскорбляйте участников игры в чате, будьте вежливы и люди вам ответят тем же.\nНу а для ярых нарушителей правил общения в чате, приготовлены соответствующие наказания, которые ограничат на время возможность отправки сообщений в чат.',

    'newCombats.trainingModal.step3.title': 'Список онлайна',
    'newCombats.trainingModal.step3.text':
      'Каждый человек, может отправлять персональные сообщения, на игровом слэнге - приваты.\nСделать это можно дважды кликнув по никнейму игрока из текущего списка онлайна либо из общего чата, привата, кланового чата.\nВсе люди, которые отображены, это реальные люди, которые находятся в игре.\nДополнительно, если это Вам необходимо, Вы можете отключить функцию показа "всех игроков в игре" нажав соответствующу опцию ( галочку ), в самом конце списка онлайна.',

    'newCombats.trainingModal.step4.title': 'Начало игры',
    'newCombats.trainingModal.step4.text': 'В игре существует 9 классов персонажей, 5 воинских и 4 магических.\n Классы определяются по предметам и параметрам персонажа, а именно:\n Силач ( Топоры ) - Сила.\n Уворот ( Кинжалы ) - Ловкость.\n Крит ( Мечи ) - Интуиция.\n Танк ( Дубина и Щит ) - Выносливость. \n Критоуворот ( Кинжалы ) - Интуиция и Ловкость.\n Маги "стихий" ( Посохи ) - Интеллект и Мудрость.\n Дополнительно, каждый предмет имеет "требования", по которым легко понять и определить на какой именно класс, этот предмет и если у Вас не хватает параметров, либо они распределены неверно, Вы сможете перераспределить параметры на 2 этаже здания "Бойцовский Клуб". \n \nКаждый Класс, Воинский или Магический, конкурирует с другим классом, он может быть сильнее или слабее, это уже определяет сам игрок и то, насколько хорошие предметы у него имеются, а так же то, какие чарки и руны в них интегрированы.\n Так же, каждый класс, вонский или магический, может использовать приёмы в бою, выбрать их можно во вкладке "Умения" > "Приёмы". ',

    'newCombats.trainingModal.step5.title': 'Спасибо за ознакомление с первым этапом обучения!',
    'newCombats.trainingModal.step5.text':
      'Мы дарим Вам сундук с предметами, исходя из выбранного Вами класса персонажа при регистрации! Найти его можно во вкладке "Инвентарь > Прочее".\nОткрывайте, надевайте предметы, отправляйтесь в здание "Бойцовского Клуба", а далее в "Зал Воинов" и начните ваши первые сражения нажав по вкладке "поединки", создавайте хаотический тип сражений и начните свой путь, путь настоящего воина, ну или мага!\nНо будьте внимательны, срок годности предметов в сундуке составляет 10 дней, по истечению которых, предметы будут сломаны и вы не сможете их использовать!',
  };

  memoCountSteps = 0;

  constructor() {}

  getTextForModal(key) {
    if (!key) {
      return '[Отсутствует текст].';
    }

    return this.textData[key] || `[${key}].`;
  }

  getCountSteps() {
    if (this.memoCountSteps > 0) {
      return this.memoCountSteps;
    }

    let countSteps = 1;

    while (true) {
      if (!this.textData[`newCombats.trainingModal.step${countSteps}.title`]) {
        countSteps -= 1;
        break;
      }
      countSteps++;
    }

    this.memoCountSteps = countSteps;
    return countSteps;
  }
}

class TrainingCookie {
  static cookieName = 'registrationModal';

  static isExistCookie() {
    let matches = document.cookie.match(
      new RegExp('(?:^|; )' + this.cookieName.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + '=([^;]*)')
    );
    return matches ? decodeURIComponent(matches[1]) : undefined;
  }

  static deleteCookie() {
    document.cookie = `${this.cookieName}=true; max-age=0`;
  }
}

class ModalLocalStorage {
  stepItemName = 'trainingModalCurrentStep';
  hideRegistrationModal = 'hideRegistrationModal';
  develop = 'trainingModalDevelop';

  constructor() {}

  get getStep() {
    return localStorage.getItem(this.stepItemName);
  }

  get getHideRegistrationModal() {
    return localStorage.getItem(this.hideRegistrationModal);
  }

  get isDevelop() {
    return localStorage.getItem(this.develop);
  }

  set changeStep(step) {
    localStorage.setItem(this.stepItemName, step);
  }

  addHideRegistrationModal() {
    localStorage.setItem(this.hideRegistrationModal, true);
  }

  removeData(name) {
    if (name == 'step') {
      localStorage.removeItem(this.stepItemName);
    } else if (name == 'hide') {
      localStorage.removeItem(this.hideRegistrationModal);
    }
  }
}

class ModalWindowRender {
  featuresService = undefined;
  localStorageService = undefined;
  externalStylesService = undefined;

  step = 1;
  $modalMain = document.createElement('div');
  $step = null;
  $title = null;
  $text = null;
  $button = null;

  constructor(featuresService, localStorageService, externalStylesService) {
    this.featuresService = featuresService;
    this.localStorageService = localStorageService;
    this.externalStylesService = externalStylesService;
  }

  createModal() {
    this.$modalMain.id = 'trainingModalMain';

    this.$modalMain.innerHTML = `
    <div id="trainingModalBackground">
      <div id="trainingModalContainerHihgtlightes">
        <div id="trainingModalContainer">
          <div id="trainingModalContentContainer">
            <p id="trainingModalCurrentStep"></p>
            <h3 id="trainingModalTitle"></h3>

            <div id="trainingModalTextContainer">
              <p id="trainingModalText"></p>
            </div>
          </div>

          <button id="trainingModalButton"></button>
        </div>
      </div>
    </div>`;

    document.body.append(this.$modalMain);
  }

  removeModal() {
    this.$modalMain.remove();
  }

  initializeModalContent() {
    this.$step = document.getElementById('trainingModalCurrentStep');
    this.$title = document.getElementById('trainingModalTitle');
    this.$text = document.getElementById('trainingModalText');
    this.$button = document.getElementById('trainingModalButton');

    this.externalStylesService.changeStylesForRelines = false;
    this.changeModalContent = Number(this.localStorageService.getStep) || 1;
  }

  get button() {
    return this.$button;
  }

  set changeModalContent(step) {
    const countSteps = this.featuresService.getCountSteps();

    switch (step) {
      case 1:
        this.externalStylesService.addStylesForStep1();
        break;
      case 2:
        this.externalStylesService.removeStylesOfHighlightedElements();
        this.externalStylesService.addStylesForStep2();
        break;
      case 3:
        this.externalStylesService.removeStylesOfHighlightedElements();
        this.externalStylesService.addStylesForStep3();
        break;
      case 4:
        this.externalStylesService.removeStylesOfHighlightedElements();
        break;
      case 5:
        this.externalStylesService.removeStylesOfHighlightedElements();
        break;
    }

    this.$step.textContent = `${step}/${countSteps}`;
    this.$title.textContent = this.featuresService.getTextForModal(`newCombats.trainingModal.step${step}.title`);
    this.$text.innerText = this.featuresService.getTextForModal(`newCombats.trainingModal.step${step}.text`);

    this.localStorageService.changeStep = step;

    this.$button.textContent = this.featuresService.getTextForModal(
      `newCombats.trainingModal.${step < countSteps ? 'nextButton' : 'closeButton'}`
    );
  }
}

class ExternalStyles {
  $relineX = document.getElementById('reline1');
  $relineY = document.getElementById('reline2');

  constructor() {}

  set changeStylesForRelines(showRelines) {
    this.$relineX.style.zIndex = showRelines ? 1001 : -1;
    this.$relineY.style.zIndex = showRelines ? 1000 : -1;
  }

  removeStylesOfHighlightedElements() {
    const $highlightedElements = document.getElementsByClassName('highlightedTrainingElement');
    const $highlightedBackgrounds = document.getElementsByClassName('highlightedTrainingElementBackground');
    const $highlightedPositions = document.getElementsByClassName('highlightedTrainingElementPosition');
    const $highlightedZIndexes = document.getElementsByClassName('highlightedTrainingElementZIndex');

    for (let elem of $highlightedElements) {
      elem.classList.remove('highlightedTrainingElement');
    }

    for (let elem of $highlightedBackgrounds) {
      elem.classList.remove('highlightedTrainingElementBackground');
    }

    for (let elem of $highlightedPositions) {
      elem.classList.remove('highlightedTrainingElementPosition');
    }

    for (let elem of $highlightedZIndexes) {
      elem.classList.remove('highlightedTrainingElementZIndex');
    }
  }

  addStylesForStep1() {
    const $header = document.getElementById('mainHeader');
    const $frame = document.getElementById('sectionTd');

    $header.classList.add('highlightedTrainingElement');
    $frame.classList.add('highlightedTrainingElement', 'highlightedTrainingElementPosition');
  }

  addStylesForStep2() {
    const $chatWindow = document.getElementById('chat_block');
    const $leftIcon = document.getElementById('chatLeftIcon');
    const $textInput = document.getElementById('textmsg');
    const $sendButton = document.getElementById('sendButtonTextMsg');

    $chatWindow.classList.add('highlightedTrainingElement', 'highlightedTrainingElementBackground');
    $leftIcon.classList.add('highlightedTrainingElement', 'highlightedTrainingElementPosition');
    $textInput.classList.add('highlightedTrainingElement', 'highlightedTrainingElementPosition');
    $sendButton.classList.add('highlightedTrainingElement', 'highlightedTrainingElementPosition');
  }

  addStylesForStep3() {
    const $online = document.getElementById('online');

    $online.classList.add('highlightedTrainingElement', 'highlightedTrainingElementPosition');
  }
}

function* stepForwardGenerator({ countSteps, renderInstance, localStorageInstance, externalStylesInstance }) {
  let currentStep = Number(localStorageInstance.getStep);

  while (true) {
    if (currentStep < countSteps) {
      currentStep += 1;
      externalStylesInstance.removeStylesOfHighlightedElements();
      renderInstance.changeModalContent = currentStep;
    } else {
      externalStylesInstance.changeStylesForRelines = true;
      externalStylesInstance.removeStylesOfHighlightedElements();
      renderInstance.removeModal();
      localStorageInstance.removeData('step');
      TrainingCookie.deleteCookie();
    }

    yield;
  }
}

document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => {
    const modalLocalStorage = new ModalLocalStorage();
    const isDevelop = modalLocalStorage.isDevelop;

    if (TrainingCookie.isExistCookie() || isDevelop) {
      if (modalLocalStorage.getHideRegistrationModal && !modalLocalStorage.getStep && !isDevelop) {
        return;
      }

      modalLocalStorage.addHideRegistrationModal();

      const features = new Features();
      const externalStyles = new ExternalStyles();
      const modalWindowRender = new ModalWindowRender(features, modalLocalStorage, externalStyles);

      modalWindowRender.createModal();
      modalWindowRender.initializeModalContent();

      const changeStep = stepForwardGenerator({
        countSteps: features.getCountSteps(),
        renderInstance: modalWindowRender,
        localStorageInstance: modalLocalStorage,
        externalStylesInstance: externalStyles,
      });

      const $button = modalWindowRender.button;

      $button.onclick = () => {
        changeStep.next();
      };
    } else {
      modalLocalStorage.removeData('step');
      modalLocalStorage.removeData('hide');
    }
  }, 1000);
});