Enriched wrapper

Enriched Wrapper - Documentation - External Use

Demo game

link to demo game: git clone https://bitbucket.org/sl-greenlogic/demo_game.git

*how to run *

npm i

npm build

Libs

Types for Enriched Wrapper

npm i --save-dev @stakelogic_greenlogic/enriched_wrapper_types

QueryParams

userActivityTime: number = allow change reality check time, from 20 min to any number starting from 0.1, fox example userActivityTime=0.50 will be 20 sec logLevel: number = show logger message level from 1 - 4

What is Enriched Wrapper

Enriched Wrapper (EW) is a structure that creates a layer over a game, that contains UI elements. UI elements invoke events for EW controller, that transmit it into a game. A game should be subscribed to those events. Also EW listen to some events from the game. Later in document there will be a description of the events.

Basics

To run EW you should have specific parameter in initial game config for gcw (see documents about gcw). Only correct implementation of API alows you to work with EW.

Integration

Intergation process is simple: subscribe to 2 events (UI_ON_INITIALIZE and ON_BUTTON_CLICKED), initiate loading process only when UI_ON_INITIALIZE emited and handle data from ON_BUTTON_CLICKEDevent``. Also game have events for controlling EW, these are UPDATE_MODEL. In this document there is a full descrition of these 3 events, their parameters, reactions, etc.

Go step by step and avoid any custom behaviours in handling events from EW or sending events to EW.

Processes flow

Starting point for EW is loading by gcw because game and EW are integrated with gcw and gcw will connect game and EW and allow direct communication.

First gcw downloads scripts and styles for EW (App.js and App.css) and for the game, than gcw creates an instance of the game and pass this instance to EW. During this events list of gcw will be extended by EW events and transmitted to the game. And game should subscribe to these events (see later description about events UI_ON_INITIALIZE and ON_BUTTON_CLICKED). When EW and game scriptes are loaded gcw triggers standard event gcw.api.GameEventType.INITIALIZE - it says that game can send configs to EW.

In EW initial scripts should be created div element with id 'EnrichedWrapperUI' befor start rendering html objects of EW.

INITIALIZE - standard event, and in EW context shows, that EW and game scripts are loaded - it is time for all subscriptions and sending data from game to EW about initial configuration, assets, templates for rules/paytable etc.

UI_ON_INITIALIZE - is an EW event, triggered after INITIALIZE and preloading (process in EW), shows that game loading process could be started.

INITIAL_MODEL - should be sent to EW after game receive from EW event UI_ON___ INITIALIZE, with required data what need to right running EW

QUICK START

1. Connect gcw wrapper.
2. Subscribe on event UI_ON_ INITIALIZE
3. After game client receive UI_ON_INITIALIZE send to EW event with INITIAL_MODEL with required params (IInitialModel interface)
4. Proceed update model with parameter preloaderStep, when preloaderStep=100, send preloaderComplete=true
5. Then need show required buttons using interface IElement and control EW state using IGeneral, by default all elements hided, game client should send config to show it

List of GameEvents

List of GameEvents that are injected into gcw (game should be aware of them):

xxxxxxxxxx

ON_BUTTON_CLICKED = "ON_BUTTON_CLICKED",

UI_ON_INITIALIZE = "UI_ON_INITIALIZE"

UI_ON_INITIALIZE - a game should listen to this

ON_BUTTON_CLICKED - a game should listen to this

UPDATE_MODEL - EW is listening to this

INITIAL_MODEL - EW is listening to this

GameEvents description

ON_BUTTON_CLICKED - sending data from EW and this function look like this

xxxxxxxxxx

sendEvent(GameEvents.ON_BUTTON_CLICKED, data);

Where data is optional and has a structure (interface):

xxxxxxxxxx

{

    name: ButtonName;

    [key: string]: string | undefined;

}

List of all supported buttons can be checked in ButtonName

Named buttons description:

BUTTON_SPIN - spin button click, spin should be started, in SPINNING state has meaning of stop spin button

BUTTON_SPIN_STOP - spin stop button click, spin should be stopped

