FRG Game Launcher

A library for embedding and managing games in your web application through iframes. This library provides two ways to integrate games:

1. A React component for React applications
2. A class-based implementation for vanilla JavaScript/TypeScript applications

Installation

npm install @frgp/client-game-launcher

Features

• Two implementation options:
  • React component for React applications
  • Class-based implementation for vanilla JS/TS
• Embed games using direct URLs or session-based configuration
• Fullscreen support
• Customizable styling
• TypeScript support
• Built with React and Vite

Usage

React Component Usage

Basic Usage with Direct URL

import { Game } from '@frgp/client-game-launcher';

function App() {
  return (
    <Game
      data={{
        url: "https://game.example.com?s=s123&g=g123&p=p123"
      }}
    />
  );
}

Session-based Configuration

import { Game } from '@frgp/client-game-launcher';

function App() {
  return (
    <Game
      data={{
        sessionId: "session123",
        gameId: "game456",
        playerId: "player789",
        host: "https://game.example.com"
      }}
      allowFullscreen={true}
      className="custom-game-container"
    />
  );
}

Class-based Implementation

Basic Usage with Direct URL

import { GameLancher } from '@frgp/client-game-launcher';

const game = new GameLancher(
  'game-container', // ID of the container element
  {
    url: "https://game.example.com?s=s123&g=g123&p=p123"
  }
);
game.setup();

return (
    <div className="app">
      <div id="game-container" style={{ width: '100%', height: '100vh' }}></div>
    </div>
  )

Session-based Configuration

import { GameLancher } from '@frgp/client-game-launcher';

const game = new GameLancher(
  'game-container', // ID of the container element
  {
    sessionId: "session123",
    gameId: "game456",
    playerId: "player789",
    host: "https://game.example.com"
  },
  true // allowFullscreen
);
game.setup();

return (
    <div className="app">
      <div id="game-container" style={{ width: '100%', height: '100vh' }}></div>
    </div>
  )

API Reference

React Component Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | object | Required | Game configuration object | | data.url | string | - | Direct URL to the game (when using URL configuration) | | data.sessionId | string | - | Session identifier (when using session configuration) | | data.gameId | string | - | Game identifier (when using session configuration) | | data.playerId | string | - | Player identifier (when using session configuration) | | data.host | string | - | Host URL (when using session configuration) | | allowFullscreen | boolean | true | Whether to allow fullscreen mode | | className | string | "" | Additional CSS class names |

Class-based Implementation

Constructor Parameters

| Parameter | Type | Required | Description | |-----------|------|----------|-------------| | containerId | string | Yes | ID of the HTML element where the game will be mounted | | config | object | Yes | Game configuration object | | allowFullscreen | boolean | No | Whether to allow fullscreen mode (default: true) |

Methods

| Method | Description | |--------|-------------| | setup() | Mounts the game iframe in the specified container |

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build the library
npm run build

# Run linting
npm run lint

# Preview production build
npm run preview

Build Output

The build process generates:

• UMD bundle (frg-game-launcher.umd.js)
• ES module bundle (frg-game-launcher.es.js)
• TypeScript declarations (index.d.ts)

License

MIT