# EGM UI Wrapper Examples

This directory contains example files demonstrating the EGM UI wrapper system for terminal applications.

## Files

- **`wrapper.html`** - Main wrapper with iframe and control panel
- **`content.html`** - Simple content page that receives and logs messages
- **`slot_simulator.html`** - Slot game simulator with state management

## Message Structure

All messages use the following structure:

```javascript
{
    method: "METHOD_NAME",
    value: "optional_data",
    sender: "key|system|content",
    timestamp: "2024-01-01T12:00:00.000Z"
}
```

## Wrapper to Content Events

The wrapper sends these events to the content:

- **SPIN** - Start spin action
- **STOP** - Stop current action
- **HELP** - Show help/rules
- **INCREASE_LINES** - Increase number of lines
- **DECREASE_LINES** - Decrease number of lines
- **INCREASE_BET** - Increase bet amount
- **DECREASE_BET** - Decrease bet amount
- **MAX_BET** - Set maximum bet
- **AUTO_PLAY** - Toggle auto play mode
- **LOCK_CONTENT** - Lock user interaction
- **UNLOCK_CONTENT** - Unlock user interaction
- **UPDATE_BALANCE** - Add credits and start game (touch to start)
- **SPECIAL_FEATURE** - Trigger special feature

## Content to Wrapper Events

The content sends these events to the wrapper:

- **CHANGE_STATE** - Change game state
- **CONTENT_ERROR** - Report error
- **ACKNOWLEDGE** - Automatic acknowledgment (sent automatically when messages are received)

### Game States (CHANGE_STATE value)

- **ATTRACT** - Attract mode (no balance)
- **READY** - Ready to play (balance > 0)
- **ACTIVE** - Game in progress
- **BONUS** - Bonus round
- **SHOW_PRIZE** - Showing prize
- **SHOW_BIG_PRIZE** - Showing big prize
- **LOADING** - Loading state
- **ERROR** - Error state
- **LOCKED** - Locked state

## Usage

1. Open `wrapper.html` in a web browser
2. Select content from the dropdown (content.html, slot_simulator.html, or custom URL)
3. Use the control panel buttons to send events to the content
4. Watch the game state display update based on content responses
5. Use the SPIN/STOP button for game control

## Features

- **Responsive Design** - Control panel adapts to portrait/landscape
- **Game State Display** - Visual indicator of current game state
- **Message Logging** - All messages logged to console
- **Error Handling** - Error messages displayed in status area
- **Multiple Content Types** - Support for different content pages

## Slot Simulator Features

The slot simulator includes:

- **Dice Animation** - Visual dice rolling effect
- **State Management** - Proper state transitions
- **Balance System** - Credit management
- **Help Modal** - Game rules display
- **Ranking Panel** - Sliding ranking display
- **Random Outcomes** - Jackpot, bonus, wins, losses