Дозаливка

js/registrationTraining/features/changeStylesForRelines.js

@@ -0,0 +1,11 @@
+/**
+ * @param {boolean} showRelines
+ */
+
+export const changeStylesForRelines = (showRelines) => {
+  const $relineX = document.getElementById('reline1');
+  const $relineY = document.getElementById('reline2');
+
+  $relineX.style.zIndex = showRelines ? 1001 : -1;
+  $relineY.style.zIndex = showRelines ? 1000 : -1;
+};

js/registrationTraining/features/createModalElements.js

@@ -0,0 +1,27 @@
+import { getTextForModal } from './getTextForModal.js';
+
+export const createModalElements = () => {
+  const $modalMain = document.createElement('div');
+
+  $modalMain.id = 'trainingModalMain';
+
+  $modalMain.innerHTML = `
+  <div id="trainingModalBackground">
+    <div id="trainingModalContainerHihgtlightes">
+      <div id="trainingModalContainer">
+        <div id="trainingModalContentContainer">
+          <p id="trainingModalCurrentStep">1/6</p>
+          <h3 id="trainingModalTitle">Title</h3>
+
+          <div id="trainingModalTextContainer">
+            <p id="trainingModalText">Text</p>
+          </div>
+        </div>
+
+        <button id="nextTrainingModal" class="trainingModalButton">TEST/ÒÅÑÒ</button>
+      </div>
+    </div>
+  </div>`;
+
+  document.body.append($modalMain);
+};

js/registrationTraining/features/getTextForModal.js

@@ -0,0 +1,14 @@
+import { dataText } from '../text.js';
+
+/**
+ * @param {string} key
+ * @returns {string}
+ */
+
+export const getTextForModal = (key) => {
+  if (!key) {
+    return '[Îòñóòâóåò value].';
+  }
+
+  return dataText[key] ?? `[${key}].`;
+};

js/registrationTraining/features/index.js

@@ -0,0 +1,5 @@
+export * from './changeStylesForRelines.js';
+export * from './createModalElements.js';
+export * from './getTextForModal.js';
+export * from './removeStylesOfHighlightedElements.js';
+export * from './setModalContent.js';

js/registrationTraining/features/removeStylesOfHighlightedElements.js

@@ -0,0 +1,22 @@
+export const 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');
+  }
+};

js/registrationTraining/features/setModalContent.js

@@ -0,0 +1,21 @@
+import { getTextForModal } from './getTextForModal.js';
+
+/**
+ * @param {
+ *  {
+ * keyTitle: string,
+ * keyContent: string,
+ * currentStep: number
+ *  }
+ * } data
+ */
+
+export const setModalContent = ({ keyTitle, keyContent, currentStep }) => {
+  const $step = document.getElementById('trainingModalCurrentStep');
+  const $title = document.getElementById('trainingModalTitle');
+  const $text = document.getElementById('trainingModalText');
+
+  $step.textContent = `${currentStep}/6`;
+  $title.textContent = getTextForModal(keyTitle);
+  $text.textContent = getTextForModal(keyContent);
+};

js/registrationTraining/index.js

@@ -0,0 +1,62 @@
+import { createModalElements, removeStylesOfHighlightedElements, changeStylesForRelines } from './features/index.js';
+import { another, chatWindow, commonFrame, onlineList, slotsForThings, stats } from './modalSteps/index.js';
+import { allowRender, cleanState, setStep } from './redux/actions.js';
+import { dispatch, getState, subscribe } from './redux/store.js';
+
+const openRegistrationTrainingModal = () => {
+  if (localStorage.getItem('modalTest') === 'kravich') {
+    createModalElements();
+    dispatch(allowRender());
+  }
+};
+
+subscribe(() => {
+  const { currentStep, isAllowRender } = getState();
+
+  if (!isAllowRender) {
+    return;
+  }
+
+  switch (currentStep) {
+    case 1:
+      commonFrame(currentStep);
+      break;
+    case 2:
+      chatWindow(currentStep);
+      break;
+    case 3:
+      onlineList(currentStep);
+      break;
+    case 4:
+      slotsForThings(currentStep);
+      break;
+    case 5:
+      stats(currentStep);
+      break;
+    case 6:
+      another(currentStep);
+      break;
+  }
+
+  if (currentStep < 6) {
+    const $nextButton = document.getElementById('nextTrainingModal');
+
+    $nextButton.onclick = () => {
+      dispatch(setStep(currentStep + 1));
+    };
+  } else {
+    const $modalCloseButton = document.getElementById('closeTrainingModal');
+    const $modalMain = document.getElementById('trainingModalMain');
+
+    $modalCloseButton.onclick = () => {
+      changeStylesForRelines(true);
+      removeStylesOfHighlightedElements();
+
+      $modalMain.remove();
+
+      dispatch(cleanState());
+    };
+  }
+});
+
+openRegistrationTrainingModal();