BUTTON_MENU - opens menu, used for inner EW purposes, but this button can be hidden or disabled by the game

BUTTON_BET_SETTINGS - opens bet settings, used for inner EW purposes, but this button can be hidden or disabled by the game

BUTTON_BET_PLUS - increase bet, game should update all parameters in model related to bet

BUTTON_BET_MINUS - decrease bet, game should update all parameters in model related to bet

BUTTON_FAST_SPIN - triggers other state of fast spin (turbo spin) feature (enabled / disabled)

BUTTON_MAX_BET - maximize the bet, game should update all parameters in model related to bet

BUTTON_AUTO_SPIN - opens autospin menu, used for inner EW purposes, but this button can be hidden or disabled by the game

BUTTON_AUTOPLAY_STOP - stop auto spin

BUTTON_SOUNDS - triggers other state of all game sounds feature (enabled / disabled), game should update all parameters related to sounds

BUTTON_SUPERSTAKE - triggers other state of game feature superstake (enabled / disabled), game should update all parameters related to bet

BUTTON_HOME - this shows, that game should trigger event like this this.wrapperCommunicator.sendEvent(GameEventType.HOME)

BUTTON_MENU_CLOSE - close all menus, used for inner EW purposes, but this button can be hidden or disabled by the game

BUTTON_STOP_ON_BONUS - triggers other state of game feature Stop On Bonus in autospins

BUTTON_START_AUTOPLAY - starts autoplay, from menu autoplay

BUTTON_LOSS_LIMIT_DOWN - decrease value of loss limit parameter for autospins

BUTTON_LOSS_LIMIT_UP - increase value of loss limit parameter for autospins

BUTTON_SET_AUTO_PLAY_OPTION - choose an option (number of autospins) from list in autoplay menu, transmit value of this option, if -1 this mean infinity (as much as posible), data = { count: number, index: number }, counter it's selected number, index it's position in array

BUTTON_SINGLE_WIN_DOWN - decrease value of Single Win limit parameter for autospins

BUTTON_SINGLE_WIN_UP - increase value of Single Win limit parameter for autospins

BUTTON_SETTINGS - opens general settings, used for inner EW purposes, but this button can be hidden or disabled by the game

BUTTON_TOGGLE_INTRO_SCREEN - triggers other state of game feature Intro Screen

BUTTON_TOGGLE_GAMBLE - triggers other state of game feature Gamble

BUTTON_TOGGLE_SPACESBAR_SPIN - triggers other state of game feature Spacebar (applicable only for desktop)

BUTTON_TOGGLE_TOUCH_ANYWHERE_SPIN - triggers other state of game feature Touch Anywhere to (applicable only for mobile)

BUTTON_TOGGLE_SLIDABLE_TOUCH - triggers other state of game feature Slidable Touch (applicable only for mobile)

BUTTON_TOGGLE_SOUNDS - triggers other state of game parameter sounds (only sounds, it is not related to music)

BUTTON_TOGGLE_MUSIC - triggers other state of game parameter music

BUTTON_CONTINUE - close bet menu, used for inner EW purposes, but this button can be hidden or disabled by the game

BUTTON_BET_OPTION - choose an option (value of bet) from list in bet menu and transmit value of this option

BUTTON_OPEN_AUTOPLAY_SETTINGS - open autoplay settings, used for inner EW purposes, but this button can be hidden or disabled by the game

BUTTON_OPEN_INFO_SECTION - open info section, used for inner EW purposes, but this button can be hidden or disabled by the game

BUTTON_OPEN_GENERAL_SETTINGS - open general settings, used for inner EW purposes, but this button can be hidden or disabled by the game

BUTTON_RULES - open rules section, used for inner EW purposes, but this button can be hidden or disabled by the game

BUTTON_OPEN_BET_SETTINGS - open bet settings, used for inner EW purposes, but this button can be hidden or disabled by the game

UPDATE_MODEL - EW handling this event in such a way

xxxxxxxxxx

handle(type: IEvents, data?: IState)

Where data is optional and has a structure:

