jank
5d600a4b21
All checks were successful
CI / Get Changed Files (pull_request) Successful in 10s
Label PRs based on size / Check PR size (pull_request) Successful in 24s
Pull Request Labeler / labeler (pull_request_target) Successful in 10s
CI / oxlint (pull_request) Successful in 40s
CI / prettier (pull_request) Successful in 46s
CI / eslint (pull_request) Successful in 50s
CI / test-build (pull_request) Successful in 1m17s
Claude PR Review / claude-code (pull_request) Successful in 1m29s
CI / Docker frontend validation (pull_request) Successful in 15s
CI / Docker backend validation (pull_request) Successful in 14s
CI / Backend Tests (pull_request) Successful in 2m21s
CI / Checkstyle Main (pull_request) Successful in 1m49s
224 lines
6.6 KiB
Markdown
224 lines
6.6 KiB
Markdown
# 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
|
|
|