<!DOCTYPE html>
<html lang="en-us">

<head>
	<meta charset="utf-8">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>{{{ PRODUCT_NAME }}}</title>
	<style>
		html,
		body {
			background: {{{ BACKGROUND || '#000' }}};
			width: 100%;
			height: 100%;
			overflow: visible;
			padding: 0;
			margin: 0;
		}

		div#gameContainer {
			background: transparent !important;
			position: absolute;
		}

		div#gameContainer canvas {
			position: absolute;
		}

		div#gameContainer canvas[data-pixel-art="true"] {
			position: absolute;
			image-rendering: optimizeSpeed;
			image-rendering: -webkit-crisp-edges;
			image-rendering: -moz-crisp-edges;
			image-rendering: -o-crisp-edges;
			image-rendering: crisp-edges;
			image-rendering: -webkit-optimize-contrast;
			image-rendering: optimize-contrast;
			image-rendering: pixelated;
			-ms-interpolation-mode: nearest-neighbor;
		}
	</style>
</head>

<body>
	<div id="gameContainer">
		<canvas id="unity-canvas" data-pixel-art="{{{ OPTIMIZE_FOR_PIXEL_ART }}}"></canvas>
		<script src="Build/{{{ LOADER_FILENAME }}}"></script>
		<script>
			createUnityInstance(document.querySelector("#unity-canvas"), {
				dataUrl: "Build/{{{ DATA_FILENAME }}}",
				frameworkUrl: "Build/{{{ FRAMEWORK_FILENAME }}}",
				codeUrl: "Build/{{{ CODE_FILENAME }}}",
#if MEMORY_FILENAME
				memoryUrl: "Build/{{{ MEMORY_FILENAME }}}",
#endif
#if SYMBOLS_FILENAME
				symbolsUrl: "Build/{{{ SYMBOLS_FILENAME }}}",
#endif
				streamingAssetsUrl: "StreamingAssets",
				companyName: "{{{ COMPANY_NAME }}}",
				productName: "{{{ PRODUCT_NAME }}}",
				productVersion: "{{{ PRODUCT_VERSION }}}",
			}).then(function (instance) {
				var canvas = instance.Module.canvas;
				var container = canvas.parentElement;
				function onResize() {
					var w;
					var h;

					if (scaleToFit) {
						w = window.innerWidth;
						h = window.innerHeight;

						var r = {{{ HEIGHT }}} / {{{ WIDTH }}};

						if (w * r > window.innerHeight) {
							w = Math.min(w, Math.ceil(h / r));
						}
						h = Math.floor(w * r);
					} else {
						w = {{{ WIDTH }}};
						h = {{{ HEIGHT }}};
					}

					container.style.width = canvas.style.width = w + "px";
					container.style.height = canvas.style.height = h + "px";
					container.style.top = Math.floor((window.innerHeight - h) / 2) + "px";
					container.style.left = Math.floor((window.innerWidth - w) / 2) + "px";
				}

				var scaleToFit;
				try {
					scaleToFit = !!JSON.parse("{{{ SCALE_TO_FIT }}}");
				} catch (e) {
					scaleToFit = true;
				}
				window.addEventListener('resize', onResize);
				onResize();
			});
		</script>
	</div>
</body>

</html>
