Дозаливка
This commit is contained in:
@@ -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);
|
||||
});
|
||||
Reference in New Issue
Block a user