From 2d3ee0f5fdb3088f248cd603f6650fe52a849c83 Mon Sep 17 00:00:00 2001
From: Gleb Mazovetskiy <glex.spb@gmail.com>
Date: Thu, 16 Dec 2021 23:33:41 +0000
Subject: [PATCH] Emscripten: Add a basic index.html based on emrun

Based on stripped down emrun output
---
 CMake/platforms/emscripten.cmake |   2 +
 Packaging/emscripten/index.html  | 228 +++++++++++++++++++++++++++++++
 docs/building.md                 |   7 +
 3 files changed, 237 insertions(+)
 create mode 100644 Packaging/emscripten/index.html
diff --git a/CMake/platforms/emscripten.cmake b/CMake/platforms/emscripten.cmake
index a5c312541..a98453003 100644
--- a/CMake/platforms/emscripten.cmake
+++ b/CMake/platforms/emscripten.cmake
@@ -8,3 +8,5 @@ set(DEVILUTIONX_SYSTEM_LIBFMT OFF)
 #   warning: _BZ2_bzDecompress may need to be added to EXPORTED_FUNCTIONS if it arrives from a system library
 #   error: undefined symbol: BZ2_bzDecompressEnd (referenced by top-level compiled C/C++ code)
 set(DEVILUTIONX_SYSTEM_BZIP2 OFF)
