1 files changed, 84 insertions, 27 deletions
diff --git a/game/www/index.html b/game/www/index.html
index 2181c25..123f6a3 100644
--- a/game/www/index.html
+++ b/game/www/index.html
@@ -7,38 +7,95 @@
 		<meta property="og:title" content="Dungeon Crawl">
 		<meta property="og:description" content="Dungeon Crawl game!">
 	    <title>Dungeon Crawl</title>
-	    <style>
-			* {
-				margin: 0;
-				padding: none;
-				border: none;
+		<link rel="stylesheet" href="/style.css">
+	</head>
+	<body id="body">
+		<div id="options">
+			<details id="logs_details">
+				<summary>Logs</summary>
+				<div class="menu">
+					<label>Logs</label>
+					<div id="logs"></div>
+				</div>
+			</details>
+
+			<button onclick="sendKey(114)">Toggle Debug</button>
+
+			<form onsubmit="play(event)" autocomplete="off">
+				<input placeholder="Seed" id="seed" /><button type="submit">Play</button>
+			</form>
+		</div>
+
+		<canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
+
+		<script type='text/javascript'>
+	        var canvas = document.querySelector('#canvas');
+			var logs = document.querySelector('#logs');
+	        var seed = document.querySelector('#seed');
+			var loaded = false;
+
+			function outputLog(...args) {
+				let text = args.join(' ');
+				let span = document.createElement('span');
+				span.innerText = text;
+				logs.appendChild(span);
+				console.log(text)
+			}
+
+			function errorLog(...args) {
+				let text = args.join(' ');
+				let span = document.createElement('span');
+				span.innerText = text;
+				span.classList.add('error')
+				logs.appendChild(span);
+				console.error(text)
+				document.querySelector('#logs_details').open = true;
+			}
+
+			function sendKey(keyCode) {
+				canvas.dispatchEvent(new KeyboardEvent("keydown", {keyCode}));
+				setTimeout(() => {
+					canvas.dispatchEvent(new KeyboardEvent("keyup", {keyCode}));
+				}, 100);
+			}
+
+			function onRuntimeInitialized() {
+				loaded = true;
+			}
+
+			function play(e) {
+				e.preventDefault();
+
+				let seed_text = seed.value.trim();
+				let seed_num = Number(seed_text);
+				let args = [];
+
+				if (seed_text != '' && Number.isInteger(seed_num)) {
+					args.push('--seed');
+					args.push(String(seed_num));
+				}
+
+				outputLog('Using args:', args)
+
+				if (!loaded) {
+					errorLog("Game has not yet loaded")
+				}
+
+				seed.parentElement.remove();
+
+				Module.callMain(args)
 			}
 
-	        canvas {
-	            width: 100%;
-				height: 100%;
-	            display: block;
-	            background: black;
-	        }
-	    </style>
-	</head>
-	<body>
-	    <canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
-	    <script type='text/javascript'>
 	        var Module = {
-	            canvas: (function () {
-	                var canvas = document.querySelector('#canvas');
-					canvas.addEventListener("webglcontextlost", function (e) {
-						alert('WebGL context lost. You will need to reload the page.');
-						e.preventDefault();
-					}, false);
-	                return canvas;
-	            })(),
-	            print: console.log,
-				printErr: console.error,
-	            setStatus: console.debug,
+	            canvas,
+				print: outputLog,
+				printErr: errorLog,
+				noInitialRun: true,
+				onRuntimeInitialized,
 	        };
 	    </script>
 	    <script src="game.js"></script>
+		<script>
+		</script>
 	</body>
 </html>