Skip to content

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.
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.
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).
showToasts boolean true to show toast notifications for errors/messages, false to handle externally.
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>

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;
}

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;
  inputInAnchorCurrency?: boolean;
  locale?: string;
  showToasts?: boolean;
  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.

gtGame.in.toggleFairness

Show or hide the fairness dialog.

{
  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 | number;
  [x: string]: unknown;
}

Note

Additional data may be passed as part of the payload where relevant.

gtGame.out.fairnessToggled

Fairness dialog toggled.

{
  value: boolean;
}

gtGame.out.init

Game initialized.

{
  game: string;
  sound: boolean;
  volume: number;
}

gtGame.out.notification

Game notification.

{
  type: string;
}

gtGame.out.settingsToggled

Settings dialog toggled.

{
  game: string;
  value: boolean;
}

gtGame.out.showBetDetails

Request to display details for a bet.

{
  roundId: string;
  zeroBet: boolean;
}

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;
}