xxxxxxxxxx

interface IState {

  assets: IAssets;

  general: IGeneral;

  elements: IElements;

  translations: ITranslation;

}

xxxxxxxxxx

export type IGeneral;

On initial stages game should pass assets object in data parameter of event UPDATE_MODEL. assets object has a structure like this:

xxxxxxxxxx

{

  ...

  assets: AssetsConfig = {

    bgMenus: 'path/to/bgForMenus',

    additionalPreloaderLogo: 'path/to/additionalPreloaderLogo',

  },

  ...

}

All properties are required, but each of those values path/to/img could be empty.

bgMenus - better to fill this path, so EW has background in menus

additionalPreloaderLogo - totaly optional image that can be shown under the progressbar during the loading process

xxxxxxxxxx

export type IAssets = {

  bgMenus: string;

  additionalPreloaderLogo: string;

};

Additional parameter, that game can pass, is elements object in data parameter of event UPDATE_MODEL. elements object has a structure like this:

xxxxxxxxxx

interface IElementState 

intefarce IElements

This list can be extended by the game with any named button and with any number of common or custom elements.

Here property visible shows that this button should be created or not (true is for creation).

Property enabled triggers changing buttons state if it is applicable.

Property left, right, top, bottom allow to move the element from the current position, can be as number or html value string 10px, 10%, 10vh...

Element WRAPPER allow hiding or show wrapper, for example can use for game intro screen, with visible = false wrapper will removed from HTML.

Translation state paramenters interface ITranslation

Translation gets from local folder, EW/locales

you can override our translation changing the state of transtation, for this you need send event UPDATE_MODEL

xxxxxxxxxx

{

    translations: {

        FREE_SPIN: 'your custome text'

    }

}

General state paramenters interface IGeneral

currencyCode - used for bet button on main screen, to change icon client need send string= EUR | USD | GBP | COIN by default COIN

currency - string of currency abbreviation or currency sign

currencyDelimiter - delimiter for currency - parameter from server

balance - shows current balance

bet - shows current bet

betTotal - show bet in superstake mode

betRange - shows available range of bets

isSuperstakeEnabled - identify activation of Super Stake feature

isFastSpinEnabled - shows Fast enabling

gameMessagesType - type of message IGameMessageType, is it simple string, html code, or object with configuration, for example it's can be helpful for a message with additions content like img or animation

