birra05 / code-and-magick

Алена Горюшина

Проект «Код и магия» интенсивного онлайн-курса «Базовый JavaScript».

О проекте

• Технологии: HTML5, CSS3, Javascript, Webpack, Git, npm.
• Поддержка: IE11+.

Проект изначально был сверстан и включал в себя функционал игры.

Содержание

• Страница игры http://birra05.github.io/code-and-magick/

Что было сделано

1. Canvas

   • Метод drawPauseScreen доработан таким образом, чтобы вместо вывода в консоль сообщения показывались на игровом экране. Каждое сообщение отрисовано на холсте канваса this.ctx на многоугольнике неправильной формы, под сообщением располагается тень — многоугольник такой же формы.

2. Валидация формы отзыва

   • Написан сценарий валидации формы отправки отзыва. Ограничения на ввод данных:

     «Имя пользователя» — обязательное поле
     Поле «Описание» становится обязательным, если поле «Оценка» ниже 3
     

   • Справа от кнопки отправки находится блок .review-fields, в котором находятся «ссылки» на незаполненные обязательные поля. «Ссылки» исчезают из блока по мере заполнения полей формы. Если все обязательные поля заполнены, блок .review-fields исчезает целиком.
   • Если данные, введённые в форму, невалидны, форму невозможно отправить — кнопка отправки деактивирована (добавлен атрибут disabled).

3. Cookies

   • В файле form.js в cookies сохраняется оценка и имя пользователя. Срок жизни cookie — количество дней, прошедшее с моего ближайшего дня рождения.
   • При загрузке страницы имя пользователя и оценка, записанные в cookies, ставятся в форму по умолчанию.

4. Шаблонизация

   • Написан модуль инициализации списка отзывов, который:
     • использует подготовленные данные, полученные по JSONP;
     • генерирует HTML-код списков отзывов и добавляет этот код на страницу.

5. AJAX и фильтры

   • Загрузка данных по XMLHttpRequest.
   • Фильтрация загруженного списка отзывов:
     • Все — показывает список отзывов в таком виде, в котором он был загружен.
     • Недавние — показывает список отзывов, оставленных за две недели, отсортированных по убыванию даты (поле date).
     • Хорошие — с рейтингом не ниже 3, отсортированные по убыванию рейтинга (поле rating).
     • Плохие — с рейтингом не выше 2, отсортированные по возрастанию рейтинга.
     • Популярные — отсортированные по убыванию оценки отзыва (поле review_usefulness).

6. Постраничный вывод и делегирование событий

   • Каждая страница состоит максимум из 3 отзывов (последняя может содержать меньше).
   • Кнопка "Показать еще" показывает следующую страницу отзывов.
   • Функция, устанавливающая обработчики событий на клики по фильтрам, переписана с использованием делегирования.

7. Parallax

   • В зависимости от положения прокрутки положение блока с облаками смещается.
   • Если игра не видна, она ставится на паузу.

8. ООП

   • Создан конструктор объекта Review, который принимает на вход аргумент data и сохраняет его в приватном свойстве data. Объект Review имеет метод render, который отрисовывает элемент отзыва в списке. Модуль js/reviews.js отрисовывает отзывы, создавая объекты типа Review, а при фильтрации каждый из элементов списка удаляется через вызов removeChild у их родительского блока.
   • Создан конструктор объекта Photo, который работает с данными каждой фотографии.
   • Создан конструктор объекта Gallery со следующими методами:
     • show и hide для показа и скрытия галереи.
     • setPictures, принимающий на вход массив объектов Photo и сохраняющий его.
     • setCurrentPicture, который берет фотографию с переданным индексом из массива фотографий и показывает ее в галерее.

9. Оптимизация

   • Модули переписаны в стиле CommonJS.