js/registrationTraining/modalSteps/another.js

@@ -0,0 +1,30 @@
+import { getTextForModal, setModalContent, removeStylesOfHighlightedElements } from '../features/index.js';
+
+/**
+ * @param {string} currentStep
+ */
+
+export const another = (currentStep) => {
+  removeStylesOfHighlightedElements();
+
+  const $stats = document.getElementById('anotherOfPerson');
+
+  const $modalContainer = document.getElementById('trainingModalContainer');
+  const $modalNextButton = document.getElementById('nextTrainingModal');
+  const $modalCloseButton = document.createElement('button');
+
+  $modalCloseButton.id = 'closeTrainingModal';
+  $modalCloseButton.classList.add('trainingModalButton');
+  $modalCloseButton.textContent = getTextForModal('newCombats.trainingModal.closeButton');
+
+  $modalContainer.removeChild($modalNextButton);
+  $modalContainer.append($modalCloseButton);
+
+  // $stats.classList.add('highlightedTrainingElement');
+
+  setModalContent({
+    keyTitle: 'newCombats.trainingModal.step6.title',
+    keyContent: 'newCombats.trainingModal.step6.text',
+    currentStep,
+  });
+};

js/registrationTraining/modalSteps/chatWindow.js

@@ -0,0 +1,25 @@
+import { removeStylesOfHighlightedElements, setModalContent } from '../features/index.js';
+
+/**
+ * @param {string} currentStep
+ */
+
+export const chatWindow = (currentStep) => {
+  removeStylesOfHighlightedElements();
+
+  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');
+
+  setModalContent({
+    keyTitle: 'newCombats.trainingModal.step2.title',
+    keyContent: 'newCombats.trainingModal.step2.text',
+    currentStep,
+  });
+};

js/registrationTraining/modalSteps/commonFrame.js

@@ -0,0 +1,21 @@
+import { changeStylesForRelines, setModalContent } from '../features/index.js';
+
+/**
+ * @param {string} currentStep
+ */
+
+export const commonFrame = (currentStep) => {
+  changeStylesForRelines(false);
+
+  const $header = document.getElementById('mainHeader');
+  const $frame = document.getElementById('sectionTd');
+
+  $header.classList.add('highlightedTrainingElement');
+  $frame.classList.add('highlightedTrainingElement', 'highlightedTrainingElementPosition');
+
+  setModalContent({
+    keyTitle: 'newCombats.trainingModal.step1.title',
+    keyContent: 'newCombats.trainingModal.step1.text',
+    currentStep,
+  });
+};

js/registrationTraining/modalSteps/index.js

@@ -0,0 +1,6 @@
+export * from './another.js';
+export * from './chatWindow.js';
+export * from './commonFrame.js';
+export * from './onlineList.js';
+export * from './slotsForThings.js';
+export * from './stats.js';

js/registrationTraining/modalSteps/onlineList.js

