Merge pull request #5 from sigonasr2/add-emscripten-shell

Add emscripten shell
3 months ago · 2701f5141b
parent 6aad971aec 02dca56ee1
commit 2701f5141b
2 changed files with 163 additions and 0 deletions
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@ -258,7 +258,22 @@ if (EMSCRIPTEN)
            -sUSE_LIBPNG=1
            -sLLD_REPORT_UNDEFINED)
    endif()
+    
+    set_target_properties(${OutputExecutable} PROPERTIES LINK_FLAGS "--shell-file ${CMAKE_CURRENT_SOURCE_DIR}/emscripten_shell.html")
+
+    add_custom_command(
+        TARGET ${OutputExecutable}
+        POST_BUILD
+        COMMAND ${CMAKE_COMMAND}
+        ARGS -E remove -f ${CMAKE_BINARY_DIR}/bin/index.html
+    )

+    add_custom_command(
+        TARGET ${OutputExecutable}
+        POST_BUILD
+        COMMAND ${CMAKE_COMMAND}
+        ARGS -E rename ${CMAKE_BINARY_DIR}/bin/${OutputExecutable}.html ${CMAKE_BINARY_DIR}/bin/index.html
+    )
 endif() # Emscripten

 ######################################################################
--- a/emscripten_shell.html
+++ b/emscripten_shell.html
@ -0,0 +1,148 @@
+<!doctype html>
+<html lang="en-us">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Hamster</title>
+    <style>
+        html,
+        body {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: arial;
+            background: #222;
+            color: #ded;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            justify-items: center;
+            justify-content: center;
+        }
+
+        .light {
+            background: #fff;
+            color: #000;
+        }
+
+        #container {
+            position: fixed;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+        }
+
+        #output {
+            position: fixed;
+            display: none;
+            font-family: 'Courier New', Courier, monospace;
+            width: 100%;
+            height: 15vh;
+            top:85vh;
+            bottom: 0;
+            margin-left: 1rem;
+            padding-left: 1rem;
+            background: #000;
+            color: #fff;
+            outline: none;
+            border: none;
+        }
+
+        #container.show-console {
+            bottom: 15vh;
+        }
+
+        #output.show-console {
+            display: block;
+        }
+
+        #canvas {
+            display: block;
+            border: 0px none;
+            background-color: black;
+            margin: 0 auto;
+        }
+
+        #canvas:focus {
+            outline: none;
+        }
+        
+        #toggle-console {
+            display: none;
+            position: fixed;
+            top: 1rem;
+            left: 1rem;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="container">
+        <canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
+    </div>
+    <button id="toggle-console">Toggle Console</button>
+    <script type='text/javascript'>
+        var Module = {
+            print: (function () {
+                return (...args) => {
+                    var text = args.join(' ');
+                    window.parent.postMessage({
+                        message: "console-output",
+                        data: text + "\n",
+                    }, "*");
+                };
+            })(),
+            canvas: (() => {
+                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", (e) => { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
+
+                return canvas;
+            })(),
+            setStatus: (text) => {
+            },
+            totalDependencies: 0,
+            monitorRunDependencies: (left) => {
+            }
+        };
+        
+        window.onerror = (event) =>
+        {
+            window.parent.postMessage({
+                message: "player-runtime-error",
+            }, "*");
+        };
+
+        window.parent.postMessage({
+            message: "player-ready",
+        }, "*");
+
+        window.addEventListener("message", (event) =>
+        {
+            if (typeof event.data !== "object")
+                return;
+
+            if (typeof event.data.message !== "string")
+                return;
+
+            if (event.data.message === "set-theme") {
+                document.querySelector("body").className = event.data.theme;
+                return;
+            }
+        });
+    </script>
+    {{{ SCRIPT }}}
+</body>
+
+</html>