Формулювання задачі.

Взяти готовий шаблон фронтенд програми.

посилання на репозиторій із шаблоном

Використовуючи REST API бекенд, розташований за адресою http://quiz.webmonstr.com/

Адмінка http://quiz.webmonstr.com/admin

Логін - admin

Пароль - admin

Створити програму, використовуючи бібліотеку jQuery у вигляді плагіна.

Підключення плагіна на сторінці.

  <script src="app.js"></script>
  <script>
      var app = $('#rootBlock').quizPlugin();
      app.start();
  </script>

Суть роботи програми:

Спочатку перевіряється змінна username в localStorage браузера.

Якщо цієї змінної немає, користувачу виводиться форма авторизації зі списком стікерів і полем, де він вказує своє ім’я.

Стікери запитуються за адресою http://quiz.webmonstr.com/v1/quiz/sticker/list

Після введення імені та вибору стікера надіслати на адресу http://quiz.webmonstr.com/v1/quiz/player/join POST запит із даними json у форматі:

{
  "name": "string",
  "sticker_id": 0
}

Проаналізуйте відповідь від сервера.

У разі успішної відповіді (відсутність у ньому поля error):

1. Зберегти ім’я користувача localStorage.

2. Забрати форму авторизації.

3. Вивести чат-кімнату.

У разі помилки вивести її на сторінку над кнопкою форми червоним кольором.

Виведення чат-кімнати.

1. Запросити поточних гравців та вивести у блоці #playerListBlock згідно з дизайном.

Виводимо стікер та ім’я користувача.

Замість слова Admin виводить поточний рахунок користувача.

Запросити список гравців можна за адресою:

http://quiz.webmonstr.com/v1/quiz/player/list

1. Запитати поточне питання вікторини та вивести в блоці #questionBlock

Адреса запиту:

http://quiz.webmonstr.com/v1/quiz/get_current_question

Формат відповіді.

{
  "lang": "ru",
  "level": 3,
  "tp": "questionend",
  "mode": "fullmatch",
  "theme": 4,
  "question": "Яке слово утворене від початкових слів пісні «Чарівна Катарина»?",
  "answers": "ШАРМАНКА",
  "is_published": true,
  "order": 1
}

1. Запитати список відповідей та вивести у блоці chatMessageBlock згідно з дизайном.

Адреса запиту.

Формат відповіді.

Відповіді, позначені як неправильні, виводити на рожевому фоні, правильні – на салатовому.

1. Під час введення відповіді та натискання на кнопку Send або клавіші Enter надсилати POST повідомлення на сервер.

Відповідь надсилатиме лише у випадку не порожнього повідомлення.

Адреса.

http://localhost:7777/v1/quiz/save_message

Формат даних, що надсилаються:

{
  "message": "string",
  "playername": "string"
}

Відповідь ігнорувати.

1. Створити веб-сокет з’єднання із сервером.

Адреса веб-сокет з’єднання.

ws://localhost:7777/quiz/

Забезпечити реакцію програми на такі повідомлення.

Повідомлення про нове повідомлення.

Формат повідомлення:

{ 
    'type': 'quiz_message', 
    'message': {...}
}

При надходженні повідомлення:

1. Вивести його у списку повідомлень згідно з дизайном та логікою описаною вище.

2. Якщо повідомлення позначене як правильне,

   2.1 Оновити список гравців (або використовувати повідомлення про оновлення облікового запису див. нижче) та програти довільний звук.

   2.2 Запитати наступне питання та оновити блок #questionBlock

Повідомлення про видалення повідомлення.

Формат.

{ 
    'type': 'quiz_delete_message', 
    'message': {...}
}

При надходженні повідомлення видаляти його зі списку ID у повідомленні.

Повідомлення про оновлення облікового запису.

{ 
    'type': 'quiz_update_account', 
    'message': {...}
}

При надходженні повідомлення оновити обліковий запис користувача за його ID.