Обучение. Начало Frontend части

_incl_data/autoload.php

@@ -1,4 +1,9 @@
 <?php
+
+use DarksLight2\Training\Steps\FirstStep;
+use DarksLight2\Training\TrainingException;
+use DarksLight2\Training\TrainingManager;
+
 const GAME = true; // Для совместимости с этой "защитой".
 const GAME_VERSION = 'alpha-7.4';
 // Новая автозагрузка.
@@ -45,3 +50,16 @@ spl_autoload_register(function (string $classname) {
 
     require_once $file;
 });
+
+
+/**
+ * Нужно перенести в другое местечко, но пока так
+ */
+try {
+    $training_manager = TrainingManager::getInstance(User::start()->info['id']);
+    $training_manager->createDatabaseRecord();
+    $training_manager->register([
+        new FirstStep(),
+    ]);
+} catch (TrainingException $e) {
+}

_incl_data/class/DarksLight2/Training/Steps/FirstStep.php

@@ -9,12 +9,16 @@ class FirstStep extends StepFactory
 
     public function getTitle(): string
     {
-        return 'Первое знакомство';
+        return 'Добро пожаловать в игру!';
     }
 
     public function getMessage(): string
     {
-        return 'test';
+        return 'Мы поможем Вам адаптироваться в нашей браузерной онлайн игре.<br>
+                Суть игры, заключается стремлении стать непобедимым бойцом в игре среди других персонажей!<br>
+                Сделать это сможет каждый игрок, путём усиления своего персонажа, предметов улучшенного качества, интеграции рун и чарок в предметы и других, интересных усилений.<br>
+                На общем фоне слева, Вы можете наблюдать своего персонажа ( слева ), на котором показаны пустые слоты под предметы, его параметры, ваши деньги, победы/поражения, а с права, общее окно разных локаций, таких как: Магазин, Ремонтная Мастерская, Здание лото, Здание Бойцовского Клуба где проходят поединки, Почта, Переход на Страшилкину Улицу и т.д.<br>
+                Далее, мы подскажем Вам, для чего служит нижний фрейм.';
     }
 
     public function getRewards(): array

css/training/modal.css

@@ -0,0 +1,94 @@
+.modal__backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.5);
+    opacity: 0;
+    z-index: -1;
+    pointer-events: none;
+    transition: opacity0 .2s ease-in;
+}
+
+.modal__content {
+    position: relative;
+    width: auto;
+    margin: 10px;
+    transition: opacity 0.3s ease-in;
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 0.3rem;
+    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.3);
+}
+
+@media (min-width: 576px) {
+    .modal__content {
+        max-width: 500px;
+        margin: 50px auto;
+    }
+}
+
+.modal__show .modal__backdrop,
+.modal__show .modal__content {
+    opacity: 1;
+    z-index: 1050;
+    pointer-events: auto;
+    overflow-y: auto;
+}
+
+.modal__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 15px;
+    border-bottom: 1px solid #eceeef;
+}
+
+.modal__title {
+    margin-top: 0;
+    margin-bottom: 0;
+    line-height: 1.5;
+    font-size: 1.25rem;
+    font-weight: 500;
+}
+
+.modal__btn-close {
+    float: right;
+    font-family: sans-serif;
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 1;
+    color: #000;
+    text-shadow: 0 1px 0 #fff;
+    opacity: 0.5;
+    text-decoration: none;
+}
+
+.modal__btn-close:focus,
+.modal__btn-close:hover {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+    opacity: 0.75;
+}
+
+.modal__body {
+    position: relative;
+    flex: 1 1 auto;
+    padding: 15px;
+    overflow: auto;
+}
+
+.modal__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 1rem;
+    border-top: 1px solid #e9ecef;
+    border-bottom-right-radius: 0.3rem;
+    border-bottom-left-radius: 0.3rem;
+}

js/training/modal.js

