lmakshow/rslang

The app for learning English! E-book with the 3600 words for learning, mini-games, stats page and more.

rslang's Issues

UI главной страницы приложения

Задеплоить бэкенд на netlify/heroku

При загрузке страницы учебника проверить, изучены ли в ней все слова. Если да, ставить галочку на иконке страницы.

Вместо проверки всех классов можно запрашивать с сервера /users/{id}/aggregatedWords с фильтром {"$and":[{"userWord.difficulty":"learned", "page": ${currentPage}}]}

Дизайн 7 разделов учебника

Динамический хедер

В зависимости от страницы хедер должен меняться - на главной странице показываться желтая блямба под логотипом, на странице учебника - ссылка на учебник должна поменять цвет на коричневый, также и на остальных ссылках. Например, дополнить template.ts для хедера функцией, которая считает url через location и поменяет хедер в зависимости от того, на какой мы странице.

Мини-игра "Аудиовызов"

Нажми на слово согласно произношению

• функционал мини-игры "Аудиовызов" полностью повторяет функционал одноимённых мини-игр приложения Lingualeo
  • Произносится слово, по центру кнопка "повторить произнесение".
  • Ниже список из 5 вариантов слов, из которых нужно выбрать нужное.
  • Есть кнопка "не знаю", при которой показывается ответ.
  • После выбора слова показывается картинка (опционально) и подсвечивается правильное/неправильное слово.
  • Можно добавить переключатель, показывать русские/английские слова в качестве вариантов.
  • Можно добавить звуковые эффекты.
• в оформление мини-игр можно внести изменения, с целью улучшения их дизайна и UI, и достижения единства стиля мини-игр и созданного приложения
• по окончанию каждой игры выводятся результаты мини-игры
• управлять игрой можно как мышкой, так и клавишами на клавиатуре, как это реализовано в оригинальных играх.
  • Управление с клавиатуры: цифры 1-5 для выбора нужного варианта, пробел для "не знаю".
• если мини-игра запускается из меню, в ней можно выбрать один из шести уровней сложности, которые отличаются тем, слова какого из шести раздлов коллекции исходных данных в ней задействованы
• если мини-игра запускается со страницы учебника, в ней используются слова из той страницы учебника, на которой размещена ссылка на игру. Если размещённых на странице слов для игры недостаточно, задействуются слова с предыдущих страниц. Если предыдущих страниц нет или недостаточно, игра завершается досрочно, когда закончатся все доступные слова

Нужно сделать:

• #23
• #24
• #25
• #33
• #26
• #27

Бэкенд

Поднять бэкенд сервер, к которому будет обращаться приложение.

• репозиторий с бекендом
• ReactLearnWords API, позволяющий получить исходные данные
• ReactLearnWords wiki с инструкциями по созданию базы данных MongoDB, деплою бекенда на heroku, примерами получения исходных данных

Нужно сделать:

• #6
• #7

Управление с клавиатуры для мини-игры Аудиовызов

Дизайн мини-игры Аудиовызов

Логика регистрации и авторизации, сохранение токена в localStorage

Дизайн страницы/попапа регистрации и авторизации

Сохранение/загрузка прогресса изученных слов и статистики

Логаут и удаление токена из localStorage

Логика мини-игры Спринт

Загрузка только изученных слов в Аудиовызове, если пользователь перешел со страницы учебника

Изменение в UI при авторизированном пользователе

Логика мини-игры Аудиовызов

Управление с клавиатуры для мини-игры Спринт

Видео с презентацией проекта

Для удобства проверки рекомендуется записать и разместить на YouTube небольшое (5-7 мин) видео для проверяющих с объяснением как реализован каждый пункт требований.

Особое внимание обратите на те пункты требований, которые проверяющий проверить не сможет: как вы реализовали базу данных, как задеплоили бекенд, как выглядит долгосрочная статистика и т.д. Ссылку на видео добавьте в описание pull request, можно добавить в сам проект.

Добавить звуки успеха/неудачи к мини-играм и отключалку звука в окно мини-игры

Дизайн страницы статистики

Создать копию бэкенда в отдельной папке нашего проекта

Сохранение/загрузка сложных слов и изученных слов

Сохранение статистики после мини-игры

Добавление в "новые" слова из мини-игры

Страница "О команде"

Не самый большой приоритет, но нам нужно написать короткий текст о себе для "облачка" и сверстать с респонсивом страницу "О команде". Текст о том, кто что делал, пока оставим на потом.

Верстка мини-игры Спринт

Дизайн мини-игры Спринт

Вёрстка главной страницы приложения

Прогресс изучения

Прогресс изучения

• Если слово впервые появилось в мини-игре, оно добавляется в "изучаемые" или "новые" — вне зависимости от того, открывались мини-игры на странице учебника или по ссылке в меню.
• возле каждого слова, которое использовалось в мини-играх, на странице учебника указывается прогресс его изучения за весь период: было ли слово правильно угадано в мини-играх, или пользователь ошибался

Изученные слова

• изученные слова, это слова, которые пользователь отметил как изученные на странице учебника
• также слова считаются изученными по результатам их угадывания в мини-играх. Например, три правильные ответа подряд для обычных слов и пять правильных ответов подряд для сложных слов, либо другая логика на усмотрение разработчиков
• если сложное слово стало изученным, оно перестаёт быть сложными и удаляется из раздела "Сложные слова"
• изученные слова не задействуются в мини-играх, которые запускаются на страницах учебника, но задействуются в мини-играх, которые открываются по ссылке в меню
• если при угадывании изученного слова в мини-игре пользователь ошибся, слово удаляется из категории изученных

Нужно сделать:

• #35
• #36
• #37

