# Townships Combat League Website

A modern, minimalist, and essential website for the Townships Combat League, built with pure HTML and JavaScript, designed to be served by nginx.

## Features

### Authentication
- **Login**: Existing users can log in with their credentials
- **Sign-up**: New users can register and choose their role (broker or player) - **Note**: The mbetterc API currently does not have a signup endpoint. User accounts must be created by an administrator through the mbetterc dashboard or database. The sign-up form will display an appropriate error message if the endpoint is not available.
- **Role-based Access**: Different interfaces for brokers and players

### Broker Dashboard
- **API Access**: Full access to the mbetterc API for building custom applications
- **Membership Management**: Configuration for broker membership tiers
- **API Purchase**: System for buying access to the API
- **API Documentation**: Comprehensive documentation for all API endpoints
- **Webhook Configuration**: Set up webhooks for real-time updates
- **Application Settings**: Configure your betting application

### Player Dashboard
- **Live Video Streaming**: Watch HLS video streams of matches/events
- **Bet Placement**: Interface for inserting and managing bets
- **Account Management**: View balance, deposit, and withdraw funds
- **Betting History**: Track recent bets and statistics
- **Upcoming Matches**: View scheduled matches and odds

## File Structure

```
web/
├── AI.PROMPT              # AI prompt for understanding the website
├── README.md              # This file
├── index.html             # Login/Sign-up page
├── broker.html            # Broker dashboard
├── player.html            # Player dashboard
├── styles.css             # Minimalist, modern styling
├── app.js                 # Core JavaScript application logic
├── broker.js              # Broker-specific functionality
└── player.js              # Player-specific functionality
```

## Technology Stack

- **HTML5**: Semantic markup
- **CSS3**: Modern styling with CSS variables
- **Vanilla JavaScript**: No frameworks or dependencies
- **HLS.js**: For HLS video playback (loaded via CDN)

## API Integration

All API calls are made to the mbetterc backend through the `/api` endpoint. The website expects the following API structure:

### Authentication Endpoints
- `POST /api/auth/login` - User login
- `POST /api/auth/signup` - User registration (Note: This endpoint is not currently available in mbetterc API. Accounts must be created by administrators.)

### Broker Endpoints
- `GET /api/broker/api-key` - Get API key
- `POST /api/broker/regenerate-api-key` - Regenerate API key
- `GET /api/broker/membership` - Get membership info
- `POST /api/broker/upgrade-membership` - Upgrade membership
- `GET /api/broker/stats` - Get broker statistics
- `GET /api/broker/webhook` - Get webhook configuration
- `PUT /api/broker/webhook` - Update webhook configuration
- `GET /api/broker/settings` - Get application settings
- `PUT /api/broker/settings` - Update application settings

### Player Endpoints
- `GET /api/player/balance` - Get player balance
- `GET /api/player/bets` - Get player bets
- `POST /api/player/bets` - Place a bet
- `GET /api/player/statistics` - Get player statistics
- `POST /api/player/deposit` - Deposit funds
- `POST /api/player/withdraw` - Withdraw funds

### Match Endpoints
- `GET /api/matches` - Get available matches
- `GET /api/matches/{id}/odds` - Get match odds

### Stream Endpoints
- `GET /api/stream/{match_id}` - Get HLS stream URL

## Deployment with Nginx

### Basic Nginx Configuration

```nginx
server {
    listen 80;
    server_name your-domain.com;
    
    root /path/to/web;
    index index.html;
    
    # Serve static files
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # Proxy API requests to mbetterc backend
    location /api/ {
        proxy_pass http://localhost:8000/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    
    # Enable gzip compression
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
}
```

### SSL Configuration (Recommended)

```nginx
server {
    listen 443 ssl http2;
    server_name your-domain.com;
    
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;
    
    # ... rest of the configuration
}
```

## Development

### Local Development

1. Clone the repository
2. Navigate to the `web` directory
3. Open `index.html` in your browser

### Testing API Integration

Since the website expects API endpoints, you'll need to either:
- Set up a local mbetterc API server
- Use a mock API server for testing
- Modify the `API_BASE_URL` in `app.js` to point to your test server

## Design Principles

- **Minimalist**: Clean, uncluttered interface with essential elements only
- **Modern**: Contemporary design with smooth transitions and responsive layout
- **Essential**: Focus on core functionality without unnecessary features
- **User-friendly**: Intuitive navigation and clear calls-to-action
- **Performance**: Fast loading times and efficient resource usage

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Security Considerations

- All sensitive data should be transmitted over HTTPS
- API tokens are stored in localStorage (consider using httpOnly cookies for production)
- Input validation is performed on both client and server side
- CSRF protection should be implemented on the server side

## Future Enhancements

- Mobile app version for iOS and Android
- Advanced analytics for brokers
- Social features for players (leaderboards, chat)
- Multi-language support
- Advanced betting options and markets
- Real-time odds updates via WebSocket

## License

Copyright © 2026 Townships Combat League. All rights reserved.