# Casino Gaming Platform - Frontend

A modern Angular 20 casino gaming platform featuring multiple games including Blackjack, Coinflip, Dice, Slots, and Lootboxes. Built with Angular 20, TailwindCSS 4, and powered by Bun for fast development.

## 🎮 Features

- **Multiple Games**: Blackjack, Coinflip, Dice, Slots, Lootboxes
- **User Authentication**: OAuth2, email verification, password recovery
- **Real-time Gaming**: Interactive game mechanics with animations
- **Payment Integration**: Stripe integration for deposits
- **Responsive Design**: Mobile-first design with TailwindCSS
- **Audio Experience**: Game sounds and audio feedback
- **Transaction History**: Complete betting and transaction tracking

## 🚀 Getting Started

### Prerequisites

- [Bun](https://bun.sh/) (recommended) or Node.js 18+
- Angular CLI 20+

### Installation

```bash
# Install dependencies
bun install

# Start development server
bun run start
```

The app will be available at `http://localhost:4200`

## 📋 Commands

### Development
- **Start Dev Server**: `bun run start` - Starts dev server with proxy configuration
- **Build**: `bun run build` - Production build
- **Watch Build**: `bun run watch` - Development build with file watching

### Code Quality
- **Format**: `bun run format` - Format code with Prettier
- **Format Check**: `bun run format:check` - Check code formatting
- **Lint**: `bun run lint` - Run ESLint
- **OxLint**: `bun run oxlint` - Run OxLint with strict warnings

### Testing
- **Test All**: `bun run test` - Run all tests with Karma/Jasmine
- **Test Single File**: `bunx @angular/cli test --include=path/to/test.spec.ts`

## 🛠️ Technology Stack

### Core
- **Angular 20**: Latest Angular framework with standalone components
- **TypeScript 5.8**: Strongly typed JavaScript
- **RxJS 7.8**: Reactive programming for HTTP and state management

### Styling & UI
- **TailwindCSS 4**: Utility-first CSS framework
- **PostCSS**: CSS processing and optimization
- **FontAwesome**: Icon library with Angular integration

### Animation & Interaction
- **GSAP**: High-performance animations
- **CountUp.js**: Number animation effects
- **Custom Audio Service**: Game sound effects and feedback

### Development Tools
- **Bun**: Fast JavaScript runtime and package manager
- **ESLint + Angular ESLint**: Code linting with Angular-specific rules
- **OxLint**: Fast Rust-based linter
- **Prettier**: Code formatting
- **Karma + Jasmine**: Testing framework

### Payment & APIs
- **Stripe**: Payment processing integration
- **Custom HTTP Interceptors**: API communication and error handling

## 🏗️ Architecture

### Project Structure
```
src/
├── app/
│   ├── feature/          # Feature modules
│   │   ├── auth/         # Authentication (login, register, OAuth2)
│   │   ├── game/         # Game modules (blackjack, coinflip, dice, slots)
│   │   ├── lootboxes/    # Lootbox system
│   │   └── deposit/      # Payment and deposits
│   ├── model/            # Data models and interfaces
│   ├── service/          # Core services (auth, user, transaction)
│   └── shared/           # Shared components, directives, services
├── environments/         # Environment configurations
└── public/              # Static assets (images, sounds)
```

### Key Components
- **Game Components**: Modular game implementations with services
- **Shared Components**: Reusable UI components (navbar, footer, modals)
- **Services**: Business logic and API communication
- **Guards**: Route protection and authentication
- **Interceptors**: HTTP request/response handling

## Style Guide

### Color Palette

#### Primary Colors
- Deep Blue: `#0a1219` (background)
- Deep Blue Light: `#121e27` (secondary background)
- Deep Blue Contrast: `#1a2835` (cards, elements)

#### Accent Colors
- Emerald: `#10b981` (primary buttons)
- Emerald Dark: `#059669` (button hover)
- Emerald Light: `#34d399` (highlights)

#### Text Colors
- Primary Text: `#ffffff` (white)
- Secondary Text: `#94a3b8` (light gray)
- Tertiary Text: `#64748b` (darker gray)

#### Additional Accents
- Yellow: `#fbbf24`
- Red: `#ef4444`
- Purple: `#8b5cf6`

### Typography

#### Font Sizes
- Extra Small: Text-xs (footer disclaimers)
- Small: Text-sm (navigation links, footer links)
- Base: Text-base (general text)
- Large: Text-lg (section headings)
- Extra Large: Text-xl (stat numbers, game headings)
- Display: Text-4xl/5xl/7xl (welcome bonus text)

#### Font Weights
- Normal: General text
- Medium: Labels
- Semibold: Navigation brand
- Bold: Headings, stats
- Extrabold: Welcome bonus text

### Components

#### Buttons
- Primary: Emerald background with hover state
- Secondary: Deep blue light background with hover state
- All buttons have active scale effect (95%)
- Transition duration: 200-300ms

#### Cards
- Background: Deep blue contrast
- Rounded corners (lg)
- Shadow effects with hover transition
- Consistent padding (p-4)

#### Navigation
- Desktop: Horizontal links with hover effects
- Mobile: Collapsible menu with toggle
- Links have color and background transitions

#### Modals
- Backdrop blur with dark overlay
- Card-style container with emerald focus rings
- Consistent form styling with transitions

### Forms

#### Inputs
- Dark background with border
- Focus states with emerald accent
- Consistent padding and rounded corners
- Clear label positioning

### Layout

#### Grid System
- Mobile-first responsive grid
- Breakpoints: sm, md, lg
- Grid columns: 1 (mobile), 2 (tablet), 3 (desktop)
- Consistent gap spacing (gap-4)

#### Spacing
- Consistent margin/padding scale
- Mobile-responsive spacing adjustments

### Animation
- Transitions: 200-500ms duration
- Hover/active state animations
- Scale transformations (95-110%)
- Opacity transitions for navigation elements

### Components & Classes

#### Common UI Elements
- `.card` - Base card container
- `.button-primary` - Main CTA buttons
- `.button-secondary` - Alternative action buttons
- `.section-heading` - Section titles
- `.nav-link` - Navigation links
- `.modal-card` - Modal container

#### Game Elements
- `.game-card-content` - Game information container
- `.game-heading-sm` - Small game titles
- `.game-heading-xl` - Large game titles
- `.game-text` - Game descriptions
- `.slider-container` - Game carousel container

### Responsive Design
- Mobile-first approach
- Tailwind breakpoints (sm, md, lg)
- Different layouts based on screen size
- Responsive text sizing and spacing
- Hidden/visible elements using responsive classes

### CSS Framework
- Tailwind CSS for utility classes
- Custom utility classes with @apply directive
- CSS variables for theming
- Component-based styling approach