JS API
showQuestion and answerResult should only be used by developers given permission to use the Question Overlay.
The LoL Game API is implemented as a sequence of asynchronous calls between an iFrame parent and child. Use the browser's built in
window.postMessage to send outgoing messages, and window.addEventListener("message", message => {...}) to receive messages. Details on each method are linked below.Direction | Category | Message Name | Added |
LoL => Game | Lifecycle | ready | V2 |
Game => LoL | Lifecycle | start | V2 |
LoL => Game | Data Payload | language | V2 |
Game => LoL | Lifecycle | loadingProgress | V1 |
Game => LoL | Progress | progress | V2 |
Game => LoL | Speech | speakText | V2 |
Game => LoL | Lifecycle | complete | V1 |
Game => LoL | Questions | showQuestion | V4 |
LoL => Game | Questions | answerResult | V4 |
Game => LoL | State | saveState | V5 |
Game => LoL | State | loadState | V5 |
function LoLApi (messageName, payloadObj) {
parent.postMessage({
message: messageName,
payload: JSON.stringify(payloadObj)
},
'*')};
window.addEventListener("message", function (msg) {
// Message name and JSONified payload
const { messageName, payload } = msg.data;
}
Sent by the game to indicate it is ready to receive data.
LoLApi('gameIsReady', {
aspectRatio: "16:9",
resolution: "1024x576",
});
Sent from the gameframe (following receipt of
gameIsReady) to initialize gameplay (with optional lastGameProgress payload).// payload received (JSON stringified)
{
"languageCode": "en",
"lastGameProgress": {
score: 10,
maxScore: 11,
gameProvidedPayload: "{\"developerProvidedPayload\": true}"
}
}
// payload received (JSON stringified)
{
"welcome": "Welcome!",
"readyToPlay": "Are you ready to play?",
"greatJob": "Great job!",
"pressContinue": "Press the next button to continue.",
"onePlusOne": "One + One = Two"
}
LoLApi('loadingProgress', { progress: 0.56 });
LoLApi('progress', { alternativeId: 1 });
LoLApi('speakText', { key: 'welcome' });
LoLApi('saveState', {data: {key: 'welcome'}});
window.addEventListener("message", function (msg) {
// Message name and JSONified payload
const { messageName, payload } = msg.data;
if (messageName === 'loadState') {
// Your STATE handler here
break;
}
});
parent.postMessage({
message: 'loadState',
payload: '*'
},
'*');
LoLApi('saveState', { currentProgress: 3, maximumProgress: 10, data: {key: 'welcome'}});
window.addEventListener("message", function (msg) {
const { messageName, payload } = msg.data;
if (messageName === 'loadState') {
const previousState = JSON.parse(payload);
const currentProgress = previousState && previousState.currentProgress
const maximumProgress = previousState && previousState.maximumProgress
LoLApi('progress', {currentProgress, maximumProgress});
// do something with the data inside payload
break;
}
});
parent.postMessage({
message: 'loadState',
payload: '*'
},
'*');
LoLApi('complete', {});
const EVENT = {
RECEIVED: {
PAUSE: 'pause',
RESUME: 'resume',
QUESTIONS: 'questions',
LANGUAGE: 'language',
START: 'start',
INIT: 'init',
STATE: 'loadState'
}
};
window.addEventListener("message", function (msg) {
console.log('[PARENT => UNITY]', msg)
switch (msg.data.messageName) {
case EVENT.RECEIVED.PAUSE:
// Your PAUSE handler here
break;
case EVENT.RECEIVED.RESUME:
// Your RESUME handler here
break;
case EVENT.RECEIVED.QUESTIONS:
// Your QUESTIONS handler here
break;
case EVENT.RECEIVED.LANGUAGE:
// Your LANGUAGE handler here
break;
case EVENT.RECEIVED.START:
// Your START handler here
break;
case EVENT.RECEIVED.STATE:
// Your STATE handler here
break;
case EVENT.RECEIVED.INIT:
break;
default:
console.log('Unhandled message: ' + msg);
}
});
Last modified 1yr ago