Articles in this section

See more

Game Client

Follow

This section describes how to embed the Integration Casino game client on the Customer’s web page, step by step. For a complete example, proceed directly to HTML page sample.

Including required JavaScript files

To simplify the integration, we provide a couple of JavaScript functions, defined in a script ClientUtils.js, which is hosted on our servers. Customer system is required to include the script on their web page as follows:

<script type="text/javascript" src="{BaseURL}/ClientUtils.js"></script>

{BaseURL} can be obtained from GetModuleInfo operation – it’s the value corresponding to the key param:base.

Defining Game Client placeholder

Anywhere in the HTML document, create a new element and give it an id attribute. You can freely customize its content – it’s to be shown in case the Game Client starting procedure fails (i.e. it can display Flash player is not installed error message):

<div id="gameClientPlaceholder">
  <h2>Game Client starting procedure failed!</h2>
</div>

Embedding the Game Client

Place the following script anywhere after the Game Client placeholder element:

<script type="text/javascript">
  var params = {
    {GameModuleParams}
  };
  renderClient(params, 'gameClientPlaceholder');
</script>

The first statement constructs the params object, with {GameModuleParams} being just a placeholder for its property initializers – a collection of key:value pairs of JavaScript string literals to be dynamically inserted by Customer system when rendering the web page.

The property collection has to include a property with key var:lang, which determines the language to be used by the Game Client for communication with the Player. For information on possible values please refer to Supported Languages (pick the language code of the respective language from the Code column).

The keys/values of additional properties to be initialized can be obtained from the GetModuleInfo operation.

Optionally, the Customer system can insert an additional property with key var:exitUrl. When present, a new Home button will appear in the Game / Games Lobby. Tapping / clicking the button will redirect the Player’s browser to the specified URL.

NOTE: Customer system using Casino Games Lobby mode can specify a special key _weblobby_, in which case parameters for the web Games Lobby module will be returned.

NOTE: When creating JavaScript string literals, do not forget to properly escape the source values before inserting them into HTML code. For example,  has to be replaced with  to suppress its special meaning, ‘ has to be replaced with ‘, so that it doesn’t finish the string literal unexpectedly and so on. In general, you will be better off with using a function built into your framework (i.e. System.Web.HttpUtility.JavaScriptStringEncode in .NET) than carrying out the encoding manually.

For example, let’s say a British Player is launching the HTML5 game Savannah King. After obtaining properties width, height, param:base, var:config, var:auth, var:moneyType, channel, var:gameKey, var:gameAddress, var:gameVersion, var:gameName from the GetModuleInfo operation, the corresponding HTML code fragment could look like the following:

var params = {
  'var:lang': 'en-GB',
  'width': '1068',
  'height': '600',
  'param:base': 'https://server/folder/',
  'var:config': '%3Cconfig%20isSystem%3D%22true%22%20priority%3D%221%22%3E%3CClientConfig%20FAST_URL%3D%22http%3A%2F%2Fserver%2F%22%20LANGUAGES%3D%22zh-CHT%3Bcs-CZ%3Bnl-NL%3Ben-GB%3Bde-DE%3Brw-RW%3Bsk-SK%3Bes-ES%22%20TREE_ROOT_ID%3D%22Z%3A1%22%20%2F%3E%3CModuleConfig%20REMOTE_PATH%3D%22%22%20REMOTE_PATH_HTML5%3D%22http%3A%2F%2Fserver%2Ffolder%2F%22%20%2F%3E%3CResourcePack%20FILE_LIST_POSTFIX%3D%22_IC%22%20%2F%3E%3CClientConfig%20LOGGER_ENABLED%3D%22true%22%20%2F%3E%3CFullscreenController%20SINGLE_BUTTON%3D%22false%22%20%2F%3E%3C%2Fconfig%3E',
  'var:auth': 'uP69nzoZ9wvr2NkM31RWzBk0nNvmlWw1ju%2BXhLYiLuVoJzAR%2Fr9opC2HIA%2Fqe8tnGXEL8yz%2BnpmdENVUbzY7ll4PZ8DQ4jONTkPF7DcSEkthoNgVoqdbrw%3D%3D%3B201602028269469823',
  'var:moneyType': '2',
  'channel': 'Html5',
  'var:gameKey': 'VSlotSK_tnp',
  'var:gameAddress': 'R%3A1.3.298',
  'var:gameVersion': '1',
  'var:gameName': 'Savannah%20King%20-%20Touch%20N'%20Play'
};

