casino/frontend

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 (recommended) or Node.js 18+
• Angular CLI 20+

Installation

# 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