Результаты мини-игры после её завершения

Респонсив главной страницы

Сделать главную страницу, хедер и футер красивой при любых разрешениях от 320px и до fullHD (и убрать max-width: 1920px, вдруг у кого-то из проверяющих будет 4К экран)

Электронный учебник и список слов

Электронный учебник:

• генерируется на основе коллекции исходных данных
• состоит из шести разделов, в каждом разделе 30 страниц, на каждой странице 20 слов для изучения
• седьмой раздел учебника - "Сложные слова" изначально пустой. Этот раздел состоит из слов, которые пользователь отметил как сложные. Все слова в этом разделе размещаются на одной странице. На усмотрение разработчиков, слова в данный раздел добавляются либо в том порядке, в котором пользователь отмечал их как сложные, либо в порядке, в котором они находились в учебнике.
• на каждой странице учебника отображается:
  • меню или иконка меню
  • список из 20 слов (в разделе "Сложные слова" слов может быть больше)
  • ссылки на мини-игры "Аудиовызов" и "Спринт"
  • навигация по страницам учебника
  • также необходимо реализовать навигацию по семи разделам учебника и предусмотреть небольшие различия в оформлении каждого раздела
  • при перезагрузке страницы открывается последняя открытая страница приложения

Нужно сделать:

• #16
• #17
• #19
• #20
• #18
• #21

Автоматическое обновление токена при его истечении (запрос нового с помощью RefreshToken)

Авторизация

Реализовать регистрацию и авторизацию пользователя

• Авторизация и регистрация пользователя, используя бэкенд сервер #5
• при перезагрузке приложения данные о пользователе и полученный при авторизации токен сохраняются в localStorage
• электронный учебник (без раздела "Сложные слова", без отображения прогресса изучения слов и изученных слов) и мини-игры доступны без авторизации
• у авторизованных пользователей отображается раздел "Сложные слова", прогресс изучения слов, изученные слова и статистика
• при логауте данные пользователя и токен удаляются из localStorage, а пользователь становится анонимным

Нужно сделать:

• #10
• #11
• #12
• #13
• #14
• #64

Верстка попапа логина и регистрации

Логин и регистрация у нас будет попапом, чтобы войти на сайт можно было из любой страницы. Нужно ее сверстать, чтобы на втором спринте цеплять к ней логику взаимодействия с сайтом.

Дизайн главной страницы приложения

Вёрстка мини-игры Аудиовызов

Удаление изученных слов из разделов "новые" и "сложные".

Вёрстка страницы статистики

Генерация содержимого учебника через запрос к бэкенду.

Статистика

Страница статистики

На странице статистики отображается краткосрочная статистика по мини-играм и по словам за каждый день изучения

• в краткосрочной статистике по мини-играм указываются результаты по каждой мини-игре отдельно
  • количество новых слов за день
  • процент правильных ответов
  • самая длинная серия правильных ответов
• в краткосрочной статистике по словам указываются
  • количество новых слов за день
  • количество изученных слов за день
  • процент правильных ответов за день

Нужно сделать:

• #39
• #40
• #41

Дизайн показываемых слов

Мини-игра "Спринт"

Верно или неверно за 60 секунд

• функционал мини-игры "Спринт" полностью повторяет функционал одноимённых мини-игр приложения Lingualeo
  • Показывается слово и его перевод
  • Нужно выбрать, правильный перевод или нет.
  • Если выбор правильный, дается 10 очков.
  • Комбо-бонус: если 4 правильных перевода подряд, за следующие будет даваться 20 очков, если 8 - 40 очков, если 12 - 80 очков.
  • Если выбор неправильный, комбо-бонус сбрасывается.
  • Можно добавить звуковые эффекты.
• в оформление мини-игр можно внести изменения, с целью улучшения их дизайна и UI, и достижения единства стиля мини-игр и созданного приложения
• по окончанию каждой игры выводятся результаты мини-игры
• управлять игрой можно как мышкой, так и клавишами на клавиатуре, как это реализовано в оригинальных играх (стрелочки влево, если перевод неправильный и вправо, если правильный)
• если мини-игра запускается из меню, в ней можно выбрать один из шести уровней сложности, которые отличаются тем, слова какого из шести разделов коллекции исходных данных в ней задействованы
• если мини-игра запускается со страницы учебника, в ней используются слова из той страницы учебника, на которой размещена ссылка на игру. Если размещённых на странице слов для игры недостаточно, задействуются слова с предыдущих страниц. Если предыдущих страниц нет или недостаточно, игра завершается досрочно, когда закончатся все доступные слова

Нужно сделать:

• #29
• #30
• #31
• #32
• #26
• #27

Вёрстка показываемого слова

Статистика долгосрочная (опционально)

Долгосрочная статистика за весь период изучения

Представлены два графика:

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

Нужно сделать:

• Сохранение долгосрочной статистики
• Отображение долгосрочной статистики на графике (canvas?)

Удаление слова из списка "изученные" при ошибке в мини-игре

Вёрстка разделов учебника с навигацией

Главная страница приложения

Главная страница приложения содержит:

• меню с навигацией по учебнику, ссылками на мини-игры и статистику. Меню или иконка меню отображается на всех страницах приложения
• описание возможностей и преимуществ приложения
• раздел "О команде" с фото или аватарками и ссылками на гитхабы всех участников команды, описанием вклада в разработку приложения каждого из них. При желании данный раздел можно вынести в отдельную страницу
• footer со ссылками на гитхабы авторов приложения, год создания приложения, логотип курса со ссылкой на курс. footer отображается на всех страницах приложения за исключением мини-игр

Нужно сделать:

• #2
• #3
• #4

Загрузка и отображение статистики пользователя