Game Loader¶

Overview¶

The Game Loader component serves as the primary entry point for rendering a game. It accepts a game attribute, preloads all required assets in the background, and displays a loader while this process is ongoing. Once loading is complete, the game is initialized and rendered in place of the loader.

Script URL¶

This web component is provided as a script and can be loaded from the CDN using the following URL pattern:

https://<cdn-url>/<bundle-version>/game-loader.js

Example:

https://cdn.prod-gt-demo-games.gamnify.tech/v1.1.0/game-loader.js

Both <cdn-url> and <bundle-version> values will be provided to you.

If making use of the browser's Subresource Integrity feature, the integrity hash will also be provided.

Component Details¶

Once the script is loaded, the Game Loader component can be added to the page by using the element <gt-game-loader>.

Required Attributes¶

Attribute	Type	Description
`game`	string	The unique name of the game to load.
`token`	string	The session token used for authentication. Required unless `funPlay` is `true`.
`walletCurrencyIsoCode`	string	ISO 4217 currency code (e.g. `EUR`, `USD`).

Optional Attributes¶

Attribute	Type	Description
`anchorCurrencyIsoCode`	string	Anchor currency ISO 4217 code (e.g. `EUR`, `USD`).
`anchorToWalletExchangeRate`	number	Exchange rate between the two currencies. Omit if unused or same as wallet currency.
`defaultStake`	number	Default stake value in wallet currency.
`funPlay`	boolean	`true` to play with play money instead of the user's wallet. Defaults to `false`. See Fun Play.
`hotkeys`	boolean	Enable keyboard shortcuts. Defaults to `true`.
`inputInAnchorCurrency`	boolean	`true` if the user prefers to input values in the anchor currency instead of wallet currency.
`integrity`	string	Hash value used for Subresource Integrity checks on the game script.
`locale`	string	The locale code for content localization (e.g. `en-US`). See Supported Locales.
`showToasts`	boolean	`true` to show toast notifications for errors/messages, `false` to handle externally.
`theme`	string	The visual theme to apply (e.g. `dark`, `light`). Falls back to the default theme if invalid.
`walletBalance`	number	The user's wallet balance, used for logic such as Max Bet calculations.

Example¶

<gt-game-loader 
  game="dice" 
  token="auth-token-value"
  walletCurrencyIsoCode="EUR"
  showToasts="false"
></gt-game-loader>

Fun Play¶

Set funPlay to true to let the user try a game with play money. The game creates its own play-money session before it loads, and everything after that — betting, balance, history — behaves as normal. Nothing is wagered against the user's real wallet.

<gt-game-loader
  game="dice"
  funPlay="true"
  walletCurrencyIsoCode="EUR"
></gt-game-loader>

token may be omitted entirely, which starts an anonymous fun-play session. Supplying it alongside funPlay links the fun-play session to that user instead, so their activity can be attributed to them.

walletBalance is ignored in fun play — the starting balance comes from the play-money session. Balances pushed with gtGame.in.balanceUpdated are ignored for the same reason.

Note

Fun play is enabled per game. When a play-money session cannot be created — the game does not support fun play, or the service is unreachable — the game does not load and displays a message instead. gtGame.out.init is still emitted so the host can dismiss its own loading state. A gtGame.out.error event is emitted as well when the session failed for a reason other than the game not supporting fun play.

Supported Locales¶

The locale attribute (and the gtGame.in.localeChanged event) accepts any of the following BCP 47 locale codes:

Locale code	Language
`en-US`	English (United States) — default
`de-DE`	German (Germany)
`es-AR`	Spanish (Argentina)
`fr-FR`	French (France)
`ja-JP`	Japanese (Japan)
`ko-KR`	Korean (South Korea)
`pl-PL`	Polish (Poland)
`pt-BR`	Portuguese (Brazil)
`ru-RU`	Russian (Russia)
`sr-RS`	Serbian (Serbia)
`tr-TR`	Turkish (Turkey)
`zh-CN`	Chinese (Simplified, China)

Note

en-US is the default (base) locale and is used when no locale is provided.

Events¶

The following is a list of all available events supported by this component.

Details on how to listen for and dispatch events can be found here.

Incoming Events¶

`gtGame.in.balanceUpdated`¶

Update user balance.

{
  walletBalance: number;
}

Note

Ignored in fun play, where the balance is held by the play-money session.

`gtGame.in.changeVolume`¶

Change game volume. Value ranges from 0 to 1.

{
  game?: string; // if undefined, applies to all active games
  value: number;
}

`gtGame.in.currencyChanged`¶

Update currency settings.

{
  walletCurrencyIsoCode: string;
  anchorCurrencyIsoCode?: string;
  anchorToWalletExchangeRate?: number;
  inputInAnchorCurrency?: boolean;
}

Note

inputInAnchorCurrency is optional only when the anchor currency is either not used or is the same as the wallet currency.

`gtGame.in.localeChanged`¶

Update user locale.

{
  locale: string;
}

`gtGame.in.reload`¶

