Easy english

Описание

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

Приложение работает в двух режимах - режиме тренировки и режим тестирования.

В режиме тренировки пользователь видит слово, его перевод и может услышать произношение слова на карточке.
В режиме тестирования пользователь может проверить свои знания. В этом режиме скрываются написание слов и пользователь должен угадывать слово по его произношению.

Зарегистрированным пользователям доступна статистика.

Установка

Создание firebase web app и firebase realtime Database. Записать выданные ключи в файл .env в корне проекта:

VITE_FIREBASE_API_KEY="XXXXXXXXX"
VITE_FIREBASE_AUTH_DOMAIN="XXXXXXXXX"
VITE_FIREBASE_DATABASE_URL="XXXXXXXXX"
VITE_FIREBASE_PROJECT_ID="XXXXXXXXX"
VITE_FIREBASE_STORAGE_BUCKET="XXXXXXXXX"
VITE_FIREBASE_MESSAGING_SENDER_ID="XXXXXXXXX"
VITE_FIREBASE_APP_ID="XXXXXXXXX"

Установка зависимостей:
```
npm install
```
Сборка проекта
```
npm run build
```
В директории ./dist появится собранный проект

Запуск тестового сервера:

npm install
npm run dev

Реализация

Приложение реализовано в виде конечного автомата.

stateDiagram
   TRAIN --> GAME : toggleTrain
   GAME --> TRAIN : toggleTrain
   State GAME {
      [*] --> GAME_1
   GAME_1 --> SAY : startGame
   SAY --> USER_INPUT
   USER_INPUT --> SAY : repeatWord
   USER_INPUT --> CHECK : toCheck
   CHECK --> USER_INPUT : badClick
   CHECK --> SAY : goodClick
   CHECK --> GAME_OVER
   GAME_OVER --> GAME_1 : finishGame
   }

Состояния

TRAIN - состояние, когда пользователю виден перевод слова и слышно его произношение.
GAME - инициализация игры. Сюда попадаем при переключении из TRAIN или при завершении игры. Видна кнопка PLAY для старта (переход startGame) игра.
SAY - в этом состоянии произносится текущее загаданное слово и состояние меняется на USER_INPUT.
USER_INPUT - Ожидание ввода пользователя. Пользователь может повторить ввод, тогда выполнится переход в состояние SAY. Или пользователь может кликнуть по карточке - в таком случае выполниться переход toCheck в состояние CHECK.
CHECK - в этом состоянии проверяется карточка на которую нажал пользователь с текущей загаданной карточкой. В зависимости от того правильная ли это карточка и количества оставшихся карт выполняется один из следующих переходов:
- если пользователь ошибся то переход badClick
- если пользователь угадал и карточки есть - goodClick - произносится новая карточка
- если пользователь угадал и карточка последняя, то выполняется переход в состояние GAME_OVER
GAME_OVER - в этом состоянии пользователю показывается модальное окно с результатами, выход из которого приводит к переходу finishGame.

При переходе в состояние срабатывает функция инициализации состояния. Функция инициализации состояния запускается автоматически при помощи:

React.useEffect(() = {
   initGame();
   initSay();
   initUserInput();
   // ...
}, [state])

Хранение данных