@@ -0,0 +1,118 @@
+(function () {
+    if (typeof window.CustomEvent === "function") return false;
+    function CustomEvent(event, params) {
+        params = params || { bubbles: false, cancelable: false, detail: null };
+        var evt = document.createEvent('CustomEvent');
+        evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+        return evt;
+    }
+    window.CustomEvent = CustomEvent;
+})();
+
+$modal = function (options) {
+    var
+        _elemModal,
+        _eventShowModal,
+        _eventHideModal,
+        _hiding = false,
+        _destroyed = false,
+        _animationSpeed = 200;
+
+    function _createModal(options) {
+        var
+            elemModal = document.createElement('div'),
+            modalTemplate = '<div class="modal__backdrop" data-dismiss="modal"><div class="modal__content"><div class="modal__header"><div class="modal__title" data-modal="title">{{title}}</div><span class="modal__btn-close" data-dismiss="modal" title="Закрыть">×</span></div><div id="modal_content" class="modal__body" data-modal="content">{{content}}</div>{{footer}}</div></div>',
+            modalFooterTemplate = '<div class="modal__footer">{{buttons}}</div>',
+            modalButtonTemplate = '<button type="button" class="{{button_class}}" data-handler={{button_handler}}>{{button_text}}</button>',
+            modalHTML,
+            modal_content,
+            modalFooterHTML = '';
+
+        elemModal.classList.add('modal');
+        modalHTML = modalTemplate.replace('{{title}}', options.title || 'Новое окно');
+        //modalHTML = modalHTML.replace('{{content}}', options.content || '');
+
+        if (options.footerButtons) {
+            for (var i = 0, length = options.footerButtons.length; i < length; i++) {
+                var modalFooterButton = modalButtonTemplate.replace('{{button_class}}', options.footerButtons[i].class);
+                modalFooterButton = modalFooterButton.replace('{{button_handler}}', options.footerButtons[i].handler);
+                modalFooterButton = modalFooterButton.replace('{{button_text}}', options.footerButtons[i].text);
+                modalFooterHTML += modalFooterButton;
+            }
+            modalFooterHTML = modalFooterTemplate.replace('{{buttons}}', modalFooterHTML);
+        }
+        modalHTML = modalHTML.replace('{{footer}}', modalFooterHTML);
+        elemModal.innerHTML = modalHTML;
+        document.body.appendChild(elemModal);
+
+        modal_content = document.getElementById('modal_content')
+        modal_content.innerHTML = options.content
+
+        return elemModal;
+    }
+
+    function _showModal() {
+        if (!_destroyed && !_hiding) {
+            _elemModal.classList.add('modal__show');
+            document.dispatchEvent(_eventShowModal);
+        }
+    }
+
+    function _hideModal() {
+        _hiding = true;
+        _elemModal.classList.remove('modal__show');
+        _elemModal.classList.add('modal__hiding');
+        setTimeout(function () {
+            _elemModal.classList.remove('modal__hiding');
+            _hiding = false;
+        }, _animationSpeed);
+        document.dispatchEvent(_eventHideModal);
+    }
+
+    function _handlerCloseModal(e) {
+        if (e.target.dataset.dismiss === 'modal') {
+            _hideModal();
+        }
+    }
+
+    _elemModal = _createModal(options || {});
+
+
+    _elemModal.addEventListener('click', _handlerCloseModal);
+    _eventShowModal = new CustomEvent('show.modal', { detail: _elemModal });
+    _eventHideModal = new CustomEvent('hide.modal', { detail: _elemModal });
+
+    return {
+        show: _showModal,
+        hide: _hideModal,
+        destroy: function () {
+            _elemModal.parentElement.removeChild(_elemModal),
+                _elemModal.removeEventListener('click', _handlerCloseModal),
+                _destroyed = true;
+        },
+        setContent: function (html) {
+            _elemModal.querySelector('[data-modal="content"]').innerHTML = html;
+        },
+        setTitle: function (text) {
+            _elemModal.querySelector('[data-modal="title"]').innerHTML = text;
+        }
+    }
+};
+
+let modal = $modal({
+    title: training_data().title,
+    content: training_data().content,
+    footerButtons: [
+        {
+            class: 'btn btn__ok',
+            text: 'Продолжить',
+            handler: 'next_step'
+        }
+    ]
+});
+
+document.addEventListener('click', function (e) {
+    if (e.target.dataset.handler === 'next_step') {
+        training_handler()
+    }
+})

main.php

@@ -25,6 +25,7 @@
 
 </style>
 <link href="/img.new-combats.com/css/main.css" rel="stylesheet" type="text/css">
+<link rel="stylesheet" href="/css/training/modal.css">
 <div class="se-pre-con" id="se-pre-con"></div>
 
 <?php

modules_data/location/cp1.php

@@ -1,4 +1,7 @@
 <?
+
+use DarksLight2\Training\TrainingManager;
+
 if(!defined('GAME'))
 {
 	die();
@@ -6,8 +9,11 @@ if(!defined('GAME'))
 require_once('/home/newcom1/public_html/_incl_data/__config.php');
 require_once('/home/newcom1/public_html/_incl_data/class/__db_connect.php');
 
-if($u->room['file']=='cp1')
-{
+if($u->room['file']=='cp1') {
+
+    $training_manager = TrainingManager::getInstance();
+    $training_manager->first_step->render();
+
 	if(date("H")>=8 && date("H")<=23) {
 		$now = 'day';
 		$tattack = '<a style="color:#D8D8D8" style="cursor:pointer" onclick="top.useMagic(\'Нападение на персонажа\',\'night_atack\',\'pal_button8.gif\',1,\'main.php?nightatack=1\');">Напасть на игрока</a> &nbsp; ';

modules_data/steps/first_step.php

@@ -5,7 +5,24 @@ use DarksLight2\Training\TrainingManager;
 $short_name = 'first_step';
 
 $manager = TrainingManager::getInstance();
+$step = $manager->$short_name;
+$button_text = 'Продолжить';
+if(!$manager) {
+    $button_text = '';
+}
+?>
 
-var_dump($manager->$short_name->progress);
+<script>
+    const training_data = () => {
+        return {
+            content: `<?=$step->message?>`,
+            title: `<?=$step->title?>`,
+            button_text: `<?=$button_text?>`
+        }
+    }
+</script>
+<script src="/js/training/modal.js"></script>
 
-echo 'it\'s work';
+<script>
+    modal.show()
+</script>

test.php

@@ -15,19 +15,3 @@ if (!defined('GAME_VERSION')) {
     require_once '_incl_data/autoload.php';
 }
 
-$user = User::start();
-
-$manager = TrainingManager::getInstance($user->info['id']);
-
-$manager->createDatabaseRecord();
-
-try {
-    $manager->register([
-        new FirstStep(),
-    ]);
-} catch (TrainingException $e) {
-}
-
-if(!$manager->first_step->complete) {
-    $manager->first_step->render();
-}