@web-engine-dev/embed

Game embedding system for websites with iframe management, responsive sizing, and secure parent-child communication.

Features

• Iframe Embedding: Secure game embedding
• Responsive Sizing: Auto-resize to container
• Communication: Parent-child messaging
• Fullscreen: Cross-browser fullscreen
• Loading States: Loading and error handling

Installation

npm install @web-engine-dev/embed
# or
pnpm add @web-engine-dev/embed

Quick Start

Host Page

import { GameEmbed } from '@web-engine-dev/embed';

const embed = new GameEmbed({
  container: '#game-container',
  gameUrl: 'https://games.platform.com/my-game',
  responsive: true,
});

// Listen for game events
embed.on('loaded', () => console.log('Game loaded'));
embed.on('score', (score) => updateLeaderboard(score));

// Control game
embed.pause();
embed.resume();
embed.setVolume(0.5);

Game Side

import { EmbedBridge } from '@web-engine-dev/embed';

const bridge = new EmbedBridge();

// Check if embedded
if (bridge.isEmbedded) {
  // Listen for host commands
  bridge.on('pause', () => game.pause());
  bridge.on('resume', () => game.resume());

  // Send events to host
  bridge.emit('score', playerScore);
  bridge.emit('achievement', 'first_blood');
}

API Overview

GameEmbed (Host)

const embed = new GameEmbed({
  container: element,
  gameUrl: url,
  responsive: true,
  aspectRatio: '16:9',
  allowFullscreen: true,
  preload: true,
});

// Control
embed.load();
embed.reload();
embed.pause();
embed.resume();
embed.requestFullscreen();
embed.exitFullscreen();
embed.destroy();

// Events
embed.on('loaded', () => {});
embed.on('error', (err) => {});
embed.on('fullscreenchange', (isFullscreen) => {});

EmbedBridge (Game)

const bridge = new EmbedBridge();

// Properties
bridge.isEmbedded; // true if in iframe
bridge.parentOrigin; // Host origin

// Send to host
bridge.emit('event', data);

// Receive from host
bridge.on('command', (data) => {});

// Request from host
const playerData = await bridge.request('getPlayerData');

Responsive Sizing

const embed = new GameEmbed({
  container: '#game',
  gameUrl: url,
  responsive: true,
  aspectRatio: '16:9',
  minWidth: 320,
  maxWidth: 1920,
});

// Manual resize
embed.resize(800, 600);