1.1. Отправленные сообщения пользователей будут находиться с левой стороны
1.2. Твои сообщения будут отображаться с правой стороны
1.3. Возле каждого сообщения будет отображаться время его отправки
1.4. Над сообщением будет отображаться ник его отправителя
1.5. Справа возле окна сообщений будет находиться скрол, для возможности пролистывания чата вверх
2. Технологии, которые необходимо использовать:
2.1. ES6 и выше
2.2. MongoDB
2.3. Webpack
2.4. Node.js
2.5. Mocha
2.6. less
3. Основные составляющие макета чата:
4. 1.1 - Header чата:
4.1. Название чата
4.2. Кнопка настройки Nickname (в виде шестеренки)
4.3. Счетчик количества участников чата (на данный момент). Счетчик будет кликабельным. При нажатии будет открываться модальное окно (пункт 1.5 (модальное окно))
5. 1.3 - Поле ввода сообщений:
5.1. Под основным окном чата будет находиться поле ввода сообщений
5.2. К полю ввода сообщений будет написана анти-спам система которая будет блокировать отправку сообщения при совпадении его с 2-мя предыдущими
5.3. Максимальное количество символов одного сообщения = 400
5.4. Справа от поля ввода будет присутствовать кнопка отправки сообщения (так же отправка будет осуществляться по нажатию на кнопку клавиатуры “Enter”)
5.5. Если поле ввода является пустым, то в нем отображается текст “Введите сообщение”
5.6. Нельзя отправлять пустое сообщение.
5.7. Имеет возможность отправки смайликов кликом на соответствующий значок справа и выбором нужного смайлика.
6. Поддерживаемые платформы:
6.1. Google Chrome
6.2. Mozilla Firefox
7. 1.4 - Модальное окно ввода никнейма:
7.1. Макет модального окна закреплен в приложении 2
7.2. Будет присутствовать поле ввода никнейма.( максимальная длина никнейма будет равна 10 символам)
7.3. Никнейм обязательно проверяется на уникальность
7.4. Под полем ввода никнейма будет находиться кнопка подтверждения Sign
7.5. Никнейм не может быть пустым. Если его нет - вместо него отображается IP адрес данного участника
7.6. Под кнопкой Sign будет находиться IP адрес участника чата
7.7. Сверху над полем ввода никнейма будет находиться надпись “Nickname:”
7.8. За одним IP закрепляется один пользователь
7.9. Закрытие модального окна будет осуществляться по клику на крестик который будет находиться в правом верхнем углу данного модального окна, либо при клике по области вне модального окна
8. 1.5 - Модальное окно участников данного чата:
8.1. Модальное окно будет открываться по кликабельному счетчику участников, который будет находиться в Header’e нашего чата
8.2. Макет модального окна закреплен в приложении 3
8.3. В данном модальном окне будет находиться список участников чата которые сейчас онлайн и список участников чата которые в нем были за последний час
8.4. Рядом с участниками которые уже вышли с чата менее чем час назад будет отображаться время их последней активности в чате (время, когда был онлайн в последний раз) (в минутах)
8.5. Закрытие модального окна будет осуществляться по клику на крестик который будет находиться в правом верхнем углу данного модального окна, либо при клике по области вне модального окна
8.6. Участники которые сейчас онлайн будут выделяться зеленым цветом, а те которые были в течении последнего часа - серым
8.7. Участники которые онлайн отображаются в белой ячейке. Возле них также стоит значок галочки(показатель что они они онлайн). Если пользователь указывал свой ник - он будет отображаться под заданным ником. Если же нет - будет отображаться под своим IP (два примера указаны на дополнении 3)
8.8. Участники которые оффлайн будут отображаться в ячейке синего цвета в белой рамке. Возле пользователя будет отображаться время, в диапазоне 1-го часа, когда он был онлайн.Если пользователь указывал свой ник - он будет отображаться под заданным ником. Если же нет - будет отображаться под своим IP (два примера указаны на дополнении 3)
