npm package: @frgp/client-game-launcher
Description: 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 applicatio
Latest version: 1.0.3

# 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

```bash
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

```tsx
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

```tsx
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

```typescript
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

```typescript
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

```bash
# 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