Фронтенд розробка JavaScript. / Марафон. Фронтенд. Створення програми "Вікторина" на ReactJs. / Формулювання задачі.
Формулювання задачі.
Взяти готовий шаблон передній додаток.
посилання на репозиторій із шаблоном
Команда для клонування.
git clone git@github.com:zdimon/marafon-js-quiz-template.git
Використовуючи REST API бекенд, розташований за адресою http://quizapi.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):
-
Зберегти ім’я користувача localStorage.
-
Забрати форму авторизації.
-
Вивести чат-кімнату.
У разі помилки вивести її на сторінку над кнопкою форми червоним кольором.
Виведення чат-кімнати.
- Запросити поточних гравців та вивести у блоці #playerListBlock згідно з дизайном.
Виводимо стікер та ім’я користувача.
Замість слова Admin виводить поточний рахунок користувача.
Запросити список гравців можна за адресою:
http://quiz.webmonstr.com/v1/quiz/player/list
- Запитати поточне питання вікторини та вивести в блоці #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
}
- Запитати список відповідей та вивести у блоці chatMessageBlock згідно з дизайном.
Адреса запиту.
Формат відповіді.
Відповіді, позначені як неправильні, виводити на рожевому фоні, правильні – на салатовому.
- Під час введення відповіді та натискання на кнопку Send або клавіші Enter надсилати POST повідомлення на сервер.
Відповідь надсилатиме лише у випадку не порожнього повідомлення.
Адреса.
http://localhost:7777/v1/quiz/save_message
Формат даних, що надсилаються:
{
"message": "string",
"playername": "string"
}
Відповідь ігнорувати.
- Створити веб-сокет з’єднання з сервером.
Адреса веб-сокет з’єднання.
ws://localhost:7777/quiz/
Забезпечити реакцію програми на такі повідомлення.
Повідомлення про нове повідомлення.
Формат повідомлення:
{
'type': 'quiz_message',
'message': {...}
}
При надходженні повідомлення:
-
Вивести його у списку повідомлень згідно з дизайном та логікою описаною вище.
-
Якщо повідомлення позначене як правильне,
2.1 Оновити список гравців (або використовувати повідомлення про оновлення облікового запису див. нижче) та програти довільний звук.
2.2 Запитати наступне питання та оновити блок #questionBlock
Повідомлення про видалення повідомлення.
Формат.
{
'type': 'quiz_delete_message',
'message': {...}
}
При надходженні повідомлення видаляти його зі списку ID у повідомленні.
Повідомлення про оновлення облікового запису.
{
'type': 'quiz_update_account',
'message': {...}
}
При надходженні повідомлення оновити обліковий запис користувача за його ID.