<!DOCTYPE html>
<html lang="en-us">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	  <link rel="manifest" href="manifest.json">
      <title>Playza</title>
      <link rel="shortcut icon" href="TemplateData/favicon.ico">
      <link rel="stylesheet" href="TemplateData/style.css">
      <link rel="stylesheet" href="ajax/normalize.min.css">
      <script src="ajax/jquery.min.js"></script>
   </head>
   <body>
      <div id="unity-container" class="unity-desktop">
         <canvas id="unity-canvas"></canvas>
         <div id="overlay-clip" class="overlay">
            <div id="overlay" class="overlay-layer"></div>
         </div>
         <div id="unity-loading-bar">
            <div id="unity-logo"></div>
         </div>
         <div id="unity-footer">
            <div id="unity-webgl-logo"></div>
            <div id="unity-fullscreen-button"></div>
            <div id="unity-build-title">Playza</div>
         </div>
         <div id="counter" class="counter">
            <p id="loadingInfo" style="position: relative; top: 28px;">loading</p>
            <h1 id="progressC">0%</h1>
            <div id="ProgressLineB" class="ProgressLineB"> </div>
            <div id="ProgressLine" class="ProgressLine"> </div>
         </div>
      </div>
      <div id="loadingBox">
         <div class="vertical-centered-box">
            <div class="content">
               <div class="loader-circle"></div>
               <div class="loader-line-mask">
                  <div class="loader-line"></div>
               </div>
            </div>
         </div>
      </div>
	
	<script>
		if ('serviceWorker' in navigator) {
			navigator.serviceWorker.register('service-worker.js').then((registration) => {
				registration.onupdatefound = (d) => {
					var firstInstall = !navigator.serviceWorker.controller;
					console.info("Service worker: updatefound, firstInstall=" + firstInstall);

					const installingWorker = registration.installing;
					installingWorker.onstatechange = (event) => {
						console.log("Service worker: statechanged, state=" + installingWorker.state);
						if (installingWorker.state === 'installed') {
							if (!firstInstall) {
								window.location.reload();
							}
						}
					};
				};
			});
		}
	</script>
	
      <script>	  
		var isMobile = (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent));
			   
		var buildUrl = "Build";
		var loaderUrl = buildUrl + "/Client.loader.js";
		var config = {
		   dataUrl: buildUrl + "/Client.data",
		   frameworkUrl: buildUrl + "/Client.framework.js",
		   codeUrl: buildUrl + "/Client.wasm",
		   streamingAssetsUrl: "StreamingAssets",
		   companyName: "Robot",
		   productName: "Playza",
		   productVersion: "0.0.0.0",
			cacheControl: function (url) {
				 // Revalidate if file is up to date before loading from cache
				 //if (url.match(/\.dat$/)) {
				 //	 return "must-revalidate";
				 //}

				 // Load file from cache without revalidation.
				 if (false) {
					 return "immutable";
				 }
			 
				 // Disable explicit caching for all other files.
				 // Note: the default browser cache may cache them anyway.
				 return "no-store";
			   },		   
		 };
		 
		 var container = document.querySelector("#unity-container");
		 var canvas = document.querySelector("#unity-canvas");
		 var fullscreenButton = document.querySelector("#unity-fullscreen-button");
		 var loadingBar = document.querySelector("#unity-loading-bar");
			   
		 if (isMobile) {

           var meta = document.createElement('meta');
           meta.name = 'viewport';
           meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
           document.getElementsByTagName('head')[0].appendChild(meta);

		   container.className = "unity-mobile";
		   
		   const searchParams = new URLSearchParams(window.location.search);
	       if (searchParams.has('low_quality'))
		   {
				if (searchParams.get('low_quality').toLowerCase() != 'false')
				{
					//config.devicePixelRatio = 1;
				}
		   }
		   else
		   {
				//config.devicePixelRatio = 1;
		   }
		 } else {
			 container.className = "unity-mobile";
		 }
		 loadingBar.style.display = "block";
		 var script = document.createElement("script");
		 script.src = loaderUrl;
		 script.onload = () => {
		   createUnityInstance(canvas, config, (progress) => {
		 if (progress == 1) {
		 document.getElementById("ProgressLine").style.width = (200 * (progress)) + "px";
		 document.getElementById("loadingInfo").innerHTML = "loading";
		 document.getElementById("progressC").innerHTML = Math.floor((100 * progress)) + "%";
		 } else {
		 document.getElementById("loadingInfo").innerHTML = "downloading";
		 document.getElementById("progressC").innerHTML = Math.floor((100 * progress)) + "%";
		 document.getElementById("ProgressLine").style.width = (200 * (progress)) + "px";
		 }
		   }).then((unityInstance) => {
			 $('#overlay').delay(350).animate({"margin-left": '-=1700'}, 'slow').fadeOut();
			 $('#overlay-clip').delay(350).animate({opacity:0}, 'slow').fadeOut();
		 $('#counter').delay(200).animate({opacity:0, "margin-top": '-=100'}, 150, function(){ $(this).css("display","none"); });
		 $('#loadingBox').delay(200).animate({"margin-top": '+=100', opacity:0}, '200',function(){ $(this).css("display","none");});
		 loadingBar.style.display = "none";
			 fullscreenButton.onclick = () => {
			   unityInstance.SetFullscreen(1);
			 };
		   }).catch((message) => {
			 alert(message);
		   });
		 };
		 document.body.appendChild(script);
      </script>
   </body>
</html>
