make html shell generic, and CSP friendly
authorTaylor Richards <taylor@icculus.org>
Sat, 24 Feb 2018 13:13:08 +0000 (08:13 -0500)
committerTaylor Richards <taylor@icculus.org>
Sat, 17 Mar 2018 15:31:15 +0000 (11:31 -0400)
CMakeLists.txt
dist/demo-play.css.in [new file with mode: 0644]
dist/demo-play.js.in [new file with mode: 0644]
dist/demo_shell.html.in [new file with mode: 0644]
dist/fs2demo_shell.html [deleted file]
dist/fsdemo_shell.html [deleted file]

index 91be9f9..30a6d85 100644 (file)
@@ -235,8 +235,8 @@ if(EMSCRIPTEN)
     "-s FULL_ES2=1"
     "-s WASM=1"
     "-s TOTAL_MEMORY=184549376"
-    "--shell-file ${CMAKE_SOURCE_DIR}/dist/${FS_BINARY}_shell.html"
-    "--preload-file game@/"
+    "--shell-file ${CMAKE_BINARY_DIR}/dist/demo_shell.html"
+    "--pre-js ${FS_BINARY}_preload.js"
   # "-s SAFE_HEAP=1"
   # "-s DEMANGLE_SUPPORT=1"
   # "-s ASSERTIONS=2"
@@ -250,6 +250,24 @@ if(EMSCRIPTEN)
   foreach(Flag ${LINK_FLAGS})
     set_property(TARGET ${FS_BINARY} APPEND_STRING PROPERTY LINK_FLAGS " ${Flag}")
   endforeach()
+
+  if(FS1)
+    set(TEXT_COLOR "#4C442D")
+    set(BG_COLOR "#3E4559")
+    set(OUTLINE_COLOR "#353B4C")
+    set(BG_COLOR2 "#798199")
+    set(GAME_TITLE "FreeSpace Demo")
+  else()
+    set(TEXT_COLOR "#FFF")
+    set(BG_COLOR "#457573")
+    set(OUTLINE_COLOR "#4D8280")
+    set(BG_COLOR2 "#182928")
+    set(GAME_TITLE "FreeSpace 2 Demo")
+  endif()
+
+  configure_file(${CMAKE_SOURCE_DIR}/dist/demo_shell.html.in ${CMAKE_BINARY_DIR}/dist/demo_shell.html @ONLY)
+  configure_file(${CMAKE_SOURCE_DIR}/dist/demo-play.css.in ${CMAKE_BINARY_DIR}/dist/demo-play.css @ONLY)
+  configure_file(${CMAKE_SOURCE_DIR}/dist/demo-play.js.in ${CMAKE_BINARY_DIR}/dist/demo-play.js @ONLY)
 endif(EMSCRIPTEN)
 
 if(FS1)
