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 = `

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