Поверхность малого компонента
Вашему компоненту React нужно всего лишь отобразить iframe, задать его размер и, при необходимости, управлять обработчиками событий.
Игровой виджет React
Игровой виджет на React для браузерных игр
Командам разработчиков React не нужно создавать игру с нуля, чтобы добавить интерактивный виджет. Отобразите Games I Know iframe внутри компонента React, передайте URL фрейма и отслеживайте события postMessage, когда родительскому приложению потребуется состояние игры.
компонент iframe
Обработчик сообщений React
Адаптивная оболочка
Подписанная поддержка завершения
Краткий ответ
Используйте маршрут через фрейм, а затем добавьте контекст страницы.
В React создайте небольшой компонент iframe для /embed/{gameSlug}/frame/, передайте tenantId в качестве параметра URL и добавьте обработчик событий для Games I Know.
Попробуйте игровой виджет, совместимый с React.
Демонстрация показывает iframe и события родительской страницы, на которые может подписаться ваше приложение React.
Разработчики React добавляют игру embed
Почему команды, работающие с React, используют виджет iframe
iframe позволяет отделить среду выполнения игры от вашего приложения, сохраняя при этом возможность интеграции на основе событий.
Без комплекта игрового движка
Игра не увеличивает размер пакета вашего React-приложения за счет логики игрового поля, ресурсов или кода реального времени.
Четкая граница интеграции
Родительское приложение может реагировать на события, не будучи напрямую связанным с внутренними механизмами игры.
Настройка процесса
Как создать игровой виджет в React
Оберните iframe в компонент, при необходимости мемоизируйте URL фрейма и очистите обработчики сообщений при размонтировании.
Шаг 1
Создайте компонент GameWidget.
Отобразить iframe с шириной 100%, стабильной высотой, параметром allow="fullscreen", и URL-адресом фрейма Games I Know.
Шаг 2
Передайте конфигурацию арендатора
Создайте файл src, указав свой tenantId и, при необходимости, campaignId, чтобы данные на вашей панели мониторинга оставались упорядоченными.
Шаг 3
Listen in useEffect
Прикрепите window.addEventListener("message", handler) и отфильтруйте сообщения, где data.source - gamesiknow.
Шаг 4
Перед получением вознаграждения необходимо провести проверку.
Если приложение React разблокирует награды, вызовите бэкэнд и проверьте подписанные результаты, прежде чем что-либо предоставлять.
Выполнение
Примечания к реализации React
Не делайте компонент iframe скучным. Большинство ошибок возникает из-за нестабильного размера, дублирования обработчиков событий или чрезмерного доверия к сообщениям браузера.
Используйте надежный ключ.
Не перемонтируйте iframe при каждом рендеринге родительского элемента. Поддерживайте стабильность src, если только не меняются настройки игры или арендатора.
Очистка слушателей
Возвращает функцию очистки из useEffect, чтобы в режиме разработки React не оставалось дублирующихся обработчиков событий.
Отделение пользовательского интерфейса от проверки
React может быстро отобразить результат, но решения о присуждении призов или начислении баллов должны приниматься на вашем сервере.
Доступные игры
Выберите игру, подходящую для этой страницы.
Tic Tac Toe
Embed for same-screen play on your site, or send players to Games I Know to challenge a friend remotely with a room link.
Embed настройка
Four in a Row
Embed for local two-player drops on one screen, or link friends to play Four in a Row online from anywhere.
Embed настройка
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Embed настройка
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Embed настройка
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Embed настройка
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Embed настройка
Часто задаваемые вопросы
Часто задаваемые вопросы о Игровой виджет React
В чем разница между /embed/{gameSlug}/ и /embed/{gameSlug}/frame/?
Используйте /embed/{gameSlug}/frame/ в качестве src для iframe. Этот маршрут представляет собой легковесный игровой фрейм, созданный для веб-страниц embed и событий postMessage. Маршрут /embed/{gameSlug}/ - это страница для публичного предварительного просмотра и SEO-оптимизации, а не маршрут, который следует размещать внутри iframe.
Нужно ли посетителям скачивать приложение или создавать учетную запись?
Нет. Посетители могут играть в браузере iframe на телефоне, планшете, ноутбуке или настольном компьютере. Партнерский аккаунт нужен только владельцу сайта, который устанавливает embed.
Могу ли я ограничить использование embed только своим собственным доменом?
Да. Games I Know и embed разработаны для зарегистрированных веб-сайтов и настроек арендаторов с ограничениями по домену, поэтому скопированный код iframe нельзя свободно использовать на неавторизованных сайтах.
Какие названия Games I Know в настоящее время доступны для embed?
Игры Tic Tac Toe, Four in a Row, Bingo и I Know доступны в качестве браузерных игр, поддерживающих embed. В документации к embed используется одна и та же модель событий для всех поддерживаемых игр.
Является ли Games I Know пакетом React?
Нет. Games I Know и embed основаны на iframe. Это обеспечивает независимость от фреймворка настройки, при этом компонент React работает корректно.
Готовы добавить браузерную игру?
Создайте партнерский аккаунт, зарегистрируйте свой домен и сгенерируйте для своего веб-сайта iframe с ограничением доступа к домену.