NOTE: The list of properties varies among game modules, so do not hard-code them – always supply those returned from GetModuleInfo operation instead.

The second statement of the script snippet mentioned at the beginning of this section performs the actual rendering of the Game Client, by calling JavaScript function renderClient defined in ClientUtils.js. The function takes as input the constructed game module parameters object and the ID of the placeholder element. Then it automatically detects on what kind of device the Game Client will be running and decides how to host it. On desktop PCs, the Game Client will be embedded within the same web page, at the position determined by the placeholder. On mobile phones and tablets the Player’s browser will be redirected to a new, clean web page and the Game Client will occupy the entire available area.

Refreshing account balance

When players run out of money during a play session, the game is locked and the player cannot play anymore. With the Account Balance Refresh feature enabled, players do not have to reload the game page to refresh the Game Client account balance. Instead, the account balance can be updated whenever the Customer system chooses to, for instance, when players make a deposit outside of the game client. To do so, the Customer system needs to call the refreshBalance function defined in ClientUtils.js.

NOTE: This step is optional. The Game Client will periodically refresh the balance from time to time, even if not explicitly requested by the Customer system.

Sample HTML Page

Below please find a sample of a rendered HTML page with embedded game client. The page is not fully functional – parameter values are just referential. Also please note that some lines can be wrapped due to line length.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Game Client Example</title>
  </head>
  <body>
    <div id="gameClientPlaceholder">
      <h2>Game Client starting procedure failed!</h2>
    </div>
    <script src="http://server/folder/ClientUtils.js" type="text/javascript"></script>
    <script type="text/javascript">
      var params = {
        'width': '1068',
        'height': '600',
        'param:base': 'http://server/folder/',
        'var:config':'%3Cconfig%20isSystem%3D%22true%22%20priority%3D%221%22%3E%3CClientConfig%20FAST_URL%3D%22http%3A%2F%2Fserver%2F%22%20LANGUAGES%3D%22zh-CHT%3Bcs-CZ%3Bnl-NL%3Ben-GB%3Bde-DE%3Brw-RW%3Bsk-SK%3Bes-ES%22%20TREE_ROOT_ID%3D%22Z%3A1%22%20%2F%3E%3CModuleConfig%20REMOTE_PATH%3D%22%22%20REMOTE_PATH_HTML5%3D%22http%3A%2F%2Fserver%2Ffolder%2F%22%20%2F%3E%3CResourcePack%20FILE_LIST_POSTFIX%3D%22_IC%22%20%2F%3E%3CClientConfig%20LOGGER_ENABLED%3D%22true%22%20%2F%3E%3CFullscreenController%20SINGLE_BUTTON%3D%22false%22%20%2F%3E%3C%2Fconfig%3E',
        'var:auth':'uP69nzoZ9wvr2NkM31RWzBk0nNvmlWw1ju+XhLYiLuVoJzAR/r9opC2HIA/qe8tnGXEL8yz+npmdENVUbzY7ll4PZ8DQ4jONTkPF7DcSEkthoNgVoqdbrw==;201602028269469823',
        'var:moneyType': '2',
        'channel': 'Html5',
        'var:gameKey': 'VSlotSK_tnp',
        'var:gameAddress': 'R%3A1.3.298',
        'var:gameVersion': '1',
        'var:gameName': 'Savannah%20King%20-%20Touch%20N\'%20Play',
        'var:lang': 'en-GB'
      };
      renderClient(params, 'gameClientPlaceholder');
    </script>
  </body>
</html>

Related articles

Comments

0 comments

Article is closed for comments.