Reload the game with new settings.

{
  anchorCurrencyIsoCode?: string;
  anchorToWalletExchangeRate?: number;
  defaultStake?: number;
  funPlay?: boolean;
  hotkeys?: boolean;
  inputInAnchorCurrency?: boolean;
  locale?: string;
  showToasts?: boolean;
  theme?: string;
  token?: string;
  walletBalance?: number;
  walletCurrencyIsoCode: string;
}

Note

inputInAnchorCurrency is optional only when the anchor currency is either not used or is the same as the wallet currency.

Note

A reload with funPlay set to true starts a new play-money session, discarding the balance of the previous one.

`gtGame.in.themeChanged`¶

Update visual theme.

{
  theme: string;
}

`gtGame.in.toggleFairness`¶

Show or hide the fairness dialog.

{
  game?: string; // if undefined, applies to all active games
  value: boolean;
}

`gtGame.in.toggleSettings`¶

Show or hide the settings dialog.

{
  game?: string; // if undefined, applies to all active games
  value: boolean;
}

`gtGame.in.toggleSound`¶

Toggle game sounds.

{
  game?: string; // if undefined, applies to all active games
  value: boolean;
}

`gtGame.in.triggerAction`¶

Trigger a game action.

{
  action: string;
  value?: string;
}

Note

Available actions are game-specific.

Outgoing Events¶

`gtGame.out.betPlaced`¶

Bet placement acknowledged by the server.

{
  game: string;
  stake: number;
  balance: {
    anchorBalance: number;
    walletBalance: number;
    estimated: boolean;
    timeStamp: number;
  } | null;
}

`gtGame.out.betSettled`¶

Bet has been settled.

{
  game: string;
  wonMultiplier: number;
  wonGrossAmount: number;
  balance: {
    anchorBalance: number;
    walletBalance: number;
    estimated: boolean;
    timeStamp: number;
  } | null;
}

`gtGame.out.error`¶

Game error occurred.

{
  code: string;
  message: string;
  game: string;
}

`gtGame.out.fairnessToggled`¶

Fairness dialog toggled.

{
  game?: string;
  value: boolean;
}

`gtGame.out.init`¶

Game initialized.

{
  game: string;
  hasPatchNotes: boolean;
  instanceId: string;
  sound: boolean;
  version: string;
  volume: number;
}

`gtGame.out.notification`¶

Game notification.

{
  description: string;
  game: string;
  title: string;
  type: 'info' | 'success' | 'warning';
}

`gtGame.out.settingsToggled`¶

Settings dialog toggled.

{
  game: string;
  value: boolean;
}

`gtGame.out.showBetDetails`¶

Request to display details for a bet.

{
  roundId: string;
  zeroBet: boolean;
  token: string | null;
}

`gtGame.out.soundToggled`¶

Game sounds toggled.

{
  game: string;
  value: boolean;
}

`gtGame.out.userAction`¶

User performed an action.

{
  game: string;
  action: string;
  data?: Record<string, unknown>;
}

`gtGame.out.volumeChanged`¶

Game volume changed. Value ranges from 0 to 1.

{
  game: string;
  value: number;
}

Game Loader¶

Overview¶

Script URL¶

Component Details¶

Required Attributes¶

Optional Attributes¶

Example¶

Fun Play¶

Supported Locales¶

Events¶

Incoming Events¶

gtGame.in.balanceUpdated¶

gtGame.in.changeVolume¶

gtGame.in.currencyChanged¶

gtGame.in.localeChanged¶

gtGame.in.reload¶

gtGame.in.themeChanged¶

gtGame.in.toggleFairness¶

gtGame.in.toggleSettings¶

gtGame.in.toggleSound¶

gtGame.in.triggerAction¶

Outgoing Events¶

gtGame.out.betPlaced¶

gtGame.out.betSettled¶

gtGame.out.error¶

gtGame.out.fairnessToggled¶

gtGame.out.init¶

gtGame.out.notification¶

gtGame.out.settingsToggled¶

gtGame.out.showBetDetails¶

gtGame.out.soundToggled¶

gtGame.out.userAction¶

gtGame.out.volumeChanged¶

`gtGame.in.balanceUpdated`¶

`gtGame.in.changeVolume`¶

`gtGame.in.currencyChanged`¶

`gtGame.in.localeChanged`¶

`gtGame.in.reload`¶

`gtGame.in.themeChanged`¶

`gtGame.in.toggleFairness`¶

`gtGame.in.toggleSettings`¶

`gtGame.in.toggleSound`¶

`gtGame.in.triggerAction`¶

`gtGame.out.betPlaced`¶

`gtGame.out.betSettled`¶

`gtGame.out.error`¶

`gtGame.out.fairnessToggled`¶

`gtGame.out.init`¶

`gtGame.out.notification`¶

`gtGame.out.settingsToggled`¶

`gtGame.out.showBetDetails`¶

`gtGame.out.soundToggled`¶

`gtGame.out.userAction`¶

`gtGame.out.volumeChanged`¶