JS WatchThis

WatchThis is a subset of escs services to provide easy drop-in social features for your app, like videochat, event sync between participants and so on.

Connecting plugin to your project.

To obtain the plugin please connect with us.

Then you can import it in your js project's package.json dependency section:

"@escs/react-escs-plugin": "https://[email protected]/repo_name"

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);

Where 'app' is the id of the root DOM element.

and in your callback you can instantiate two ESCS WatchThis components:

window.Loader.load("ESCSButton", {
    visible: true
}, divEscsButton, () => {
    console.log("ESCSButton Loaded");
});

window.Loader.load("ESCSWebView", null, divEscsWebView, () => {
    console.log("ESCSWebView Loaded");
});

where divEscsButton and divEscsWebView 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;

After this all you need is to initialize the plugin to get WatchThis overlay in your app.

Initialization

To start using your plugin you need first initialize it:

service.invokeManaged({
    public_key: 'XXXX-XXXX',
    base_url: 'https://example1.com',
    player_base_url: 'https://example2.com',
    analyticsEnv: 'prod'
})

where:

• public_key - a key that you've obtained from us

• base_url - url for the core ESCS service. You can obtain it from us

• player_base_url - url for the player's ESCS service. You can obtain it from us

• analyticsEnv- environment to use for analytics reporting

Sending shared events for party participants

It's very easy to send shared stream of events between party participants. All the events send from any of the participant's app instance will be broadcasted to everyone in the party:

service.sendEvent(eventName, eventParams);

where eventName is string and eventParams is an object containing params for that event.

To subscribe to an event stream coming from each participant you can use this method:

service.addEventListener(eventName, params => {
    console.log("[event log]:", eventName, params)			    
 });

where again eventName is the name of the event you want to listen for and params are params send along with it. Thus using these two methods you can easily sync any state between all the participants in your party.