Easy english

Описание

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

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

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

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

Установка

1. Создание 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"
   

2. Установка зависимостей:

   npm install

3. Сборка проекта

   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])

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

В качестве системы авторизации и хранения статистики используется [firebase] Firebase Auth With Email and Password и Realtime Firebase Database (firebase.com).