JS
How to integrate the javascript plugin.
You can use this plugin for all browser-based games.
To obtain the plugin please connect with us.
If you are using react, then just import these:
import { service, ESCSButton, ESCSWebView } from '@escs/react-escs-plugin'
import '@escs/react-escs-plugin/dist/styles.css'
You can use ESCSButton and ESCSWebView as your regular react components in JSX like this:
<ESCSWebView></ESCSWebView>
<ESCSButton visible={true}></ESCSButton>
Otherwise, if you are using plain vanilla js or any other js framework, you need to use vanilla js imports:
import { service, renderReact } from '@escs/react-escs-plugin'
import '@escs/react-escs-plugin/dist/styles.css'
Then in your main js file you need to initialize react render:
renderReact('app', callback);
and in your callback you can instantiate two ESCS components:
window.Loader.load("ESCSButton", {
visible: true
}, divEscsButton, () => {
console.log("ESCSButton Loaded");
});
window.Loader.load("ESCSWebView", null, divEscsWebView, () => {
console.log("ESCSWebView Loaded");
});
where firstContainer and secondContainer are your DOM elements, where Escs Button and Escs WebView will be rendered
Also, for your convenience, you can inject service in the global window scope, to be able to access it in all parts of your game:
window.escsService = service;
To start using your plugin you need first initialize it:
service.invokeManaged({
public_key: '3dd48bec-2e82-4826-8757-fc14d872882d',
base_url: 'https://api.escs.io',
player_base_url: 'https://player.escs.io',
analyticsEnv: 'prod'
})
where:
public_key
- a key that you've obtained in the step 1 of the integration guideplayer_base_url
- url for the player's ESCS service. It is https://player.escs.io for production environmentanalyticsEnv
- environment to use for analytics reporting
After that you are all set and ready to use ESCS functionality. To start a game's round, just call
startGame()
method:service.startGame()
When the round of your game has ended, just call
endGame(score)
with score parameter:service.endGame({ points: 150.0, points_extra: 2.0)})
Score is an object, fields names should be defined in game dashboard at client.escs.io, and the values should be of double type.
Probably you would like some additional layer of security sending game results to a server, so you can use encrypted transfer (using symmetric cryptographic key):
service.endGameEncrypted(key, score);
where key - is a function, that returns a string key when called. This key you should obtain in your client dashboard described in Anti-Cheat services - look up the "front secret key".
We recommend to obfuscate your key and not store it as a value - that is why
endGameEncrypted
is expecting a function, not a value. For example, you can obfuscate string values here: https://anseki.github.io/gnirtsMost of the time you will not want to show the ESCS button during the actual game, to not mess with the gameplay, for example user can accidentally touch it and almost full-screen webview will show up. To hide the button you can use its
visible
property. For React.js this would be:<ESCSButton visible={false}></ESCSButton>
And for vanilla js a bit more verbose:
window.Loader.load(
"ESCSButton",
{ visible: false },
divEscsButton,
() => console.log("[ESCSButton Disabled]")
)
There are situations, when ESCS needs to show announcements or notifications - for example to promote your game's upcoming championship, or ask user to add credit card, because his/her trial is about to expire. ESCS will open its full WebView automatically to show notification's content, if it's needed. To be able to show these, not interrupting your gameplay and at the times that are not interruptive for user, please call these methods:
service.maybeShowAnnouncements()
service.maybeShowNotifications()
There's internal logic in the plugin to decide whether it needs to show actual notification and announcement, but you should place these calls whenever you feel that interruption with ESCS WebView window is okay for user experience.
Please note that it does not mean that user will see notification or announcement every time you call these methods. We are trying for those to be as subtle and fluent as possible for end user. Their names imply that notification/announcement just maybe will be shown.
You might want to use some custom tracking within ESCS plugin, to bind you user to ESCS's user sessions and see how your championship is going. To use it set your custom tracking params like this:
escsService.setTrackingParams({param1: "value1", param2: "value2"})
Then these parameters will travel through ESCS analytics with the user session.
There are often situation when you want to respond somehow to the ESCS service state. You can use
getStatus()
method:service.getStatus()
which will return object like this:
{
loggedIn, // true / false
initialized, // true / false
subscription, //active subscription object
gameId, //game id sting
userSessionId, //internal ESCS session string
gameName, //your game name in ESCS
trackingParams //tracking params that you set using setTrackingParams
}
To receive the list of in-game rewards that particular player has (you can set those rewards as string fields in your game dashboard - for winning matches and so on) you can use the following method:
const rewards = await service.getIngameRewards()
console.log("rewards", rewards)