Deadlines!

Deadlines - это игра, созданная по мотивам карты 101 rounds из популярной игры Warcraft. Управляя своим персонажем в пределах арены, уклоняйся от наплывающих со всех сторон и жаждущих тебя уничтожить врагов. Будь быстрым и внимательным. Объединяйся в команды с друзьями и придумывай стратегии победы. Оттачивай скилл и покажи, кто тут самый ловкий!

В процессе разработки был написан класс Router, который предоставляет интерфейс для быстрого перехода по ссылкам на сайте.

const router = new Router();
router.addUrl(
        '/login/',
        new LoginView()
    );
router.go('/login/');

Для упрощения и оптимизации работы был использован шаблонизатор Handlebars, для которого был написан класс-обертка TemplateManager.

Компоненты - элементарные единицы структуры.

const header = new Header(); //<div class="{{class}}"><h1>{{text}}</h1></div>

Вьюшки - сущности, состоящие из компонент.

const myView = new MyView();
myView.render();
/* 
   <div class="{{main-class}}">
   <Header>{{login}}</Header>
   <Button class="button" click="(){alert(42);}"></Button>
   </div>
*/

Для работы с компонентами был разработан фреймворк, позволяющий создавать собственные html-теги, и затем вставлять их в шаблоны. В связи с этим появилось строгое разделение сущностей на два понятия - компоненты и вьюшки. Подразумевается, что вьюшки не могут содержать другие вьюшки, что, в будущем, будет дорабатываться. Для удобного написания html страниц был создан парсер, позволяющий преобразовывать все в обычный html.

const htmlParser = new HtmlParser();
const template = `<Header>{{login}}</Header>`;
const context = {login: 'FirstUser'};
htmlParser.getHTML(templateManager.getHTML(context, template)); //<div><h1>FirstUser</h1></div>

Для работы с http-запросами был создан класс-обертка HttpModule, при запросе возвращающий объект Promise, что позволяет хорошо наладить работу с асинхронными запросами.

const httpModule = new HttpModule();
const context = {};
httpModule.doGet('/me').then(
                (response) => {
                    context = response;
                }
            );

Для проверки кодстайла был использован Eslint, для которого были написаны два скрипта - eslint для проверки кодстайла, flint - для автоматического исправления доступных ошибок.

npm run eslint

Для проверки на локальной машине нужно перейти в папку с проектом и ввести команду

npm run server

• Javascript

• Node JS
• Express

• Тучин Даниил
• Дмитриев Антон

• Кузнецов Александр