Проект сайта для обучения английскому языку. Приложение выводит карточки со словами. При нажатии на карточку звучит произношение слова.
Приложение работает в двух режимах - режиме тренировки и режим тестирования.
- В режиме тренировки пользователь видит слово, его перевод и может услышать произношение слова на карточке.
- В режиме тестирования пользователь может проверить свои знания. В этом режиме скрываются написание слов и пользователь должен угадывать слово по его произношению.
Зарегистрированным пользователям доступна статистика.
-
Создание 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])
В качестве системы авторизации и хранения статистики используется [firebase] Firebase Auth With Email and Password и Realtime Firebase Database (firebase.com).