Угадай достопримечательность Саратова

Интерактивная игра на основе Yandex Maps API: пользователю показывается панорама c достопримечательностью Саратова. Задача пользователя - угадать, где находится место с этой достопремичательностью.

---

---

Стек технологий

• HTML, CSS, JavaScript
• Yandex Maps API
• Firebase (Auth, Firestore)
• Node.js (скрипт сборки)
• dotenv для работы с .env

Приложение использует Firebase для аутентификации пользователей и хранения данных, а также переменные окружения из .env для секретных ключей.

Структура проекта

Основные файлы:

• index.html — основное приложение с картой и игрой
• auth.html — страница регистрации
• login.html — страница входа
• script.js — логика игры с картой
• src/index.js — инициализация Firebase (модульный JS)
• build.js — Node.js-скрипт сборки: подставляет значения из .env вместо плейсхолдеров
• .gitignore — исключает node_modules, .env и служебные файлы
• package.json — зависимости и npm-скрипты

---

Переменные окружения

Все секреты хранятся в .env и не коммитятся в репозиторий.

Создайте файл .env в корне проекта и добавьте:

# Yandex Maps
YANDEX_MAPS_API_KEY=ВАШ_КЛЮЧ_YANDEX_MAPS

# Firebase
FIREBASE_API_KEY=ВАШ_FIREBASE_API_KEY
FIREBASE_AUTH_DOMAIN=ВАШ_FIREBASE_AUTH_DOMAIN
FIREBASE_PROJECT_ID=ВАШ_FIREBASE_PROJECT_ID
FIREBASE_STORAGE_BUCKET=ВАШ_FIREBASE_STORAGE_BUCKET
FIREBASE_MESSAGING_SENDER_ID=ВАШ_FIREBASE_MESSAGING_SENDER_ID
FIREBASE_APP_ID=ВАШ_FIREBASE_APP_ID
FIREBASE_MEASUREMENT_ID=ВАШ_FIREBASE_MEASUREMENT_ID

В исходниках используются только плейсхолдеры вида {{YANDEX_MAPS_API_KEY}} и {{FIREBASE_*}}.
Реальные значения подставляются на этапе сборки из .env.

---

Установка и запуск

1. Установить зависимости

npm install

2. Настроить .env

Создайте .env (см. раздел выше) и вставьте свои ключи Yandex и Firebase.

3. Выполнить сборку

npm run build

Скрипт build.js:

• читает значения из .env
• заменяет плейсхолдеры:
  • в index.html, auth.html, login.html
  • в src/index.js
• подставляет реальные ключи Yandex Maps и Firebase

После успешного выполнения команды в консоли будет:

✅ Updated index.html
✅ Updated auth.html
✅ Updated login.html
✅ Updated src/index.js
✅ All files updated successfully!

4. Запуск приложения локально

После npm run build откройте index.html в браузере (двойной клик или «Open With…»).