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>.

This component accepts the following attributes:

Attribute	Type	Required	Description
game	string	✅	The unique name of the game to load.
token	string	✅	The session token used for authentication.
locale	string	❌	The locale code for content localization.
walletBalance	number	❌	The user's wallet balance, used for logic such as Max Bet calculations.
walletCurrencyIsoCode	string	✅	Wallet currency code.
anchorCurrencyIsoCode	string	❌	Anchor currency code.
anchorToWalletExchangeRate	number	❌	Exchange rate between the two currencies. Omit if unused or same as wallet currency.
inputInAnchorCurrency	boolean	❌	true if the user prefers to input values in the anchor currency instead of wallet currency.
defaultStake	number	❌	Default stake value in wallet currency.
showToasts	boolean	❌	true to show toast notifications for errors/messages, false to handle externally.

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

Payload:

{
  walletBalance: number;
}

gtGame.in.currencyChanged – Update currency settings

Payload:

{
  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

Payload:

{
  locale: string;
}

gtGame.in.reload – Reload the game with new settings

Payload:

{
  token: string;
  locale?: string;
  walletBalance?: number;
  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.toggleFairness – Show/hide fairness dialog

Payload:

{
  value: boolean;
}

gtGame.in.toggleSettings – Show/hide settings dialog

Payload:

{
  value: boolean;
}

gtGame.in.toggleSound – Toggle game sounds

Payload:

{
  value: boolean;
}

gtGame.in.triggerAction – Trigger a game action

Payload:

{
  action: string;
  value?: string;
}

Note:

Available actions are game-specific.

Outgoing Events

gtGame.out.betPlaced – Bet placement acknowledged by server

Payload:

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

gtGame.out.betSettled – Bet has been settled

Payload:

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

gtGame.out.error – Game error occurred

Payload:

{
  code: string | number;
}

Note:

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

gtGame.out.init – Game initialized

Payload:

{
  game: string;
}

gtGame.out.fairnessToggled – Fairness dialog toggled

Payload:

{
  value: boolean;
}

gtGame.out.settingsToggled – Settings dialog toggled

Payload:

{
  value: boolean;
}

gtGame.out.soundToggled – Game sounds toggled

Payload:

{
  value: boolean;
}

gtGame.out.userAction – User performed an action

Payload:

{
  game: string;
  action: string;
  value?: string;
}

Note:

Available actions are game-specific.