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

}


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
      }
    }
  }
  else{
		//data sent from server
		messageHandler(event);

	}
}
// We are binding eventHandler to receive all kinds of messages the webpage receives
window.addEventListener("message", eventHandler);

const messageHandler = (event) => {
	const loaderStep1 = document.getElementById("loaderStep1");
	const loaderStep2 = document.getElementById("loaderStep2");
	const loaderStep3 = document.getElementById("loaderStep3");
	const iframeElem = document.getElementById("iframe_1");
	const sidebar = document.getElementById("sidebar");


	console.log("received data event type " + event.data.type)
	switch (event.data.type) {
		case "ResponseFromUE4":
			console.log("UE4->iframe: " + event.data.descriptor)
			myHandleResponseFunction(event.data.descriptor);
			break;
		case "stage1_inqueued":
			loaderStep1.style.visibility = "visible";
			break;
		case "stage2_deQueued":
			// loading screen 1 hides
			break;
		case "stage3_slotOccupied":
			loaderStep1.style.display = "none";
			loaderStep2.style.visibility = "visible";
			break;
		case "stage4_playBtnShowedUp":
			//loading screen 2 hides
			loaderStep2.style.visibility = "hidden";
			iframeElem.style.visibility = "visible";
			// loaderStep3.style.visibility = "visible";
			let playButton = document.getElementById("playButtonParent");
			playButton.click();
			onPlayBtnPressed();
			break;
		case "stage5_playBtnPressed":
			sidebar.style.visibility = "visible";
			loaderStep2.style.display = "none";
			iframeElem.style.visibility = "visible";
			$('#iframe_1').focus();
			break;
		case "_focus":
			document.getElementById("iframe_1").focus();
			break;
		case "isIframe":
			let obj = {
				cmd: 'isIframe',
				value: true
			};
			document.getElementById("iframe_1").focus();
			document.getElementById("iframe_1").contentWindow.postMessage(JSON.stringify(obj), "*");;
			break;
			
		case "QueueNumberUpdated":
			console.log("QueueNumberUpdated. New queuePosition: : " +  event.data.queuePosition)
			break;
			
		case "stage3_1_AppAcquiringProgress":
			console.log("stage3_1_AppAcquiringProgress percent: " + JSON.stringify( event.data.percent))
			break;
			
		case "stage3_2_AppPreparationProgress":
			console.log("stage3_2_AppPreparationProgress percent:" + JSON.stringify( event.data.percent))
			break;	
		case "shortCuts":
			console.log("Key pressed");
			break;
		case "Error_Redirect":
			loaderStep2.style.display = "none";
    });
    document.getElementsByTagName("body")[0].append(button1);
});