window.addEventlistener equivalent in SDKInstanceBase

Post reply
0 favourites
  • 3 posts
From the Asset Store
Invisible Window - Construct 3
$10 USD
Get Ready for the New Wave of "Bottom Screen" Games!
Manolloz's avatar
Manolloz

  • Hi,

    I usually have a script in my construct projects with an eventListener to be able to communicate with the host website. Looks like this: 

    	runOnStartup(async runtime =>
{	
	var indata = {}
	runtime.addEventListener("beforeprojectstart", () => OnBeforeProjectStart(runtime));
	window.addEventListener("message", (event) => {
	indata = JSON.parse(event.data);
	if (indata.highscore || indata.highscore === 0) {
		runtime.globalVars.HighScore = indata.highscore
	}
	}
	);
});

    In words: I listen for messages from the host website. If it sends a message with a highscore, I update the global highscore variable in the construct game.

    Since I use this so often, I figured I make a plugin for it instead. I'm new to addons so this is maybe the completely wrong approach, but my idea is to have it in the C3.SDKInstanceBase like this: 

    {
 self.C3.Plugins.COM_Connect.Instance = class COM_ConnectInstance extends (
 self.C3.SDKInstanceBase
 ) {
 constructor(inst, properties) {
 super(inst);

 var indata = {};

 console.log({ inst });
 window.addEventListener("message", (event) => {
 indata = JSON.parse(event.data);
 if (indata.highscore || indata.highscore === 0) {
 runtime.globalVars.HighScore = indata.highscore;
 }

 });
 }
 };

    The problem is that I can't access neither window or runtime.globalVars in here.

    So my questions are:

    1. Is this a bad approach?
    2. How do I access window?
    3. How do I access the global variables?

    Thanks!

  • By default the runtime is hosted in a Web Worker, where there is no direct access to the DOM (window, document etc.) You can force the project to run in the DOM by setting 'Use worker' to 'No' in project properties, and this will allow such calls to work again.

    However addons can support this in a web worker using a specially designed DOM call mechanism in the runtime. This is documented in the addon SDK manual.

    Global variables are not exposed in the SDK. This is because a well-designed addon should not hard code such things. It should just make the information available, e.g. via an expression, and then the user can assign that to a global variable in the event system.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • Thank you Ashley!

    I've set up my domSide.js like this: 

    "use strict";
{
 const DOM_COMPONENT_ID = "test";
 const HANDLER_CLASS = class TestDOMHandler extends DOMHandler {
 constructor(iRuntime) {
 super(iRuntime, DOM_COMPONENT_ID);
 console.log("*** INFO *** domSide.js started");
 

	//Listen for highscore message
 window.addEventListener("message", (event) => {
 indata = JSON.parse(event.data);
 if (indata.highscore || indata.highscore === 0) {
 runtime.globalVars.HighScore = indata.highscore;
 }
 });
 
 _OnMessage(e) {
 globalThis.ReactNativeWebView.postMessage(
 JSON.stringify({
 type: e.callbackType,
 payload: e.payload,
 })
 );
 }
 };
 RuntimeInterface.AddDOMHandlerClass(HANDLER_CLASS);
}

    Now, in my c3Runtime/actions.js i would like to call the _OnMessage function. But I don't understand how to do that.

    actions.js example: 

    {
 self.C3.Plugins.Test.Acts = {
 CallDomSideFunction() {
 _OnMessage({callbackType: "testType", payload: "CALLBACK FROM CONSTRUCT"})
 },
 };
}

    Can you give me some guidence? I don't really understand the documentation.

    Thanks! :)

Post reply
  • 3 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)