mnemo_cards/games/EVENTS_SYSTEM.md

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

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

🎯 Цель

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

---

📱 Host App (Flutter Mobile)

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

1. Список событий

final List<Map<String, dynamic>> _events = [];
static const int _maxEvents = 10;

2. Callback для входящих payload'ов

_bridgeController.onPayloadReceived = (payload) {
  _addEvent('Received', payload.runtimeType.toString(), payload.toString());
};

3. Метод добавления событий

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. Список событий

final List<Map<String, dynamic>> _events = [];
static const int _maxEvents = 10;

2. Callback для входящих payload'ов

_webBridge.onPayloadReceived = (payload) {
  _addEvent('Received', payload.runtimeType.toString(), payload.toString());
};

3. Метод добавления событий

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)

// Добавлен callback
Function(BridgePayload)? onPayloadReceived;

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

🌐 WebBridge (Web)

// Добавлен 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 система работает стабильно