starward/index.html at master · dark-tree/starward · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html style="color: black; background-color: black;">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

		<style>
			html, body {
				margin: 0px;
				padding: 0px;
				height: 100%;
				width: 100%;
			}

			canvas {
				display: block;
				width: 100%;
				height: 100%;
			}

			#loading {
				position: fixed; /* floats above all content */
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center; /* horizontal */
				align-items: center;     /* vertical */
			}
		</style>
	</head>

	<body>

		<div id="loading">
			<img src="loading.gif" alt="Loading..."/>
		</div>

		<!-- Create the canvas that the C++ code will draw into -->
		<canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1"></canvas>

		<script>
			function onGameReady() {
				document.getElementById("loading").style.display = "none";
				console.log("Ready event received from game!")
			}

			const canvas = document.querySelector("canvas");

			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;

		    var Module = {
		        canvas: canvas
		    };
		</script>

		<!-- Call the javascript glue code (index.js) as generated by Emscripten -->
		<script src="main.js"></script>

		<script type='text/javascript'>
			canvas.focus();
		</script>

	</body>
</html>