mnemo_cards/games/EVENTS_SYSTEM.md

# 📊 Система отображения событий Flutter WebView Bridge

## ✅ Добавлено в оба приложения

### 🎯 Цель
Отображение всех отправленных и полученных payload'ов в реальном времени для демонстрации bridge коммуникации.

---

## 📱 Host App (Flutter Mobile)

### 🔧 Добавленные компоненты:

#### 1. **Список событий**
```dart
final List<Map<String, dynamic>> _events = [];
static const int _maxEvents = 10;
```

#### 2. **Callback для входящих payload'ов**
```dart
_bridgeController.onPayloadReceived = (payload) {
  _addEvent('Received', payload.runtimeType.toString(), payload.toString());
};
```

#### 3. **Метод добавления событий**
```dart
void _addEvent(String type, String payloadType, String details) {
  setState(() {
    _events.insert(0, {
      'timestamp': DateTime.now(),
      'type': type,
      'payloadType': payloadType,
      'details': details,
    });
    
    if (_events.length > _maxEvents) {
      _events.removeRange(_maxEvents, _events.length);
    }
  });
}
```

#### 4. **UI панель событий**
- Компактная панель высотой 120px
- Отображение времени, типа и названия payload
- Цветовая индикация: зеленый (получено) / синий (отправлено)
- Кнопка "Clear" для очистки списка

---

## 🌐 Web App (Flutter Web)

### 🔧 Добавленные компоненты:

#### 1. **Список событий**
```dart
final List<Map<String, dynamic>> _events = [];
static const int _maxEvents = 10;
```

#### 2. **Callback для входящих payload'ов**
```dart
_webBridge.onPayloadReceived = (payload) {
  _addEvent('Received', payload.runtimeType.toString(), payload.toString());
};
```

#### 3. **Метод добавления событий**
```dart
void _addEvent(String type, String payloadType, String details) {
  setState(() {
    _events.insert(0, {
      'timestamp': DateTime.now(),
      'type': type,
      'payloadType': payloadType,
      'details': details,
    });
    
    if (_events.length > _maxEvents) {
      _events.removeRange(_maxEvents, _events.length);
    }
  });
}
```

#### 4. **UI панель событий**
- Card с заголовком "Recent Events"
- Список высотой 100px
- Отображение времени, типа и названия payload
- Цветовая индикация: зеленый (получено) / синий (отправлено)
- Кнопка "Clear" для очистки списка

---

## 🔄 Обновленные Bridge компоненты

### 📱 BridgeWebViewController (Host)
```dart
// Добавлен callback
Function(BridgePayload)? onPayloadReceived;

// Обновлен метод handleWebMessage
onPayloadReceived?.call(payload);
```

### 🌐 WebBridge (Web)
```dart
// Добавлен callback
Function(BridgePayload)? onPayloadReceived;

// Обновлен метод _handleHostMessage
onPayloadReceived?.call(payload);
```

---

## 🎯 Демонстрируемые возможности

### ✅ Отправленные события (Sent):
- **Host → Web**: PingPayload, ShowNativeDialogPayload, SecretAdminCommandPayload
- **Web → Host**: PingPayload, GetUserInfoPayload, LoginRequestPayload, SubmitQuizPayload

### ✅ Полученные события (Received):
- **Host ← Web**: Все ответы от web приложения
- **Web ← Host**: Все ответы от host приложения

### ✅ Визуальные индикаторы:
- 🟢 **Зеленый**: Полученные payload'ы (иконка download)
- 🔵 **Синий**: Отправленные payload'ы (иконка upload)
- ⏰ **Время**: Точное время отправки/получения
- 📝 **Тип**: Название класса payload'а

---

## 🚀 Как использовать

### 1. **Запустите оба приложения**
- Host app на телефоне
- Web app на ноутбуке

### 2. **Отправьте payload'ы**
- Нажмите кнопки в host app (Send Ping, Show Dialog, Admin Command)
- Нажмите кнопки в web app (Send Ping, Request User Info, Login, Quiz)

### 3. **Наблюдайте события**
- В host app: панель событий под панелью управления
- В web app: карточка событий перед footer

### 4. **Проверьте коммуникацию**
- Убедитесь, что события появляются в обоих приложениях
- Проверьте правильность типов payload'ов
- Убедитесь в корректности времени

---

## 🎉 Результат

**Теперь вы можете видеть все ping'и и другие payload'ы в реальном времени!**

- ✅ Полный цикл коммуникации видим
- ✅ Типы payload'ов отображаются
- ✅ Время отправки/получения фиксируется
- ✅ Изоляция payload'ов демонстрируется
- ✅ Bridge система работает стабильно