let descriptor = {
		Teleport: "6"
	};
let obj = {
	cmd: "sendToUe4",
	value: descriptor
}
document.getElementById("iframe_1").contentWindow.postMessage(JSON.stringify(obj), "*");
//here "iframe_1" is the id of the HTML iframe element

const toggleSettings = (id)=>{

    let descriptor = {
        id,
        property: 'display',
        value: 'none'
    };
    let obj =
        {
            cmd: "style",
            value: descriptor,
        }
    document.getElementById("iframe_1").contentWindow.postMessage(JSON.stringify(obj), "*");
}

function HandleResponseFromUE4(jsonObj) {
  // Process the JSON object sent by the Unreal app to the webpage
  console.log(jsonObj);

  if (window.e3ds.events[jsonObj.cmd]) {
    window.e3ds.events[jsonObj.cmd](jsonObj);
  }
}


const eventHandler = (event) => {
  // This function will receive all kinds of events the webpage receives
  
  // Check if event.data.type exists to identify if it was sent by the Unreal app
  if (!event.data.type) {
    // If event.data includes a field named cmd, then this data is coming from the Unreal app.
    // If your Unreal app uses a different field name, replace this field name with the one you have used in your Unreal app
    if (typeof event.data === 'string' && event.data.includes('cmd')) {
      // We are receiving data as a string. Now we try to parse it to check
      // if this string represents a JSON or not.
      // If you are sending a normal string from the Unreal app, then this is not needed 

      const parsedData = JSON.parse(event.data);
      if (parsedData.cmd) { // It is JSON object data sent from UE4
        HandleResponseFromUE4(parsedData); // Process the data sent by UE4
      }
    }
  }
}
// We are binding eventHandler to receive all kinds of messages the webpage receives
window.addEventListener("message", eventHandler);