diff --git a/dist/demo-play.css.in b/dist/demo-play.css.in
new file mode 100644 (file)
index 0000000..6171a05
--- /dev/null
@@ -0,0 +1,58 @@
+html {
+  box-sizing: border-box;
+}
+* {
+  box-sizing: inherit;
+}
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: #222;
+}
+#progress {
+  background: #798199 url(demotitle.jpg);
+  background-repeat: no-repeat;
+  background-size: cover;
+  z-index: 10;
+}
+#progress_container {
+  width: 70%;
+  margin: 0 auto;
+  position: relative;
+  top: 50%;
+}
+#progress_bar_back {
+  width: 100%;
+  background-color: @BG_COLOR@;
+  margin: 0 auto;
+  outline: 3px ridge @OUTLINE_COLOR@;
+}
+#progress_bar {
+  text-indent: 20px;
+  line-height: 30px;
+  height: 30px;
+  width: 0%;
+  background-color: @BG_COLOR2@;
+  color: #fff;
+}
+#progress_text {
+  color: @TEXT_COLOR@;
+  margin-top: 0.5em;
+}
+#progress_text, #progress_bar {
+  font-family: 'Noto Sans', Tahoma, sans-serif;
+}
+canvas, #progress {
+  width: 100vw;
+  height: 75vw;
+  background-color: #000;
+  max-height: 100vh;
+  max-width: 133.333333vh;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
diff --git a/dist/demo-play.js.in b/dist/demo-play.js.in
new file mode 100644 (file)
index 0000000..cf6db7b
--- /dev/null
@@ -0,0 +1,62 @@
+var progress_bar = document.getElementById('progress_bar');
+var progress_text = document.getElementById('progress_text');
+
+var Module = {
+  preRun: [],
+  postRun: [],
+  print: (function() {
+    return function(text) {
+      if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
+      // These replacements are necessary if you render to raw HTML
+      //text = text.replace(/&/g, "&amp;");
+      //text = text.replace(/</g, "&lt;");
+      //text = text.replace(/>/g, "&gt;");
+      //text = text.replace('\n', '<br>', 'g');
+      console.log(text);
+    };
+  })(),
+  printErr: function(text) {
+    if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
+    if (0) { // XXX disabled for safety typeof dump == 'function') {
+      dump(text + '\n'); // fast, straight to the real console
+    } else {
+      console.error(text);
+    }
+  },
+  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) {
+    var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
+    if (m) {
+      text = m[1];
+      var perc = parseInt(m[2]) / parseInt(m[4]) * 100;
+      if (perc > 0) {
+        progress_bar.style.width = perc + '%';
+        progress_bar.innerHTML = perc.toFixed(1) + '%';
+      }
+    } else {
+      progress_bar.innerHTML = '';
+    }
+    progress_text.innerHTML = text;
+  },
+  totalDependencies: 0,
+  monitorRunDependencies: function(left) {
+    this.totalDependencies = Math.max(this.totalDependencies, left);
+    Module.setStatus('Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')');
+  }
+};
+Module.setStatus('Downloading...');
+window.onerror = function() {
+  Module.setStatus('Exception thrown, see JavaScript console');
+  Module.setStatus = function(text) {
+    if (text) Module.printErr('[post-exception status] ' + text);
+  };
+};
diff --git a/dist/demo_shell.html.in b/dist/demo_shell.html.in
new file mode 100644 (file)
index 0000000..c56c895
--- /dev/null
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans:400">
+    <link rel="stylesheet" href="demo-play.css">
+    <title>@GAME_TITLE@</title>
+  </head>
+  <body>
+    <div id="progress">
+      <div id="progress_container">
+        <div id="progress_bar_back"><div id="progress_bar"></div></div>
+        <div id="progress_text"></div>
+      </div>
+    </div>
+    <canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
+    <script src="demo-play.js"></script>
+    {{{ SCRIPT }}}
+  </body>
+</html>
diff --git a/dist/fs2demo_shell.html b/dist/fs2demo_shell.html
deleted file mode 100644 (file)
index 729cdb8..0000000
+++ /dev/null
@@ -1,139 +0,0 @@
-<!doctype html>
-<html lang="en-us">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>FreeSpace 2 Demo</title>
-    <style>
-      html {
-        box-sizing: border-box;
-      }
-      * {
-        box-sizing: inherit;
-      }
-      html, body {
-        height: 100%;
-        margin: 0;
-        padding: 0;
-        background-color: #222;
-      }
-      #progress {
-        background: url(demotitle.jpg);
-        background-repeat: no-repeat;
-        background-size: cover;
-        z-index: 10;
-      }
-      #progress_container {
-        width: 70%;
-        margin: 0 auto;
-        position: relative;
-        top: 50%;
-      }
-      #progress_bar_back {
-        width: 100%;
-        background-color: #457573;
-        margin: 0 auto;
-        padding: 3px;
-      }
-      #progress_bar {
-        padding-left: 20px;
-        line-height: 30px;
-        height: 30px;
-        width: 0%;
-        background-color: #182928;
-      }
-      #progress_text, #progress_bar {
-        font-family: 'Noto Sans', sans-serif;
-        color: #fff;
-
-      }
-      canvas, #progress {
-        width: 100vw;
-        height: 75vw;
-        background-color: #000;
-        max-height: 100vh;
-        max-width: 133.333333vh;
-        margin: auto;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="progress">
-      <div id="progress_container">
-        <div id="progress_bar_back"><div id="progress_bar"></div></div>
-        <div id="progress_text"></div>
-      </div>
-    </div>
-    <canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
-    <script type='text/javascript'>
-      var progress = document.getElementById('progress');
-      var progress_bar = document.getElementById('progress_bar');
-      var progress_text = document.getElementById('progress_text');
-
-      var Module = {
-        preRun: [],
-        postRun: [],
-        print: (function() {
-          return function(text) {
-            if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
-            // These replacements are necessary if you render to raw HTML
-            //text = text.replace(/&/g, "&amp;");
-            //text = text.replace(/</g, "&lt;");
-            //text = text.replace(/>/g, "&gt;");
-            //text = text.replace('\n', '<br>', 'g');
-            console.log(text);
-          };
-        })(),
-        printErr: function(text) {
-          if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
-          if (0) { // XXX disabled for safety typeof dump == 'function') {
-            dump(text + '\n'); // fast, straight to the real console
-          } else {
-            console.error(text);
-          }
-        },
-        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.text) return;
-          var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
-          if (m) {
-            text = m[1];
-            var perc = parseInt(m[2]) / parseInt(m[4]) * 100;
-            progress_bar.style.width = perc + '%';
-            progress_bar.innerHTML = perc.toFixed(1) + '%';
-          }
-          progress_text.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() {
-        Module.setStatus('Exception thrown, see JavaScript console');
-        Module.setStatus = function(text) {
-          if (text) Module.printErr('[post-exception status] ' + text);
-        };
-      };
-    </script>
-    {{{ SCRIPT }}}
-  </body>
-</html>
diff --git a/dist/fsdemo_shell.html b/dist/fsdemo_shell.html
deleted file mode 100644 (file)
index efa9968..0000000
+++ /dev/null
@@ -1,139 +0,0 @@
-<!doctype html>
-<html lang="en-us">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>FreeSpace Demo</title>
-    <style>
-      html {
-        box-sizing: border-box;
-      }
-      * {
-        box-sizing: inherit;
-      }
-      html, body {
-        height: 100%;
-        margin: 0;
-        padding: 0;
-        background-color: #222;
-      }
-      #progress {
-        background: url(demotitle.jpg);
-        background-repeat: no-repeat;
-        background-size: cover;
-        z-index: 10;
-      }
-      #progress_container {
-        width: 70%;
-        margin: 0 auto;
-        position: relative;
-        top: 50%;
-      }
-      #progress_bar_back {
-        width: 100%;
-        background-color: #353B4C;
-        margin: 0 auto;
-        padding: 3px;
-      }
-      #progress_bar {
-        padding-left: 20px;
-        line-height: 30px;
-        height: 30px;
-        width: 0%;
-        background-color: #798199;
-      }
-      #progress_text, #progress_bar {
-        font-family: 'Noto Sans', sans-serif;
-        color: #4C442D;
-
-      }
-      canvas, #progress {
-        width: 100vw;
-        height: 75vw;
-        background-color: #000;
-        max-height: 100vh;
-        max-width: 133.333333vh;
-        margin: auto;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="progress">
-      <div id="progress_container">
-        <div id="progress_bar_back"><div id="progress_bar"></div></div>
-        <div id="progress_text"></div>
-      </div>
-    </div>
-    <canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
-    <script type='text/javascript'>
-      var progress = document.getElementById('progress');
-      var progress_bar = document.getElementById('progress_bar');
-      var progress_text = document.getElementById('progress_text');
-
-      var Module = {
-        preRun: [],
-        postRun: [],
-        print: (function() {
-          return function(text) {
-            if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
-            // These replacements are necessary if you render to raw HTML
-            //text = text.replace(/&/g, "&amp;");
-            //text = text.replace(/</g, "&lt;");
-            //text = text.replace(/>/g, "&gt;");
-            //text = text.replace('\n', '<br>', 'g');
-            console.log(text);
-          };
-        })(),
-        printErr: function(text) {
-          if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
-          if (0) { // XXX disabled for safety typeof dump == 'function') {
-            dump(text + '\n'); // fast, straight to the real console
-          } else {
-            console.error(text);
-          }
-        },
-        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.text) return;
-          var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
-          if (m) {
-            text = m[1];
-            var perc = parseInt(m[2]) / parseInt(m[4]) * 100;
-            progress_bar.style.width = perc + '%';
-            progress_bar.innerHTML = perc.toFixed(1) + '%';
-          }
-          progress_text.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() {
-        Module.setStatus('Exception thrown, see JavaScript console');
-        Module.setStatus = function(text) {
-          if (text) Module.printErr('[post-exception status] ' + text);
-        };
-      };
-    </script>
-    {{{ SCRIPT }}}
-  </body>
-</html>