Vue.js component

A Vue.js component is provided to enable simple integration of the widget with web sites built using Vue.js.

Installation:

npm install @codemodity/tournament-ui-widget-vue

With the parameter "testMode": true, the widget generates test data for itself and does not require any backend connection. This is useful to efficiently integrate the UI without worrying about any backend connections. When using the widget with the backend, the testMode parameter must be false or omitted, while the token parameter must be provided.

Test mode:

import TournamentWidget from '@codemodity/tournament-ui-widget-vue';
 
...
 
<TournamentWidget :test-mode="true" account-id="codemodity-qa" language="pt" />

Real mode:

import TournamentWidget from '@codemodity/tournament-ui-widget-vue';
 
...
 
<TournamentWidget :token="token" />

Parameters

In Vue.js, parameters can be written with dashes. For example, testMode can be written as test-mode.

parameter	type	required	default	description
`isTestMode`	boolean	no	false	If true, the widget will render test data without connecting to the backend API. Useful for testing the UI only.
`token`	string/JWT	only if testMode is false		A JWT token that contains parameters for player and game identification. The exact parameters within the token are described in the next section. The token should be generated on server side using the private signing key provided by Codemodity, to prevent players from tampering with it from the browser.
`language`	string	no	’en’	This can be either a culture-neutral language code, such as `en` or `fr`, or a specific culture variant, such as `en-GB`, `en-US`, `fr-FR`, or `fr-CA`. If the specified culture is not supported, the fallback ‘en’ will be used.
`isDraggable`	boolean	no	true	if true, the players will be able to drag the compact widget anywhere on the screen.
`isCollapsibleOnDesktop`	boolean	no	true	if true, on desktop, the widget will act like on mobile, as a small, at-a-glance widget that can be expanded into full view upon clicking on it. If false, the expanded full view will be the default, that cannot be closed.
`openOnRightSide`	boolean	no	true	if true, the expanded leaderboard will open on the right side of the screen.

Token parameters

Some parameters are passed as a JWT token so that those data cannot be tampered with. The signing algorithm is HS256. The signing key is provided by Codemodity separately, in a secure way. The token must be generated on the server side for security reasons. You may use one of the JWT libraries listed here: https://jwt.io/libraries

parameter	type	required	description
`brandId`	string	yes	The unique Id of a brand the player belongs to (e.g. HAPPYLUKE). `brandId` and `playerId` together should be unique.
`playerId`	string	yes	The Id of the player in the brand/EC system. `brandId` and `playerId` together must be unique.
`playerAlias`	string	no	The nickname of the player that the leaderboard displays. e.g “casinoking82”.
`gameId`	string	yes	Unique Id of the Game that the player launched.
`currency`	string	yes	Currency of the player.
`segmentation`	object	no	Optional array for player segmentation, determined by the client system. See an example in the Segmentation section below.
`exp`	seconds since Epoch	yes	Standard JWT expiration time. It is up to the discretion of the JWT token generator to pick a proper expiration date. This token will be used only once per widget launch, at the time the launch happens, thus it can be very short lived.

Segmentation

Example segmentation object:

"segmentation": {
    "codes": [
      "Tier-2",
      "VIP",
	  "Gold"
    ]
  }

Overview React