@@ -0,0 +1,19 @@
+import { removeStylesOfHighlightedElements, setModalContent } from '../features/index.js';
+
+/**
+ * @param {string} currentStep
+ */
+
+export const onlineList = (currentStep) => {
+  removeStylesOfHighlightedElements();
+
+  const $online = document.getElementById('online');
+
+  $online.classList.add('highlightedTrainingElement', 'highlightedTrainingElementPosition');
+
+  setModalContent({
+    keyTitle: 'newCombats.trainingModal.step3.title',
+    keyContent: 'newCombats.trainingModal.step3.text',
+    currentStep,
+  });
+};

js/registrationTraining/modalSteps/slotsForThings.js

@@ -0,0 +1,20 @@
+import { removeStylesOfHighlightedElements, setModalContent } from '../features/index.js';
+
+/**
+ * @param {string} currentStep
+ */
+
+export const slotsForThings = (currentStep) => {
+  removeStylesOfHighlightedElements();
+
+  const $blockName = document.getElementById('main');
+  const $stats = document.getElementsByClassName('personag')[0];
+
+  $blockName.classList.add('highlightedTrainingElementPosition', 'highlightedTrainingElementZIndex');
+
+  setModalContent({
+    keyTitle: 'newCombats.trainingModal.step4.title',
+    keyContent: 'newCombats.trainingModal.step4.text',
+    currentStep,
+  });
+};

js/registrationTraining/modalSteps/stats.js

@@ -0,0 +1,18 @@
+import { removeStylesOfHighlightedElements, setModalContent } from '../features/index.js';
+
+/**
+ * @param {string} currentStep
+ */
+
+export const stats = (currentStep) => {
+  removeStylesOfHighlightedElements();
+
+  const $stats = document.getElementById('statsOfPerson');
+  // $header.classList.add('highlightedTrainingElement')
+
+  setModalContent({
+    keyTitle: 'newCombats.trainingModal.step5.title',
+    keyContent: 'newCombats.trainingModal.step5.text',
+    currentStep,
+  });
+};

js/registrationTraining/redux/actions.js

@@ -0,0 +1,17 @@
+import { SET_STEP, ALLOW_RENDER, CLEAN_STATE } from './types.js';
+
+/**
+ * @returns {{type: CLEAN_STATE}}
+ */
+export const cleanState = () => ({ type: CLEAN_STATE });
+
+/**
+ * @returns {{type: ALLOW_RENDER}}
+ */
+export const allowRender = () => ({ type: ALLOW_RENDER });
+
+/**
+ * @param {number} step
+ * @returns {{type: SET_STEP}}
+ */
+export const setStep = (step) => ({ type: SET_STEP, payload: step });

js/registrationTraining/redux/rootReducer.js

@@ -0,0 +1,29 @@
+import { ALLOW_RENDER, SET_STEP, CLEAN_STATE } from './types.js';
+
+/**
+ * @param {{ currentStep: Number, isAllowRender: boolean}} state
+ */
+
+export const rootReducer = (state, action) => {
+  const { type, payload } = action;
+
+  switch (type) {
+    case ALLOW_RENDER:
+      return { ...state, isAllowRender: true };
+
+    case SET_STEP:
+      setStepToLocalStorage(payload);
+      return { ...state, currentStep: payload };
+
+    case CLEAN_STATE:
+      setStepToLocalStorage(1);
+      return { ...state, isAllowRender: false, currentStep: 1 };
+
+    default:
+      return state;
+  }
+};
+
+function setStepToLocalStorage(nextStep) {
+  localStorage.setItem('trainingModalCurrentStep', nextStep);
+}

js/registrationTraining/redux/store.js

@@ -0,0 +1,34 @@
+import { rootReducer } from './rootReducer.js';
+import { INIT_STATE } from './types.js';
+
+/**
+ * @param {Function} rootReducer
+ * @param {number} initialState
+ */
+
+const currentStep = Number(localStorage.getItem('trainingModalCurrentStep'));
+
+const initialState = {
+  currentStep: currentStep >= 1 && currentStep <= 6 ? currentStep : 1,
+  isAllowRender: false,
+};
+
+const createStore = (rootReducer, initialState) => {
+  let state = rootReducer(initialState, { type: INIT_STATE });
+  const subscribers = [];
+
+  return {
+    dispatch(action) {
+      state = rootReducer(state, action);
+      subscribers.forEach((sub) => sub());
+    },
+    subscribe(callback) {
+      subscribers.push(callback);
+    },
+    getState() {
+      return state;
+    },
+  };
+};
+
+export const { dispatch, getState, subscribe } = createStore(rootReducer, initialState);

