<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui, shrink-to-fit=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->

	<title>{{project.title}} {{project.version}}</title>
	<style type='text/css'>
	/* Disable user selection to avoid strange bug in Chrome on Windows:
	* Selecting a text outside the canvas, then clicking+draging would
	* drag the selected text but block mouse down/up events to the engine.
	*/
	body {
	{{^DEFOLD_SCALE_MODE_IS_NO_SCALE}}
		position: fixed; /* Prevent overscroll */
	{{/DEFOLD_SCALE_MODE_IS_NO_SCALE}}
		margin:0;
		padding:0;
	}

	.canvas-app-container {
		width: 100%;
		height: 100%;
		position: absolute;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.canvas-app-container:-webkit-full-screen {
		/* Auto width and height in Safari/Chrome fullscreen. */
		width: auto;
		height: auto;
	}

	#canvas {
		outline: none;
		border: 0;
		width: 100%;
		vertical-align: bottom;
	}

	#canvas-container {
		position: relative;
	}

	canvas:focus, canvas:active {
		outline: none;
		border: 0;
		ie-dummy: expression(this.hideFocus=true);
		-moz-outline-style: none;
	}

	div {
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	{{{DEFOLD_CUSTOM_CSS_INLINE}}}
	</style>
</head>

<body>
	<div id="app-container" class="canvas-app-container">
		<div id="canvas-container" class="canvas-app-canvas-container">
			<canvas id="canvas" class="canvas-app-canvas" tabindex="1" width="{{display.width}}" height="{{display.height}}"></canvas>
		</div>
		<div class="buttons-background">
{{#html5.show_fullscreen_button}}
			<div class="button" onclick="Module.toggleFullscreen();">Fullscreen</div>
{{/html5.show_fullscreen_button}}
{{#html5.show_made_with_defold}}
			<div class="link">Made with <a href="https://defold.com/" target="_blank">Defold</a></div>
{{/html5.show_made_with_defold}}
		</div>
	</div>
	<!-- -->
	<script id='engine-loader' type='text/javascript' src="dmloader.js"></script>
	<!-- -->
	<script id='engine-setup' type='text/javascript'>
	var extra_params = {
		archive_location_filter: function( path ) {
			return ("{{DEFOLD_ARCHIVE_LOCATION_PREFIX}}" + path + "{{DEFOLD_ARCHIVE_LOCATION_SUFFIX}}");
		},
		engine_arguments: [{{#DEFOLD_ENGINE_ARGUMENTS}}"{{.}}",{{/DEFOLD_ENGINE_ARGUMENTS}}],
		custom_heap_size: {{DEFOLD_HEAP_SIZE}},
		full_screen_container: "#canvas-container",
		disable_context_menu: true
	}

	Module['INITIAL_MEMORY'] = extra_params.custom_heap_size;

	Module['onRuntimeInitialized'] = function() {
		Module.runApp("canvas", extra_params);
	};

	Module["locateFile"] = function(path, scriptDirectory)
	{
		// dmengine*.wasm is hardcoded in the built JS loader for WASM,
		// we need to replace it here with the correct project name.
		if (path == "dmengine.wasm" || path == "dmengine_release.wasm" || path == "dmengine_headless.wasm") {
			path = "{{exe-name}}.wasm";
		}
		return scriptDirectory + path;
	};

	var is_iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
	var buttonHeight = 0;
	var prevInnerWidth = -1;
	var prevInnerHeight = -1;
{{#html5.show_made_with_defold}}
	buttonHeight = 42;
{{/html5.show_made_with_defold}}
{{#html5.show_fullscreen_button}}
	buttonHeight = 42;
{{/html5.show_fullscreen_button}}
	function resize_game_canvas() {
		// Hack for iOS when exit from Fullscreen mode
		if (is_iOS) {
			window.scrollTo(0, 0);
		}

		var app_container = document.getElementById('app-container');
		var game_canvas = document.getElementById('canvas');
		var innerWidth = window.innerWidth;
		var innerHeight = window.innerHeight - buttonHeight;
		if (prevInnerWidth == innerWidth && prevInnerHeight == innerHeight)
		{
			return;
		}
		prevInnerWidth = innerWidth;
		prevInnerHeight = innerHeight;
		var width = {{display.width}};
		var height = {{display.height}};
		var targetRatio = width / height;
		var actualRatio = innerWidth / innerHeight;
	{{#DEFOLD_SCALE_MODE_IS_DOWNSCALE_FIT}}
		//Downscale fit
		if (innerWidth < width || innerHeight < height) {
			if (actualRatio > targetRatio) {
				width = innerHeight * targetRatio;
				height = innerHeight;
				app_container.style.marginLeft = ((innerWidth - width) / 2) + "px";
				app_container.style.marginTop = "0px";
			}
			else {
				width = innerWidth;
				height = innerWidth / targetRatio;
				app_container.style.marginLeft = "0px";
				app_container.style.marginTop = ((innerHeight - height) / 2) + "px";
			}
		}
		else {
			app_container.style.marginLeft = ((innerWidth - width) / 2) + "px";
			app_container.style.marginTop = ((innerHeight - height) / 2) + "px";
		}
	{{/DEFOLD_SCALE_MODE_IS_DOWNSCALE_FIT}}
	{{#DEFOLD_SCALE_MODE_IS_STRETCH}}
		//Stretch
		width = innerWidth;
		height = innerHeight;
	{{/DEFOLD_SCALE_MODE_IS_STRETCH}}
	{{#DEFOLD_SCALE_MODE_IS_FIT}}
		//Fit
		if (actualRatio > targetRatio) {
			width = innerHeight * targetRatio;
			height = innerHeight;
			app_container.style.marginLeft = ((innerWidth - width) / 2) + "px";
			app_container.style.marginTop = "0px";
		}
		else {
			width = innerWidth;
			height = innerWidth / targetRatio;
			app_container.style.marginLeft = "0px";
			app_container.style.marginTop = ((innerHeight - height) / 2) + "px";
		}
	{{/DEFOLD_SCALE_MODE_IS_FIT}}
	{{#DEFOLD_SCALE_MODE_IS_NO_SCALE}}
		//No scale
		var margin_left = ((innerWidth - width) / 2);
		margin_left = margin_left > 0 ? margin_left : 0;
		var margin_top = ((innerHeight - height) / 2);
		margin_top = margin_top > 0 ? margin_top : 0;
		app_container.style.marginLeft = margin_left + "px";
		app_container.style.marginTop = margin_top + "px";
	{{/DEFOLD_SCALE_MODE_IS_NO_SCALE}}
		app_container.style.width = width + "px";
		app_container.style.height = height + buttonHeight + "px";
		game_canvas.width = width;
		game_canvas.height = height;
	}
	resize_game_canvas();
	window.addEventListener('resize', resize_game_canvas, false);
	window.addEventListener('orientationchange', resize_game_canvas, false);
	window.addEventListener('focus', resize_game_canvas, false);
	</script>

	<script id='engine-start' type='text/javascript'>
		EngineLoader.load("canvas", "{{exe-name}}");
	</script>
</body>
</html>
