Skip to main content

Universal UI

Language​

You can use the translation module on the Universal UI to translate any text for your game.

  1. Specify your translation files:
  • Specifying the route from the game root path:
await ETHEREAL.ui.addTranslation((lang: string) => `locale/${lang}/translation.json`, "app");
  • Use a more simplified version, that gets the file from /locale/<language>/:
await ETHEREAL.ui.addTranslation(`translation.json`, "app");
PRO TIP

This is the recommended option, as the files on this route will be automatically translated if not found for the requested language, using the /locale/en/<fileName>.json as base. This is explained in detail here

  • Add absolute paths:
await ETHEREAL.ui.addTranslation("https://test.rgsplatform.win/games/res/app/example/locale/en/translation.json", "absolute");
  1. Obtain a text translation:
ETHEREAL.ui.translate(<key>);
ETHEREAL.ui.translate(<key>, <data>);

If needed, add data to the translations as an object like: { x: <value>, asdf: <value2> }.

And on the translation, specify those placeholders: "key1": "Some translation with {{x}} and {{asdf}}."

PRO TIP

The UI already download a common translation that you can use. Check the latest version here

Currency​

You can use the translation and format module on the Universal UI to format any number or currency for your game, using the current language:

let currency: string = ETHEREAL.ui.formatCurrency(1000); // Result: 1,000.00 USD
let currencySymbol: string = ETHEREAL.ui.formatCurrency(1000, true); // Result: $1,000.00

let amount: string = ETHEREAL.ui.formatNumber(1000.5); // Result: 1,000.5
let decimals: string = ETHEREAL.ui.formatNumber(1000.5, { style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2 }); // Result: 1,000.50

Messages​

You can show a message on top of the game using the UI:

ETHEREAL.notifyMessage(MessageType.INFO, <title>, <message>, [ <actions> ]);

You can use a key that exist on the translation files provided to the UI (check the Language block) or give the translated message directly.

The actions will show as buttons at the bottom of the message. There are some default actions that you can use specifying the name:

  • DefaultMessageButtonType.CONTINUE: Closes the message without any extra action.
  • DefaultMessageButtonType.CLOSE: Same as CONTINUE but show "CLOSE" as text on the button.
  • DefaultMessageButtonType.HOME: Redirect or open a new tab with the casino home page (only visible if the home redirect is available).
  • DefaultMessageButtonType.DEPOSIT: Redirect or open a new tab with the casino deposit page (only visible if the deposit redirect is available).
  • DefaultMessageButtonType.RELOAD: Reload the game (only visible if the game allows to be reloaded).
  • DefaultMessageButtonType.TIMEOUT_RELOAD: Shows a countdown of 5 seconds and then proceeds to reload the game automatically (only visible if the game allows to be reloaded).

If you need any other action, you can add as many as you want with the format:

interface MessageButtonConfig {
    // Name to show on the button
    name: string;
    // Action to do when clicking the button
    onClick?: () => void;
    // Action to do when the message popups, with callbacks to change teh name of the button and to force the close of the message
    onShow?: (changeName: (name: string) => void, forceClose: () => void) => void;
    // Action to do when the message hide
    onHide?: () => void;
    // Condition for the button to appear (Checked every time the message opens)
    condition?: () => boolean;
}

You can also use commonly used messages with all the functionality already defined:

  • When there is no enough balance to play:
ETHEREAL.ui.showMessage(DefaultMessageType.NOT_ENOUGH_BALANCE);
// Or as a string: ETHEREAL.ui.showMessage("NOT_ENOUGH_BALANCE");
  • When the max win cap has been reached:
ETHEREAL.ui.showMessage(DefaultMessageType.MAX_WIN_CAP);
// Or as a string: ETHEREAL.ui.showMessage("MAX_WIN_CAP");
  • When there is an unknown error:
ETHEREAL.ui.showMessage(DefaultMessageType.ERROR);
// Or as a string: ETHEREAL.ui.showMessage("ERROR");
  • When the game restored a round:
GAME_RESTORED
ETHEREAL.ui.showMessage(DefaultMessageType.GAME_RESTORED);
// Or as a string: ETHEREAL.ui.showMessage("GAME_RESTORED");

To Do

Player history​

To Do

Promotion​

To Do

Jackpot​

To Do