322 lines
16 KiB
JavaScript
322 lines
16 KiB
JavaScript
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);
|
||
});
|