Casino Games Project

Сучасний веб-додаток для казино ігор з адаптивним дизайном та функцією пошуку.

🎯 Особливості

• ✅ Повністю адаптивний дизайн (десктоп, планшет, мобільні 375px+)
• ✅ Пошук ігор за назвою в реальному часі
• ✅ Інтерактивна карусель з іграми
• ✅ Табуляція Recent/Favourite
• ✅ Модальне вікно пошуку з overlay
• ✅ Smooth анімації та hover-ефекти
• ✅ Оптимізовані зображення
• ✅ BEM методологія для CSS

🛠 Стек технологій

• HTML5 - семантична розмітка
• SCSS - препроцесор CSS з вкладеністю та змінними
• JavaScript (ES6+) - сучасний JS з модулями
• Vite - швидкий збірник та dev-сервер
• Google Fonts (Rubik) - типографіка

📁 Структура проєкту

casino-games/
├── src/
│   ├── assets/
│   │   └── images/          # Зображення ігор (logo.png, logo2.png, ...)
│   ├── styles/
│   │   └── main.scss        # Основні стилі SCSS
│   └── js/
│       └── main.js          # JavaScript логіка
├── index.html               # Головна HTML сторінка
├── package.json             # NPM залежності та скрипти
├── vite.config.js           # Конфігурація Vite
├── .gitignore              # Git ignore файл
└── README.md               # Цей файл

🚀 Встановлення та запуск

Передумови

Переконайтесь, що у вас встановлені:

• Node.js (версія 16 або вище)
• npm (зазвичай йде разом з Node.js)

Крок 1: Клонування репозиторію

git clone <your-repository-url>
cd casino-games

Крок 2: Встановлення залежностей

npm install

Крок 3: Додавання зображень

Скопіюйте всі зображення ігор у папку src/assets/images/:

• image_1650.png (банер hero секції)
• Thumb.png (для каруселі)
• logo.png, logo2.png, ... logo10.png (зображення ігор)

Крок 4: Запуск dev-сервера

npm run dev

Проєкт буде доступний за адресою: http://localhost:3000

Крок 5: Збірка для продакшену

npm run build

Готові файли будуть у папці dist/

Перегляд production build

npm run preview

📱 Адаптивність

Проєкт адаптований для наступних breakpoints:

• Десктоп: 1200px+ (контейнер max-width: 1200px)
• Планшет: 768px - 1199px
• Мобільний: 375px - 767px

Особливості мобільної версії:

• Карусель з горизонтальним скролом
• Grid ігор перетворюється на каруселі (2 колонки)
• Повноекранне модальне вікно пошуку
• Оптимізовані розміри шрифтів та відступів

🔍 Функціонал пошуку

Як працює:

1. Клік на іконку лупи у хедері
2. Відкривається модальне вікно з усіма іграми
3. Введення тексту фільтрує ігри в реальному часі (debounce 300ms)
4. Кнопка очищення з'являється при введенні тексту
5. Клік на гру відкриває її (зараз показує alert)

Закриття пошуку:

• Клік на кнопку закриття (×)
• Натискання клавіші Escape
• Клік поза модальним вікном

🎮 Структура даних ігор

{
  id: 1,
  name: "Miss Cherry Fruits",
  provider: "Parrot's Gold",
  image: "./src/assets/images/logo.png",
  category: "recent" // або "top"
}

🎨 Кольорова схема

$primary-bg: #1a2332;      // Основний фон
$secondary-bg: #0f1621;    // Вторинний фон
$accent-blue: #6b8cff;     // Акцентний синій
$accent-purple: #9b8cff;   // Акцентний фіолетовий
$text-primary: #ffffff;    // Основний текст
$text-secondary: #8b9bb4;  // Вторинний текст
$border-color: #2a3a4f;    // Бордери

🎯 Додавання нових ігор

Відредагуйте масив gamesData у файлі src/js/main.js:

const gamesData = [
  {
    id: 11,
    name: "Назва нової гри",
    provider: "Провайдер",
    image: "./src/assets/images/logo11.png",
    category: "top" // або "recent"
  },
  // ... інші ігри
];

📦 NPM Scripts

npm run dev      # Запуск dev-сервера з hot reload
npm run build    # Збірка для продакшену
npm run preview  # Перегляд production build

🌐 Браузерна підтримка

• ✅ Chrome (останні 2 версії)
• ✅ Firefox (останні 2 версії)
• ✅ Safari (останні 2 версії)
• ✅ Edge (останні 2 версії)
• ✅ iOS Safari 12+
• ✅ Chrome Android

🐛 Відомі обмеження

• Пошук працює тільки з назвами ігор (не з провайдерами)
• Немає серверної частини (всі дані статичні)
• Play/Demo кнопки показують тільки alert (потребують інтеграції)

🔧 Налаштування Vite

Конфігурація знаходиться у файлі vite.config.js:

export default defineConfig({
  server: {
    port: 3000,
    open: true
  },
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: true
  }
});

📝 Методологія CSS

Проєкт використовує BEM (Block Element Modifier):

.block {}
.block__element {}
.block__element--modifier {}

// Приклад:
.game-card {}
.game-card__image {}
.game-card__button {}
.game-card__button--primary {}

🚀 Розгортання

Netlify

1. Зв'яжіть репозиторій з Netlify
2. Build command: npm run build
3. Publish directory: dist

Vercel

1. Імпортуйте проєкт у Vercel
2. Він автоматично визначить Vite
3. Deploy!

GitHub Pages

npm run build
# Завантажте вміст папки dist/ на gh-pages branch

🤝 Контрибьюція

1. Fork проєкту
2. Створіть feature branch (git checkout -b feature/AmazingFeature)
3. Commit зміни (git commit -m 'Add some AmazingFeature')
4. Push в branch (git push origin feature/AmazingFeature)
5. Відкрийте Pull Request

📄 Ліцензія

Цей проєкт має відкриту ліцензію - дивіться файл LICENSE для деталей.

👤 Автор

Ваше ім'я - @your-username

🙏 Подяки

• Vite за швидкий збірник
• Google Fonts за шрифт Rubik
• Дизайн натхненний сучасними казино платформами

📞 Підтримка

Якщо у вас виникли проблеми або питання:

• Створіть Issue
• Напишіть на email: your-email@example.com

---

Зроблено з ❤️ для гемблінг індустрії