Сверстать игровой чат (HTML+CSS) и веб приложение на Vue.JS

События, которые должно обработать приложение:  

- Игрок открыл окно набора текста  

Триггер некого свойства приложения, которое скрывает/показывает input-поле под окном чата  

- Игрок написал и отправил сообщение  

Приложение должно понять по первому введенному символу, что именно хотел отправить игрок,  

если первый символ был '/', то это команда и ее нужно отправить серверу как команду  

иначе, отправить на сервер событие с сообщением  

(отправка самих событий не требуется, достаточно сделать это с помощью console.log)  

- Проверка введенных данных перед отправкой  

Если у игрока в сообщении присутствуют спец символы,  

то отправляем событие (console.log) о том, что обнаружены запрещенные символы,  

а сообщение игрока стирается и не отправляется на сервер.  

- Добавить сообщение в историю чата  

Сервер отправляет broadcast служебные сообщения и сообщения от других игроков.  

Нужно обработать это событие так, чтобы через консоль браузера можно было добавить сообщение  

(например, chat.push('Сообщение от консоли'))  

- Автоматический скролл и его блокировка  

Если игрок проскроллил чат по истории вверх, то новые сообщения с сервера ни как не влияют на скролл.  

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

Если от сервера пришло сообщение и игрок не взаимодействовал с историей чата,  

то он автоматически делает сколл к последнему сообщению  

- Размер истории чата  

Кол-во сообщений, которое может вместить в себя история – 15,  

если это кол-во больше, то удаляются самые старые сообщения.  

- Синхронизация времени  

У каждого сообщения в чате есть временная отметка,  

которая автоматически проставляется при получении каждого сообщения.  

Для того, чтобы исключить проблемы часовых поясов игроков,  

при инициализации чата сервер отправит событие со своим временем (или часовым поясом).  

Заполнение времени делать относительно полученных данных.  

Настройки чата:  

- Изменение размера текста чата  

В настройках чата есть ползунок. Нужно заставить его изменять размер текста от 10px до 16px во всем приложении.  

- Временная отметка  

Время рядом с сообщением можно скрыть с помощью чекбокса в настройках  

- Действия администратора в чате  

В чате имеется специальный тип сообщения "От администратора".  

Эти сообщения можно скрыть из чата изменив настройку.  

Игрок продолжает их получать и может в любой момент снова отобразить сообщения.  

Верстку предоставим в Фигме. Цена договорная. В сообщение приложите стоимость и срок выполнения.