added first godot web mjprot demo

mjprot/MJProt.js

@@ -0,0 +1,458 @@
+
+var Godot = (function() {
+  var _scriptDir = typeof document !== 'undefined' && document.currentScript ? document.currentScript.src : undefined;
+  return (
+function(Godot) {
+  Godot = Godot || {};
+
+var Module=typeof Godot!=="undefined"?Godot:{};var IDHandler=function(){var ids={};var size=0;this.has=function(id){return ids.hasOwnProperty(id)};this.add=function(obj){size+=1;var id=crypto.getRandomValues(new Int32Array(32))[0];ids[id]=obj;return id};this.get=function(id){return ids[id]};this.remove=function(id){size-=1;delete ids[id]};this.size=function(){return size};this.ids=ids};Module.IDHandler=new IDHandler;Module["copyToFS"]=function(path,buffer){var p=path.lastIndexOf("/");var dir="/";if(p>0){dir=path.slice(0,path.lastIndexOf("/"))}try{FS.stat(dir)}catch(e){if(e.errno!==ERRNO_CODES.ENOENT){throw e}FS.mkdirTree(dir)}FS.writeFile(path,new Uint8Array(buffer),{"flags":"wx+"})};Module.drop_handler=function(){var upload=[];var uploadPromises=[];var uploadCallback=null;function readFilePromise(entry,path){return new Promise(function(resolve,reject){entry.file(function(file){var reader=new FileReader;reader.onload=function(){var f={"path":file.relativePath||file.webkitRelativePath,"name":file.name,"type":file.type,"size":file.size,"data":reader.result};if(!f["path"])f["path"]=f["name"];upload.push(f);resolve()};reader.onerror=function(){console.log("Error reading file");reject()};reader.readAsArrayBuffer(file)},function(err){console.log("Error!");reject()})})}function readDirectoryPromise(entry){return new Promise(function(resolve,reject){var reader=entry.createReader();reader.readEntries(function(entries){for(var i=0;i<entries.length;i++){var ent=entries[i];if(ent.isDirectory){uploadPromises.push(readDirectoryPromise(ent))}else if(ent.isFile){uploadPromises.push(readFilePromise(ent))}}resolve()})})}function processUploadsPromises(resolve,reject){if(uploadPromises.length==0){resolve();return}uploadPromises.pop().then(function(){setTimeout(function(){processUploadsPromises(resolve,reject)},0)})}function dropFiles(files){var args=files||[];var argc=args.length;var argv=stackAlloc((argc+1)*4);for(var i=0;i<argc;i++){HEAP32[(argv>>2)+i]=allocateUTF8OnStack(args[i])}HEAP32[(argv>>2)+argc]=0;ccall("_drop_files_callback","void",["number","number"],[argv,argc])}return function(ev){ev.preventDefault();if(ev.dataTransfer.items){for(var i=0;i<ev.dataTransfer.items.length;i++){const item=ev.dataTransfer.items[i];var entry=null;if("getAsEntry"in item){entry=item.getAsEntry()}else if("webkitGetAsEntry"in item){entry=item.webkitGetAsEntry()}if(!entry){console.error("File upload not supported")}else if(entry.isDirectory){uploadPromises.push(readDirectoryPromise(entry))}else if(entry.isFile){uploadPromises.push(readFilePromise(entry))}else{console.error("Unrecognized entry...",entry)}}}else{console.error("File upload not supported")}uploadCallback=new Promise(processUploadsPromises).then(function(){const DROP="/tmp/drop-"+parseInt(Math.random()*Math.pow(2,31))+"/";var drops=[];var files=[];upload.forEach(elem=>{var path=elem["path"];Module["copyToFS"](DROP+path,elem["data"]);var idx=path.indexOf("/");if(idx==-1){drops.push(DROP+path)}else{var sub=path.substr(0,idx);idx=sub.indexOf("/");if(idx<0&&drops.indexOf(DROP+sub)==-1){drops.push(DROP+sub)}}files.push(DROP+path)});uploadPromises=[];upload=[];dropFiles(drops);var dirs=[DROP.substr(0,DROP.length-1)];files.forEach(function(file){FS.unlink(file);var dir=file.replace(DROP,"");var idx=dir.lastIndexOf("/");while(idx>0){dir=dir.substr(0,idx);if(dirs.indexOf(DROP+dir)==-1){dirs.push(DROP+dir)}idx=dir.lastIndexOf("/")}});dirs=dirs.sort(function(a,b){var al=(a.match(/\//g)||[]).length;var bl=(b.match(/\//g)||[]).length;if(al>bl)return-1;else if(al<bl)return 1;return 0});dirs.forEach(function(dir){FS.rmdir(dir)})})}}();var moduleOverrides={};var key;for(key in Module){if(Module.hasOwnProperty(key)){moduleOverrides[key]=Module[key]}}var arguments_=[];var thisProgram="./this.program";var quit_=function(status,toThrow){throw toThrow};var ENVIRONMENT_IS_WEB=false;var ENVIRONMENT_IS_WORKER=false;var ENVIRONMENT_IS_NODE=false;var ENVIRONMENT_HAS_NODE=false;var ENVIRONMENT_IS_SHELL=false;ENVIRONMENT_IS_WEB=typeof window==="object";ENVIRONMENT_IS_WORKER=typeof importScripts==="function";ENVIRONMENT_HAS_NODE=typeof process==="object"&&typeof process.versions==="object"&&typeof process.versions.node==="string";ENVIRONMENT_IS_NODE=ENVIRONMENT_HAS_NODE&&!ENVIRONMENT_IS_WEB&&!ENVIRONMENT_IS_WORKER;ENVIRONMENT_IS_SHELL=!ENVIRONMENT_IS_WEB&&!ENVIRONMENT_IS_NODE&&!ENVIRONMENT_IS_WORKER;var scriptDirectory="";function locateFile(path){if(Module["locateFile"]){return Module["locateFile"](path,scriptDirectory)}return scriptDirectory+path}var read_,readAsync,readBinary,setWindowTitle;if(ENVIRONMENT_IS_WEB||ENVIRONMENT_IS_WORKER){if(ENVIRONMENT_IS_WORKER){scriptDirectory=self.location.href}else if(document.currentScript){scriptDirectory=document.currentScript.src}if(_scriptDir){scriptDirectory=_scriptDir}if(scriptDirectory.indexOf("blob:")!==0){scriptDirectory=scriptDirectory.substr(0,scriptDirectory.lastIndexOf("/")+1)}else{scriptDirectory=""}read_=function shell_read(url){var xhr=new XMLHttpRequLine truncated
+
+
+  return Godot
+}
+);
+})();
+if (typeof exports === 'object' && typeof module === 'object')
+      module.exports = Godot;
+    else if (typeof define === 'function' && define['amd'])
+      define([], function() { return Godot; });
+    else if (typeof exports === 'object')
+      exports["Godot"] = Godot;
+    
+var Preloader = /** @constructor */ function() {
+
+	var DOWNLOAD_ATTEMPTS_MAX = 4;
+	var progressFunc = null;
+	var lastProgress = { loaded: 0, total: 0 };
+
+	var loadingFiles = {};
+	this.preloadedFiles = [];
+
+	function loadXHR(resolve, reject, file, tracker) {
+		var xhr = new XMLHttpRequest;
+		xhr.open('GET', file);
+		if (!file.endsWith('.js')) {
+			xhr.responseType = 'arraybuffer';
+		}
+		['loadstart', 'progress', 'load', 'error', 'abort'].forEach(function(ev) {
+			xhr.addEventListener(ev, onXHREvent.bind(xhr, resolve, reject, file, tracker));
+		});
+		xhr.send();
+	}
+
+	function onXHREvent(resolve, reject, file, tracker, ev) {
+
+		if (this.status >= 400) {
+
+			if (this.status < 500 || ++tracker[file].attempts >= DOWNLOAD_ATTEMPTS_MAX) {
+				reject(new Error("Failed loading file '" + file + "': " + this.statusText));
+				this.abort();
+				return;
+			} else {
+				setTimeout(loadXHR.bind(null, resolve, reject, file, tracker), 1000);
+			}
+		}
+
+		switch (ev.type) {
+			case 'loadstart':
+				if (tracker[file] === undefined) {
+					tracker[file] = {
+						total: ev.total,
+						loaded: ev.loaded,
+						attempts: 0,
+						final: false,
+					};
+				}
+				break;
+
+			case 'progress':
+				tracker[file].loaded = ev.loaded;
+				tracker[file].total = ev.total;
+				break;
+
+			case 'load':
+				tracker[file].final = true;
+				resolve(this);
+				break;
+
+			case 'error':
+				if (++tracker[file].attempts >= DOWNLOAD_ATTEMPTS_MAX) {
+					tracker[file].final = true;
+					reject(new Error("Failed loading file '" + file + "'"));
+				} else {
+					setTimeout(loadXHR.bind(null, resolve, reject, file, tracker), 1000);
+				}
+				break;
+
+			case 'abort':
+				tracker[file].final = true;
+				reject(new Error("Loading file '" + file + "' was aborted."));
+				break;
+		}
+	}
+
+	this.loadPromise = function(file) {
+		return new Promise(function(resolve, reject) {
+			loadXHR(resolve, reject, file, loadingFiles);
+		});
+	}
+
+	this.preload = function(pathOrBuffer, destPath) {
+		if (pathOrBuffer instanceof ArrayBuffer) {
+			pathOrBuffer = new Uint8Array(pathOrBuffer);
+		} else if (ArrayBuffer.isView(pathOrBuffer)) {
+			pathOrBuffer = new Uint8Array(pathOrBuffer.buffer);
+		}
+		if (pathOrBuffer instanceof Uint8Array) {
+			this.preloadedFiles.push({
+				path: destPath,
+				buffer: pathOrBuffer
+			});
+			return Promise.resolve();
+		} else if (typeof pathOrBuffer === 'string') {
+			var me = this;
+			return this.loadPromise(pathOrBuffer).then(function(xhr) {
+				me.preloadedFiles.push({
+					path: destPath || pathOrBuffer,
+					buffer: xhr.response
+				});
+				return Promise.resolve();
+			});
+		} else {
+			throw Promise.reject("Invalid object for preloading");
+		}
+	};
+
+	var animateProgress = function() {
+
+		var loaded = 0;
+		var total = 0;
+		var totalIsValid = true;
+		var progressIsFinal = true;
+
+		Object.keys(loadingFiles).forEach(function(file) {
+			const stat = loadingFiles[file];
+			if (!stat.final) {
+				progressIsFinal = false;
+			}
+			if (!totalIsValid || stat.total === 0) {
+				totalIsValid = false;
+				total = 0;
+			} else {
+				total += stat.total;
+			}
+			loaded += stat.loaded;
+		});
+		if (loaded !== lastProgress.loaded || total !== lastProgress.total) {
+			lastProgress.loaded = loaded;
+			lastProgress.total = total;
+			if (typeof progressFunc === 'function')
+				progressFunc(loaded, total);
+		}
+		if (!progressIsFinal)
+			requestAnimationFrame(animateProgress);
+	}
+	this.animateProgress = animateProgress; // Also exposed to start it.
+
+	this.setProgressFunc = function(callback) {
+		progressFunc = callback;
+	}
+};
+
+var Utils = {
+
+	createLocateRewrite: function(execName) {
+		function rw(path) {
+			if (path.endsWith('.worker.js')) {
+				return execName + '.worker.js';
+			} else if (path.endsWith('.js')) {
+				return execName + '.js';
+			} else if (path.endsWith('.wasm')) {
+				return execName + '.wasm';
+			}
+		}
+		return rw;
+	},
+
+	createInstantiatePromise: function(wasmLoader) {
+		function instantiateWasm(imports, onSuccess) {
+			wasmLoader.then(function(xhr) {
+				WebAssembly.instantiate(xhr.response, imports).then(function(result) {
+					onSuccess(result['instance'], result['module']);
+				});
+			});
+			wasmLoader = null;
+			return {};
+		};
+
+		return instantiateWasm;
+	},
+
+	findCanvas: function() {
+		var nodes = document.getElementsByTagName('canvas');
+		if (nodes.length && nodes[0] instanceof HTMLCanvasElement) {
+			return nodes[0];
+		}
+		throw new Error("No canvas found");
+	},
+
+	isWebGLAvailable: function(majorVersion = 1) {
+
+		var testContext = false;
+		try {
+			var testCanvas = document.createElement('canvas');
+			if (majorVersion === 1) {
+				testContext = testCanvas.getContext('webgl') || testCanvas.getContext('experimental-webgl');
+			} else if (majorVersion === 2) {
+				testContext = testCanvas.getContext('webgl2') || testCanvas.getContext('experimental-webgl2');
+			}
+		} catch (e) {}
+		return !!testContext;
+	}
+};
+
+Function('return this')()['Engine'] = (function() {
+	var preloader = new Preloader();
+
+	var wasmExt = '.wasm';
+	var unloadAfterInit = true;
+	var loadPath = '';
+	var loadPromise = null;
+	var initPromise = null;
+	var stderr = null;
+	var stdout = null;
+	var progressFunc = null;
+
+	function load(basePath) {
+		if (loadPromise == null) {
+			loadPath = basePath;
+			loadPromise = preloader.loadPromise(basePath + wasmExt);
+			preloader.setProgressFunc(progressFunc);
+			requestAnimationFrame(preloader.animateProgress);
+		}
+		return loadPromise;
+	};
+
+	function unload() {
+		loadPromise = null;
+	};
+
+	/** @constructor */
+	function Engine() {
+		this.canvas = null;
+		this.executableName = '';
+		this.rtenv = null;
+		this.customLocale = null;
+		this.resizeCanvasOnStart = false;
+		this.onExecute = null;
+		this.onExit = null;
+	};
+
+	Engine.prototype.init = /** @param {string=} basePath */ function(basePath) {
+		if (initPromise) {
+			return initPromise;
+		}
+		if (loadPromise == null) {
+			if (!basePath) {
+				initPromise = Promise.reject(new Error("A base path must be provided when calling `init` and the engine is not loaded."));
+				return initPromise;
+			}
+			load(basePath);
+		}
+		var config = {};
+		if (typeof stdout === 'function')
+			config.print = stdout;
+		if (typeof stderr === 'function')
+			config.printErr = stderr;
+		var me = this;
+		initPromise = new Promise(function(resolve, reject) {
+			config['locateFile'] = Utils.createLocateRewrite(loadPath);
+			config['instantiateWasm'] = Utils.createInstantiatePromise(loadPromise);
+			Godot(config).then(function(module) {
+				me.rtenv = module;
+				if (unloadAfterInit) {
+					unload();
+				}
+				resolve();
+				config = null;
+			});
+		});
+		return initPromise;
+	};
+
+	/** @type {function(string, string):Object} */
+	Engine.prototype.preloadFile = function(file, path) {
+		return preloader.preload(file, path);
+	};
+
+	/** @type {function(...string):Object} */
+	Engine.prototype.start = function() {
+		// Start from arguments.
+		var args = [];
+		for (var i = 0; i < arguments.length; i++) {
+			args.push(arguments[i]);
+		}
+		var me = this;
+		return me.init().then(function() {
+			if (!me.rtenv) {
+				return Promise.reject(new Error('The engine must be initialized before it can be started'));
+			}
+
+			if (!(me.canvas instanceof HTMLCanvasElement)) {
+				me.canvas = Utils.findCanvas();
+			}
+
+			// Canvas can grab focus on click, or key events won't work.
+			if (me.canvas.tabIndex < 0) {
+				me.canvas.tabIndex = 0;
+			}
+
+			// Disable right-click context menu.
+			me.canvas.addEventListener('contextmenu', function(ev) {
+				ev.preventDefault();
+			}, false);
+
+			// Until context restoration is implemented warn the user of context loss.
+			me.canvas.addEventListener('webglcontextlost', function(ev) {
+				alert("WebGL context lost, please reload the page");
+				ev.preventDefault();
+			}, false);
+
+			// Browser locale, or custom one if defined.
+			var locale = me.customLocale;
+			if (!locale) {
+				locale = navigator.languages ? navigator.languages[0] : navigator.language;
+				locale = locale.split('.')[0];
+			}
+			me.rtenv['locale'] = locale;
+			me.rtenv['canvas'] = me.canvas;
+			me.rtenv['thisProgram'] = me.executableName;
+			me.rtenv['resizeCanvasOnStart'] = me.resizeCanvasOnStart;
+			me.rtenv['noExitRuntime'] = true;
+			me.rtenv['onExecute'] = me.onExecute;
+			me.rtenv['onExit'] = function(code) {
+				if (me.onExit)
+					me.onExit(code);
+				me.rtenv = null;
+			}
+			return new Promise(function(resolve, reject) {
+				preloader.preloadedFiles.forEach(function(file) {
+					me.rtenv['copyToFS'](file.path, file.buffer);
+				});
+				preloader.preloadedFiles.length = 0; // Clear memory
+				me.rtenv['callMain'](args);
+				initPromise = null;
+				resolve();
+			});
+		});
+	};
+
+	Engine.prototype.startGame = function(execName, mainPack, extraArgs) {
+		// Start and init with execName as loadPath if not inited.
+		this.executableName = execName;
+		var me = this;
+		return Promise.all([
+			this.init(execName),
+			this.preloadFile(mainPack, mainPack)
+		]).then(function() {
+			var args = ['--main-pack', mainPack];
+			if (extraArgs)
+				args = args.concat(extraArgs);
+			return me.start.apply(me, args);
+		});
+	};
+
+	Engine.prototype.setWebAssemblyFilenameExtension = function(override) {
+		if (String(override).length === 0) {
+			throw new Error('Invalid WebAssembly filename extension override');
+		}
+		wasmExt = String(override);
+	};
+
+	Engine.prototype.setUnloadAfterInit = function(enabled) {
+		unloadAfterInit = enabled;
+	};
+
+	Engine.prototype.setCanvas = function(canvasElem) {
+		this.canvas = canvasElem;
+	};
+
+	Engine.prototype.setCanvasResizedOnStart = function(enabled) {
+		this.resizeCanvasOnStart = enabled;
+	};
+
+	Engine.prototype.setLocale = function(locale) {
+		this.customLocale = locale;
+	};
+
+	Engine.prototype.setExecutableName = function(newName) {
+		this.executableName = newName;
+	};
+
+	Engine.prototype.setProgressFunc = function(func) {
+		progressFunc = func;
+	};
+
+	Engine.prototype.setStdoutFunc = function(func) {
+		var print = function(text) {
+			if (arguments.length > 1) {
+				text = Array.prototype.slice.call(arguments).join(" ");
+			}
+			func(text);
+		};
+		if (this.rtenv)
+			this.rtenv.print = print;
+		stdout = print;
+	};
+
+	Engine.prototype.setStderrFunc = function(func) {
+		var printErr = function(text) {
+			if (arguments.length > 1)
+				text = Array.prototype.slice.call(arguments).join(" ");
+			func(text);
+		};
+		if (this.rtenv)
+			this.rtenv.printErr = printErr;
+		stderr = printErr;
+	};
+
+	Engine.prototype.setOnExecute = function(onExecute) {
+		if (this.rtenv)
+			this.rtenv.onExecute = onExecute;
+		this.onExecute = onExecute;
+	}
+
+	Engine.prototype.setOnExit = function(onExit) {
+		this.onExit = onExit;
+	}
+
+	Engine.prototype.copyToFS = function(path, buffer) {
+		if (this.rtenv == null) {
+			throw new Error("Engine must be inited before copying files");
+		}
+		this.rtenv['copyToFS'](path, buffer);
+	}
+
+	// Closure compiler exported engine methods.
+	/** @export */
+	Engine['isWebGLAvailable'] = Utils.isWebGLAvailable;
+	Engine['load'] = load;
+	Engine['unload'] = unload;
+	Engine.prototype['init'] = Engine.prototype.init;
+	Engine.prototype['preloadFile'] = Engine.prototype.preloadFile;
+	Engine.prototype['start'] = Engine.prototype.start;
+	Engine.prototype['startGame'] = Engine.prototype.startGame;
+	Engine.prototype['setWebAssemblyFilenameExtension'] = Engine.prototype.setWebAssemblyFilenameExtension;
+	Engine.prototype['setUnloadAfterInit'] = Engine.prototype.setUnloadAfterInit;
+	Engine.prototype['setCanvas'] = Engine.prototype.setCanvas;
+	Engine.prototype['setCanvasResizedOnStart'] = Engine.prototype.setCanvasResizedOnStart;
+	Engine.prototype['setLocale'] = Engine.prototype.setLocale;
+	Engine.prototype['setExecutableName'] = Engine.prototype.setExecutableName;
+	Engine.prototype['setProgressFunc'] = Engine.prototype.setProgressFunc;
+	Engine.prototype['setStdoutFunc'] = Engine.prototype.setStdoutFunc;
+	Engine.prototype['setStderrFunc'] = Engine.prototype.setStderrFunc;
+	Engine.prototype['setOnExecute'] = Engine.prototype.setOnExecute;
+	Engine.prototype['setOnExit'] = Engine.prototype.setOnExit;
+	Engine.prototype['copyToFS'] = Engine.prototype.copyToFS;
+	return Engine;
+})();

mjprot/MJProt.png.import

@@ -0,0 +1,34 @@
+[remap]
+
+importer="texture"
+type="StreamTexture"
+path="res://.import/MJProt.png-6d43f100ca2c203d73e56be0706c7be1.stex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://web/MJProt.png"
+dest_files=[ "res://.import/MJProt.png-6d43f100ca2c203d73e56be0706c7be1.stex" ]
+
+[params]
+
+compress/mode=0
+compress/lossy_quality=0.7
+compress/hdr_mode=0
+compress/bptc_ldr=0
+compress/normal_map=0
+flags/repeat=0
+flags/filter=true
+flags/mipmaps=false
+flags/anisotropic=false
+flags/srgb=2
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/HDR_as_SRGB=false
+process/invert_color=false
+stream=false
+size_limit=0
+detect_3d=true
+svg/scale=1.0

mjprot/favicon.png.import

@@ -0,0 +1,34 @@
+[remap]
+
+importer="texture"
+type="StreamTexture"
+path="res://.import/favicon.png-c7e633f2922b6be2a83a781a016300eb.stex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://web/favicon.png"
+dest_files=[ "res://.import/favicon.png-c7e633f2922b6be2a83a781a016300eb.stex" ]
+
+[params]
+
+compress/mode=0
+compress/lossy_quality=0.7
+compress/hdr_mode=0
+compress/bptc_ldr=0
+compress/normal_map=0
+flags/repeat=0
+flags/filter=true
+flags/mipmaps=false
+flags/anisotropic=false
+flags/srgb=2
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/HDR_as_SRGB=false
+process/invert_color=false
+stream=false
+size_limit=0
+detect_3d=true
+svg/scale=1.0

mjprot/index.html

@@ -0,0 +1,268 @@
+<!DOCTYPE html>
+<html xmlns='http://www.w3.org/1999/xhtml' lang='' xml:lang=''>
+<head>
+	<meta charset='utf-8' />
+	<meta name='viewport' content='width=device-width, user-scalable=no' />
+	<link id='-gd-engine-icon' rel='icon' type='image/png' href='favicon.png' />
+	<title>MJProt</title>
+	<style type='text/css'>
+
+		body {
+			touch-action: none;
+			margin: 0;
+			border: 0 none;
+			padding: 0;
+			text-align: center;
+			background-color: black;
+		}
+
+		#canvas {
+			display: block;
+			margin: 0;
+			color: white;
+		}
+
+		#canvas:focus {
+			outline: none;
+		}
+
+		.godot {
+			font-family: 'Noto Sans', 'Droid Sans', Arial, sans-serif;
+			color: #e0e0e0;
+			background-color: #3b3943;
+			background-image: linear-gradient(to bottom, #403e48, #35333c);
+			border: 1px solid #45434e;
+			box-shadow: 0 0 1px 1px #2f2d35;
+		}
+
+
+		/* Status display
+		 * ============== */
+
+		#status {
+			position: absolute;
+			left: 0;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			/* don't consume click events - make children visible explicitly */
+			visibility: hidden;
+		}
+
+		#status-progress {
+			width: 366px;
+			height: 7px;
+			background-color: #38363A;
+			border: 1px solid #444246;
+			padding: 1px;
+			box-shadow: 0 0 2px 1px #1B1C22;
+			border-radius: 2px;
+			visibility: visible;
+		}
+
+		@media only screen and (orientation:portrait) {
+			#status-progress {
+				width: 61.8%;
+			}
+		}
+
+		#status-progress-inner {
+			height: 100%;
+			width: 0;
+			box-sizing: border-box;
+			transition: width 0.5s linear;
+			background-color: #202020;
+			border: 1px solid #222223;
+			box-shadow: 0 0 1px 1px #27282E;
+			border-radius: 3px;
+		}
+
+		#status-indeterminate {
+			visibility: visible;
+			position: relative;
+		}
+
+		#status-indeterminate > div {
+			width: 4.5px;
+			height: 0;
+			border-style: solid;
+			border-width: 9px 3px 0 3px;
+			border-color: #2b2b2b transparent transparent transparent;
+			transform-origin: center 21px;
+			position: absolute;
+		}
+
+		#status-indeterminate > div:nth-child(1) { transform: rotate( 22.5deg); }
+		#status-indeterminate > div:nth-child(2) { transform: rotate( 67.5deg); }
+		#status-indeterminate > div:nth-child(3) { transform: rotate(112.5deg); }
+		#status-indeterminate > div:nth-child(4) { transform: rotate(157.5deg); }
+		#status-indeterminate > div:nth-child(5) { transform: rotate(202.5deg); }
+		#status-indeterminate > div:nth-child(6) { transform: rotate(247.5deg); }
+		#status-indeterminate > div:nth-child(7) { transform: rotate(292.5deg); }
+		#status-indeterminate > div:nth-child(8) { transform: rotate(337.5deg); }
+
+		#status-notice {
+			margin: 0 100px;
+			line-height: 1.3;
+			visibility: visible;
+			padding: 4px 6px;
+			visibility: visible;
+		}
+	</style>
+
+</head>
+<body>
+	<canvas id='canvas'>
+		HTML5 canvas appears to be unsupported in the current browser.<br />
+		Please try updating or use a different browser.
+	</canvas>
+	<div id='status'>
+		<div id='status-progress' style='display: none;' oncontextmenu='event.preventDefault();'><div id ='status-progress-inner'></div></div>
+		<div id='status-indeterminate' style='display: none;' oncontextmenu='event.preventDefault();'>
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+		</div>
+		<div id='status-notice' class='godot' style='display: none;'></div>
+	</div>
+
+	<script type='text/javascript' src='MJProt.js'></script>
+	<script type='text/javascript'>//<![CDATA[
+
+		var engine = new Engine;
+		var setStatusMode;
+		var setStatusNotice;
+
+		(function() {
+
+			const EXECUTABLE_NAME = 'MJProt';
+			const MAIN_PACK = 'MJProt.pck';
+			const INDETERMINATE_STATUS_STEP_MS = 100;
+
+			var canvas = document.getElementById('canvas');
+			var statusProgress = document.getElementById('status-progress');
+			var statusProgressInner = document.getElementById('status-progress-inner');
+			var statusIndeterminate = document.getElementById('status-indeterminate');
+			var statusNotice = document.getElementById('status-notice');
+
+			var initializing = true;
+			var statusMode = 'hidden';
+
+			var animationCallbacks = [];
+			function animate(time) {
+				animationCallbacks.forEach(callback => callback(time));
+				requestAnimationFrame(animate);
+			}
+			requestAnimationFrame(animate);
+
+			function adjustCanvasDimensions() {
+				var scale = window.devicePixelRatio || 1;
+				var width = window.innerWidth;
+				var height = window.innerHeight;
+				canvas.width = width * scale;
+				canvas.height = height * scale;
+				canvas.style.width = width + "px";
+				canvas.style.height = height + "px";
+			}
+			animationCallbacks.push(adjustCanvasDimensions);
+			adjustCanvasDimensions();
+
+			setStatusMode = function setStatusMode(mode) {
+
+				if (statusMode === mode || !initializing)
+					return;
+				[statusProgress, statusIndeterminate, statusNotice].forEach(elem => {
+					elem.style.display = 'none';
+				});
+				animationCallbacks = animationCallbacks.filter(function(value) {
+					return (value != animateStatusIndeterminate);
+				});
+				switch (mode) {
+					case 'progress':
+						statusProgress.style.display = 'block';
+						break;
+					case 'indeterminate':
+						statusIndeterminate.style.display = 'block';
+						animationCallbacks.push(animateStatusIndeterminate);
+						break;
+					case 'notice':
+						statusNotice.style.display = 'block';
+						break;
+					case 'hidden':
+						break;
+					default:
+						throw new Error('Invalid status mode');
+				}
+				statusMode = mode;
+			}
+
+			function animateStatusIndeterminate(ms) {
+
+				var i = Math.floor(ms / INDETERMINATE_STATUS_STEP_MS % 8);
+				if (statusIndeterminate.children[i].style.borderTopColor == '') {
+					Array.prototype.slice.call(statusIndeterminate.children).forEach(child => {
+						child.style.borderTopColor = '';
+					});
+					statusIndeterminate.children[i].style.borderTopColor = '#dfdfdf';
+				}
+			}
+
+			setStatusNotice = function setStatusNotice(text) {
+
+				while (statusNotice.lastChild) {
+					statusNotice.removeChild(statusNotice.lastChild);
+				}
+				var lines = text.split('\n');
+				lines.forEach((line) => {
+					statusNotice.appendChild(document.createTextNode(line));
+					statusNotice.appendChild(document.createElement('br'));
+				});
+			};
+
+			engine.setProgressFunc((current, total) => {
+
+				if (total > 0) {
+					statusProgressInner.style.width = current/total * 100 + '%';
+					setStatusMode('progress');
+					if (current === total) {
+						// wait for progress bar animation
+						setTimeout(() => {
+							setStatusMode('indeterminate');
+						}, 500);
+					}
+				} else {
+					setStatusMode('indeterminate');
+				}
+			});
+
+			function displayFailureNotice(err) {
+				var msg = err.message || err;
+				console.error(msg);
+				setStatusNotice(msg);
+				setStatusMode('notice');
+				initializing = false;
+			};
+
+			if (!Engine.isWebGLAvailable()) {
+				displayFailureNotice('WebGL not available');
+			} else {
+				setStatusMode('indeterminate');
+				engine.setCanvas(canvas);
+				engine.startGame(EXECUTABLE_NAME, MAIN_PACK).then(() => {
+					setStatusMode('hidden');
+					initializing = false;
+				}, displayFailureNotice);
+			}
+		})();
+	//]]></script>
+</body>
+</html>
+

navigation.md

@@ -1 +1 @@
-[index](index.md) [source code](https://git.opengamestudio.org/KaiSD/Test-rep) [ACE test](https://pages.opengamestudio.org/test/ace/)
+[index](index.md) [source code](https://git.opengamestudio.org/KaiSD/Test-rep) [ACE test](https://pages.opengamestudio.org/test/ace/) [Godot MJ Prot](https://pages.opengamestudio.org/test/mjprot/)