SCILLClient
This is the main entrance point in to the SCILL JavaScript SDK. Use this class to get instances of SCILL product APIs.
Initialization
Depending on the environment and programming language it’s a bit different
npm
In npm environments (NodeJS, Angular, React, Vue, etc) you can get an instance of that class in JavaScript:
const SCILL = require("@scillgame/scill-js");
const eventsApi = SCILL.getEventsApi("ai728S-1aSdgb9GP#R]Po[P!1Z(HSSTpdULDMUAlYX");
and in TypeScript:
import * as SCILL from '@scillgame/scill-js';
const eventsApi = SCILL.getEventsApi("ai728S-1aSdgb9GP#R]Po[P!1Z(HSSTpdULDMUAlYX");
scill.js
In HTML, you can directly include the scill.js
in your browser. This script will expose the SCILL
variable
into the global context. Use it like this:
<script type="text/javascript" src="https://scill-cdn.web.app/scill.js"></script>
<script type="text/javascript">
let eventsApi = SCILL.getEventsApi("ai728S-1aSdgb9GP#R]Po[P!1Z(HSSTpdULDMUAlYX");
</script>
APIs
Use the methods below to get an instance of an API class for a SCILL product. Please don’t create instances of those APIs
yourself as they are subject to change - while the SCILLClient
API will not.
getAuthApi
Initiate an instance of the AuthApi with the API key of your application. Use this API to generate an access token.
Please note: This class should not be used in client side code (i.e. in the Browser or Web Apps) as the API key might be easily captured using Web console, giving the attacker a lot of power. Use this class in a NodeJS backend, serving your client.
static AuthApi getAuthApi(apiKey, environment?);
Parameters
apiKey string
The API key for your application. You can generate an API key in the Admin Panel for your application. Please note: Don’t expose the API key in unsecure environments like Web Apps.
environment string
This is an optional value to choose the environment (i.e. production or development). If you are not specifically asked by the SCILL team to set this value (for testing purposes for example), then just leave this out.
Returns
An instance of the AuthApi class. Setup for production use.
getEventsApi
Initiate an instance of the EventsApi with the API key of your application. It’s used to send events required for challenges and battle passes.
Please note: This class should not be used in client side code (i.e. in the Browser or Web Apps) as the API key might be easily captured using Web console, giving the attacker a lot of power. Use this class in a NodeJS backend, serving your client.
static EventsApi getEventsApi(apiKey, environment?);
Parameters
apiKey string
The API key for your application. You can generate an API key in the Admin Panel for your application. Please note: Don’t expose the API key in unsecure environments like Web Apps.
environment string
This is an optional value to choose the environment (i.e. production or development). If you are not specifically asked by the SCILL team to set this value (for testing purposes for example), then just leave this out.
Returns
An instance of the EventsApi class. Setup for production use.
getChallengesApi
static ChallengesApi getChallengesApi(accessToken, environment?);
Parameters
accessToken string
You need to provide an access token that you previously generated with the AuthApi. Please check out the documentation about access tokens for more info.
environment string
This is an optional value to choose the environment (i.e. production or development). If you are not specifically asked by the SCILL team to set this value (for testing purposes for example), then just leave this out.
Returns
An instance of the ChallengesApi class. Setup for production use.
getBattlePassesApi
static BattlePassesApi getBattlePassesApi(accessToken, environment?);
Parameters
accessToken string
You need to provide an access token that you previously generated with the AuthApi. Please check out the documentation about access tokens for more info.
environment string
This is an optional value to choose the environment (i.e. production or development). If you are not specifically asked by the SCILL team to set this value (for testing purposes for example), then just leave this out.
Returns
An instance of the BattlePassesApi class. Setup for production use.
getLeaderboardsApi
static LeaderboardsApi getLeaderboardsApi(accessToken, environment?);
Parameters
accessToken string
You need to provide an access token that you previously generated with the AuthApi. Please check out the documentation about access tokens for more info.
environment string
This is an optional value to choose the environment (i.e. production or development). If you are not specifically asked by the SCILL team to set this value (for testing purposes for example), then just leave this out.
Returns
An instance of the LeaderboardsApi class. Setup for production use.
Realtime Updates
SCILL uses MQTT for implementing real time updates. MQTT is a simple, yet very powerful and efficient transport protocol. We use it to notify clients of changes in the backend in real time to make sure, that users get updates on their state in challenges and battle passes in real time.
Using our SDKs it’s very simple to use. For this, we expose two classes that handle all the heavy lifting for you. If you are interested in the details, please check out our API reference for Realtime Updates.
startMonitorChallengeUpdates
Use this function to start listening on updates on challenges for the user identified with the access token. The function
expects a callback function handler
that will be called whenever something happens on the users challenges.
static ChallengeUpdateMonitor startMonitorChallengeUpdates(accessToken, handler, environment?);
Parameters
accessToken string
You need to provide an access token that you previously generated with the AuthApi. Please check out the documentation about access tokens for more info.
handler function
The callback function that is called whener something changes in the backend for a user challenge. The callback function receives one parameter of type ChallengeWebhookPayload.
environment string
This is an optional value to choose the environment (i.e. production or development). If you are not specifically asked by the SCILL team to set this value (for testing purposes for example), then just leave this out.
Returns
An instance of the ChallengeUpdateMonitor class. Store that instance somewhere to stop listening when you don’t need any updates anymore.
Example
Here is a simple example on how to use that function:
const monitor = SCILL.startMonitorChallengeUpdates(accessToken, (payload) => {
// payload is of type ChallengeWebhookPayload and contains the challenge in the new and the old state
// use it to update existing UI
});
// The monitor instance should be stored and can be used to stop listening on updates, for example if user changed routes
function onDestroy() {
monitor.stop();
}
startMonitorBattlePassUpdates
Use this function to start listening on updates of battle pass challenges for the user identified with the access token. The function
expects a callback function handler
that will be called whenever something happens on the users challenges.
static UserBattlePassUpdateMonitor startMonitorBattlePassUpdates(accessToken, battlePassId, handler, environment?);
Parameters
accessToken string
You need to provide an access token that you previously generated with the AuthApi. Please check out the documentation about access tokens for more info.
battlePassId function
The id of the battle pass that you want to listen for changes.
handler function
The callback function that is called whenever something changes in the backend for a users battle pass. The callback function receives one parameter of type BattlePassChallengeChangedPayload.
environment string
This is an optional value to choose the environment (i.e. production or development). If you are not specifically asked by the SCILL team to set this value (for testing purposes for example), then just leave this out.
Returns
An instance of the [UserBattlePassUpdateMonitor](/scill/sdks/javascript/models/#challengeupdatemonitor class. Store that instance somewhere to stop listening when you don’t need any updates anymore.
Example
Here is a simple example on how to use that function:
const monitor = SCILL.startMonitorBattlePassUpdates(accessToken, battlePass.battle_pass_id, (payload) => {
// payload is of type BattlePassChallengeChangedPayload and contains the battle pass challenge in the new and the old state
// use it to update existing UI
});
// The monitor instance should be stored and can be used to stop listening on updates, for example if user changed routes
function onDestroy() {
monitor.stop();
}
Helper functions
timeLeft
Often you want to show the time left until the challenge runs out of time. We provide this convenient function that will return a (human readable) string that you can display in your UI.
static timeLeft timeLeft(challenge, displayShortTimeLeft?, lang?);
Parameters
challenge Challenge
Provide the Challenge
object to calculate the time left for this function
displayShortTimeLeft boolean OPTIONAL
This is an optional parameter and provide the boolean
to display short or long format of time left.
lang string OPTIONAL
This is an optional parameter and it’s set locale of time left. Currently we are supporting only en
and de
. Default is en
.
Returns
Return string
to indicate the days, hours, minutes and seconds left until this challenge times out. By default it’s 10 hours, 39 minutes, 16 seconds
, if true
time left is displayed as 1d 01:39:16
format.
Example
Here is a simple example on how to use that function:
const text = SCILL.timeLeft(challenge, true);