js/registrationTraining/redux/types.js

@@ -0,0 +1,4 @@
+export const SET_STEP = 'SET_STEP';
+export const INIT_STATE = 'INIT_STATE';
+export const ALLOW_RENDER = 'ALLOW_RENDER';
+export const CLEAN_STATE = 'CLEAN_STATE';

js/registrationTraining/text.js

@@ -0,0 +1,3 @@
+export const dataText = {
+  'newCombats.trainingModal.nextButton': 'ìàêàðîíû',
+};

js/registrationTraining/trainingElements.css

@@ -0,0 +1,20 @@
+.highlightedTrainingElement {
+  z-index: 1150;
+  opacity: 0.83;
+}
+
+.highlightedTrainingElementZIndex {
+  z-index: 1;
+}
+
+.highlightedTrainingElementPosition {
+  position: relative;
+}
+
+.highlightedTrainingElementBackground {
+  background: #e2e0e1;
+}
+
+.pseudoElement {
+  background: red;
+}

js/registrationTraining/trainingModal.css

@@ -0,0 +1,72 @@
+#trainingModalMain {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+}
+
+#trainingModalBackground {
+  height: 100%;
+  width: 100%;
+  background: rgb(0, 0, 0, 0.5);
+
+  z-index: 1100;
+}
+
+#trainingModalContainerHihgtlightes {
+  position: relative;
+  height: 100%;
+  width: 100%;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  z-index: 1200;
+}
+
+#trainingModalContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  background: #e2e0e1;
+  padding: 30px;
+  border: 2px solid black;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+#trainingModalContentContainer {
+  width: 350px;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: 30px;
+}
+
+#trainingModalTitle {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 20px;
+}
+
+#trainingModalCurrentStep {
+  margin-bottom: 10px;
+}
+
+#trainingModalTextContainer {
+  display: flex;
+  overflow-y: scroll;
+}
+
+#trainingModalText {
+  white-space: pre-line;
+}
+
+.trainingModalButton {
+  width: 100px;
+}

js/trainingModals/registration/index.js

@@ -0,0 +1,321 @@
+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);
+});

js/trainingModals/registration/trainingModalStyles.css

@@ -0,0 +1,95 @@
+/* MODAL STYLES */
+#trainingModalMain {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+}
+
+#trainingModalBackground {
+  height: 100%;
+  width: 100%;
+  background: rgb(0, 0, 0, 0.5);
+
+  z-index: 1100;
+}
+
+#trainingModalContainerHihgtlightes {
+  position: relative;
+  height: 100%;
+  width: 100%;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  z-index: 1200;
+}
+
+#trainingModalContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  background: #e2e0e1;
+  padding: 30px;
+  border: 2px solid black;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+#trainingModalContentContainer {
+  width: 600px;
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: 20px;
+}
+
+#trainingModalTitle {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 20px;
+}
+
+#trainingModalCurrentStep {
+  margin-bottom: 10px;
+}
+
+#trainingModalTextContainer {
+  display: flex;
+  overflow-y: scroll;
+}
+
+#trainingModalText {
+  white-space: pre-line;
+}
+
+#trainingModalButton {
+  width: 100px;
+}
+
+/* ANOTHER STYLES */
+.highlightedTrainingElement {
+  z-index: 1150;
+  opacity: 0.83;
+}
+
+.highlightedTrainingElementZIndex {
+  z-index: 1;
+}
+
+.highlightedTrainingElementPosition {
+  position: relative;
+}
+
+.highlightedTrainingElementBackground {
+  background: #e2e0e1;
+}
+
+.pseudoElement {
+  background: red;
+}