<div>

    <style type="text/css">

        .win {

            /*display: flex;*/

            justify-content: center;

            align-items: center;

            font-family: 'MyriadPro-BoldCond';

            text-transform: none;

        }

        .total-win {

            min-height: 35px;

        }

        .winImg {

            margin-left: 10px;

            height: 30px;

            width: 50px;

            margin-bottom: -5px;

            padding-top: 5px;

            margin-top: 15px;

            padding-left: 5px;

            padding-right: 10px;

        }

        .win-text {

            padding-top: 20px;

        }

        .win .win-center{

            margin: 0;

            display: flex;

            align-items: center;

            justify-content: center;

        }

        .total-win .total-win-count {

            background: linear-gradient(to bottom, #fdad00 0%, #ffeb00 24%, #fcdc98 26%, #fff900 27%, #bd8e00 50%,#a87a1e 65%,#bd8e00 75%, #fff900 78%);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            color: rgb(248, 203, 0);

            font-size: 40px;

            text-transform: uppercase;

            font-weight: 400;

            padding-left: 10px;

        }

    </style>

    <div class="win">

    <div class="total-win">

        <div style="display: {{totalWinDisplay}};">

            <div class="win-center">WIN: 

                <div class="total-win-count">{{totalWin}}</div>

            </div>

        </div>

    </div>

    <div class="win-text" style="display: {{winTextDisplay}};">

        <div class="win-center">{{winText}}</div>

    </div>

    <div class="win-details" style="display: {{winDetailsDisplay}};">{{symbolCount}}x <img class="winImg"

    src="{{imagesPath}}/wrapperTicker/{{symbolId}}.png" /> {{winValue}}</div>

    </div>

</div>

gameMessage - short message in the middle of the bottom bar, support: string | HTML | IWinTemplateConfig

freespinsValue - value of free spins, probably somethig like '4/15'

showFreespinsBlock - idintify visibility of free spins block in bottombar

totalWinFreeSpinValue - value of total win, not formated numbers

freeroundsValue - value of free rounds value, not formated numbers

totalWinFreeRoundsValue - value of total win, not formated numbers

showTotalWinBlock - idintify visibility of total win block in bottombar

copyrights - small text in the bottom of the bottom bar - for copyrights

autoplayCount - shows current number of autospins chosen

isAutoplayStopOnBonus - identify activation of StopOnBonus feature in Autospins

autoplayRange - array of avalaible numbers for autoplay, -1 means infinity

autoplayLossLimit - number for Loss Limit parameter in Autoplay

autoplayLossLimitRange - array of numbers for Loss Limit parameter in Autoplay

autoplaySingleWinLimit - number for Single Win parameter in Autoplay

autoplaySingleWinLimitRange - array of numbers for Single Win parameter in Autoplay

autospinsLeft - shows current number of autospins left

hasIntroScreen - identify intro screen

hasGamble - identify gamble

isSpacebarSpin - identify spacebar feature

isTouchAnywhereSpin - identify Touch Anywhere to feature

isSlidableTouch - identify Slidable Touch feature

isSoundEnabled - shows Sound enabled or not

isMusicEnabled - shows Music enabled or not

rules - text of rules in way of html markup

paytable - text of paytable in way of html markup

lang - information about current language in format "en_US"

gameName - name of the game

gameVersion - version of the game

serverName - name of the server

serverVersion - version of the server

useLayoutSet - EW has 5 layout states (from 0 to 4) and game can pick any depending on device and resolution. There is a desription of layers in below

clock - this info is sent from the game and should be delivered to EW

currentState - this parameter indicates latest state that was delivered to EW

currentLayout - this parameter is not requered to be set from game side and used for inner purposes. It defines which layer is active now

rtp - rtp value example 96,5%

maxWin - max win example 100000

maxWinProbability - max win probability 1:45

customHeight - by this param you can overwrite height used wrapper by default

customWidth - by this param you can overwrite width used wrapper by default

isRequestFullScreen - wrapper will use own fullscreen logic

customSettingSections - Allow adding a section to payable general settings

preloaderStep - preloader percent

preloaderComplete - when preloading finish, expect that preloaderStep = 100

templatePopup - allow to use premade popup, for example SuperStake popup, check ITemplatePopup

useWrapperAudio - wrapper can play some of sounds on button click, if you want use it, send this parameter

sounds - wrapper have list of sounds what used by default, game can overwrite it or disabled

replayConfig - use UI for replay on wrapper side

integration - currently supports only poker star integration 'poker_star'

regulation - after init request server response with configuration: { game : {...}}, game object should be send to wrapper

Regulation

interface IRegulation {

    isDisplaySessiontime?: boolean | null;

    isDisplayNet?: boolean | null;

    UKGC?: boolean | null;

    inactivityMessage?: boolean | null;

}

general: { 

  regulation: {

    isDisplaySessiontime: true, // when the isDisplaySessiontime is true, we showing the timer instead of the clock

     isDisplayNet: true, // when the isDisplayNet is true, we show the total session under the balance in the bottom bar

     UKGC: true,  // if UKGC is true and has no other parameters we are showing total balance and timer, otherwise we show these blocks depending on parameters

    inactivityMessage: // run timer, after 20 minutes will show popup with total win and loss amount, on      popup button click wrapper will send BUTTON_HOME event 

   }

}

Leaderboards

Detailed description:

https://stakelogic.atlassian.net/wiki/spaces/RGS/pages/2853142549/Daily+and+Weekly+Tournaments+-+Functional+description

The client must take the additionSectionConfig object from the game server and redirect this object to the wrapper.

1. With initial request should send leaderboards object with property {init: true};

xxxxxxxxxx

"leaderboard": {

  "init": true

}

2. In response you get the leaderBoards array like this:

xxxxxxxxxx

[

    {...},

    {...}

]

3. After that you should to place this array to additionSectionConfig.config, additionSectionConfig.type must be AdditionSectionType.Leaderboard. Then send additionSectionConfig to the wrapper:

xxxxxxxxxx

additionSectionConfig{

config: [...],

    type: AdditionSectionType.Leaderboard,

}

Casino Integration

PokerStart

1. Send integration parameter to the wrapper, it will place home button in correct place on mobile version

xxxxxxxxxx

general: {

  integration: 'poker_star'

}

Replay

xxxxxxxxxx

interface IReplayConfig {

  sessionId?: string | number | null;

  gameRoundId?: string | number | null;

  date?: string | null;

  time?: string | null;

  previous?: () => void | null;

  next?: () => void | null;

  reload?: () => void | null;

  stop?: () => void | null;

  start?: () => void | null;

  state: 'reload' | 'stop' | 'start';

}

Sounds

xxxxxxxxxx

interface ISounds = {

  BUTTON_BET_MAX_CLICK?: ISound;

  BUTTON_OTHER_CLICK?: ISound;

  BUTTON_CLICK_COIN?: ISound;

  BUTTON_START_SPIN?: ISound;

  SUPER_STAKE_ACTIVE?: ISound;

  SUPER_STAKE_DEACTIVATE?: ISound;

  GRAND_JACKPOT_OTHER_CLICK?: ISound;

  GRAND_JACKPOT_PROGRESS_SOUND

}

interface ISound {

  path?: string;

  playSoundOnWrapperSide: boolean;

}

// example

const sounds: {

   BUTTON_BET_MAX_CLICK: {

     path: './EW/audio/sfx_superstack_deactivate.wav',

     playSoundOnWrapperSide: true,

   },

   BUTTON_OTHER_CLICK: {

     path:'./EW/audio/sfx_superstack_activate.wav',

     playSoundOnWrapperSide: true,

   },

   BUTTON_CLICK_COIN: {

      path: null,

      playSoundOnWrapperSide: false,

   },

}

Layouts description

All layouts are centered and fit the screen, width and height can be change by params customHeight and cutomWidth.

// Example calculation height and width on client side

classSomeClass {

  protected_defaultSize: { width: number, height: number } = { width: 1920, height: 1080 }; //default layout size

  protected_maxWidth: number=2160; //max layout width

  protectedsetCustomWrapperSize() {

    constwidthRatio=this.screenModel.size.width/this._defaultSize.width; //calc screen width to default ratio

    constheightRatio=this.screenModel.size.height/this._defaultSize.height; //calc screen height to default ratio

    constuseCustomSizeFlag=widthRatio>heightRatio; //we must end custom size only if width ratio is bigger than height ratio

    constoptimalWidth=this.screenModel.size.width*this._defaultSize.height/this.screenModel.size.height; //calc optimal width

    constwidth=useCustomSizeFlag?Math.min(optimalWidth, this._maxWidth) : this._defaultSize.width; //our width will not bigger than maxWidth - wrapper will looks ugly

    this.wrapperLogicModel.setCustomWrapperSize(width, this._defaultSize.height); //send customWidth and    customHeight

  }

  publicsetCustomWrapperSize(width: number, height: number): void {

    consteventModel: IWrapperUpdateModel= { general: { customWidth: width, customHeight: height } }

    this.sendUpdateModel(eventModel);

  }

}

Layout 0

For desktop, the standard is a landscape16:9`` ratio, if the screen is wider (leading to a higher ratio), the UI stays centered and more real-estate becomes visible on the sides, if the screen-width would go below 16:9, the ratio of 16:9 is maintained.

width: 1920,

height: 1080

Layout 1

For mobile or tablet is a landscape16:9`` ratio, if the screen is wider (leading to a higher ratio), the UI stays centered and more real-estate becomes visible on the sides, if the screen-width would go below 16:9, the ratio of 16:9 is maintained.

width: 1920,

height: 1080

Layout 2

For mobileportrait16:9, this is the standard that is used for most devices. If the available space is not sufficient to maintain that ratio, there will be empty space on the sides, that can be filled with “background”, but the UI will scale down maintaining 16:9 and centre-aligning in the process.

width: 1080,

height: 1920

Layout 3

width: 1080,

height: 2160

mobileportrait18:9 : If the available space however would allow for a ratio of 18:9 and higher, we have a Portrait18:9ratio available. If the screensize is below `18:9`, the default16:9UI will be used and if it goes way above 18:9 there will be more real-estate above and below the UI template and the UI will maintain it’s ratio middle-aligned.

Layout 4

There is also a portraittablet16:9 layout for all tabletes in portrait.

The predefined layouts will allow game development to be done towards predictable game and UI behaviour, while respecting all the common devices and adopting to them to the extend that is needed.

width: 1440,

height: 1920

Preloader

Preloader is a layer that alows to load all EW assets before game start, also it identify game loading progress. On initializing of preloader General states paramenters should be already updated by the game. For example, update parameters like lang and useLayoutSet because EW assets are different for different parameters and loading process depens on these.

Paytable and Rules

Paytable and Rules pages are important parts of EW and game. Both of them are been sent by the game to EW via event UPDATE_MODEL in parameters paytable and rules respectively. These parameters should be in type string and include html markup of these pages. EW parse that html and render its elements inside of blocks for these pages.

Some additions:

• send all texts using already chosen language

Using images

All images, which are uploaded to the game or uploaded from game information about assets could be used on paytable and rules pages.

Using fonts

You can use any fonts you need from standard but it is preferably to use common EW font, which are downloaded in loading process. List of standart EW fonts:

MyriadPro-Bold

MyriadPro-BoldCond

MyriadPro-BoldCondIt

MyriadPro-BoldIt

MyriadPro-Cond

MyriadPro-Light

MyriadPro-Regular

MyriadPro-SemiBold

Using styles

There are a few predefined css classes for using in paytable or rules (example is for desktop):

xxxxxxxxxx

.rowBlock {

position: relative;

margin: 40px20px00;

padding: 0px0px80px0;

}

.rowBlockh3 {

font-family: 'MyriadPro-SemiBold';

}

.rowBlock.decor {

border-bottom: 2pxsolidrgba(255, 255, 255, 0.5);

}

.rowTextBlock {

margin-left: 250px;

}

.rowTextBlock.payout {

margin-left: 0px;

width: 100%;

display: flex;

flex-flow: rowwrap;

justify-content: space-around;

}

.rowImageBlock {

display: flex;

position: absolute;

top: 0;

left: 0;

width: 250px;

height: 100%;

justify-content: center;

align-items: baseline;

}

.rowBlock.symbolPayoutBlock {

display: inline-block;

width: 30%;

margin-bottom: 4.5%;

font-family: 'MyriadPro-SemiBold';

font-size: 30px;

}

.symbolPayoutBlockimg {

margin: -5%5%00;

float: left;

}

Styles example

Example of using fonts and images on rules page as an inline styles:

xxxxxxxxxx

{

    rules: `

    <h2style="color:blue;font-size:46px;font-family: 'MyriadPro-BoldCond'">BONUSFeature</h2>

    <pstyle="color:white;font-size:36px;font-family: 'MyriadPro-Cond'">

    <imgsrc='https://cdn.some-cdn.com/thisgame/assets_ui/feature_symbol.png'width='135px'height='135px'>

    WhenaSCATTERSYMBOLlandsonany3 (three) REELS, ittriggersaBONUSFEATURE.

    </p>

}

    // Example of using css classes in rules:

{

    rules: `

    <divclass="rowBlock">

    <h3class="rowTextBlock">

    LuckyGems™ GAMERULES

    </h3>

    </div>

    <divclass="rowBlock decor">

    <divclass="rowImageBlock">

    <imgsrc="assets/rules/bttn_MENU_regular.png" />

    </div>

    <divclass="rowTextBlock">

    <h3>GENERALSETTINGS</h3>

    Click/tapGENERALSETTINGSbuttontoopenthegeneralsettingsmenu.

    </div>

    </div>

    `,

}

Here assets/rules/bttn_MENU_regular.png is a relative path to game assets in game folder.

Dialog Window

Game can use UPDATE_MODEL event to initiate popup opening. For these purposes used general state with parameter: popups, check IGeneral, IWrapperPopup.

type currently used only one type Info, other not supported.

onClose - callback called on a Dialog close.

title - title of dialog, can be string or HTML.

text - content of dialog, can be string or HTML.

uuid - used on wrapper side, to identify what dialog currently show for closing (can be null).

actions - array of buttons, with type, text and callback on button click, check IWrapperPopupAction.

you can send any count of dialogs as u want in general: {popups: []}, they will be show on by one.

xxxxxxxxxx

popups: [

  {

    type: IWrapperPopupType.Info,

    onClose: () =>onCloseAction(),

    title: 'Demo',

    text: 'Some dialog text',

    actions: [

    {

      type: IWrapperPopupActionType.Ok,

      text: 'OK',

      action: () => {

          onOkAction();

        },

        },

        {

        type: IWrapperPopupActionType.Cancel,

        text: 'CANCEL',

        action: () => {

          onCancelAction();

        },

      }

    ]

  }

]

Autospin Menu

Selects the number of auto spins.

• The number of auto spins must not exceed 100. This should be the case for real money and fun money.
• The default number of auto spins is set to the lowest possible amount of auto spins.

LossLimit

This option limits the amount of money that can be lost during the auto play session (Don't lose more than X from the starting balance). For example, when your starting balance is 100 EUR, and your loss limit is set to 10 EUR, auto play stops when your balance reaches 90 EUR after a full game round.

Single Win Limit

This option sets the maximum single win limit, that is a single win greater than Y where Y is an amount that can be selected by the player.

• auto play stops when a single win is equal to or larger than the single win limit.
• a single win in this context should be considered as all combined winnings from one complete game round (base game winnings plus bonus game winnings).

More about UKGC Requirementsis in a documentation about UKGC Requirements.

Reality Check

By parsing url game can get parameter &MGARC=60, that shows that game should enable popup with specific information every 60 seconds, it called Reality Check.

When timer reached its limit, game should enable Dialog Window like this:

`

You've been playing for 1 minute.<br>

Stake: $0.80<br>

Winnings: $0.10

`

xxxxxxxxxx

popups: [

  {

    type: IWrapperPopupType.Info,

    onClose: () =>null,

    title: 'Reality Check',

    text: `

    You've been playing for 1 minute.<br>

    Stake: $0.80<br>

    Winnings: $0.10

    `,

    actions: [

      {

        type: IWrapperPopupActionType.Ok,

        text: 'YES',

        action: () => {

        onOkAction();

        },

        },

        {

        type: IWrapperPopupActionType.Cancel,

        text: 'NO',

        action: () => {

        onCancelAction();

        },

      }

    ]

  }

]

• YES - resumes play.
• NO - simply refreshes the webpage by game.
• When you continue to play, the timer, stake- and win meters continue to run. Subsequent wagers and winnings for example, are added to the existing amounts.
• The timers continue to run when the RC dialogue is in view; they aren't paused.
• Reality Check also stops running auto play sessions.
• Reality Check doesn't appear when free spins/bonus games are running. Instead, it appears when all extra rounds have been played.

More about Reality Check is in a documentation about Realitty Check.

Buttons state change

There are two ways of changing buttonselements``:

• by using UPDATE_MODEL event: game should send an object with buttons config example: {elements: {BUTTON_SPIN: {visible: true, enabled: true}, BUTTON_MENU: {visible: false, enabled: false}}} buttons config will be override in wrapper storage, and spin button will be enabled, menu button disabled .
• by using UPDATE_MODEL event: game should trigger event UPDATE_MODEL with property(-ies) that should be changed, and some of these properties can also change state of specific buttons, i.e. isFastSpinEnabled changes state of BUTTON_FAST_SPIN.