+
+file(COPY "${CMAKE_CURRENT_SOURCE_DIR}/Packaging/emscripten/index.html" DESTINATION "${CMAKE_CURRENT_BINARY_DIR}")
diff --git a/Packaging/emscripten/index.html b/Packaging/emscripten/index.html
new file mode 100644
index 000000000..e04a2fc67
--- /dev/null
+++ b/Packaging/emscripten/index.html
@@ -0,0 +1,228 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<title>DevilutionX</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<style>
+		body {
+			font-family: arial;
+			margin: 0;
+			padding: none;
+		}
+
+		.emscripten {
+			padding-right: 0;
+			margin-left: auto;
+			margin-right: auto;
+			display: block;
+		}
+
+		div.emscripten {
+			text-align: center;
+		}
+
+		div.emscripten_border {
+			border: 1px solid black;
+		}
+
+		/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
+		canvas.emscripten {
+			border: 0px none;
+			background-color: black;
+		}
+
+		#emscripten_logo {
+			display: inline-block;
+			margin: 0;
+		}
+
+		.spinner {
+			height: 30px;
+			width: 30px;
+			margin: 0;
+			margin-top: 20px;
+			margin-left: 20px;
+			display: inline-block;
+			vertical-align: top;
+
+			-webkit-animation: rotation .8s linear infinite;
+			-moz-animation: rotation .8s linear infinite;
+			-o-animation: rotation .8s linear infinite;
+			animation: rotation 0.8s linear infinite;
+
+			border-left: 5px solid rgb(235, 235, 235);
+			border-right: 5px solid rgb(235, 235, 235);
+			border-bottom: 5px solid rgb(235, 235, 235);
+			border-top: 5px solid rgb(120, 120, 120);
+
+			border-radius: 100%;
+			background-color: rgb(189, 215, 46);
+		}
+
+		@-webkit-keyframes rotation {
+			from {
+				-webkit-transform: rotate(0deg);
+			}
+
+			to {
+				-webkit-transform: rotate(360deg);
+			}
+		}
+
+		@-moz-keyframes rotation {
+			from {
+				-moz-transform: rotate(0deg);
+			}
+
+			to {
+				-moz-transform: rotate(360deg);
+			}
+		}
+
+		@-o-keyframes rotation {
+			from {
+				-o-transform: rotate(0deg);
+			}
+
+			to {
+				-o-transform: rotate(360deg);
+			}
+		}
+
+		@keyframes rotation {
+			from {
+				transform: rotate(0deg);
+			}
+
+			to {
+				transform: rotate(360deg);
+			}
+		}
+
+		#status {
+			display: inline-block;
+			vertical-align: top;
+			margin-top: 30px;
+			margin-left: 20px;
+			font-weight: bold;
+			color: rgb(120, 120, 120);
+		}
+
+		#progress {
+			height: 20px;
+			width: 300px;
+		}
+
+		#controls {
+			display: inline-block;
+			float: right;
+			vertical-align: top;
+			margin-top: 30px;
+			margin-right: 20px;
+		}
+
+		#output {
+			width: 100%;
+			height: 200px;
+			margin: 0 auto;
+			margin-top: 10px;
+			border-left: 0px;
+			border-right: 0px;
+			padding-left: 0px;
+			padding-right: 0px;
+			display: block;
+			background-color: black;
+			color: white;
+			font-family: 'Lucida Console', Monaco, monospace;
+			outline: none;
+		}
+	</style>
+</head>
+
+<body>
+	<div class="spinner" id='spinner'></div>
+	<div class="emscripten" id="status">Downloading...</div>
+
+	<div class="emscripten">
+		<progress value="0" max="100" id="progress" hidden=1></progress>
+	</div>
+
+	<div class="emscripten_border">
+		<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
+	</div>
+	<textarea id="output" rows="8"></textarea>
+
+	<script type='text/javascript'>
+		var statusElement = document.getElementById('status');
+		var progressElement = document.getElementById('progress');
+		var spinnerElement = document.getElementById('spinner');
+
+		var Module = {
+			preRun: [],
+			postRun: [],
+			print: (function () {
+				var element = document.getElementById('output');
+				if (element) element.value = ''; // clear browser cache
+				return function (text) {
+					if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
+					console.log(text);
+					if (element) {
+						element.value += text + "\n";
+						element.scrollTop = element.scrollHeight; // focus on bottom
+					}
+				};
+			})(),
+			canvas: (function () {
+				var canvas = document.getElementById('canvas');
+
+				// As a default initial behavior, pop up an alert when webgl context is lost. To make your
+				// application robust, you may want to override this behavior before shipping!
+				// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
+				canvas.addEventListener("webglcontextlost", function (e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
+
+				return canvas;
+			})(),
+			setStatus: function (text) {
+				if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
+				if (text === Module.setStatus.last.text) return;
+				var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
+				var now = Date.now();
+				if (m && now - Module.setStatus.last.time < 30) return; // if this is a progress update, skip it if too soon
+				Module.setStatus.last.time = now;
+				Module.setStatus.last.text = text;
+				if (m) {
+					text = m[1];
+					progressElement.value = parseInt(m[2]) * 100;
+					progressElement.max = parseInt(m[4]) * 100;
+					progressElement.hidden = false;
+					spinnerElement.hidden = false;
+				} else {
+					progressElement.value = null;
+					progressElement.max = null;
+					progressElement.hidden = true;
+					if (!text) spinnerElement.style.display = 'none';
+				}
+				statusElement.innerHTML = text;
+			},
+			totalDependencies: 0,
+			monitorRunDependencies: function (left) {
+				this.totalDependencies = Math.max(this.totalDependencies, left);
+				Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies - left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
+			}
+		};
+		Module.setStatus('Downloading...');
+		window.onerror = function (event) {
+			// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
+			Module.setStatus('Exception thrown, see JavaScript console');
+			spinnerElement.style.display = 'none';
+			Module.setStatus = function (text) {
+				if (text) Module.printErr('[post-exception status] ' + text);
+			};
+		};
+	</script>
+	<script async type="text/javascript" src="devilutionx.js"></script>
+</body>
+
+</html>
diff --git a/docs/building.md b/docs/building.md
index 63402d919..c81f3ba58 100644
--- a/docs/building.md
+++ b/docs/building.md
@@ -363,6 +363,13 @@ To build, install the [Emscripten SDK](https://emscripten.org/docs/getting_start
 emcmake cmake -S. -Bbuild-em -DCMAKE_BUILD_TYPE=Release
 cmake --build build-em -j $(getconf _NPROCESSORS_ONLN)
 ~~~
+
+To then run it:
+
+~~~ bash
+cd build-em
+emrun index.html
+~~~
 </details>
 
 <details><summary><b>CMake build options</b></summary>
